:root{
  --verde:#14562F; --verde-2:#1E7A44; --verde-pale:#EAF1EA;
  /* El oro era #96762F: 4,02:1 sobre la crema, por debajo del 4,5:1 que exige
     WCAG AA, y es el color de casi toda la tipografía chica del rediseño —
     rótulos de capítulo de 11 px con letter-spacing amplio, el peor escenario.
     #7A5F22 da 5,68:1 sobre crema y 6,02:1 sobre blanco, y sigue leyéndose oro.
     El oro claro del frontispicio (--oro-claro) es otro: va sobre verde oscuro
     y no se toca. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --oro:#7A5F22; --crema:#FBF8F2; --crema-2:#F3EEE2;
  /* Oro para fondo oscuro. Sobre el verde institucional el --oro de texto queda
     casi negro; este es el que se usa en la cabecera y en el frontispicio. */
  --oro-claro:#E3C877;
  --tinta:#1B1B19; --gris:#6E6E64; --linea:#DED8C9;
  --rojo:#8C2F2F; --ambar:#8A6A12;
  --sombra:0 1px 2px rgba(20,86,47,.06), 0 8px 24px rgba(20,86,47,.07);
  --radio:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta); background:var(--crema); line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; line-height:1.2; margin:0}
a{color:var(--verde-2)}
button{font:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}

#aviso-arranque{background:#8A2B24;color:#fff;font-size:13px;padding:8px 0;display:none}
#aviso-arranque.on{display:block}
#aviso-arranque .wrap{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
#aviso-arranque b{font-weight:700;flex:0 0 auto}

/* ── cabecera ── */
header{background:var(--verde);color:#fff;position:sticky;top:0;z-index:40;
  box-shadow:0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.10)}
/* La cabecera respira más ancho que el cuerpo del texto. Con los 980 px de la
   columna de lectura, el nav de ocho entradas no entraba y se partía en dos
   renglones con el separador colgando: en un sitio institucional, el menú roto
   es lo primero que se ve, y se ve en las quince páginas. */
header .wrap{display:flex;align-items:center;gap:22px;max-width:1180px;
  padding-top:14px;padding-bottom:14px}
header img{width:42px;height:41px;flex:none}
header .marca{font-family:Georgia,serif;font-size:16px;line-height:1.2;
  white-space:nowrap;flex:none}
header .marca small{display:block;font-family:inherit;font-size:9.5px;letter-spacing:1.8px;
  color:#9DC3A6;text-transform:uppercase;margin-top:3px}
nav{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:nowrap}
/* Sin píldoras: la cápsula blanca redondeada del ítem activo era lo único de
   toda la página con `border-radius:999px` y leía como app de teléfono. La marca
   del activo es un filete bajo la palabra, que es como se marca en papel. */
nav a{color:#CFE3D3;text-decoration:none;font-size:13.5px;padding:8px 11px 7px;
  white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .12s linear, border-color .12s linear}
nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
nav a.on{color:#fff;font-weight:600;border-bottom-color:var(--oro-claro,#E3C877)}

/* ── vistas ── */
.vista{display:none;padding:30px 0 60px}
.vista.on{display:block}

.hero{padding:44px 0 30px}
.hero h1{font-size:clamp(28px,5vw,42px);color:var(--verde)}
.hero p.lead{font-size:18px;color:var(--gris);max-width:620px;margin:14px 0 0}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--verde);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:15px;font-weight:600;text-decoration:none;transition:.15s}
.btn:hover{background:var(--verde-2)}
.btn.sec{background:#fff;color:var(--verde);border:1.5px solid var(--linea)}
.btn.sec:hover{border-color:var(--verde)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:34px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;
  box-shadow:var(--sombra)}
.tarjeta .n{font-family:Georgia,serif;font-size:32px;color:var(--verde);line-height:1}
.tarjeta .r{font-size:12.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.6px;margin-top:6px}

.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:24px;box-shadow:var(--sombra);margin-bottom:18px}
.panel h2{font-size:21px;color:var(--verde);margin-bottom:6px}
.panel .sub{color:var(--gris);font-size:14.5px;margin:0 0 18px}

/* ── formulario ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
label{display:block;font-size:13px;font-weight:600;color:var(--gris);margin-bottom:5px}
label .req{color:var(--rojo)}
input,select,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--linea);border-radius:10px;
  font:inherit;font-size:15px;background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--verde-2);
  box-shadow:0 0 0 3px rgba(30,122,68,.12)}
textarea{min-height:88px;resize:vertical}
.campo{margin-bottom:14px}
.pista{font-size:12.5px;color:var(--gris);margin-top:5px}

.subida{border:2px dashed var(--linea);border-radius:12px;padding:16px;background:var(--crema)}
.subida h4{margin:0 0 4px;font-size:14px}
.subida input[type=file]{border:0;padding:8px 0;background:transparent}
.doc{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea);
  justify-content:space-between}
.doc:last-child{border-bottom:0}
/* `flex:1` con base 0 encogía la etiqueta hasta partir «Cédula — anverso» en
   cuatro renglones. Base explícita y `min-width:0` para que ceda solo cuando
   de verdad no hay lugar. */
/* La familia se declara: dentro de la sección institucional todo hereda la
   serif, y estos son rótulos de formulario — van con la misma sans que
   «Nombres» y «Apellidos», dos campos más arriba. */
.doc .et{flex:1 1 auto; min-width:110px; font-size:14px; display:block; cursor:pointer;
  font-family:var(--sans)}
.doc .et b{font-weight:600}
.doc .et small{display:block;color:var(--gris);font-size:12px;margin-top:2px}

/* El control nativo de archivo dice «Choose File / No file chosen» en inglés y
   con el cromo del navegador. Acá se le pone un botón propio: el input real
   sigue siendo el que recibe el clic —por la etiqueta asociada— así que no se
   pierde ni el teclado ni el lector de pantalla. */
/* Un input[type=file] tiene un ancho intrínseco enorme: con `flex-basis:auto`
   se llevaba los 858 px de la fila y dejaba al rótulo en sus 110 px de mínimo,
   partiendo «Cédula — anverso» en cuatro renglones. Acá se le fija el ancho. */
.doc input[type=file]{
  flex:0 1 auto; width:auto; min-width:0; max-width:56%;
  font-family:var(--sans);
  font-size:12.5px; color:var(--gris);
}
.doc input[type=file]::file-selector-button{
  font-family:inherit; font-size:13px; font-weight:600; color:var(--verde);
  background:#fff; border:1px solid var(--verde); border-radius:8px;
  padding:8px 14px; margin-right:10px; cursor:pointer;
  transition:background .12s linear;
}
.doc input[type=file]::file-selector-button:hover{ background:var(--verde-pale) }
.doc input[type=file]:focus-visible::file-selector-button{
  outline:2px solid var(--verde-2); outline-offset:2px }

.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--gris)}
.check input{width:18px;height:18px;flex:none;margin-top:2px}

/* ── mensajes ── */
.aviso{border-radius:10px;padding:12px 14px;font-size:14.5px;margin:14px 0;border:1px solid}
.aviso.ok{background:var(--verde-pale);border-color:#BFD8C4;color:#12522C}
.aviso.mal{background:#FBEEEE;border-color:#E2C3C3;color:var(--rojo)}
.aviso.info{background:#FFF8E6;border-color:#EBDCA8;color:var(--ambar)}

.estado{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:600}
.estado.activo,.estado.aprobada{background:var(--verde-pale);color:#12522C}
.estado.nueva,.estado.en_revision{background:#E9F0F7;color:#2A5580}
.estado.observada{background:#FFF3D6;color:var(--ambar)}
.estado.rechazada,.estado.baja,.estado.suspendido{background:#FBEEEE;color:var(--rojo)}

/* ── carné ── */
.carne{background:linear-gradient(150deg,var(--verde) 0%,#0E4324 100%);color:#fff;
  border-radius:18px;padding:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  box-shadow:0 10px 30px rgba(20,86,47,.25)}
.carne .datos{flex:1;min-width:200px}
.carne .nom{font-family:Georgia,serif;font-size:22px;line-height:1.15}
.carne .fila{font-size:13.5px;color:#B7D3BE;margin-top:9px}
.carne .fila b{color:#fff;font-weight:600}
.carne .cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  letter-spacing:1px;background:rgba(255,255,255,.12);padding:6px 12px;border-radius:8px;
  display:inline-block;margin-top:12px}
.carne img{width:112px;height:112px;border-radius:10px;background:#fff;padding:6px}

.lista{list-style:none;padding:0;margin:0}
.lista li{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--linea)}
.lista li:last-child{border-bottom:0}
.lista .t{flex:1}
.lista .t b{display:block;font-size:15px}
.lista .t small{color:var(--gris);font-size:12.5px}

footer{background:var(--verde);color:#9DC3A6;padding:30px 0;font-size:13.5px;margin-top:40px}
footer .lema{font-family:Georgia,serif;font-style:italic;color:#fff;font-size:15px}
footer a{color:#CFE3D3}

.cargando{color:var(--gris);font-size:14px;padding:16px 0}
@media(max-width:620px){
  header .marca{font-size:14px}
  nav a{padding:6px 10px;font-size:13px}
  .panel{padding:18px}
}

/* ── Bloque del tutor, en el formulario de afiliación ──────────────────────
   Aparece solo si la fecha de nacimiento dice que es menor de 18. Va en ámbar
   y no en verde: no es una sección más del formulario, es un requisito que
   acaba de aparecer y que hasta hace un segundo no estaba en pantalla. */
.tutor{
  border:1px solid #EBDCA8; background:#FFF8E6; border-radius:12px;
  padding:16px 18px; margin:18px 0;
}
.tutor[hidden]{ display:none }
.tutor h4{
  margin:0 0 6px; font-size:15px; font-family:Georgia,"Times New Roman",serif;
  color:var(--ambar);
}
.tutor .pista{ color:#6B5510 }
.tutor .pista a{ color:var(--ambar) }
.tutor .grid{ margin-top:14px }
.tutor .check{ color:#6B5510 }