/* Portal de validación · estilos Santex (tema claro)
   Tokens y tipografías de la marca: Chakra Petch Light para títulos, Inter para texto. Las fuentes viajan con el sitio. */
@font-face { font-family: 'Chakra Petch'; font-weight: 300; font-display: swap; src: url('../fonts/ChakraPetch-Light.ttf') format('truetype'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 400; font-display: swap; src: url('../fonts/ChakraPetch-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap; src: url('../fonts/ChakraPetch-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 300; font-display: swap; src: url('../fonts/Inter-300.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/Inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/Inter-500.ttf') format('truetype'); }

:root {
  --teal-900: rgb(10,66,66); --teal-700: rgb(0,96,96); --teal-600: rgb(39,167,167); --teal-200: rgb(195,225,224); --teal-fog: rgb(236,246,245);
  --terracotta: rgb(221,147,84);
  --fondo: #FAFBFB; --surface: #FFFFFF; --t1: rgb(15,40,38); --t2: rgb(44,70,68); --t3: rgb(90,112,110); --borde: rgb(195,225,224);
  --done-fg: #1E7A4C; --done-bg: #DCF0E6; --prog-fg: #A9701B; --prog-bg: #FDF1DD; --pend-fg: #A13A3A; --pend-bg: #F3E4E4;
  /* nombres que usa el componente de nombres (cliente.js) */
  --papel: var(--surface); --texto: var(--t1); --linea: var(--borde); --marca: var(--teal-700); --marca-fondo: var(--teal-fog); --suave: var(--t3);
  --display: 'Chakra Petch', system-ui, sans-serif; --ui: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--fondo); color: var(--t1); font: 300 16px/1.55 var(--ui) }
button, input, select, textarea { font: 400 14px var(--ui); color: var(--t1) }
button { cursor: pointer }
a { color: var(--teal-700) }
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0 }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px }
.kicker { font: 500 12px/1 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: var(--teal-700) }
:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px }

/* Barra superior */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(250,251,251,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde) }
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 68px }
.nav .logo { height: 22px; width: auto; display: block }
.sep { width: 1px; height: 30px; background: var(--borde) }
.ctx { display: flex; flex-direction: column; gap: 4px }
.ctx .kicker { font-size: 11px; color: var(--t3) }
.ctx .proy { font: 300 20px/1 var(--display); color: var(--t1) }
.der { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--t2) }

/* Encabezado de la pantalla principal */
.hero { background: linear-gradient(140deg, rgb(10,66,66) 0%, rgb(0,96,96) 55%, #0a7a78 100%); color: rgb(244,249,249); position: relative; overflow: hidden }
.hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px); pointer-events: none }
.hero .wrap { padding-top: 30px; padding-bottom: 30px; position: relative; z-index: 1; display: flex; align-items: center; gap: 48px }
.hero .kicker { color: var(--teal-200) }
.hero h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; margin: 8px 0 8px; max-width: 640px }
.hero p { margin: 0; color: rgb(204,224,223); max-width: 560px; font-size: 15px }
.kpis { margin-left: auto; display: flex; gap: 36px; flex-shrink: 0 }
.kpi b { display: block; font: 300 38px/1 var(--display); color: #fff; margin-bottom: 4px }
.kpi.acento b { color: var(--terracotta) }
.kpi span { font-size: 13px; color: rgb(204,224,223) }

.sec { padding: 56px 0 }
.sec.alt { background: var(--teal-fog) }
.cab { margin-bottom: 28px }
.cab h2 { font-size: 34px; margin: 10px 0 0 }
.cab p { margin: 6px 0 0; color: var(--t3); font-size: 15px }

/* Cards de módulo */
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px }
.card { background: var(--surface); border: 1px solid var(--borde); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, transform .2s }
.card:hover { border-color: var(--teal-600); transform: translateY(-2px) }
.card h3 { font-size: 26px }
.card p { margin: 0; color: var(--t2); font-size: 15px }
.estados { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px }
.tag, .est { font: 400 12px var(--ui); padding: 3px 10px; border-radius: 999px; background: var(--teal-fog); color: var(--teal-700); border: 0; white-space: nowrap }
.tag.sin, .est.pend { color: var(--pend-fg); background: var(--pend-bg) }
.tag.reab, .est.prog { color: var(--prog-fg); background: var(--prog-bg) }
.tag.resp, .est.done { color: var(--done-fg); background: var(--done-bg) }
.tag.area { color: var(--teal-700); background: var(--teal-fog) }
.accesos { margin-top: auto; display: grid; gap: 8px; border-top: 1px solid var(--borde); padding-top: 14px }
.accesos a { display: flex; justify-content: space-between; color: var(--teal-700); text-decoration: none; font-size: 14px; font-weight: 400 }
.accesos a:hover { text-decoration: underline }
.accesos a span { color: var(--t3) }
.accesos a.off { color: var(--t3); pointer-events: none }

/* Priorización */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.colp { background: var(--surface); border: 1px solid var(--borde); border-radius: 16px; padding: 18px; min-height: 120px }
.colp h3 { font-size: 20px; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px }
.cnt { font: 400 13px var(--ui); color: var(--t3) }
.zona { min-height: 56px; display: flex; flex-direction: column; gap: 8px }
.sinp { margin-top: 20px }
.sinp .zona { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start }
.tkw { display: flex; flex-direction: column; gap: 4px }
.tk { display: flex; gap: 12px; align-items: flex-start; background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 400; cursor: grab; position: relative; transition: border-color .2s, box-shadow .2s }
.tk:hover { border-color: var(--teal-600); box-shadow: 0 4px 14px rgba(0,96,96,.08) }
.tk.arr { opacity: .4 }
.tk-t { flex: 1 }
.num { font: 300 22px/1 var(--display); color: var(--teal-600); min-width: 18px }
.kk { font: 500 11px var(--ui); letter-spacing: 1px; color: var(--t3) }
.nb { align-self: flex-start; font: 400 11px var(--ui); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde); background: var(--teal-fog); color: var(--teal-700); white-space: nowrap }
.addn { position: absolute; right: 8px; bottom: 8px; display: none; font: 400 11px var(--ui); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde); background: var(--surface); color: var(--teal-700) }
.tk:hover .addn, .addn:focus-visible { display: block }
.nl { font-size: 13px; border-left: 2px solid var(--teal-600); padding: 2px 0 2px 10px; margin: 2px 6px; color: var(--t2); white-space: pre-wrap; overflow-wrap: anywhere }
.nl b { color: var(--t1); font-weight: 500 }
.hueco { border: 2px dashed var(--teal-600); border-radius: 12px; min-height: 36px; background: var(--teal-fog); width: 100% }
.vacio-z { font-size: 13px; color: var(--t3); padding: 8px }
.pop { position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; box-shadow: 0 10px 28px rgba(15,40,38,.18); width: 300px; display: grid; gap: 10px }
.pop label { font-size: 12px; color: var(--t3); display: grid; gap: 4px }
.pop input, .pop textarea { width: 100% }
.pop.menu { width: auto; padding: 6px }
.pop.menu div { padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px }
.pop.menu div:hover { background: var(--teal-fog) }

/* Páginas internas */
.pagina { padding: 36px 0 72px }
.volver { display: block; width: fit-content; margin-bottom: 18px; font-size: 14px; text-decoration: none }
.volver:hover { text-decoration: underline }
.pagina h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1 }
.sub { color: var(--t3); margin: 8px 0 24px; font-size: 15px }
.compo { background: var(--surface); border: 1px solid var(--borde); border-radius: 16px; padding: 18px; margin-bottom: 24px; display: grid; gap: 12px }
.fila { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.compo label, .filtros label, .form label { font-size: 13px; color: var(--t3); display: flex; gap: 8px; align-items: center }
input[type=text], input[type=date], select, textarea { background: var(--surface); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px }
textarea { width: 100%; resize: vertical }
.btn { background: var(--surface); border: 1px solid var(--borde); border-radius: 999px; padding: 7px 16px; color: var(--teal-700); font-weight: 400; transition: border-color .2s, background .2s }
.btn:hover { border-color: var(--teal-600) }
.btn.prim { background: var(--teal-700); border-color: var(--teal-700); color: #fff }
.btn.prim:hover { background: var(--teal-900) }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px }
.filtros .btn[aria-pressed=true] { background: var(--teal-fog); border-color: var(--teal-600); color: var(--teal-900) }
.meta { font-size: 12px; color: var(--t3); margin: 4px 0 }
.q { background: var(--surface); border: 1px solid var(--borde); border-radius: 14px; margin-bottom: 10px; transition: border-color .2s }
.q:hover { border-color: var(--teal-600) }
.q-cab { display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; padding: 14px 18px }
.cod { font: 500 12px var(--ui); letter-spacing: 1px; color: var(--t3); min-width: 30px }
.tit { flex: 1; font-weight: 400 }
.fec { font-size: 12px; color: var(--t3); white-space: nowrap }
.q-cuerpo { padding: 0 18px 18px 60px }
.txt, .msg .t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px }
.msg { border-left: 3px solid var(--borde); padding: 4px 0 4px 14px; margin: 14px 0 }
.msg.respuesta { border-color: var(--done-fg) }
.msg.repregunta { border-color: var(--prog-fg) }
.acciones { display: flex; gap: 10px; margin-top: 14px }
.form { margin-top: 12px; display: grid; gap: 10px; width: 100% }
.err { color: var(--pend-fg); font-size: 13px }
.vacio { color: var(--t3); padding: 28px 0; text-align: center }
.cargando { color: var(--t3); padding: 48px 0; text-align: center }

/* Visor del recorrido */
#visor { position: fixed; inset: 0; background: var(--fondo); z-index: 30; display: flex; flex-direction: column }
#visor[hidden] { display: none }
.visor-barra { display: flex; align-items: center; gap: 14px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--borde) }
.visor-barra .logo { height: 18px }
#visor iframe { flex: 1; border: 0; width: 100%; background: #fff }
#visor .cargando { position: absolute; inset: 56px 0 0; background: var(--fondo) }

footer { background: rgb(15,40,38); color: rgb(178,182,182); font-size: 13px }
footer .wrap { display: flex; align-items: center; gap: 16px; height: 72px }
footer .logo { height: 18px }

@media (max-width: 900px) {
  .wrap { padding: 0 20px }
  .hero .wrap { flex-direction: column; align-items: flex-start; gap: 24px }
  .kpis { margin-left: 0 }
  .cols { grid-template-columns: 1fr }
  .sinp .zona { grid-template-columns: 1fr }
  .q-cuerpo { padding-left: 18px }
}

/* Ingreso */
.ingreso { max-width: 420px; margin: 72px auto; padding: 32px; background: var(--surface); border: 1px solid var(--borde); border-radius: 16px; display: flex; flex-direction: column; gap: 12px }
.ingreso h1 { font-size: 30px }
.ingreso .sub { margin: 0 0 8px; color: var(--t3); font-size: 15px }
.ingreso form { display: flex; flex-direction: column; gap: 12px }
.ingreso input { width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--surface) }
.ingreso input.codigo { font: 400 28px/1.2 var(--ui); letter-spacing: 10px; text-align: center }
.aviso { font-size: 13px; color: var(--t3); min-height: 18px }
.ingreso .fila { display: flex; gap: 8px; flex-wrap: wrap }

/* Administración */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--borde); margin: 20px 0 16px }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; font-size: 15px; color: var(--t3) }
.tab[aria-selected="true"] { color: var(--teal-700); border-bottom-color: var(--teal-600); font-weight: 500 }
.barra { display: flex; align-items: center; gap: 16px; margin: 0 0 12px }
.barra .btn { margin-left: auto }
.suave { color: var(--t3); font-size: 13px }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border: 1px solid var(--borde); border-radius: 12px }
.tabla th { text-align: left; padding: 10px 12px; font: 500 12px var(--ui); color: var(--t3); border-bottom: 1px solid var(--borde) }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top }
.adm-form { background: var(--teal-fog); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 12px }
.adm-form h3 { font-size: 20px }
.adm-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--t2) }
.adm-form input:not([type=checkbox]), .adm-form select { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--surface) }
.adm-form fieldset { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px }
.adm-form .fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end }
label.chk { flex-direction: row; align-items: center; gap: 8px; font-size: 14px }
.cli { background: var(--surface); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; margin: 0 0 12px }
.cli-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start }
.cli-cab h3 { font-size: 22px }
.cli-cab p { margin: 2px 0 8px }
.cli-p { display: flex; justify-content: space-between; border-top: 1px solid var(--borde); padding: 8px 0; font-size: 14px }
.link { background: none; border: 0; padding: 4px 0; color: var(--teal-700); font-size: 13px; text-align: left }
.como { color: var(--t3); font-size: 14px; margin-left: 6px }
#sel-proyecto { font: 300 20px var(--display); border: 0; background: transparent; color: var(--t1); padding: 0 }