/* Colores oficiales del Colegio (tomados del logo): granate #B51B33 y gris pizarra #4E5B64 */
:root{
  --granate:#B51B33; --granate-osc:#8E1428; --granate-suave:#FBEDEF;
  --pizarra:#4E5B64; --pizarra-osc:#36424A; --pizarra-suave:#EEF1F3;
  --tinta:#263038; --apagado:#5E6A72; --linea:#DCE1E5; --linea-fuerte:#BCC5CC;
  --fondo:#F5F6F7; --superficie:#FFFFFF;
  --ok:#23704A; --ok-suave:#E5F3EB; --aviso:#8A5A00; --aviso-suave:#FDF3DC;
  --radio:8px;
  --f-titulo:"Montserrat","Segoe UI",system-ui,sans-serif;
  --f-texto:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.55 var(--f-texto)}
a{color:var(--granate-osc)}
h1,h2,h3{font-family:var(--f-titulo);color:var(--tinta);line-height:1.2;margin:0}
h1{font-size:1.55rem;font-weight:700}
h2{font-size:1.2rem;font-weight:700}
h3{font-size:1rem;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid var(--granate);outline-offset:2px}

/* Cabecera con el logo */
.cabecera{background:var(--superficie);border-bottom:3px solid var(--granate)}
.cabecera-in{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.logo{display:block;height:58px;width:auto}
.cabecera .usuario{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--apagado);min-width:0}
.cabecera .usuario span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.logo{height:46px}.cabecera .usuario span{display:none}}

.contenedor{max-width:1120px;margin:0 auto;padding:24px 16px 64px}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:24px}
@media (max-width:560px){.tarjeta{padding:18px}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem var(--f-texto);padding:10px 18px;border-radius:6px;border:1px solid var(--granate);background:var(--granate);color:#fff;cursor:pointer;text-decoration:none;min-height:42px}
.btn:hover{background:var(--granate-osc);border-color:var(--granate-osc)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sec{background:var(--superficie);color:var(--pizarra-osc);border-color:var(--linea-fuerte)}
.btn.sec:hover{background:var(--pizarra-suave)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.peq{padding:6px 12px;min-height:34px;font-size:.88rem}
.enlace{background:none;border:0;padding:0;font:inherit;color:var(--granate-osc);text-decoration:underline;cursor:pointer}

/* Formularios */
.campo{display:grid;gap:6px;margin-bottom:16px}
.campo>label,.campo>.rotulo{font-weight:600;font-size:.95rem;color:var(--tinta)}
.campo .ayuda{font-size:.86rem;color:var(--apagado)}
.campo .error{font-size:.86rem;color:var(--granate-osc);font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{font:inherit;font-size:1rem;padding:10px 12px;border:1px solid var(--linea-fuerte);border-radius:6px;background:var(--superficie);color:var(--tinta);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--pizarra);outline:2px solid color-mix(in srgb,var(--granate) 30%,transparent);outline-offset:0}
.campo.mal input,.campo.mal select{border-color:var(--granate)}
.rejilla{display:grid;grid-template-columns:repeat(6,1fr);gap:0 16px}
.rejilla>.campo{grid-column:span 6}
.rejilla>.campo.medio{grid-column:span 3}
.rejilla>.campo.corto{grid-column:span 2}
@media (max-width:640px){.rejilla>.campo.medio,.rejilla>.campo.corto{grid-column:span 6}}
.opciones{display:grid;gap:8px}
.opcion{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--linea-fuerte);border-radius:6px;cursor:pointer;background:var(--superficie)}
.opcion:has(input:checked){border-color:var(--granate);background:var(--granate-suave)}
.opcion input{margin:4px 0 0;accent-color:var(--granate);width:18px;height:18px;flex:none}
.opcion small{display:block;color:var(--apagado);font-size:.86rem}
.casilla{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.casilla input{margin:4px 0 0;accent-color:var(--granate);width:18px;height:18px;flex:none}
.especialidades{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}

/* Avisos */
.aviso{border-radius:6px;padding:12px 14px;font-size:.95rem;border:1px solid}
.aviso.info{background:var(--pizarra-suave);border-color:#D3DADF}
.aviso.mal{background:var(--granate-suave);border-color:#EFC6CD;color:var(--granate-osc)}
.aviso.ok{background:var(--ok-suave);border-color:#BFE0CC;color:var(--ok)}
.aviso.atencion{background:var(--aviso-suave);border-color:#EED9A6;color:var(--aviso)}

/* Etiquetas de estado */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--pizarra-suave);color:var(--pizarra-osc)}
.chip.ok,.chip.correcto,.chip.aprobado{background:var(--ok-suave);color:var(--ok)}
.chip.mal,.chip.rechazado,.chip.denegado,.chip.desactualizado,.chip.pendiente_corregir{background:var(--granate-suave);color:var(--granate-osc)}
.chip.pendiente,.chip.enviado,.chip.en_revision{background:var(--aviso-suave);color:var(--aviso)}
.chip.falta,.chip.borrador{background:var(--pizarra-suave);color:var(--apagado)}

.pie{max-width:1120px;margin:0 auto;padding:0 16px 32px;font-size:.85rem;color:var(--apagado)}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guardado{font-size:.85rem;color:var(--apagado);min-height:1.2em}