/* =====================================================================
   INTRANET - Hoja de estilos
   Interfaz de trabajo: densa, legible y rapida de usar.
   ===================================================================== */

:root{
  --azul:#0B3C7D;
  --azul-medio:#1565C0;
  --turquesa:#00B4D8;
  --celeste:#48CAE4;

  --azul-oscuro:#062244;
  --tinta:#16283F;
  --gris:#5B6E85;
  --gris-claro:#8A9AAC;
  --linea:#E1E9F2;
  --linea-fuerte:#CBD8E6;
  --fondo:#F3F7FB;
  --panel:#FFFFFF;

  --exito:#177A4B;
  --exito-suave:#E7F5EE;
  --alerta:#C0392B;
  --alerta-suave:#FCEDEA;
  --aviso:#B0721A;
  --aviso-suave:#FDF3E3;
  --info:#1565C0;
  --info-suave:#EAF2FC;

  --radio:14px;
  --radio-sm:9px;
  --sombra:0 14px 34px -26px rgba(6,34,68,.55);
  --sombra-alta:0 22px 48px -26px rgba(6,34,68,.6);
  --barra:264px;
  --transicion:.2s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15.5px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--azul-medio);text-decoration:none;}
a:hover{color:var(--turquesa);}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.3;color:var(--azul);font-weight:600;}
h1{font-size:25px;}
h2{font-size:20px;}
h3{font-size:17px;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px;border-radius:4px;}

/* =====================================================================
   PANTALLA DE ACCESO
   ===================================================================== */

.acceso{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}

.acceso__lado{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:56px 62px;
  color:#fff;
  overflow:hidden;
  background:linear-gradient(145deg,var(--azul-oscuro) 0%,var(--azul) 45%,var(--azul-medio) 78%,var(--turquesa) 140%);
}
.acceso__lado::before{
  content:"";position:absolute;
  top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,216,.34),transparent 68%);
}
.acceso__lado::after{
  content:"";position:absolute;
  bottom:-180px;left:-100px;width:440px;height:440px;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
}
.acceso__lado > *{position:relative;z-index:2;}
.acceso__lado img{width:96px;margin-bottom:28px;}
.acceso__lado h1{color:#fff;font-size:33px;font-family:Georgia,serif;line-height:1.25;margin-bottom:14px;}
.acceso__lado p{color:rgba(255,255,255,.84);font-size:16.5px;max-width:430px;}

.acceso__roles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:11px;
  margin-top:38px;
  max-width:460px;
}
.acceso__rol{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-radius:var(--radio-sm);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  font-size:13.5px;
  backdrop-filter:blur(4px);
}
.acceso__rol svg{width:17px;height:17px;fill:var(--celeste);flex:none;}

.acceso__formulario{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 34px;
  background:var(--panel);
}
.acceso__caja{width:100%;max-width:410px;}
.acceso__caja h2{font-size:26px;margin-bottom:6px;}
.acceso__caja > p{color:var(--gris);margin-bottom:30px;}
.acceso__volver{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:28px;font-size:14px;color:var(--gris);
}
.acceso__volver svg{width:16px;height:16px;fill:currentColor;flex:none;}
.acceso__volver:hover{color:var(--azul-medio);}

/* Los iconos sueltos dentro de la interfaz no deben crecer sin control */
.tarjeta__cabecera > svg{width:22px;height:22px;fill:var(--azul-medio);flex:none;}
.vacio svg,.aviso svg,.pastilla svg{flex:none;}
.acceso__pie{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--linea);
  font-size:12.8px;color:var(--gris-claro);line-height:1.6;
}

/* =====================================================================
   ESTRUCTURA DE LA INTRANET
   ===================================================================== */

.app{display:flex;min-height:100vh;}

/* --- Barra lateral --- */

.lateral{
  width:var(--barra);
  flex:none;
  display:flex;
  flex-direction:column;
  background:var(--azul-oscuro);
  color:rgba(255,255,255,.72);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:120;
}
.lateral::-webkit-scrollbar{width:6px;}
.lateral::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}

.lateral__marca{
  display:flex;align-items:center;gap:12px;
  padding:20px 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lateral__marca img{width:40px;height:44px;object-fit:contain;flex:none;}
.lateral__marca strong{display:block;color:#fff;font-size:14.5px;line-height:1.25;}
.lateral__marca span{display:block;font-size:11px;color:rgba(255,255,255,.5);
  letter-spacing:.1em;text-transform:uppercase;margin-top:2px;}

.lateral__menu{flex:1;padding:16px 12px;}
.lateral__grupo{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.35);padding:16px 12px 8px;
}
.lateral__menu a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;margin-bottom:2px;
  border-radius:var(--radio-sm);
  color:rgba(255,255,255,.75);
  font-size:14.5px;
  transition:var(--transicion);
}
.lateral__menu a:hover{background:rgba(255,255,255,.08);color:#fff;}
.lateral__menu a.activo{
  background:linear-gradient(100deg,var(--azul-medio),rgba(0,180,216,.5));
  color:#fff;font-weight:600;
  box-shadow:0 6px 16px -10px rgba(0,180,216,.9);
}
.lateral__menu svg{width:18px;height:18px;fill:currentColor;flex:none;opacity:.9;}
.lateral__menu .contador{
  margin-left:auto;
  min-width:20px;height:20px;padding:0 6px;
  display:grid;place-items:center;
  border-radius:20px;
  background:var(--turquesa);color:var(--azul-oscuro);
  font-size:11px;font-weight:700;
}

.lateral__pie{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;color:rgba(255,255,255,.4);
}

/* --- Zona de trabajo --- */

.principal{flex:1;min-width:0;display:flex;flex-direction:column;}

.superior{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:16px;
  padding:0 26px;
  min-height:66px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.superior__titulo{flex:1;min-width:0;}
.superior__titulo h1{margin:0;font-size:19px;}
.superior__titulo span{font-size:13px;color:var(--gris);}

.superior__anio{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:30px;
  background:var(--info-suave);color:var(--azul-medio);
  font-size:12.8px;font-weight:600;
}

.usuario{
  display:flex;align-items:center;gap:11px;
  padding:5px 12px 5px 5px;
  border-radius:40px;
  border:1px solid var(--linea);
  background:#fff;
  cursor:pointer;
  transition:var(--transicion);
}
.usuario:hover{border-color:var(--turquesa);}
.usuario__foto{
  width:36px;height:36px;flex:none;
  border-radius:50%;object-fit:cover;
  background:linear-gradient(135deg,var(--azul),var(--turquesa));
  display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:700;
}
.usuario__datos strong{display:block;font-size:13.5px;color:var(--tinta);line-height:1.2;}
.usuario__datos span{display:block;font-size:11.5px;color:var(--gris);}

.menu-usuario{position:relative;}
.menu-usuario__lista{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:210px;padding:7px;
  background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio-sm);box-shadow:var(--sombra-alta);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:var(--transicion);z-index:130;
}
.menu-usuario.abierto .menu-usuario__lista{opacity:1;visibility:visible;transform:none;}
.menu-usuario__lista a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:7px;
  font-size:14px;color:var(--tinta);
}
.menu-usuario__lista a:hover{background:var(--fondo);color:var(--azul-medio);}
.menu-usuario__lista svg{width:16px;height:16px;fill:currentColor;opacity:.7;}
.menu-usuario__lista hr{border:0;border-top:1px solid var(--linea);margin:6px 0;}
.menu-usuario__lista .salir{color:var(--alerta);}
.menu-usuario__lista .salir:hover{background:var(--alerta-suave);color:var(--alerta);}

.contenido{flex:1;padding:26px;}
.contenido--ancho{max-width:none;}

.lateral-boton{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--linea);border-radius:9px;
  background:#fff;cursor:pointer;padding:0;
  place-items:center;flex:none;
}
.lateral-boton span{display:block;width:17px;height:2px;background:var(--azul);
  border-radius:2px;position:relative;}
.lateral-boton span::before,.lateral-boton span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--azul);border-radius:2px;}
.lateral-boton span::before{top:-5px;}
.lateral-boton span::after{top:5px;}

.velo{
  position:fixed;inset:0;z-index:110;
  background:rgba(6,34,68,.5);
  opacity:0;visibility:hidden;transition:var(--transicion);
}
.velo.visible{opacity:1;visibility:visible;}

/* =====================================================================
   COMPONENTES
   ===================================================================== */

/* --- Tarjeta --- */

.tarjeta{
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  margin-bottom:22px;
  overflow:hidden;
}
.tarjeta__cabecera{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;
  border-bottom:1px solid var(--linea);
  background:linear-gradient(180deg,#FBFDFF,#fff);
}
.tarjeta__cabecera h2,.tarjeta__cabecera h3{margin:0;font-size:16.5px;}
.tarjeta__cabecera p{margin:2px 0 0;font-size:13px;color:var(--gris);}
.tarjeta__cabecera .acciones{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;}
.tarjeta__cuerpo{padding:22px;}
.tarjeta__cuerpo--pegado{padding:0;}
.tarjeta__pie{
  padding:14px 22px;border-top:1px solid var(--linea);
  background:#FBFDFF;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}

/* --- Rejillas --- */

.rejilla{display:grid;gap:20px;}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.rejilla--modulos{grid-template-columns:repeat(auto-fill,minmax(248px,1fr));}

/* --- Modulo del panel --- */

.modulo{
  position:relative;
  display:block;
  padding:26px 24px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  transition:var(--transicion);
  overflow:hidden;
}
.modulo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--color-modulo,var(--azul-medio));
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s;
}
.modulo:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:transparent;}
.modulo:hover::before{transform:scaleX(1);}
.modulo__icono{
  width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:14px;
  margin-bottom:16px;
  color:#fff;
  background:var(--color-modulo,var(--azul-medio));
  box-shadow:0 10px 22px -12px var(--color-modulo,var(--azul-medio));
}
.modulo__icono svg{width:24px;height:24px;fill:currentColor;}
.modulo strong{display:block;font-size:16.5px;color:var(--azul);margin-bottom:5px;}
.modulo p{font-size:13.6px;color:var(--gris);margin:0;line-height:1.55;}

/* --- Indicadores --- */

.indicador{
  display:flex;align-items:center;gap:16px;
  padding:20px 22px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.indicador__icono{
  width:48px;height:48px;flex:none;
  display:grid;place-items:center;border-radius:13px;
  background:var(--info-suave);color:var(--azul-medio);
}
.indicador__icono svg{width:22px;height:22px;fill:currentColor;}
.indicador__icono--verde{background:var(--exito-suave);color:var(--exito);}
.indicador__icono--ambar{background:var(--aviso-suave);color:var(--aviso);}
.indicador__icono--rojo{background:var(--alerta-suave);color:var(--alerta);}
.indicador__valor{
  display:block;font-size:26px;font-weight:700;line-height:1.1;color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.indicador__texto{display:block;font-size:13px;color:var(--gris);margin-top:2px;}

/* --- Tablas --- */

.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.tabla{width:100%;border-collapse:collapse;font-size:14.5px;}
table.tabla th{
  text-align:left;
  padding:12px 14px;
  background:#F7FAFD;
  border-bottom:2px solid var(--linea);
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gris);
  white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
table.tabla td{padding:11px 14px;border-bottom:1px solid var(--linea);vertical-align:middle;}
table.tabla tbody tr:hover{background:#F9FCFE;}
table.tabla tbody tr:last-child td{border-bottom:0;}
table.tabla .num{text-align:center;color:var(--gris);font-variant-numeric:tabular-nums;width:52px;}
table.tabla .acciones{text-align:right;white-space:nowrap;}
table.tabla--compacta td,table.tabla--compacta th{padding:8px 10px;font-size:13.8px;}
table.tabla--rayada tbody tr:nth-child(even){background:#FBFDFF;}

.alumno-celda{display:flex;align-items:center;gap:11px;min-width:0;}
.alumno-celda img,.alumno-celda .inicial{
  width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;
  background:linear-gradient(135deg,var(--azul),var(--turquesa));
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;
}
.alumno-celda strong{display:block;font-size:14.2px;font-weight:600;line-height:1.3;}
.alumno-celda span{display:block;font-size:12.3px;color:var(--gris);}

/* --- Formularios --- */

.campo{margin-bottom:16px;}
.campo label{
  display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--tinta);
}
.campo label .req{color:var(--alerta);}
.campo input[type=text],.campo input[type=password],.campo input[type=email],
.campo input[type=number],.campo input[type=date],.campo input[type=time],
.campo input[type=search],.campo input[type=tel],.campo input[type=url],
.campo select,.campo textarea{
  width:100%;
  padding:10px 13px;
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-sm);
  font:15px/1.5 inherit;
  color:var(--tinta);
  background:#fff;
  transition:var(--transicion);
}
.campo textarea{resize:vertical;min-height:110px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-medio);box-shadow:0 0 0 3px rgba(21,101,192,.13);
}
.campo input:disabled,.campo select:disabled,.campo textarea:disabled{
  background:#F5F8FB;color:var(--gris);cursor:not-allowed;
}
.campo small{display:block;font-size:12.2px;color:var(--gris-claro);margin-top:4px;line-height:1.5;}
.campo--error input,.campo--error select,.campo--error textarea{border-color:var(--alerta);}
.campo__error{display:block;font-size:12.5px;color:var(--alerta);margin-top:4px;}

.campos{display:grid;gap:0 18px;}
.campos--2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.campos--3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.campos--4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}

.casilla{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px;cursor:pointer;}
.casilla input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--azul-medio);cursor:pointer;}
.casilla span{font-size:14.2px;}
.casilla small{display:block;font-size:12.3px;color:var(--gris);}

.grupo-campos{
  padding:20px;margin-bottom:20px;
  border:1px solid var(--linea);border-radius:var(--radio);
  background:#FBFDFF;
}
.grupo-campos > legend,.grupo-campos > h3{
  font-size:14px;font-weight:700;color:var(--azul);
  padding:0 8px;margin-bottom:14px;
  text-transform:uppercase;letter-spacing:.06em;
}

/* --- Botones --- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;
  border:0;border-radius:var(--radio-sm);
  font:600 14.5px/1 inherit;
  cursor:pointer;text-decoration:none;
  transition:var(--transicion);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;fill:currentColor;}
.btn--primario{background:linear-gradient(120deg,var(--azul),var(--azul-medio));color:#fff;
  box-shadow:0 8px 18px -10px rgba(11,60,125,.9);}
.btn--primario:hover{color:#fff;transform:translateY(-1px);}
.btn--acento{background:linear-gradient(120deg,var(--turquesa),var(--celeste));color:var(--azul-oscuro);}
.btn--acento:hover{color:var(--azul-oscuro);transform:translateY(-1px);}
.btn--claro{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea-fuerte);}
.btn--claro:hover{box-shadow:inset 0 0 0 1px var(--azul-medio);color:var(--azul-medio);}
.btn--peligro{background:var(--alerta);color:#fff;}
.btn--peligro:hover{color:#fff;filter:brightness(1.08);}
.btn--exito{background:var(--exito);color:#fff;}
.btn--exito:hover{color:#fff;filter:brightness(1.08);}
.btn--plano{background:none;color:var(--gris);padding:8px 12px;}
.btn--plano:hover{background:var(--fondo);color:var(--azul-medio);}
.btn--chico{padding:7px 13px;font-size:13.2px;}
.btn--bloque{width:100%;}
.btn--grande{padding:13px 28px;font-size:15.5px;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;}

.acciones-fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.acciones-fila--fin{justify-content:flex-end;}

/* --- Avisos --- */

.aviso{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 17px;
  border-radius:var(--radio-sm);
  border-left:4px solid;
  font-size:14.3px;
  margin-bottom:18px;
}
.aviso svg{width:18px;height:18px;flex:none;margin-top:2px;fill:currentColor;}
.aviso--exito{background:var(--exito-suave);border-color:var(--exito);color:#115C38;}
.aviso--error{background:var(--alerta-suave);border-color:var(--alerta);color:#8C2A1E;}
.aviso--aviso{background:var(--aviso-suave);border-color:var(--aviso);color:#7A4E10;}
.aviso--info{background:var(--info-suave);border-color:var(--info);color:#114B8C;}
.aviso strong{display:block;margin-bottom:2px;}

/* --- Pastillas y estados --- */

.pastilla{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 11px;border-radius:30px;
  font-size:12.2px;font-weight:600;white-space:nowrap;
}
.pastilla--azul{background:var(--info-suave);color:var(--azul-medio);}
.pastilla--verde{background:var(--exito-suave);color:var(--exito);}
.pastilla--ambar{background:var(--aviso-suave);color:var(--aviso);}
.pastilla--roja{background:var(--alerta-suave);color:var(--alerta);}
.pastilla--gris{background:#EEF3F8;color:var(--gris);}
.pastilla--turquesa{background:#E2F7FB;color:#0A7E96;}

/* --- Calificaciones AD / A / B / C --- */

.nota{
  display:inline-grid;place-items:center;
  min-width:38px;height:32px;padding:0 8px;
  border-radius:8px;
  font-size:13.5px;font-weight:700;
  letter-spacing:.02em;
}
.nota--ad{background:#E4F5EC;color:#106B41;box-shadow:inset 0 0 0 1px #B6E2CB;}
.nota--a {background:#E7F1FC;color:#12539F;box-shadow:inset 0 0 0 1px #BBD7F5;}
.nota--b {background:#FDF3E3;color:#8A5A11;box-shadow:inset 0 0 0 1px #F0DCB6;}
.nota--c {background:#FCEDEA;color:#9B2C1E;box-shadow:inset 0 0 0 1px #F3C9C1;}
.nota--vacia{background:#F2F6FA;color:#A9B7C6;box-shadow:inset 0 0 0 1px var(--linea);}

/* --- Asistencia P / T / J / F --- */

.marca{
  display:inline-grid;place-items:center;
  width:30px;height:30px;border-radius:8px;
  font-size:13px;font-weight:700;
}
.marca--p{background:#E4F5EC;color:#106B41;}
.marca--t{background:#FDF3E3;color:#8A5A11;}
.marca--j{background:#E7F1FC;color:#12539F;}
.marca--f{background:#FCEDEA;color:#9B2C1E;}
.marca--vacia{background:#F2F6FA;color:#A9B7C6;}

/* Selector de asistencia en la tabla de registro */
.selector-asistencia{display:inline-flex;gap:4px;}
.selector-asistencia input{position:absolute;opacity:0;width:0;height:0;}
.selector-asistencia label{
  display:grid;place-items:center;
  width:36px;height:34px;
  border:1px solid var(--linea-fuerte);
  border-radius:8px;
  font-size:13.5px;font-weight:700;
  color:var(--gris);background:#fff;
  cursor:pointer;
  transition:var(--transicion);
  user-select:none;
}
.selector-asistencia label:hover{border-color:var(--azul-medio);}
.selector-asistencia input:focus-visible + label{outline:3px solid var(--turquesa);outline-offset:1px;}
.selector-asistencia input[value="P"]:checked + label{background:#177A4B;border-color:#177A4B;color:#fff;}
.selector-asistencia input[value="T"]:checked + label{background:#B0721A;border-color:#B0721A;color:#fff;}
.selector-asistencia input[value="J"]:checked + label{background:#1565C0;border-color:#1565C0;color:#fff;}
.selector-asistencia input[value="F"]:checked + label{background:#C0392B;border-color:#C0392B;color:#fff;}

/* Selector de notas */
.selector-nota{
  padding:7px 10px;
  border:1px solid var(--linea-fuerte);
  border-radius:8px;
  font:600 14px/1 inherit;
  background:#fff;
  min-width:74px;
  cursor:pointer;
}
.selector-nota[data-valor="AD"]{background:#E4F5EC;color:#106B41;border-color:#B6E2CB;}
.selector-nota[data-valor="A"] {background:#E7F1FC;color:#12539F;border-color:#BBD7F5;}
.selector-nota[data-valor="B"] {background:#FDF3E3;color:#8A5A11;border-color:#F0DCB6;}
.selector-nota[data-valor="C"] {background:#FCEDEA;color:#9B2C1E;border-color:#F3C9C1;}

/* --- Barra de filtros --- */

.filtros{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;
  padding:16px 20px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  margin-bottom:20px;
}
.filtros .campo{margin-bottom:0;min-width:160px;}
.filtros .campo--ancho{flex:1;min-width:220px;}

/* --- Pestanas --- */

.pestanas{
  display:flex;gap:4px;
  border-bottom:2px solid var(--linea);
  margin-bottom:22px;
  overflow-x:auto;
}
.pestanas a{
  padding:11px 18px;
  font-size:14.5px;font-weight:600;
  color:var(--gris);
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  white-space:nowrap;
}
.pestanas a:hover{color:var(--azul-medio);}
.pestanas a.activo{color:var(--azul-medio);border-bottom-color:var(--azul-medio);}

/* --- Migas --- */

.migas{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--gris-claro);margin-bottom:16px;
}
.migas a{color:var(--gris);}
.migas a:hover{color:var(--azul-medio);}

/* --- Vacio --- */

.vacio{
  text-align:center;padding:56px 24px;color:var(--gris);
}
.vacio svg{width:48px;height:48px;fill:var(--gris-claro);opacity:.45;margin:0 auto 14px;}
.vacio strong{display:block;font-size:16.5px;color:var(--azul);margin-bottom:5px;}
.vacio p{font-size:14.3px;max-width:400px;margin:0 auto 18px;}

/* --- Paginacion --- */

.paginacion{display:flex;gap:6px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
.paginacion a,.paginacion span{
  min-width:38px;height:38px;padding:0 12px;
  display:grid;place-items:center;
  border:1px solid var(--linea);border-radius:var(--radio-sm);
  background:#fff;font-size:14px;font-weight:600;color:var(--tinta);
}
.paginacion a:hover{border-color:var(--azul-medio);color:var(--azul-medio);}
.paginacion .actual{background:var(--azul-medio);border-color:var(--azul-medio);color:#fff;}
.paginacion .inactivo{opacity:.4;pointer-events:none;}

/* --- Ventana modal --- */

.modal{
  position:fixed;inset:0;z-index:400;
  display:none;place-items:center;
  padding:26px 18px;
  background:rgba(6,34,68,.62);
  backdrop-filter:blur(3px);
  overflow-y:auto;
}
.modal.abierto{display:grid;}
.modal__caja{
  width:100%;max-width:620px;
  background:#fff;border-radius:var(--radio);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  overflow:hidden;
  margin:auto;
}
.modal__cabecera{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;border-bottom:1px solid var(--linea);
}
.modal__cabecera h3{margin:0;}
.modal__cerrar{
  margin-left:auto;width:32px;height:32px;
  border:0;border-radius:8px;background:var(--fondo);
  color:var(--gris);font-size:19px;cursor:pointer;
}
.modal__cerrar:hover{background:var(--alerta-suave);color:var(--alerta);}
.modal__cuerpo{padding:22px;}
.modal__pie{
  padding:15px 22px;border-top:1px solid var(--linea);background:#FBFDFF;
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}

/* --- Barra de progreso --- */

.progreso{height:8px;border-radius:8px;background:var(--linea);overflow:hidden;}
.progreso__valor{height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--azul-medio),var(--turquesa));transition:width .5s;}

/* --- Lista de datos --- */

.datos{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:14.5px;}
.datos dt{color:var(--gris);}
.datos dd{margin:0;font-weight:600;}

/* --- Utilidades --- */

.solo-lectores{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.centrado{text-align:center;}
.derecha{text-align:right;}
.gris{color:var(--gris);}
.chico{font-size:13px;}
.nowrap{white-space:nowrap;}
.mb-0{margin-bottom:0;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.flex-crece{flex:1;}

/* =====================================================================
   ADAPTABLE
   ===================================================================== */

@media (max-width:1100px){
  .lateral{
    position:fixed;top:0;left:0;
    transform:translateX(-105%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:14px 0 40px -20px rgba(6,34,68,.7);
  }
  .lateral.abierta{transform:translateX(0);}
  .lateral-boton{display:grid;}
  .contenido{padding:20px 16px;}
  .superior{padding:0 16px;}
}

@media (max-width:700px){
  body{font-size:15px;}
  .superior{min-height:60px;gap:10px;}
  .superior__titulo h1{font-size:16.5px;}
  .superior__titulo span,.superior__anio{display:none;}
  .usuario__datos{display:none;}
  .usuario{padding:4px;border:0;}
  .tarjeta__cuerpo{padding:17px;}
  .tarjeta__cabecera{padding:15px 17px;}
  .acceso{grid-template-columns:1fr;}
  .acceso__lado{padding:38px 26px;min-height:auto;}
  .acceso__lado img{width:70px;margin-bottom:18px;}
  .acceso__lado h1{font-size:25px;}
  .acceso__roles{display:none;}
  .acceso__formulario{padding:32px 22px;}
  .campos--2,.campos--3,.campos--4{grid-template-columns:1fr;}
  .filtros{padding:14px;}
  .filtros .campo{min-width:100%;}
}

/* =====================================================================
   IMPRESION  (nominas, boletas, actas)
   ===================================================================== */

@media print{
  .lateral,.superior,.velo,.btn,.filtros,.pestanas,.tarjeta__pie,
  .modal,.lateral-boton,.no-imprimir{display:none!important;}
  body{background:#fff;font-size:11pt;color:#000;}
  .app{display:block;}
  .contenido{padding:0;}
  .tarjeta{border:0;box-shadow:none;margin:0;}
  .tarjeta__cabecera{background:none;border-bottom:2px solid #000;padding:0 0 8pt;}
  .tarjeta__cuerpo{padding:0;}
  table.tabla{font-size:9.5pt;}
  table.tabla th{background:#eee!important;color:#000;border-bottom:1px solid #000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  table.tabla td{border-bottom:1px solid #ccc;padding:5pt 6pt;}
  .nota,.marca{box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .hoja-membrete{display:block!important;}
  a[href]::after{content:"";}
  @page{margin:14mm 12mm;}
}

.hoja-membrete{display:none;text-align:center;margin-bottom:14pt;}
.hoja-membrete img{width:60px;margin:0 auto 6pt;}
.hoja-membrete strong{display:block;font-size:13pt;}
.hoja-membrete span{display:block;font-size:9.5pt;color:#333;}

/* =====================================================================
   RECORTADOR DE IMAGENES
   Encuadre de fotos antes de subirlas.
   ===================================================================== */

.recortador{
  position:fixed;inset:0;z-index:500;
  display:none;place-items:center;
  padding:22px 16px;
  background:rgba(6,34,68,.72);
  backdrop-filter:blur(4px);
  overflow-y:auto;
}
.recortador.abierto{display:grid;}

.recortador__caja{
  width:100%;max-width:720px;margin:auto;
  background:#fff;border-radius:var(--radio);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.65);
  overflow:hidden;
}

.recortador__cabecera{
  display:flex;align-items:center;gap:14px;
  padding:17px 22px;border-bottom:1px solid var(--linea);
}
.recortador__cabecera h3{margin:0;font-size:17px;}
.recortador__cerrar{
  margin-left:auto;width:32px;height:32px;
  border:0;border-radius:8px;background:var(--fondo);
  color:var(--gris);font-size:20px;line-height:1;cursor:pointer;
}
.recortador__cerrar:hover{background:var(--alerta-suave);color:var(--alerta);}

.recortador__cuerpo{padding:20px 22px;}
.recortador__ayuda{
  font-size:13.5px;color:var(--gris);
  margin:0 0 16px;line-height:1.55;
}

.recortador__lienzo{
  background:
    linear-gradient(45deg,#E8EEF5 25%,transparent 25%,transparent 75%,#E8EEF5 75%),
    linear-gradient(45deg,#E8EEF5 25%,#F6F9FC 25%,#F6F9FC 75%,#E8EEF5 75%);
  background-size:18px 18px;
  background-position:0 0,9px 9px;
  border-radius:var(--radio-sm);
  padding:14px;
}

/* El recuadro define exactamente lo que se vera publicado */
.recortador__marco{
  position:relative;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  border-radius:6px;
  background:#0B1B2E;
  cursor:grab;
  touch-action:none;
  user-select:none;
  box-shadow:0 0 0 2px var(--azul-medio), 0 10px 30px -14px rgba(6,34,68,.7);
}
.recortador__marco.arrastrando{cursor:grabbing;}

.recortador__imagen{
  position:absolute;top:0;left:0;
  max-width:none;
  transform-origin:0 0;
  pointer-events:none;
  display:block;
}

/* Lineas de tercios, para ayudar a componer */
.recortador__guias{
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size:33.333% 33.333%;
  background-position:-1px -1px;
  opacity:0;
  transition:opacity .2s;
}
.recortador__marco:hover .recortador__guias,
.recortador__marco.arrastrando .recortador__guias{opacity:1;}

.recortador__controles{
  display:flex;align-items:center;gap:11px;
  margin-top:16px;
}
.recortador__boton{
  width:36px;height:36px;flex:none;
  border:1px solid var(--linea-fuerte);border-radius:9px;
  background:#fff;color:var(--azul);
  font-size:19px;line-height:1;cursor:pointer;
  transition:var(--transicion);
}
.recortador__boton:hover{border-color:var(--azul-medio);background:var(--info-suave);}
.recortador__boton--texto{
  width:auto;padding:0 15px;font-size:13.5px;font-weight:600;
  margin-left:auto;
}

.recortador__barra{
  flex:1;height:6px;
  -webkit-appearance:none;appearance:none;
  background:var(--linea);border-radius:6px;
  outline:none;cursor:pointer;
}
.recortador__barra::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--azul-medio);cursor:grab;
  box-shadow:0 2px 6px -1px rgba(6,34,68,.5);
}
.recortador__barra::-moz-range-thumb{
  width:20px;height:20px;border:0;border-radius:50%;
  background:var(--azul-medio);cursor:grab;
}

.recortador__pie{
  display:flex;gap:10px;justify-content:flex-end;
  padding:15px 22px;
  border-top:1px solid var(--linea);background:#FBFDFF;
}

@media (max-width:620px){
  .recortador__cuerpo{padding:16px;}
  .recortador__pie{padding:13px 16px;}
  .recortador__controles{flex-wrap:wrap;}
  .recortador__boton--texto{margin-left:0;width:100%;height:38px;}
}

/* =====================================================================
   TABLAS APILABLES EN MOVIL
   En un telefono una tabla ancha obliga a desplazarse de lado y deja
   controles fuera de la pantalla. Con .tabla--apilable cada fila se
   convierte en una tarjeta y cada celda en una linea con su etiqueta,
   tomada del atributo data-etiqueta.
   ===================================================================== */

@media (max-width:760px){

  .tabla--apilable thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }

  .tabla--apilable,
  .tabla--apilable tbody,
  .tabla--apilable tr,
  .tabla--apilable td{display:block;width:auto;}

  .tabla--apilable tr{
    border:1px solid var(--linea);
    border-radius:var(--radio-sm);
    margin-bottom:12px;
    padding:12px 14px;
    background:#fff;
  }
  .tabla--apilable tbody tr:hover{background:#fff;}
  .tabla--apilable.tabla--rayada tbody tr:nth-child(even){background:#FBFDFF;}

  .tabla--apilable td{
    border:0;
    padding:7px 0;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:34px;
  }
  .tabla--apilable td + td{border-top:1px solid var(--linea);}

  /* La etiqueta de la columna acompana al dato */
  .tabla--apilable td[data-etiqueta]::before{
    content:attr(data-etiqueta);
    flex:0 0 38%;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--gris);
  }

  /* Celdas que ocupan toda la linea, sin etiqueta al costado */
  .tabla--apilable td[data-completa]{
    display:block;
    padding-top:2px;
  }
  .tabla--apilable td[data-completa]::before{display:none;}

  /* La numeracion se integra con el nombre, no ocupa una linea */
  .tabla--apilable td.num{
    position:absolute;
    width:auto;height:auto;
    padding:0;margin:0;
    font-size:11.5px;
    color:var(--gris-claro);
  }
  .tabla--apilable tr{position:relative;}
  .tabla--apilable td.num{top:12px;right:14px;}

  .tabla--apilable td.acciones,
  .tabla--apilable td.centrado,
  .tabla--apilable td.derecha{text-align:left;}

  .tabla--apilable td.acciones{
    flex-wrap:wrap;
    gap:8px;
    padding-top:12px;
  }
  .tabla--apilable td.acciones::before{flex-basis:100%;margin-bottom:2px;}

  /* Los selectores de asistencia y de nota ocupan el ancho util */
  .tabla--apilable .selector-asistencia{flex:1;justify-content:space-between;}
  .tabla--apilable .selector-asistencia label{flex:1;max-width:none;}
  .tabla--apilable .selector-nota{flex:1;min-width:0;}

  .tabla--apilable .alumno-celda{width:100%;}
  .tabla--apilable .alumno-celda strong{font-size:15px;}

  /* En modo apilado la envoltura ya no necesita desplazarse */
  .tabla-envoltura:has(.tabla--apilable){overflow-x:visible;}
}


/* =====================================================================
   AVISO DE DESPLAZAMIENTO EN TABLAS QUE SI SIGUEN SIENDO ANCHAS
   ===================================================================== */

@media (max-width:760px){
  .tabla-envoltura{
    position:relative;
    -webkit-overflow-scrolling:touch;
  }
  .tabla-envoltura::after{
    content:"";
    position:absolute;
    top:0;right:0;bottom:0;
    width:26px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  }
  .tabla-envoltura:has(.tabla--apilable)::after{display:none;}
}


/* =====================================================================
   AJUSTES GENERALES PARA TELEFONO
   ===================================================================== */

@media (max-width:760px){

  /* Cabecera y pie de tarjeta: los botones en columna, no apretados */
  .tarjeta__cabecera{flex-wrap:wrap;gap:10px;}
  .tarjeta__cabecera .acciones{
    margin-left:0;
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .tarjeta__cabecera .acciones > *{width:100%;}
  .tarjeta__cabecera .acciones > *:only-child{grid-column:1 / -1;}

  .tarjeta__pie{flex-direction:column;align-items:stretch;gap:10px;}
  .tarjeta__pie .acciones-fila{
    margin-left:0!important;
    width:100%;
    display:grid;
    gap:8px;
  }
  .tarjeta__pie .btn,
  .tarjeta__pie form{width:100%;}
  .tarjeta__pie form .btn{width:100%;}

  /* Filtros: cada campo en su linea */
  .filtros{flex-direction:column;align-items:stretch;}
  .filtros .campo,
  .filtros .campo--ancho{width:100%;min-width:0;}
  .filtros .acciones-fila{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .filtros .acciones-fila > *{width:100%;}

  /* Las rejillas de indicadores y modulos, en una sola columna */
  .rejilla--2,.rejilla--3,.rejilla--4{grid-template-columns:1fr;}
  .rejilla--modulos{grid-template-columns:1fr;}

  /* Ventanas modales a pantalla completa: mas espacio para escribir */
  .modal{padding:0;align-items:stretch;}
  .modal__caja{
    max-width:none;
    min-height:100dvh;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }
  .modal__cuerpo{flex:1;overflow-y:auto;}
  .modal__pie{
    position:sticky;bottom:0;
    flex-direction:column-reverse;
  }
  .modal__pie .btn{width:100%;}

  /* Migas: que no empujen el ancho */
  .migas{font-size:12px;}

  /* Pestanas desplazables con indicacion */
  .pestanas{
    margin-inline:-16px;
    padding-inline:16px;
    scrollbar-width:none;
  }
  .pestanas::-webkit-scrollbar{display:none;}

  /* Campos de formulario mas altos: mas faciles de tocar.
     16px evita que el navegador haga zoom al enfocar el campo. */
  .campo input,.campo select,.campo textarea{
    font-size:16px;
    padding:12px 13px;
  }

  /* Botones con area de toque comoda */
  .btn{min-height:44px;}
  .btn--chico{min-height:38px;}
}

/* ---------------------------------------------------------------------
   Campos de archivo
   El navegador les da un ancho propio segun el nombre del archivo, y
   eso desbordaba los formularios en pantallas angostas.
   --------------------------------------------------------------------- */

.campo input[type="file"],
input[type="file"]{
  max-width:100%;
  box-sizing:border-box;
}

.campo input[type="file"]{
  width:100%;
  padding:10px 12px;
  border:1px dashed var(--linea-fuerte);
  border-radius:var(--radio-sm);
  background:#FBFDFF;
  font-size:14px;
  cursor:pointer;
}
.campo input[type="file"]:hover{border-color:var(--azul-medio);background:var(--info-suave);}
.campo input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:7px 14px;
  border:0;border-radius:7px;
  background:var(--azul-medio);color:#fff;
  font:600 13.5px inherit;
  cursor:pointer;
}

@media (max-width:760px){
  /* El nombre del archivo se corta en vez de estirar el formulario */
  .campo input[type="file"]{
    font-size:13px;
    padding:9px 10px;
  }
  .campo input[type="file"]::file-selector-button{
    margin-right:9px;
    padding:6px 11px;
    font-size:12.5px;
  }
}


/* =====================================================================
   ASISTENCIA EN TARJETAS
   Una ficha por estudiante, con su retrato y los cuatro estados.
   ===================================================================== */

:root{
  --presente:#177A4B;   --presente-suave:#E7F5EE;
  --tardanza:#B0721A;   --tardanza-suave:#FDF3E3;
  --justificada:#1565C0;--justificada-suave:#EAF2FC;
  --falta:#C0392B;      --falta-suave:#FCEDEA;
}

/* --- Recuento vivo de la cabecera ---------------------------------- */

.marcador{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--linea);
  border-top:1px solid var(--linea);
}
.marcador__dato{
  background:var(--panel);
  padding:14px 10px;
  text-align:center;
}
.marcador__dato strong{
  display:block;
  font-size:26px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.marcador__dato span{
  display:block;
  font-size:12px;
  color:var(--gris);
  margin-top:2px;
}
.marcador__dato--presente strong{color:var(--presente);}
.marcador__dato--tardanza strong{color:var(--tardanza);}
.marcador__dato--justificada strong{color:var(--justificada);}
.marcador__dato--falta strong{color:var(--falta);}

/* --- Rejilla de fichas --------------------------------------------- */

.fichas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:14px;
  margin-bottom:18px;
}

.ficha{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-left:5px solid var(--linea-fuerte);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  transition:border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.ficha:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px);}

.ficha--presente{border-left-color:var(--presente);}
.ficha--tardanza{border-left-color:var(--tardanza);}
.ficha--justificada{border-left-color:var(--justificada);}
.ficha--falta{border-left-color:var(--falta);background:var(--falta-suave);}

/* --- Retrato -------------------------------------------------------- */

.ficha__retrato{
  position:relative;
  width:84px;height:84px;
  margin:0 auto;
  flex:none;
}
.ficha__retrato img,
.ficha__inicial{
  width:84px;height:84px;
  border-radius:50%;
  object-fit:cover;
  display:grid;place-items:center;
  background:var(--info-suave);
  color:var(--azul);
  font-weight:800;
  font-size:26px;
  border:3px solid var(--panel);
  box-shadow:0 0 0 2px var(--linea);
}
.ficha--falta .ficha__retrato img{filter:grayscale(.55);}

.ficha__camara{
  position:absolute;
  right:-4px;bottom:-4px;
  width:32px;height:32px;
  display:grid;place-items:center;
  border:2px solid var(--panel);
  border-radius:50%;
  background:var(--azul-medio);
  color:#fff;
  cursor:pointer;
  padding:0;
  box-shadow:0 4px 10px -4px rgba(6,34,68,.7);
  transition:var(--transicion);
}
.ficha__camara:hover{background:var(--azul);transform:scale(1.08);}
.ficha__camara svg{width:16px;height:16px;fill:currentColor;}

.ficha__orden{
  position:absolute;
  left:-4px;top:-2px;
  min-width:24px;height:24px;
  display:grid;place-items:center;
  padding:0 6px;
  border-radius:12px;
  background:var(--fondo);
  border:1px solid var(--linea);
  color:var(--gris);
  font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --- Nombre --------------------------------------------------------- */

.ficha__datos{text-align:center;min-width:0;}
.ficha__datos strong{
  display:block;
  font-size:14.5px;
  line-height:1.3;
  color:var(--tinta);
  overflow-wrap:anywhere;
}
.ficha__datos span{
  display:block;
  font-size:12px;
  color:var(--gris-claro);
  margin-top:2px;
  font-variant-numeric:tabular-nums;
}

/* --- Los cuatro estados --------------------------------------------- */

.ficha__estados{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.ficha__estados input{position:absolute;opacity:0;width:0;height:0;}
.ficha__estados .estado{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:9px 2px 7px;
  border:1.5px solid var(--linea-fuerte);
  border-radius:10px;
  background:var(--panel);
  cursor:pointer;
  transition:var(--transicion);
  /* Objetivo comodo para el dedo */
  min-height:52px;
  justify-content:center;
}
.ficha__estados .estado:hover{border-color:var(--azul-medio);background:var(--fondo);}
.estado__letra{font-size:17px;font-weight:800;line-height:1;}
.estado__nombre{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--gris);
  line-height:1.15;
  text-align:center;
  /* El nombre largo no debe romper la rejilla */
  overflow:hidden;
  max-width:100%;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.ficha__estados input:focus-visible + .estado{outline:3px solid var(--turquesa);outline-offset:2px;}

.ficha__estados input[value="P"]:checked + .estado{background:var(--presente);border-color:var(--presente);}
.ficha__estados input[value="T"]:checked + .estado{background:var(--tardanza);border-color:var(--tardanza);}
.ficha__estados input[value="J"]:checked + .estado{background:var(--justificada);border-color:var(--justificada);}
.ficha__estados input[value="F"]:checked + .estado{background:var(--falta);border-color:var(--falta);}
.ficha__estados input:checked + .estado .estado__letra,
.ficha__estados input:checked + .estado .estado__nombre{color:#fff;}

.ficha__estados input:disabled + .estado{opacity:.6;cursor:not-allowed;}

/* --- Nota por estudiante -------------------------------------------- */

.ficha__nota input{
  display:none;
  width:100%;
  margin-top:7px;
  padding:8px 10px;
  border:1px solid var(--linea-fuerte);
  border-radius:8px;
  font:14px inherit;
}
.ficha__nota.abierta input{display:block;}
.ficha__nota-abrir{
  display:flex;
  align-items:center;
  gap:5px;
  width:100%;
  justify-content:center;
  padding:5px;
  border:0;
  background:none;
  color:var(--gris);
  font:600 12px inherit;
  cursor:pointer;
  border-radius:7px;
}
.ficha__nota-abrir:hover{background:var(--fondo);color:var(--azul-medio);}
.ficha__nota-abrir svg{width:13px;height:13px;fill:currentColor;}

/* --- Barra de guardado, siempre a la vista --------------------------- */

.barra-guardar{
  position:sticky;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 16px;
  margin:0 -4px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:0 -10px 30px -22px rgba(6,34,68,.8);
}
.barra-guardar__leyenda{margin-right:auto;}

/* =====================================================================
   CAMARA PARA RETRATAR AL ESTUDIANTE
   ===================================================================== */

.camarilla{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(6,34,68,.72);
  backdrop-filter:blur(3px);
}
.camarilla[hidden]{display:none;}

.camarilla__caja{
  width:min(460px,100%);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  background:var(--panel);
  border-radius:var(--radio);
  box-shadow:var(--sombra-alta);
  padding:18px;
}
.camarilla__cabecera{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}
.camarilla__cabecera h3{margin:0;font-size:17px;flex:1;}
.camarilla__cerrar{
  width:34px;height:34px;
  border:0;border-radius:9px;
  background:var(--fondo);
  color:var(--gris);
  font-size:22px;line-height:1;
  cursor:pointer;
}
.camarilla__cerrar:hover{background:var(--alerta-suave);color:var(--alerta);}
.camarilla__quien{
  margin:0 0 12px;
  color:var(--gris);
  font-size:14px;
}

.camarilla__visor{
  position:relative;
  aspect-ratio:1;
  width:100%;
  display:grid;
  place-items:center;
  background:var(--azul-oscuro);
  border-radius:var(--radio);
  overflow:hidden;
  margin-bottom:14px;
}
.camarilla__visor video,
.camarilla__visor img{
  width:100%;height:100%;
  object-fit:cover;
}
/* La camara frontal se muestra en espejo, que es como uno se espera verse */
.camarilla__visor video{transform:scaleX(-1);}
.camarilla__aviso{
  margin:0;
  padding:20px;
  color:#fff;
  text-align:center;
  font-size:14px;
  line-height:1.5;
}

.camarilla__acciones{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.camarilla__alterna{
  margin-top:12px;
  text-align:center;
  border-top:1px solid var(--linea);
  padding-top:12px;
}
.camarilla__alterna .btn{cursor:pointer;}

.btn--grande{padding:12px 22px;font-size:15px;}

body.sin-desplazar{overflow:hidden;}

/* --- Telefono -------------------------------------------------------- */

@media (max-width:760px){
  .fichas{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:10px;
  }
  .ficha{padding:11px;gap:8px;border-left-width:4px;}
  .ficha__retrato,
  .ficha__retrato img,
  .ficha__inicial{width:64px;height:64px;}
  .ficha__inicial{font-size:20px;}
  .ficha__datos strong{font-size:13px;}
  .ficha__estados{gap:4px;}
  .ficha__estados .estado{min-height:46px;padding:7px 1px 5px;}
  .estado__letra{font-size:15px;}
  /* En pantalla angosta solo cabe la letra */
  .estado__nombre{display:none;}

  .marcador__dato{padding:10px 6px;}
  .marcador__dato strong{font-size:21px;}

  .barra-guardar{
    gap:8px;
    padding:10px 12px;
  }
  .barra-guardar__leyenda{
    order:3;
    width:100%;
    margin-right:0;
    text-align:center;
  }
  .barra-guardar .btn{flex:1;justify-content:center;}

  .camarilla{padding:0;}
  .camarilla__caja{
    width:100%;
    max-height:100dvh;
    height:100dvh;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }
  .camarilla__visor{flex:1;aspect-ratio:auto;min-height:0;}
}

@media (max-width:380px){
  .fichas{grid-template-columns:1fr 1fr;}
}


/* =====================================================================
   MENU DE BOTONES FLOTANTES
   Para todos los perfiles menos el administrador.
   ===================================================================== */

.dock{
  position:fixed;
  left:50%;
  bottom:max(14px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:90;
  display:flex;
  gap:4px;
  padding:7px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border:1px solid var(--linea);
  border-radius:20px;
  box-shadow:0 16px 40px -18px rgba(6,34,68,.55), 0 2px 8px -4px rgba(6,34,68,.3);
  max-width:calc(100vw - 20px);
}

.dock__boton{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:76px;
  padding:8px 6px 7px;
  border:0;
  border-radius:15px;
  background:none;
  color:var(--gris);
  font:600 11px inherit;
  text-decoration:none;
  cursor:pointer;
  transition:var(--transicion);
}
.dock__boton:hover{background:var(--fondo);color:var(--tinta);}

.dock__icono{
  position:relative;
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:13px;
  background:var(--fondo);
  color:var(--color-dock, var(--azul-medio));
  transition:var(--transicion);
}
.dock__icono svg{width:21px;height:21px;fill:currentColor;}

.dock__boton.activo{color:var(--color-dock, var(--azul-medio));}
.dock__boton.activo .dock__icono{
  background:var(--color-dock, var(--azul-medio));
  color:#fff;
  box-shadow:0 8px 18px -8px var(--color-dock, var(--azul-medio));
  transform:translateY(-3px);
}
.dock__boton:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px;}

.dock__texto{
  max-width:76px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dock__contador{
  position:absolute;
  top:-3px;right:-3px;
  min-width:17px;height:17px;
  display:grid;place-items:center;
  padding:0 4px;
  border-radius:9px;
  background:var(--alerta);
  color:#fff;
  font-size:10px;font-weight:700;
  border:2px solid var(--panel);
}

/* Con el dock, la barra lateral desaparece y el contenido ocupa todo */
.app--dock .lateral{display:none;}
.app--dock .velo{display:none;}
.app--dock .principal{margin-left:0;width:100%;}
/* Sitio para que el dock no tape el final de la pagina */
.app--dock .contenido{padding-bottom:106px;}

/* =====================================================================
   HOJA DESLIZANTE DEL BOTON "MAS"
   ===================================================================== */

.hoja{position:fixed;inset:0;z-index:130;}
.hoja[hidden]{display:none;}

.hoja__velo{
  position:absolute;inset:0;
  background:rgba(6,34,68,.5);
  backdrop-filter:blur(2px);
  animation:hoja-aparece .2s ease;
}
@keyframes hoja-aparece{from{opacity:0}to{opacity:1}}

.hoja__caja{
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  width:min(520px,100%);
  max-height:86dvh;
  overflow:auto;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  background:var(--panel);
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 50px -20px rgba(6,34,68,.6);
  animation:hoja-sube .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes hoja-sube{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}

.hoja__agarre{
  display:block;
  width:44px;height:5px;
  margin:0 auto 14px;
  padding:0;
  border:0;border-radius:3px;
  background:var(--linea-fuerte);
  cursor:pointer;
}

.hoja__quien{
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 2px 14px;
  border-bottom:1px solid var(--linea);
}
.hoja__quien img,
.hoja__inicial{
  width:46px;height:46px;flex:none;
  border-radius:50%;
  object-fit:cover;
  display:grid;place-items:center;
  background:var(--info-suave);
  color:var(--azul);
  font-weight:800;
}
.hoja__quien strong{display:block;font-size:15px;}
.hoja__quien small{display:block;color:var(--gris);font-size:12.5px;}

.hoja__titulo{
  margin:16px 2px 9px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gris-claro);
}

.hoja__rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px;
}
.hoja__opcion{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:13px 6px 11px;
  border-radius:14px;
  background:var(--fondo);
  color:var(--tinta);
  font:600 12px inherit;
  text-align:center;
  text-decoration:none;
  transition:var(--transicion);
}
.hoja__opcion:hover{background:var(--info-suave);}
.hoja__opcion.activo{
  background:var(--color-dock, var(--azul-medio));
  color:#fff;
}
.hoja__icono{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:11px;
  background:var(--panel);
  color:var(--color-dock, var(--azul-medio));
}
.hoja__opcion.activo .hoja__icono{background:rgba(255,255,255,.22);color:#fff;}
.hoja__icono svg{width:19px;height:19px;fill:currentColor;}

.hoja__contador{
  position:absolute;
  top:6px;right:8px;
  min-width:19px;height:19px;
  display:grid;place-items:center;
  padding:0 5px;
  border-radius:10px;
  background:var(--alerta);
  color:#fff;
  font-size:10.5px;font-weight:700;
}

.hoja__lista{display:flex;flex-direction:column;gap:2px;}
.hoja__lista a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 12px;
  border-radius:11px;
  color:var(--tinta);
  text-decoration:none;
  font-size:14.5px;
  font-weight:500;
}
.hoja__lista a:hover{background:var(--fondo);}
.hoja__lista svg{width:18px;height:18px;fill:var(--gris);}
.hoja__salir{color:var(--alerta) !important;}
.hoja__salir svg{fill:var(--alerta);}

@media (max-width:520px){
  .dock{
    left:0;right:0;bottom:0;
    transform:none;
    max-width:100%;
    border-radius:18px 18px 0 0;
    border-left:0;border-right:0;border-bottom:0;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around;
    gap:0;
  }
  .dock__boton{min-width:0;flex:1;padding:6px 2px 4px;}
  .dock__icono{width:34px;height:34px;border-radius:12px;}
  .dock__icono svg{width:19px;height:19px;}
  .dock__texto{font-size:10.5px;max-width:100%;}
  .app--dock .contenido{padding-bottom:96px;}
}


/* =====================================================================
   LECTOR DE CARNETS
   ===================================================================== */

.escaner{display:flex;flex-direction:column;gap:18px;}

.visor{
  position:relative;
  aspect-ratio:4/3;
  max-height:58dvh;
  display:grid;
  place-items:center;
  background:var(--azul-oscuro);
  overflow:hidden;
}
.visor video{width:100%;height:100%;object-fit:cover;}

/* Marco que indica donde poner el carnet */
.visor__mira{
  position:absolute;
  width:min(62%,300px);
  aspect-ratio:1;
  pointer-events:none;
}
.visor__mira span{
  position:absolute;
  width:30px;height:30px;
  border:4px solid rgba(255,255,255,.85);
  transition:border-color var(--transicion);
}
.visor__mira span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0;}
.visor__mira span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0;}
.visor__mira span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 10px;}
.visor__mira span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 10px 0;}

.visor--bien .visor__mira span{border-color:#3DD68C;}
.visor--aviso .visor__mira span{border-color:#F6C445;}
.visor--malo .visor__mira span{border-color:#FF8A7A;}

.visor__estado{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  margin:0;
  padding:10px 14px;
  border-radius:11px;
  background:rgba(6,34,68,.82);
  color:#fff;
  font-size:14px;
  font-weight:500;
  text-align:center;
  line-height:1.4;
}
.visor--bien .visor__estado{background:rgba(23,122,75,.92);}
.visor--aviso .visor__estado{background:rgba(176,114,26,.92);}
.visor--malo .visor__estado{background:rgba(192,57,43,.92);}

.visor__pie{
  display:flex;
  gap:10px;
  justify-content:center;
  padding:14px;
  border-top:1px solid var(--linea);
}

/* --- Panel del ultimo carnet leido ---------------------------------- */

.resultado{border-left:6px solid var(--linea-fuerte);}
.resultado--presente{border-left-color:var(--exito);}
.resultado--tardanza{border-left-color:var(--aviso);}
.resultado--malo{border-left-color:var(--alerta);}

.resultado__cuerpo{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
}
.resultado__retrato img,
.resultado__inicial{
  width:76px;height:76px;flex:none;
  border-radius:50%;
  object-fit:cover;
  display:grid;place-items:center;
  background:var(--info-suave);
  color:var(--azul);
  font-weight:800;
  font-size:24px;
}
.resultado--malo .resultado__inicial{background:var(--alerta-suave);color:var(--alerta);}

.resultado__datos{min-width:0;flex:1;}
.resultado__marca{
  display:inline-block;
  margin-bottom:5px;
  padding:3px 11px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
  background:var(--exito-suave);
  color:var(--exito);
}
.resultado--tardanza .resultado__marca{background:var(--aviso-suave);color:var(--aviso);}
.resultado__datos strong{display:block;font-size:19px;line-height:1.25;overflow-wrap:anywhere;}
.resultado__datos > span{display:block;color:var(--gris);font-size:14px;}
.resultado__datos p{margin:6px 0 0;font-size:13.5px;color:var(--gris);}

.resultado--solo{max-width:560px;margin:0 auto 18px;}

/* --- Lista de carnets leidos ---------------------------------------- */

.leidos{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto;}
.leidos__uno{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 18px;
  border-bottom:1px solid var(--linea);
  border-left:4px solid transparent;
}
.leidos__uno--presente{border-left-color:var(--exito);}
.leidos__uno--tardanza{border-left-color:var(--aviso);}
.leidos__uno--nuevo{animation:leido-entra .35s ease;}
@keyframes leido-entra{
  from{opacity:0;transform:translateY(-8px);background:var(--info-suave);}
  to{opacity:1;transform:none;}
}

.leidos__uno img,
.leidos__inicial{
  width:40px;height:40px;flex:none;
  border-radius:50%;
  object-fit:cover;
  display:grid;place-items:center;
  background:var(--info-suave);
  color:var(--azul);
  font-weight:700;
  font-size:14px;
}
.leidos__datos{flex:1;min-width:0;}
.leidos__datos strong{display:block;font-size:14px;line-height:1.3;}
.leidos__datos span{display:block;font-size:12.5px;color:var(--gris);}
.leidos__hora{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:14px;
  color:var(--tinta);
}
.leidos__hora small{display:block;font-weight:500;font-size:11px;color:var(--gris);}
.leidos__vacio{padding:26px 18px;text-align:center;color:var(--gris);font-size:14px;}

/* =====================================================================
   CARNETS PARA IMPRIMIR
   ===================================================================== */

.carnets{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}

.carnet{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--linea-fuerte);
  border-radius:12px;
  overflow:hidden;
  /* Proporcion parecida a una tarjeta de credito */
  break-inside:avoid;
}

.carnet__cabecera{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  background:var(--azul);
  color:#fff;
}
.carnet__insignia{width:28px;height:28px;object-fit:contain;flex:none;}
.carnet__cabecera strong{display:block;font-size:13px;line-height:1.2;}
.carnet__cabecera small{display:block;font-size:10.5px;opacity:.85;}

.carnet__cuerpo{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
}
.carnet__retrato img,
.carnet__inicial{
  width:66px;height:66px;flex:none;
  border-radius:9px;
  object-fit:cover;
  display:grid;place-items:center;
  background:var(--info-suave);
  color:var(--azul);
  font-weight:800;
  font-size:22px;
  border:1px solid var(--linea);
}
.carnet__datos{flex:1;min-width:0;}
.carnet__datos strong{
  display:block;
  font-size:13px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.carnet__datos span{display:block;font-size:11px;color:var(--gris);margin-top:2px;}
.carnet__qr{flex:none;line-height:0;}
.carnet__qr svg{width:76px;height:76px;display:block;}

.carnet__pie{
  padding:6px 12px 9px;
  border-top:1px dashed var(--linea-fuerte);
  text-align:center;
}
.carnet__pie code{
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--gris);
}

.carnet__renovar{padding:0 12px 10px;text-align:center;}

@media print{
  .carnets{grid-template-columns:repeat(2,1fr);gap:8px;}
  .carnet{border-color:#999;box-shadow:none;}
  .carnet__cabecera{background:#0B3C7D !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

@media (max-width:760px){
  .visor{aspect-ratio:3/4;max-height:52dvh;}
  .resultado__cuerpo{padding:14px;gap:12px;}
  .resultado__retrato img,
  .resultado__inicial{width:60px;height:60px;font-size:20px;}
  .resultado__datos strong{font-size:16px;}
  .carnets{grid-template-columns:1fr;}
  .leidos__uno{padding:10px 12px;}
}

/* Aviso de una sola frase: aqui el <strong> resalta palabras sueltas,
   no encabeza un parrafo, asi que no debe cortar la linea. */
.aviso--corrido strong{display:inline;margin:0;}

/* Recordatorio de cambiar la clave de fabrica: acompana en toda la intranet */
.recordatorio-clave{align-items:center;flex-wrap:wrap;}
.recordatorio-clave span{flex:1;min-width:200px;}
.recordatorio-clave .btn{flex:none;}

/* Clases propias de cada docente en la pantalla de asistencia */
.clases-aula{display:flex;flex-wrap:wrap;gap:6px;}
.clase{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:20px;
  border:1.5px solid var(--color-clase, var(--azul-medio));
  color:var(--color-clase, var(--azul-medio));
  background:var(--panel);
  font:600 12.5px inherit;
  text-decoration:none;
  transition:var(--transicion);
}
.clase:hover{background:var(--color-clase, var(--azul-medio));color:#fff;}
.clase svg{width:13px;height:13px;fill:currentColor;}
.clase--lista{background:var(--color-clase, var(--azul-medio));color:#fff;}
.clase--lista:hover{opacity:.85;}

@media (max-width:760px){
  .clases-aula{gap:5px;}
  .clase{padding:5px 9px;font-size:12px;}
}

/* =====================================================================
   LA INTRANET COMO APLICACION DEL TELEFONO
   ===================================================================== */

.vista-telefono{text-align:center;}
.vista-telefono__pantalla{
  width:190px;
  height:300px;
  margin:0 auto;
  border-radius:24px;
  border:7px solid #1B2836;
  display:grid;
  place-items:start center;
  padding-top:34px;
  box-shadow:var(--sombra-alta);
}
.vista-telefono__app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  width:86px;
}
.vista-telefono__app img{
  width:58px;height:58px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 14px -6px rgba(0,0,0,.6);
}
.vista-telefono__app span{
  color:#fff;
  font-size:11.5px;
  font-weight:600;
  text-align:center;
  line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.vista-telefono__pie{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color:var(--gris-claro);
}

.qr-app{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:1px solid var(--linea);
}
.qr-app svg{flex:none;border:1px solid var(--linea);border-radius:8px;}
.qr-app > div{flex:1;min-width:190px;}

.pasos{display:grid;gap:18px;margin-top:16px;}
.pasos__grupo strong{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  color:var(--azul);
}
.pasos__grupo ol{
  margin:0;
  padding-left:20px;
  font-size:14px;
  line-height:1.65;
  color:var(--tinta);
}
.pasos__grupo li{margin-bottom:3px;}

@media (max-width:760px){
  .qr-app{justify-content:center;text-align:center;}
  .qr-app > div{min-width:0;}
}


/* =====================================================================
   ASPECTO DE LA INTRANET PARA DOCENTES, AUXILIARES Y ESTUDIANTES
   =====================================================================

   Quien administra el colegio pasa el dia entre tablas y necesita una
   pantalla sobria. Quien entra a pasar lista o a ver un comunicado entra
   tres minutos, muchas veces desde el telefono, y agradece algo mas
   claro y mas amable. Por eso estos perfiles tienen su propio fondo,
   iconos a color y botones con relieve.

   Todo cuelga de .app--dock, que la plantilla pone a todos menos al
   administrador, asi que el panel de administracion no cambia en nada.
   ===================================================================== */

.app--dock{
  /* Fondo propio, con profundidad, tenido con los colores del colegio.
     Se distingue del panel de administracion a simple vista, pero sigue
     siendo sobrio: el contenido tiene que leerse sin esfuerzo. */
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(var(--turquesa-rgb, 0,180,216), .30), transparent 58%),
    radial-gradient(1000px 600px at 108% 4%,  rgba(var(--azul-medio-rgb, 21,101,192), .26), transparent 60%),
    radial-gradient(800px 700px at 50% 115%,  rgba(var(--azul-rgb, 11,60,125), .14), transparent 62%),
    linear-gradient(170deg, #EEF4FB 0%, #E6EEF8 55%, #E9F1F8 100%);
  min-height:100dvh;
}

/* Rendimiento: el fondo va en una capa fija aparte, detras de todo. Con
   background-attachment:fixed el navegador lo volvia a pintar entero en
   cada cuadro del desplazamiento (lento en paginas largas como el registro
   de notas). Asi se pinta una vez y al desplazarse solo se mueve el
   contenido. Se ve igual. */
.app--dock{position:relative;isolation:isolate;background:#E9F1F8;}
.app--dock::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(var(--turquesa-rgb, 0,180,216), .30), transparent 58%),
    radial-gradient(1000px 600px at 108% 4%,  rgba(var(--azul-medio-rgb, 21,101,192), .26), transparent 60%),
    radial-gradient(800px 700px at 50% 115%,  rgba(var(--azul-rgb, 11,60,125), .14), transparent 62%),
    linear-gradient(170deg, #EEF4FB 0%, #E6EEF8 55%, #E9F1F8 100%);
  transform:translateZ(0);
}

/* La barra superior se apoya sobre el fondo sin cortarlo */
.app--dock .superior{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--azul-rgb, 11,60,125), .08);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}

.app--dock .superior__titulo h1{
  font-size:21px;
  letter-spacing:-.01em;
}

/* --- Tarjetas con relieve ------------------------------------------- */

.app--dock .tarjeta{
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .07);
  border-radius:18px;
  box-shadow:
    0 1px 2px rgba(var(--azul-oscuro-rgb, 6,34,68), .05),
    0 12px 28px -18px rgba(var(--azul-oscuro-rgb, 6,34,68), .35);
}

/* =====================================================================
   LOS MODULOS: el menu que estos perfiles ven primero
   ===================================================================== */

.app--dock .rejilla--modulos{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
}

.app--dock .modulo{
  padding:22px 20px 20px;
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .08);
  border-radius:20px;
  background:
    linear-gradient(180deg, #fff 0%, #FBFDFF 100%);
  /* Relieve: luz arriba, sombra proyectada abajo */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(var(--azul-oscuro-rgb, 6,34,68), .06),
    0 14px 26px -16px rgba(var(--azul-oscuro-rgb, 6,34,68), .45);
  transition:transform .18s cubic-bezier(.3,.9,.4,1), box-shadow .18s ease;
}

.app--dock .modulo:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 8px rgba(var(--azul-oscuro-rgb, 6,34,68), .07),
    0 24px 40px -18px var(--color-modulo, #1565C0);
}
/* Al pulsar se hunde: da la sensacion de boton de verdad */
.app--dock .modulo:active{
  transform:translateY(-1px) scale(.99);
  box-shadow:
    inset 0 2px 5px rgba(var(--azul-oscuro-rgb, 6,34,68), .12),
    0 4px 10px -6px rgba(var(--azul-oscuro-rgb, 6,34,68), .3);
}

/* La franja de color de arriba se cambia por un halo del propio color */
.app--dock .modulo::before{
  content:"";
  position:absolute;
  inset:auto -30% -55% -30%;
  height:120px;
  background:radial-gradient(closest-side, var(--color-modulo, #1565C0), transparent);
  opacity:.10;
  transform:none;
  transition:opacity .25s ease;
  pointer-events:none;
}
.app--dock .modulo:hover::before{opacity:.20;}

/* --- El icono: el elemento con mas color de la pantalla ------------- */

.app--dock .modulo__icono{
  position:relative;
  width:56px;height:56px;
  border-radius:17px;
  margin-bottom:15px;
  color:#fff;
  /* Dos tonos del color propio del modulo, para que no se vea plano */
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-modulo, #1565C0) 82%, white),
      var(--color-modulo, #1565C0) 55%,
      color-mix(in srgb, var(--color-modulo, #1565C0) 78%, black));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 6px rgba(0,0,0,.16),
    0 10px 20px -10px var(--color-modulo, #1565C0);
  transition:transform .18s cubic-bezier(.3,.9,.4,1);
}
.app--dock .modulo:hover .modulo__icono{transform:scale(1.07) rotate(-3deg);}
.app--dock .modulo__icono svg{
  width:27px;height:27px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

.app--dock .modulo strong{
  font-size:17px;
  color:var(--tinta);
  letter-spacing:-.01em;
}
.app--dock .modulo p{font-size:13.4px;}

/* Los navegadores viejos no entienden color-mix: se ven de un solo tono,
   que sigue estando bien. */
@supports not (background: color-mix(in srgb, red 50%, white)){
  .app--dock .modulo__icono{
    background:linear-gradient(145deg, var(--color-modulo, #1565C0), var(--color-modulo, #1565C0));
  }
}

/* =====================================================================
   BOTONES CON RELIEVE
   ===================================================================== */

.app--dock .btn{
  border-radius:12px;
  font-weight:650;
  transition:transform .14s cubic-bezier(.3,.9,.4,1), box-shadow .14s ease, background .14s ease;
}

.app--dock .btn--primario{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--azul-medio) 88%, white),
    var(--azul-medio) 45%,
    color-mix(in srgb, var(--azul-medio) 85%, black));
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 3px rgba(var(--azul-oscuro-rgb, 6,34,68), .18),
    0 10px 20px -10px var(--azul-medio);
}
.app--dock .btn--primario:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 6px rgba(var(--azul-oscuro-rgb, 6,34,68), .2),
    0 16px 26px -12px var(--azul-medio);
}
.app--dock .btn--primario:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}

.app--dock .btn--claro{
  background:linear-gradient(180deg, #fff, #F4F8FC);
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .14);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(var(--azul-oscuro-rgb, 6,34,68), .07);
}
.app--dock .btn--claro:hover{transform:translateY(-2px);}
.app--dock .btn--claro:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.1);}

@supports not (background: color-mix(in srgb, red 50%, white)){
  .app--dock .btn--primario{background:var(--azul-medio);}
}

/* =====================================================================
   EL MENU FLOTANTE, CON MAS PRESENCIA
   ===================================================================== */

.app--dock .dock{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .10);
  box-shadow:
    inset 0 1px 0 #fff,
    0 20px 44px -20px rgba(var(--azul-oscuro-rgb, 6,34,68), .55),
    0 3px 10px -5px rgba(var(--azul-oscuro-rgb, 6,34,68), .25);
}

.app--dock .dock__icono{
  background:linear-gradient(180deg, #fff, #EFF4FA);
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(var(--azul-oscuro-rgb, 6,34,68), .1);
}
.app--dock .dock__boton.activo .dock__icono{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--color-dock) 85%, white),
    var(--color-dock) 60%,
    color-mix(in srgb, var(--color-dock) 80%, black));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 10px 20px -8px var(--color-dock);
}
@supports not (background: color-mix(in srgb, red 50%, white)){
  .app--dock .dock__boton.activo .dock__icono{background:var(--color-dock);}
}

/* =====================================================================
   EN EL TELEFONO
   ===================================================================== */

@media (max-width:760px){
  .app--dock{background-attachment:scroll;}

  .app--dock .contenido{padding:14px 13px 106px;}

  /* Titulo mas compacto: la pantalla es para el contenido */
  .app--dock .superior{padding:10px 13px;}
  .app--dock .superior__titulo h1{font-size:18px;line-height:1.25;}
  .app--dock .superior__titulo span{font-size:12.5px;}

  /* Dos modulos por fila: se llega a todos sin desplazarse tanto */
  .app--dock .rejilla--modulos{
    grid-template-columns:1fr 1fr;
    gap:11px;
  }
  .app--dock .modulo{
    padding:16px 13px 14px;
    border-radius:17px;
    text-align:center;
  }
  .app--dock .modulo__icono{
    width:50px;height:50px;
    border-radius:15px;
    margin:0 auto 11px;
  }
  .app--dock .modulo__icono svg{width:25px;height:25px;}
  .app--dock .modulo strong{font-size:14.5px;line-height:1.3;}
  /* La descripcion sobra en pantalla chica: el nombre y el icono bastan */
  .app--dock .modulo p{display:none;}

  .app--dock .tarjeta{border-radius:16px;}
  .app--dock .tarjeta__cabecera{padding:14px 15px;}
  .app--dock .tarjeta__cabecera h2{font-size:16px;}
  .app--dock .tarjeta__cuerpo{padding:15px;}

  /* Los botones se tocan con el dedo: nunca por debajo de 44px */
  .app--dock .btn{min-height:46px;padding:12px 18px;font-size:15px;}
  .app--dock .btn--chico{min-height:44px;padding:10px 15px;font-size:14px;}

  /* Los filtros en columna, cada campo a lo ancho */
  .app--dock .filtros{flex-direction:column;align-items:stretch;gap:11px;}
  .app--dock .filtros .campo{width:100%;min-width:0;}
  .app--dock .acciones-fila{flex-wrap:wrap;gap:8px;}
  .app--dock .acciones-fila .btn{flex:1;justify-content:center;}
}

@media (max-width:520px){
  .app--dock .rejilla--modulos{grid-template-columns:1fr;}
  .app--dock .modulo{
    display:flex;
    align-items:center;
    gap:13px;
    text-align:left;
    padding:13px;
  }
  .app--dock .modulo__icono{margin:0;width:44px;height:44px;border-radius:13px;}
  .app--dock .modulo__icono svg{width:22px;height:22px;}
}

/* Quien prefiera menos movimiento lo ve todo quieto */
@media (prefers-reduced-motion: reduce){
  .app--dock .modulo,
  .app--dock .btn,
  .app--dock .modulo__icono{transition:none;}
  .app--dock .modulo:hover,
  .app--dock .btn:hover{transform:none;}
}

/* La ficha personal: columna angosta con la foto y otra ancha con los datos.
   Antes venia escrito en el HTML, donde ninguna regla de movil podia
   corregirlo y en el telefono se salia de la pantalla. */
.rejilla--perfil{
  grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  gap:20px;
}

@media (max-width:760px){
  .rejilla--perfil{grid-template-columns:1fr;gap:14px;}

  /* Una tabla ancha dentro de una tarjeta se desplaza sola en vez de
     quedar cortada por el borde */
  .tarjeta__cuerpo > table,
  .tarjeta__cuerpo > .tabla{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* =====================================================================
   TABLAS CONVERTIDAS EN TARJETAS (solo telefono, solo con .app--dock)
   =====================================================================
   El estilo entra cuando tablas.js marca la tabla. Si ese script no
   carga, la tabla queda como estaba: desplazable de lado.
   ===================================================================== */

@media (max-width:620px){

  .app .tabla-envoltura--apilada{overflow:visible;border:0;}

  .app .tabla--apilada{border:0;background:none;}
  .app .tabla--apilada thead{display:none;}
  .app .tabla--apilada tbody{display:block;}

  /* Cada fila, una tarjeta */
  .app .tabla--apilada tbody tr{
    display:block;
    background:#fff;
    border:1px solid rgba(var(--azul-rgb, 11,60,125), .10);
    border-radius:15px;
    padding:13px 14px;
    margin-bottom:11px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 4px rgba(var(--azul-oscuro-rgb, 6,35,73), .05),
      0 12px 22px -16px rgba(var(--azul-oscuro-rgb, 6,35,73), .40);
  }
  .app .tabla--apilada tbody tr:last-child{margin-bottom:0;}
  .app .tabla--apilada tbody tr:hover{background:#fff;}

  /* Cada celda, una linea: a la izquierda el nombre de la columna */
  .app .tabla--apilada td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:7px 0;
    border:0;
    text-align:right;
    white-space:normal;
  }
  .app .tabla--apilada td + td{
    border-top:1px dashed rgba(var(--azul-rgb, 11,60,125), .10);
  }
  .app .tabla--apilada td::before{
    content:attr(data-etiqueta);
    flex:0 0 auto;
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--gris);
    text-align:left;
  }

  /* La primera columna es el titulo de la tarjeta: sin etiqueta */
  .app .tabla--apilada td:first-child{
    display:block;
    text-align:left;
    padding-top:0;
    padding-bottom:10px;
  }
  .app .tabla--apilada td:first-child::before{display:none;}
  .app .tabla--apilada td:first-child strong{font-size:16px;}

  /* Las celdas centradas de la tabla no se centran dentro de la tarjeta */
  .app .tabla--apilada td.centrado{text-align:right;}

  /* Botones de accion: a lo ancho, faciles de tocar */
  .app .tabla--apilada td.acciones{
    display:block;
    text-align:left;
    padding-bottom:0;
  }
  .app .tabla--apilada td.acciones::before{
    display:block;
    margin-bottom:7px;
  }
  .app .tabla--apilada td.acciones .btn{width:100%;justify-content:center;}
  .app .tabla--apilada td.acciones .btn + .btn{margin-top:7px;}

  /* Las pastillas de las clases se ven mejor en bloque */
  .app .tabla--apilada td:has(.clases-aula){display:block;text-align:left;}
  .app .tabla--apilada td:has(.clases-aula)::before{display:block;margin-bottom:7px;}
}

@media (max-width:620px){
  /* Tablas cuyo primer dato es el numero de orden: el numero se muestra
     como una chapa pequena y el titulo pasa a ser la segunda columna. */
  .app .tabla--apilada--indice td:first-child{
    display:inline-block;
    min-width:26px;
    padding:1px 8px;
    margin-bottom:8px;
    border-radius:20px;
    background:rgba(var(--azul-rgb, 11,60,125), .07);
    color:var(--gris);
    font-size:12px;
    font-weight:600;
    text-align:center;
  }
  .app .tabla--apilada--indice td:nth-child(2){
    display:block;
    text-align:left;
    padding-top:0;
    padding-bottom:10px;
    border-top:0;
  }
  .app .tabla--apilada--indice td:nth-child(2)::before{display:none;}
  .app .tabla--apilada--indice td:nth-child(2) strong{font-size:16px;}
}

@media (max-width:760px){
  /* Las pestanas se desplazan de lado, pero el margen negativo estaba
     calculado para el relleno de escritorio y asomaba 3px por el borde,
     lo justo para que la pagina entera se pudiera mover. */
  .app--dock .pestanas{margin-inline:-13px;padding-inline:13px;}

  /* Los botones de la cabecera de una tarjeta (Importar, Nueva matricula)
     no caben uno al lado del otro: pasan a ocupar la linea completa. */
  .app--dock .tarjeta__cabecera{flex-wrap:wrap;}
  .app--dock .tarjeta__cabecera .acciones{
    width:100%;
    margin-left:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .app--dock .tarjeta__cabecera .acciones .btn{
    flex:1 1 140px;
    justify-content:center;
  }
}

/* ---------------------------------------------------------------------
   La barra de guardar, por encima del menu flotante
   ---------------------------------------------------------------------
   En la pantalla de asistencia la barra con el boton Guardar se queda
   pegada abajo, justo donde vive el menu flotante. Medio boton quedaba
   debajo del menu: se sube para que se vea completo.
   ------------------------------------------------------------------- */

.app--dock .barra-guardar{
  bottom:calc(max(14px, env(safe-area-inset-bottom)) + 104px);
  border-radius:14px;
  box-shadow:
    0 -1px 0 rgba(var(--azul-rgb, 11,60,125), .06) inset,
    0 14px 30px -18px rgba(var(--azul-oscuro-rgb, 6,35,73), .5);
}

@media (max-width:760px){
  .app--dock .barra-guardar{
    bottom:calc(max(14px, env(safe-area-inset-bottom)) + 85px);
  }
  /* Los dos botones de la barra, uno al lado del otro y a lo ancho */
  .app--dock .barra-guardar .btn{flex:1 1 auto;justify-content:center;}
}

@media (max-width:520px){
  /* Palabras que solo caben en pantalla grande */
  .oculto-movil{display:none;}

  /* La barra de guardar, compacta: los dos botones en una sola linea y
     la leyenda de P/T/J/F debajo. Asi tapa lo menos posible la lista. */
  .app--dock .barra-guardar{padding:10px;gap:8px;}
  .app--dock .barra-guardar .btn{
    flex:1 1 0;
    min-width:0;
    padding:11px 8px;
    font-size:14px;
  }
  .app--dock .barra-guardar__leyenda{
    order:3;
    flex:1 1 100%;
    margin:0;
    font-size:11.5px;
    text-align:center;
  }
}


/* =====================================================================
   AULAS EN TARJETAS (pantalla de asistencia)
   =====================================================================
   Antes era una tabla de seis columnas. La docente entra aqui para
   tocar un boton, no para comparar columnas, asi que cada aula es una
   tarjeta con lo justo: cuantos son, quien es el tutor, si ya se paso
   lista y el boton grande para pasarla.
   ===================================================================== */

.aulas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:15px;
}

.aula{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:16px;
  border:1px solid var(--linea);
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(6,34,68,.05),
    0 16px 30px -22px rgba(6,34,68,.5);
  overflow:hidden;
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.aula::before{
  /* Cinta de color arriba: dice de un vistazo como va el aula */
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--tono-aula, var(--linea-fuerte));
}
.aula:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 8px rgba(6,34,68,.06),
    0 26px 44px -24px rgba(6,34,68,.55);
}

.aula--pendiente{--tono-aula:var(--tardanza);}
.aula--lista{--tono-aula:var(--presente);}
.aula--vacia{--tono-aula:var(--linea-fuerte);}

/* --- Cabecera de la tarjeta ----------------------------------------- */

.aula__cabecera{
  display:flex;
  align-items:center;
  gap:12px;
}

.aula__insignia{
  flex:none;
  width:46px;height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,var(--azul-medio),var(--azul));
  color:#fff;
  font-size:17px;
  font-weight:800;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -9px var(--azul-medio);
}
.aula__insignia small{
  display:block;
  font-size:10.5px;
  font-weight:700;
  opacity:.85;
  letter-spacing:.06em;
}

.aula__titulo{min-width:0;flex:1;}
.aula__titulo strong{
  display:block;
  font-size:16px;
  color:var(--azul);
  line-height:1.25;
  overflow-wrap:anywhere;
}
.aula__titulo span{
  display:block;
  font-size:12.5px;
  color:var(--gris-claro);
}

/* --- Datos ---------------------------------------------------------- */

.aula__datos{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:11px 12px;
  border-radius:12px;
  background:var(--fondo);
}
.aula__dato{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--gris);
  min-width:0;
}
.aula__dato svg{
  width:16px;height:16px;
  flex:none;
  fill:var(--gris-claro);
}
.aula__dato b{color:var(--tinta);}

/* --- Pie ------------------------------------------------------------ */

.aula__pie{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.aula__clases{
  padding-top:10px;
  border-top:1px dashed var(--linea);
  display:flex;
  flex-direction:column;
  gap:7px;
}


/* =====================================================================
   BOTON DE REGISTRAR ASISTENCIA
   =====================================================================
   Es la accion que la docente viene a hacer, asi que se ve desde la
   puerta: verde del modulo de asistencia y con relieve.
   ===================================================================== */

.btn--asistencia{
  background:linear-gradient(180deg,#22B368 0%,#1B9E5A 48%,#15804A 100%);
  color:#fff;
  border:0;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 3px rgba(6,34,68,.16),
    0 12px 22px -12px #1B9E5A;
}
.btn--asistencia:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 7px rgba(6,34,68,.18),
    0 18px 28px -14px #1B9E5A;
}
.btn--asistencia:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
.btn--asistencia svg{fill:currentColor;}

.btn--bloque{width:100%;justify-content:center;}


/* =====================================================================
   HOJA DE ASISTENCIA: TARJETAS MAS ESTILIZADAS
   =====================================================================
   Tres arreglos y un cambio de aspecto:

   - Los nombres de los botones se salian del recuadro ("Falta
     injustificada" no cabe en un cuarto de tarjeta). Ahora el boton
     lleva la palabra corta, el nombre completo esta en la leyenda de
     la cabecera y en el title, y el texto ya no puede desbordarse.
   - La leyenda de P/T/J/F estaba dentro de la barra flotante y quedaba
     encima de la lista. Se subio a la cabecera, quieta.
   - La barra flotante se quedo solo con los botones y se recogio a la
     derecha, para no tapar media pantalla.
   ===================================================================== */

/* --- La tarjeta del estudiante -------------------------------------- */

.ficha{
  gap:11px;
  padding:16px 15px 14px;
  border-radius:18px;
  border-left-width:0;
  background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(6,34,68,.05),
    0 16px 30px -22px rgba(6,34,68,.5);
  overflow:hidden;
}
/* El color del estado pasa del borde izquierdo a una cinta superior y a
   un halo detras del retrato: se reconoce mejor de lejos. */
.ficha::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--tono-ficha, var(--linea-fuerte));
  transition:background var(--transicion);
}
.ficha::after{
  content:"";
  position:absolute;
  top:-58px;left:50%;
  width:210px;height:150px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--tono-ficha, var(--linea-fuerte)), transparent);
  opacity:.13;
  pointer-events:none;
  transition:opacity var(--transicion);
}
.ficha:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 8px rgba(6,34,68,.06),
    0 26px 44px -24px rgba(6,34,68,.55);
}

.ficha--presente{--tono-ficha:var(--presente);}
.ficha--tardanza{--tono-ficha:var(--tardanza);}
.ficha--justificada{--tono-ficha:var(--justificada);}
.ficha--falta{--tono-ficha:var(--falta);background:linear-gradient(180deg,#fff 0%,var(--falta-suave) 100%);}

.ficha__retrato{width:78px;height:78px;z-index:1;}
.ficha__retrato img,
.ficha__inicial{
  width:78px;height:78px;
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--tono-ficha, var(--linea)), 0 8px 18px -10px rgba(6,34,68,.5);
  background:linear-gradient(160deg,#EFF5FC,#E3EDF8);
  transition:box-shadow var(--transicion);
}
.ficha__camara{
  width:30px;height:30px;
  background:linear-gradient(160deg,var(--azul-medio),var(--azul));
}
.ficha__orden{
  left:-2px;top:-2px;
  background:#fff;
  box-shadow:0 2px 6px -3px rgba(6,34,68,.5);
}

.ficha__datos strong{font-size:14.5px;font-weight:650;}

/* --- Los cuatro botones --------------------------------------------- */

.ficha__estados{gap:7px;}
.ficha__estados .estado{
  /* min-width:0 es lo que impide que el texto empuje la columna */
  min-width:0;
  overflow:hidden;
  gap:2px;
  padding:8px 3px 6px;
  border-width:1.5px;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,#F7FAFD);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(6,34,68,.05);
}
.ficha__estados .estado:hover{
  border-color:var(--azul-medio);
  background:linear-gradient(180deg,#fff,#EEF5FC);
  transform:translateY(-1px);
}
.estado__letra{font-size:16px;}
.estado__nombre{
  /* Sin nowrap ni recortes: la palabra corta entra completa */
  font-size:9px;
  letter-spacing:.02em;
  white-space:normal;
  text-overflow:clip;
  max-width:100%;
  overflow-wrap:anywhere;
  hyphens:auto;
}

/* El elegido se hunde un poco, como un boton pulsado de verdad */
.ficha__estados input:checked + .estado{
  transform:none;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.18),
    0 6px 14px -8px var(--linea-fuerte);
}
.ficha__estados input[value="P"]:checked + .estado{box-shadow:inset 0 2px 5px rgba(0,0,0,.18), 0 8px 16px -9px var(--presente);}
.ficha__estados input[value="T"]:checked + .estado{box-shadow:inset 0 2px 5px rgba(0,0,0,.18), 0 8px 16px -9px var(--tardanza);}
.ficha__estados input[value="J"]:checked + .estado{box-shadow:inset 0 2px 5px rgba(0,0,0,.18), 0 8px 16px -9px var(--justificada);}
.ficha__estados input[value="F"]:checked + .estado{box-shadow:inset 0 2px 5px rgba(0,0,0,.18), 0 8px 16px -9px var(--falta);}

/* --- La leyenda, en la cabecera y quieta ---------------------------- */

.leyenda-estados{
  display:flex;
  flex-wrap:wrap;
  gap:7px 16px;
  margin:0;
  padding:11px 16px 13px;
  border-top:1px solid var(--linea);
  font-size:12.5px;
  color:var(--gris);
}
.leyenda-estados__dato{display:inline-flex;align-items:center;gap:6px;}
.leyenda-estados__dato b{
  width:21px;height:21px;
  display:grid;place-items:center;
  border-radius:7px;
  color:#fff;
  font-size:11.5px;
  font-weight:800;
}
.leyenda-estados__dato--presente b{background:var(--presente);}
.leyenda-estados__dato--tardanza b{background:var(--tardanza);}
.leyenda-estados__dato--justificada b{background:var(--justificada);}
.leyenda-estados__dato--falta b{background:var(--falta);}

/* --- La barra de guardado, recogida a la derecha -------------------- */

.barra-guardar{
  width:max-content;
  max-width:100%;
  margin-left:auto;
  margin-right:0;
  padding:11px 13px;
  border-radius:16px;
  border:1px solid var(--linea);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 40px -20px rgba(6,34,68,.55),
    0 3px 10px -6px rgba(6,34,68,.3);
}

@media (max-width:760px){
  /* En el telefono si conviene que ocupe todo el ancho */
  .barra-guardar{width:auto;margin-left:0;}
  .leyenda-estados{gap:6px 12px;padding:10px 14px 12px;font-size:12px;}
}


/* =====================================================================
   VENTANA DE OPCIONES DE UN REPORTE
   ===================================================================== */

.opciones{
  border:0;
  padding:0;
  margin:0 0 22px;
}
.opciones:last-child{margin-bottom:0;}
.opciones legend{
  padding:0;
  margin-bottom:11px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--gris);
}

.opciones__rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:11px;
}

/* Cada aula es una tarjeta que se puede tocar entera */
.opcion input{position:absolute;opacity:0;width:0;height:0;}
.opcion__caja{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1.5px solid var(--linea);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#FBFDFF);
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(6,34,68,.05);
  cursor:pointer;
  transition:var(--transicion);
}
.opcion__caja:hover{border-color:var(--azul-medio);transform:translateY(-2px);}
.opcion input:checked + .opcion__caja{
  border-color:var(--azul-medio);
  background:linear-gradient(180deg,#fff,var(--info-suave));
  box-shadow:inset 0 1px 0 #fff, 0 10px 20px -12px var(--azul-medio);
}
.opcion input:focus-visible + .opcion__caja{outline:3px solid var(--turquesa);outline-offset:2px;}

.opcion__insignia{
  flex:none;
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,var(--azul-medio),var(--azul));
  color:#fff;
  font-size:15px;font-weight:800;line-height:1;
}
.opcion__insignia small{display:block;font-size:9.5px;opacity:.85;letter-spacing:.06em;}
.opcion__texto{min-width:0;}
.opcion__texto strong{display:block;font-size:14.5px;color:var(--tinta);}
.opcion__texto span{display:block;font-size:12.5px;color:var(--gris-claro);}

.tarjeta__pie--formatos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.tarjeta__pie--formatos .acciones-fila{margin-left:auto;}

/* Los dos formatos, cada uno con el color con que se les reconoce */
.btn--excel{
  background:linear-gradient(180deg,#22A35F 0%,#1B8A50 48%,#156F41 100%);
  color:#fff;border:0;font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 3px rgba(6,34,68,.16), 0 12px 22px -12px #1B8A50;
}
.btn--pdf{
  background:linear-gradient(180deg,#D14A3A 0%,#C0392B 48%,#9F2D21 100%);
  color:#fff;border:0;font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 3px rgba(6,34,68,.16), 0 12px 22px -12px #C0392B;
}
.btn--excel:hover,.btn--pdf:hover{color:#fff;transform:translateY(-2px);}
.btn--excel:active,.btn--pdf:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
.btn--excel svg,.btn--pdf svg{fill:currentColor;}

@media (max-width:620px){
  .tarjeta__pie--formatos .acciones-fila{margin-left:0;width:100%;}
  .tarjeta__pie--formatos .btn{flex:1 1 100%;justify-content:center;}
}


/* =====================================================================
   ASPECTO GENERAL DE TODOS LOS MODULOS
   =====================================================================
   Un repaso parejo a las piezas que se repiten en todas las pantallas:
   tarjetas, tablas, pastillas, avisos, cifras, formularios y estados
   vacios. Nada cambia de sitio; cambia como se ve.

   La idea: menos lineas duras y mas profundidad. Bordes suaves, sombras
   en dos capas (una cerca y una lejos), y un toque de color donde
   ayuda a encontrar las cosas.
   ===================================================================== */

/* --- Tarjetas -------------------------------------------------------- */

.tarjeta{
  border-radius:18px;
  border-color:rgba(var(--azul-rgb, 11,60,125), .09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(6,34,68,.04),
    0 16px 32px -24px rgba(6,34,68,.45);
}

.tarjeta__cabecera{
  padding:17px 22px;
  border-bottom-color:rgba(var(--azul-rgb, 11,60,125), .08);
  background:linear-gradient(180deg,#FCFDFF 0%,#F7FAFE 100%);
}
.tarjeta__cabecera h2,.tarjeta__cabecera h3{letter-spacing:-.01em;}

/* El icono de la cabecera, en una chapa con el color del modulo */
.tarjeta__cabecera > svg{
  width:38px;height:38px;
  flex:none;
  padding:9px;
  border-radius:12px;
  background:linear-gradient(150deg,
    rgba(var(--azul-medio-rgb, 21,101,192), .14),
    rgba(var(--turquesa-rgb, 0,180,216), .14));
  fill:var(--azul-medio);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.tarjeta__pie{background:linear-gradient(180deg,#FAFCFF,#F5F9FD);}

/* Una tarjeta que es en si misma el panel principal de la pantalla */
.tarjeta--panel{border-radius:20px;}

/* --- Tablas ---------------------------------------------------------- */

table.tabla th{
  background:linear-gradient(180deg,#F8FBFE,#F1F6FC);
  border-bottom:1px solid rgba(var(--azul-rgb, 11,60,125), .12);
  font-size:11.5px;
  letter-spacing:.08em;
  color:#64748B;
}
table.tabla td{border-bottom-color:rgba(var(--azul-rgb, 11,60,125), .07);}
table.tabla tbody tr{transition:background .15s ease;}
table.tabla tbody tr:hover{background:rgba(var(--azul-medio-rgb, 21,101,192), .045);}

.tabla-envoltura{border-radius:14px;}

/* --- Pastillas ------------------------------------------------------- */

.pastilla{
  padding:3px 11px;
  border:1px solid transparent;
  font-size:12px;
  letter-spacing:.01em;
}
.pastilla--azul{border-color:rgba(21,101,192,.22);}
.pastilla--verde{border-color:rgba(23,122,75,.22);}
.pastilla--ambar{border-color:rgba(176,114,26,.22);}
.pastilla--roja{border-color:rgba(192,57,43,.22);}
.pastilla--gris{border-color:rgba(91,110,133,.18);}

/* --- Avisos ---------------------------------------------------------- */

.aviso{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(6,34,68,.04), 0 12px 24px -20px rgba(6,34,68,.45);
}
.aviso > svg{
  width:34px;height:34px;
  padding:8px;
  border-radius:10px;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
}

/* --- Cifras ---------------------------------------------------------- */

.indicador{
  border-radius:16px;
  border-color:rgba(var(--azul-rgb, 11,60,125), .08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(6,34,68,.04),
    0 14px 26px -22px rgba(6,34,68,.5);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.indicador:hover{transform:translateY(-2px);}
.indicador__icono{
  border-radius:13px;
  background:linear-gradient(150deg,
    rgba(var(--azul-medio-rgb, 21,101,192), .16),
    rgba(var(--turquesa-rgb, 0,180,216), .16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.indicador__valor{letter-spacing:-.02em;}

/* --- Formularios ----------------------------------------------------- */

.campo input[type=text],.campo input[type=password],.campo input[type=email],
.campo input[type=number],.campo input[type=date],.campo input[type=time],
.campo input[type=search],.campo input[type=tel],.campo input[type=url],
.campo select,.campo textarea{
  border-radius:11px;
  border-color:rgba(var(--azul-rgb, 11,60,125), .16);
  background:linear-gradient(180deg,#FDFEFF,#F8FBFE);
  transition:border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  background:#fff;
  box-shadow:0 0 0 3px rgba(var(--azul-medio-rgb, 21,101,192), .14);
}

.filtros{
  border-radius:16px;
  border-color:rgba(var(--azul-rgb, 11,60,125), .08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px -24px rgba(6,34,68,.5);
}

/* --- Estado vacio ---------------------------------------------------- */

.vacio{padding:34px 20px;}
.vacio > svg{
  width:60px;height:60px;
  padding:15px;
  border-radius:20px;
  background:linear-gradient(150deg,
    rgba(var(--azul-medio-rgb, 21,101,192), .12),
    rgba(var(--turquesa-rgb, 0,180,216), .12));
  fill:var(--azul-medio);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.vacio strong{font-size:16px;}

/* --- Botones, en toda la intranet ------------------------------------ */

.btn{
  border-radius:11px;
  font-weight:620;
  transition:transform .14s cubic-bezier(.3,.9,.4,1), box-shadow .14s ease, background .14s ease;
}
.btn--primario{
  border:0;
  background:linear-gradient(180deg,#2077D6 0%,var(--azul-medio) 48%,#11529E 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 2px 3px rgba(6,34,68,.16),
    0 12px 22px -13px var(--azul-medio);
}
.btn--primario:hover{transform:translateY(-2px);}
.btn--primario:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
.btn--claro{
  background:linear-gradient(180deg,#fff,#F5F9FD);
  border-color:rgba(var(--azul-rgb, 11,60,125), .15);
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(6,34,68,.06);
}
.btn--claro:hover{transform:translateY(-2px);}
.btn--claro:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.1);}

/* --- Migas ----------------------------------------------------------- */

.migas{color:var(--gris-claro);}

@media (prefers-reduced-motion: reduce){
  .indicador,.btn,.tarjeta,.aula,.ficha{transition:none;}
  .indicador:hover,.btn:hover,.aula:hover,.ficha:hover{transform:none;}
}


/* =====================================================================
   COLOR POR GENERO EN LAS TARJETAS DE ASISTENCIA
   =====================================================================
   Rosado para las niñas, azul para los niños. Sirve para encontrar a
   quien se busca de un vistazo en un aula de treinta.

   Importante: el género pinta la tarjeta y el retrato; la asistencia
   sigue marcandose con la cinta de arriba y con el botón elegido, que
   son señales mas fuertes. Si las dos cosas usaran el mismo sitio, la
   docente no sabria cual esta leyendo.
   ===================================================================== */

.ficha--nina{
  --genero:#D6337C;
  --genero-claro:#FDF1F7;
  --genero-borde:rgba(214,51,124,.26);
}
.ficha--nino{
  --genero:#1F6FD0;
  --genero-claro:#EFF5FD;
  --genero-borde:rgba(31,111,208,.26);
}
/* Sin dato de sexo en la ficha: se queda como estaba */
.ficha--neutro{
  --genero:#64748B;
  --genero-claro:#F8FAFC;
  --genero-borde:rgba(100,116,139,.22);
}

.ficha--nina,
.ficha--nino,
.ficha--neutro{
  background:linear-gradient(180deg,#fff 0%,var(--genero-claro) 100%);
  border-color:var(--genero-borde);
}

/* El halo de detras del retrato pasa a ser del genero */
.ficha--nina::after,
.ficha--nino::after,
.ficha--neutro::after{
  background:radial-gradient(closest-side, var(--genero), transparent);
  opacity:.12;
}

/* Retrato: aro y fondo de las iniciales */
.ficha--nina .ficha__retrato img,
.ficha--nina .ficha__inicial,
.ficha--nino .ficha__retrato img,
.ficha--nino .ficha__inicial,
.ficha--neutro .ficha__retrato img,
.ficha--neutro .ficha__inicial{
  box-shadow:
    0 0 0 2px var(--genero),
    0 8px 18px -10px color-mix(in srgb, var(--genero) 70%, transparent);
}
.ficha--nina .ficha__inicial,
.ficha--nino .ficha__inicial,
.ficha--neutro .ficha__inicial{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--genero) 16%, white),
    color-mix(in srgb, var(--genero) 26%, white));
  color:color-mix(in srgb, var(--genero) 80%, black);
}

/* El numero de orden, con el mismo color */
.ficha--nina .ficha__orden,
.ficha--nino .ficha__orden,
.ficha--neutro .ficha__orden{
  border-color:var(--genero-borde);
  color:var(--genero);
}

/* El boton de la camara, a juego */
.ficha--nina .ficha__camara,
.ficha--nino .ficha__camara{
  background:linear-gradient(160deg,
    var(--genero),
    color-mix(in srgb, var(--genero) 75%, black));
}

/* La falta ya no pinta toda la tarjeta de rojo: eso taparia el color
   del genero. Se reconoce por la cinta roja, el boton marcado y el
   retrato en gris. */
.ficha--falta.ficha--nina,
.ficha--falta.ficha--nino,
.ficha--falta.ficha--neutro{
  background:linear-gradient(180deg,#fff 0%,var(--genero-claro) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(192,57,43,.18),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(6,34,68,.05),
    0 16px 30px -22px rgba(6,34,68,.5);
}
.ficha--falta .ficha__retrato img{filter:grayscale(.6);}

/* Navegadores sin color-mix: un solo tono, que igual se entiende */
@supports not (background: color-mix(in srgb, red 50%, white)){
  .ficha--nina .ficha__inicial{background:#FBE4EF;color:#A8285F;}
  .ficha--nino .ficha__inicial{background:#E3EEFB;color:#17549E;}
  .ficha--neutro .ficha__inicial{background:#EFF3F8;color:#4A5768;}
  .ficha--nina .ficha__camara{background:#D6337C;}
  .ficha--nino .ficha__camara{background:#1F6FD0;}
}


/* =====================================================================
   REJILLAS DE DOS COLUMNAS
   =====================================================================
   Estas medidas estaban escritas a mano dentro de cada vista y por eso
   no se enteraban del telefono: la columna de al lado conservaba sus
   280px y la pagina quedaba descuadrada. Ahora estan aqui, con su regla
   para pantalla chica.
   ===================================================================== */

.rejilla--lado{
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  gap:20px;
}
.rejilla--editor{
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:20px;
}

@media (max-width:900px){
  .rejilla--lado,
  .rejilla--editor{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* Red de seguridad: si en alguna vista queda una rejilla con las
   columnas escritas a mano, en el telefono igual se pone en una sola.
   Vale la pena el !important: es la unica forma de ganarle a un style
   escrito en la etiqueta. */
@media (max-width:760px){
  .rejilla[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
}


/* =====================================================================
   LA BARRA DE GUARDAR, AL FINAL DE LA LISTA
   =====================================================================
   Estaba pegada a la pantalla y quedaba encima de las tarjetas. Ahora
   se queda donde termina la lista, que es donde la docente la busca:
   marca a los treinta y guarda.
   ===================================================================== */

.barra-guardar,
.app--dock .barra-guardar{
  position:static;
  width:auto;
  margin:2px 0 0;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--linea);
  background:linear-gradient(180deg,#fff,#F7FAFD);
  backdrop-filter:none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(6,34,68,.05),
    0 16px 30px -24px rgba(6,34,68,.5);
}

/* Los botones a la derecha, que es donde se espera el que confirma */
.barra-guardar .btn{margin-left:0;}
.barra-guardar > .btn:first-of-type{margin-left:auto;}

@media (max-width:760px){
  .barra-guardar,
  .app--dock .barra-guardar{
    padding:12px;
    margin-bottom:0;
  }
  .barra-guardar > .btn:first-of-type{margin-left:0;}
}


/* --- Listas sin encabezado (comunicados y parecidas) ----------------- */

@media (max-width:620px){
  .app .tabla--apilada--simple td{
    display:block;
    /* Los anchos venian escritos en la etiqueta; en el telefono estorban */
    width:auto !important;
    text-align:left;
    padding:3px 0;
    border:0;
  }
  .app .tabla--apilada--simple td::before{display:none;}
  .app .tabla--apilada--simple td + td{border-top:0;}
  .app .tabla--apilada--simple td:first-child{padding-bottom:7px;}
  .app .tabla--apilada--simple td.acciones{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding-top:9px;
  }
  .app .tabla--apilada--simple td.acciones > div{margin:0 !important;}
  .app .tabla--apilada--simple td.acciones .btn{margin-left:auto;}
}

/* Chapa con el icono del tipo de comunicado. Estaba escrita dentro de
   la etiqueta y el icono salia negro y del tamaño de la chapa. */
.icono-chapa{
  width:34px;height:34px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:10px;
  background:linear-gradient(150deg,
    rgba(var(--azul-medio-rgb, 21,101,192), .14),
    rgba(var(--turquesa-rgb, 0,180,216), .14));
  color:var(--azul-medio);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.icono-chapa svg{width:18px;height:18px;fill:currentColor;}


/* =====================================================================
   VENTANA DE OPCIONES DEL REPORTE
   ===================================================================== */

.modal--ancho .modal__caja{max-width:720px;width:100%;}
.modal--ancho .modal__cuerpo{max-height:min(62vh, 560px);overflow-y:auto;}

.modal__pie--formatos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.modal__pie--formatos .acciones-fila{margin-left:auto;}

/* --- Los cuatro periodos --------------------------------------------- */

.periodos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:10px;
  margin-bottom:14px;
}

.periodo input{position:absolute;opacity:0;width:0;height:0;}
.periodo__caja{
  display:block;
  height:100%;
  padding:11px 13px;
  border:1.5px solid var(--linea);
  border-radius:13px;
  background:linear-gradient(180deg,#fff,#FBFDFF);
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(6,34,68,.05);
  cursor:pointer;
  transition:var(--transicion);
}
.periodo__caja:hover{border-color:var(--azul-medio);transform:translateY(-2px);}
.periodo__caja strong{display:block;font-size:14.5px;color:var(--tinta);}
.periodo__caja span{display:block;font-size:12.3px;color:var(--gris-claro);margin-top:2px;}
.periodo input:checked + .periodo__caja{
  border-color:var(--azul-medio);
  background:linear-gradient(180deg,#fff,var(--info-suave));
  box-shadow:inset 0 1px 0 #fff, 0 10px 20px -12px var(--azul-medio);
}
.periodo input:checked + .periodo__caja strong{color:var(--azul);}
.periodo input:focus-visible + .periodo__caja{outline:3px solid var(--turquesa);outline-offset:2px;}

/* --- Lo que se elige debajo ------------------------------------------ */

.eleccion{
  padding:13px 14px;
  border:1px dashed rgba(var(--azul-rgb, 11,60,125), .22);
  border-radius:14px;
  background:var(--fondo);
  transition:border-color var(--transicion), background var(--transicion);
}
/* Cuando se envia sin elegir ninguno */
.eleccion--falta{
  border-color:var(--alerta);
  border-style:solid;
  background:var(--alerta-suave);
}

.eleccion__titulo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:13px;
  font-weight:700;
  color:var(--gris);
}
.enlace-chico{
  margin-left:auto;
  border:0;
  background:none;
  padding:2px 4px;
  font:600 12.5px inherit;
  color:var(--azul-medio);
  cursor:pointer;
  border-radius:6px;
}
.enlace-chico:hover{background:var(--info-suave);}

.eleccion__lista{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px;
}
.eleccion__lista--larga{max-height:230px;overflow-y:auto;padding-right:4px;}

.casilla{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid var(--linea);
  border-radius:11px;
  background:#fff;
  cursor:pointer;
  transition:var(--transicion);
}
.casilla:hover{border-color:var(--azul-medio);}
.casilla input{
  width:17px;height:17px;
  flex:none;
  accent-color:var(--azul-medio);
  cursor:pointer;
}
.casilla strong{display:block;font-size:13.8px;font-weight:600;color:var(--tinta);}
.casilla small{display:block;font-size:11.5px;color:var(--gris-claro);}
.casilla:has(input:checked){
  border-color:var(--azul-medio);
  background:var(--info-suave);
}

@media (max-width:620px){
  .modal--ancho .modal__cuerpo{max-height:none;}
  .periodos{grid-template-columns:1fr 1fr;gap:8px;}
  .eleccion__lista{grid-template-columns:1fr;}
  .modal__pie--formatos .acciones-fila{margin-left:0;width:100%;}
  .modal__pie--formatos .btn{flex:1;justify-content:center;}
}

@media (max-width:760px){
  /* Para que el cuerpo del modal se pueda encoger y desplazarse hace
     falta min-height:0; sin eso el bloque crece con su contenido y el
     pie con los botones se va fuera de la pantalla. */
  .modal__cuerpo{min-height:0;}
  .modal__caja{max-height:100dvh;}
}

/* Los bloques del periodo (que bimestres, que unidades, que fechas)
   arrancan escondidos solo si hay JavaScript para volver a mostrarlos.
   Sin JavaScript se ven los tres: menos prolijo, pero se puede usar. */
.con-js .eleccion[data-solo]{display:none;}
.con-js .eleccion[data-solo].eleccion--visible{display:block;}


/* --- Casilla suelta dentro de un campo (quitar la foto, etc.) -------- */

.casilla--sola{
  border-style:dashed;
  background:var(--fondo);
}
.casilla--sola strong{display:block;font-size:13.5px;font-weight:600;color:var(--tinta);}
.casilla--sola small{display:block;font-size:12px;color:var(--gris);line-height:1.4;}

/* La foto que ya tiene la cuenta, junto a la casilla para quitarla */
.foto-actual{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
}
.foto-actual img{
  width:62px;height:62px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--linea), 0 8px 18px -12px rgba(6,34,68,.6);
}
.foto-actual .casilla{flex:1;min-width:0;}

/* El boton de quitar, en la ventana de la camara */
.camarilla__quitar{color:var(--alerta);}
.camarilla__quitar svg{fill:currentColor;width:15px;height:15px;}

/* Tarjeta de asistencia sin marcar todavia: gris, para que se note que
   a esa persona nadie la miro aun. */
.ficha--sin-marcar{--tono-ficha:#9AA9BC;}

/* Las unidades, debajo de su bimestre y un paso hacia adentro */
.fila-unidad td{background:rgba(var(--azul-rgb, 11,60,125), .022);font-size:13.5px;}
.fila-unidad td:first-child{padding-left:26px;position:relative;color:var(--gris);}
.fila-unidad__guia{
  position:absolute;
  left:14px;top:50%;
  width:7px;height:7px;
  margin-top:-3px;
  border-radius:50%;
  background:rgba(var(--azul-medio-rgb, 21,101,192), .35);
}

/* Migas y boton Volver, en la misma linea */
.fila-migas{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.fila-migas .migas{margin-bottom:0;}
.boton-volver{margin-left:auto;}
.boton-volver svg{width:15px;height:15px;fill:currentColor;}

@media (max-width:520px){
  /* Se queda a la derecha, donde el pulgar lo alcanza y no se mete
     entre las migas. */
  .fila-migas{gap:8px;}
  .fila-migas .migas{flex:1;min-width:0;}
  .boton-volver{margin-left:auto;flex:none;}
}

/* Elegir entre la camara y un archivo guardado */
.foto-opciones{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:9px;
}
.foto-opciones .btn svg{width:15px;height:15px;fill:currentColor;}

/* Un boton con el atributo hidden tiene que desaparecer: la regla de
   .btn (display:inline-flex) le gana a la del navegador y lo dejaba a
   la vista. Pasaba en las ventanas de camara. */
.camarilla [hidden],
.modal [hidden]{display:none !important;}


/* =====================================================================
   PANTALLA DE ASISTENCIA: TARJETAS SUELTAS Y ACCESOS GRANDES
   =====================================================================
   Las aulas van directamente sobre el fondo. Antes vivían dentro de otra
   tarjeta y se veían cajas dentro de cajas; quitarla dejó más aire y una
   pantalla más corta.
   ===================================================================== */

/* El titulillo que va sobre las tarjetas, sin caja */
.titulo-suelto{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:2px 0 14px;
}
.titulo-suelto strong{
  font-size:17px;
  color:var(--azul);
  letter-spacing:-.01em;
}
.titulo-suelto span{font-size:13.5px;color:var(--gris);}

/* --- Los accesos de abajo -------------------------------------------- */

.accesos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
  margin-top:22px;
}

.acceso-grande{
  --color-acceso:var(--azul-medio);
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 17px;
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .09);
  border-radius:18px;
  background:linear-gradient(180deg,#fff 0%,#FBFDFF 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(6,34,68,.05),
    0 16px 30px -22px rgba(6,34,68,.5);
  color:var(--tinta);
  transition:transform var(--transicion), box-shadow var(--transicion);
}
.acceso-grande:hover{
  color:var(--tinta);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 4px 8px rgba(6,34,68,.06),
    0 24px 40px -22px var(--color-acceso);
}
.acceso-grande:active{transform:translateY(-1px) scale(.995);}

.acceso-grande__icono{
  flex:none;
  width:50px;height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--color-acceso) 82%, white),
    var(--color-acceso) 55%,
    color-mix(in srgb, var(--color-acceso) 80%, black));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 20px -10px var(--color-acceso);
}
.acceso-grande__icono svg{width:24px;height:24px;fill:currentColor;}

.acceso-grande__texto{min-width:0;}
.acceso-grande__texto strong{
  display:block;
  font-size:16px;
  color:var(--azul);
  line-height:1.25;
}
.acceso-grande__texto span{
  display:block;
  font-size:12.8px;
  color:var(--gris);
  line-height:1.35;
}

.acceso-grande--lector{--color-acceso:#1565C0;}
.acceso-grande--resumen{--color-acceso:#0F9B8E;}
.acceso-grande--reportes{--color-acceso:#B0721A;}

@supports not (background: color-mix(in srgb, red 50%, white)){
  .acceso-grande__icono{background:var(--color-acceso);}
}

/* --- La fecha, dentro de la hoja de asistencia ----------------------- */

.barra-fecha{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
  padding:13px 20px;
  border-bottom:1px solid var(--linea);
  background:linear-gradient(180deg,#FBFDFF,#F6FAFE);
}
.barra-fecha label{
  font-size:13px;
  font-weight:600;
  color:var(--gris);
}
.barra-fecha input[type=date]{
  padding:8px 11px;
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .16);
  border-radius:10px;
  background:#fff;
  font:14.5px inherit;
}

@media (max-width:620px){
  .accesos{grid-template-columns:1fr;gap:11px;}
  .acceso-grande{padding:14px;}
  .barra-fecha{padding:12px 15px;}
  .barra-fecha input[type=date]{flex:1;min-width:150px;}
}


/* =====================================================================
   PANTALLA DE ACCESO
   =====================================================================
   Un solo fondo azul y la caja al centro. Antes eran dos mitades, una
   azul con textos y otra blanca con el formulario; en el telefono la
   mitad azul empujaba el formulario fuera de la pantalla y habia que
   desplazarse para escribir.

   Estas reglas van al final a proposito: reemplazan a las de arriba.
   ===================================================================== */

.acceso{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:28px 18px;
  grid-template-columns:none;   /* anula la rejilla de dos mitades */
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(760px 520px at 12% -10%, rgba(var(--turquesa-rgb, 0,180,216), .40), transparent 62%),
    radial-gradient(680px 520px at 100% 108%, rgba(var(--azul-medio-rgb, 21,101,192), .55), transparent 60%),
    linear-gradient(160deg, var(--azul-oscuro) 0%, var(--azul) 58%, var(--azul-medio) 128%);
}

/* Dos circunferencias apenas visibles, para que el azul no sea plano */
.acceso::before,
.acceso::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.acceso::before{width:620px;height:620px;top:-220px;right:-180px;}
.acceso::after{width:460px;height:460px;bottom:-170px;left:-140px;}

/* --- La caja del centro ---------------------------------------------- */

.acceso__caja{
  position:relative;
  z-index:2;
  width:100%;
  max-width:400px;
  padding:34px 32px 28px;
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:
    inset 0 1px 0 #fff,
    0 30px 70px -30px rgba(0,0,0,.55),
    0 2px 8px -4px rgba(0,0,0,.25);
  text-align:center;
}

.acceso__insignia{
  width:82px;height:82px;
  margin:0 auto 16px;
  object-fit:contain;
}

.acceso__caja h1{
  font-size:23px;
  line-height:1.25;
  margin:0 0 4px;
  color:var(--azul);
  letter-spacing:-.01em;
}

.acceso__colegio{
  margin:0 0 26px;
  font-size:14px;
  color:var(--gris);
  line-height:1.4;
}

/* Los campos, alineados a la izquierda aunque la caja este centrada */
.acceso__caja form{text-align:left;}
.acceso__caja .campo{margin-bottom:14px;}
.acceso__caja .btn--grande{margin-top:6px;}

.acceso__ayuda{
  margin:20px 0 0;
  padding-top:16px;
  border-top:1px solid var(--linea);
  font-size:12.8px;
  line-height:1.5;
  color:var(--gris-claro);
}

.acceso__volver{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-size:13.5px;
  color:var(--gris);
}
.acceso__volver svg{width:15px;height:15px;fill:currentColor;flex:none;}
.acceso__volver:hover{color:var(--azul-medio);}

.acceso__firma{
  position:relative;
  z-index:2;
  margin:0;
  font-size:12.5px;
  color:rgba(255,255,255,.62);
  letter-spacing:.04em;
}

/* Los avisos de error, dentro de la caja */
.acceso__caja .aviso{
  text-align:left;
  margin-bottom:18px;
  font-size:13.5px;
}

@media (max-width:420px){
  .acceso{padding:20px 14px;}
  .acceso__caja{padding:28px 22px 24px;border-radius:20px;}
  .acceso__insignia{width:70px;height:70px;}
  .acceso__caja h1{font-size:21px;}
}


/* =====================================================================
   TARJETA PLEGABLE
   =====================================================================
   Para los cuadros informativos que no hacen falta siempre a la vista.
   Es un <details> nativo: abre y cierra sin JavaScript.
   ===================================================================== */

.tarjeta--plegable summary{
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.tarjeta--plegable summary::-webkit-details-marker{display:none;}
.tarjeta--plegable summary:hover{background:linear-gradient(180deg,#F8FBFE,#F2F7FD);}
.tarjeta--plegable summary:focus-visible{outline:3px solid var(--turquesa);outline-offset:-3px;}

/* Cerrada, la cabecera no necesita raya abajo */
.tarjeta--plegable:not([open]) summary{border-bottom:0;}

/* La flecha que indica que hay algo mas */
.tarjeta__flecha{
  margin-left:auto;
  width:26px;height:26px;
  flex:none;
  position:relative;
  border-radius:8px;
  background:rgba(var(--azul-medio-rgb, 21,101,192), .10);
  transition:transform var(--transicion), background var(--transicion);
}
.tarjeta__flecha::before{
  content:"";
  position:absolute;
  top:9px;left:9px;
  width:7px;height:7px;
  border-right:2px solid var(--azul-medio);
  border-bottom:2px solid var(--azul-medio);
  transform:rotate(45deg);
}
.tarjeta--plegable[open] .tarjeta__flecha{transform:rotate(180deg);}
.tarjeta--plegable summary:hover .tarjeta__flecha{background:rgba(var(--azul-medio-rgb, 21,101,192), .18);}

/* El recordatorio de la contraseña, con sus dos acciones */
.recordatorio-clave__acciones{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}
.recordatorio-clave__acciones form{margin:0;}
.recordatorio-clave__acciones .btn--plano{color:var(--aviso);}
.recordatorio-clave__acciones .btn--plano:hover{background:rgba(176,114,26,.12);}

@media (max-width:620px){
  .recordatorio-clave__acciones{margin-left:0;width:100%;}
  .recordatorio-clave__acciones .btn{flex:1;justify-content:center;}
}


/* =====================================================================
   MENSAJERÍA
   =====================================================================
   Dos columnas en la computadora (conversaciones | conversación abierta)
   y una sola en el teléfono, como WhatsApp: la lista, y al tocar una,
   la conversación a pantalla completa con su flecha para volver.
   ===================================================================== */

.chat{
  --chat-alto:calc(100dvh - 210px);
  --chat-mio:#1565C0;
  --chat-mio-2:#1E7BE0;
  display:grid;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr);
  height:max(520px, var(--chat-alto));
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .10);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(6,34,68,.05),
    0 20px 40px -28px rgba(6,34,68,.5);
}

/* --- Avatares --------------------------------------------------------- */

.avatar{
  width:46px;height:46px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  background:linear-gradient(150deg,#E8F0FB,#D6E4F6);
}
.avatar--chico{width:38px;height:38px;}
.avatar--iniciales{
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:700;
  color:var(--azul-medio);
}
.avatar--chico.avatar--iniciales{font-size:13px;}

/* --- La lista --------------------------------------------------------- */

.chat__lista{
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--linea);
  background:linear-gradient(180deg,#FBFDFF,#F7FAFD);
}

.chat__lista-cabecera{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 16px 10px;
}
.chat__lista-cabecera h2{margin:0;font-size:17px;flex:1;}
.chat__lista-cabecera .btn svg{width:15px;height:15px;fill:currentColor;}

.chat__buscar{
  position:relative;
  margin:0 14px 10px;
}
.chat__buscar svg{
  position:absolute;
  left:12px;top:50%;
  width:17px;height:17px;
  margin-top:-8.5px;
  fill:var(--gris-claro);
  pointer-events:none;
}
.chat__buscar input{
  width:100%;
  padding:9px 12px 9px 37px;
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .12);
  border-radius:12px;
  background:#fff;
  font:14px inherit;
}
.chat__buscar input:focus{outline:none;border-color:var(--azul-medio);box-shadow:0 0 0 3px rgba(21,101,192,.14);}

.chat__novedades{
  margin:0 14px 8px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--info-suave);
  font-size:13px;
  text-align:center;
}
.chat__novedades a{font-weight:600;}

.chat__conversaciones{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:0 8px 12px;
}

.chat__item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 9px;
  border-radius:14px;
  color:var(--tinta);
  transition:background .15s ease;
}
.chat__item:hover{background:rgba(var(--azul-medio-rgb, 21,101,192), .06);color:var(--tinta);}
.chat__item.activo{background:rgba(var(--azul-medio-rgb, 21,101,192), .11);}

.chat__item-texto{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat__item-texto strong{
  font-size:14.5px;
  font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat__item-detalle{
  font-size:11.5px;
  color:var(--gris-claro);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat__item-ultimo{
  font-size:13px;
  color:var(--gris);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;
}
.chat__item-ultimo b{font-weight:600;color:var(--gris-claro);}

.chat__item.con-novedad strong{font-weight:750;}
.chat__item.con-novedad .chat__item-ultimo{color:var(--tinta);font-weight:600;}

.chat__item-lado{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  flex:none;
}
.chat__item-lado time{font-size:11.5px;color:var(--gris-claro);}
.chat__item.con-novedad time{color:#1B9E5A;font-weight:600;}

.chat__insignia{
  min-width:21px;height:21px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#1B9E5A;
  color:#fff;
  font-size:11.5px;
  font-weight:700;
}

.chat__vacio{
  padding:34px 18px;
  text-align:center;
  color:var(--gris);
}
.chat__vacio svg{width:42px;height:42px;fill:var(--linea-fuerte);margin-bottom:8px;}
.chat__vacio strong{display:block;color:var(--tinta);margin-bottom:4px;}
.chat__vacio p{font-size:13.5px;margin:0;}

/* --- La conversación -------------------------------------------------- */

.chat__hilo{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  /* Un fondo apenas punteado, como el de las apps de chat */
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--azul-medio-rgb, 21,101,192), .045) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(var(--turquesa-rgb, 0,180,216), .045) 0 2px, transparent 3px),
    #F2F6FB;
  background-size:38px 38px, 46px 46px, auto;
}

.chat__hilo-cabecera{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 16px;
  border-bottom:1px solid var(--linea);
  background:rgba(255,255,255,.96);
}
.chat__hilo-quien{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat__hilo-quien strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat__hilo-quien span{font-size:12px;color:var(--gris);}
.chat__hilo-cabecera form{margin:0;}

.chat__atras{
  display:none;
  width:36px;height:36px;
  place-items:center;
  border-radius:50%;
  color:var(--azul-medio);
}
.chat__atras svg{width:20px;height:20px;fill:currentColor;}
.chat__atras:hover{background:var(--info-suave);}

.chat__mensajes{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:16px 18px 10px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.chat__dia{
  display:flex;
  justify-content:center;
  margin:12px 0 8px;
}
.chat__dia span{
  padding:4px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 2px rgba(6,34,68,.08);
  font-size:11.5px;
  font-weight:600;
  color:var(--gris);
}

.chat__primero{
  margin:auto;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.9);
  color:var(--gris);
  font-size:13.5px;
}

/* --- Los globos ------------------------------------------------------- */

.burbuja{
  position:relative;
  max-width:min(76%, 520px);
  padding:8px 11px 5px;
  border-radius:16px;
  font-size:14.5px;
  line-height:1.45;
  box-shadow:0 1px 1.5px rgba(6,34,68,.12);
  overflow-wrap:anywhere;
}
.burbuja--suya{
  align-self:flex-start;
  background:#fff;
  color:var(--tinta);
  border-top-left-radius:5px;
}
.burbuja--mia{
  align-self:flex-end;
  background:linear-gradient(160deg,var(--chat-mio-2),var(--chat-mio));
  color:#fff;
  border-top-right-radius:5px;
}

/* Los globos seguidos del mismo lado van más juntos */
.burbuja--suya + .burbuja--suya,
.burbuja--mia + .burbuja--mia{margin-top:-1px;}

.burbuja__pie{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:4px;
  margin-top:2px;
  font-size:10.5px;
  opacity:.72;
}
.burbuja--mia .burbuja__pie{color:rgba(255,255,255,.9);opacity:1;}
.burbuja__visto{font-size:11px;letter-spacing:-2px;}
.burbuja__visto.leido{color:#7FE3FF;}

.burbuja--nueva{animation:burbuja-entra .22s ease-out;}
@keyframes burbuja-entra{
  from{opacity:0;transform:translateY(6px) scale(.98);}
  to{opacity:1;transform:none;}
}

/* --- Escribir --------------------------------------------------------- */

.chat__escribir{
  display:flex;
  align-items:flex-end;
  gap:9px;
  padding:10px 12px 12px;
  border-top:1px solid var(--linea);
  background:rgba(255,255,255,.96);
}
.chat__escribir textarea{
  flex:1;
  min-height:44px;
  max-height:150px;
  padding:11px 15px;
  border:1px solid rgba(var(--azul-rgb, 11,60,125), .14);
  border-radius:22px;
  background:#F7FAFD;
  font:15px/1.4 inherit;
  resize:none;
  overflow-y:auto;
}
.chat__escribir textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--azul-medio);
  box-shadow:0 0 0 3px rgba(21,101,192,.12);
}

.chat__enviar{
  width:46px;height:46px;
  flex:none;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:linear-gradient(160deg,#22B368,#1B9E5A 55%,#15804A);
  color:#fff;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -8px #1B9E5A;
  transition:transform .12s ease, opacity .12s ease;
}
.chat__enviar svg{width:21px;height:21px;fill:currentColor;margin-left:3px;}
.chat__enviar:hover{transform:scale(1.05);}
.chat__enviar:active{transform:scale(.95);}
.chat__enviar:disabled{opacity:.55;cursor:wait;transform:none;}

.chat__error{
  margin:0;
  padding:7px 16px 10px;
  background:rgba(255,255,255,.96);
  color:var(--alerta);
  font-size:13px;
}
.chat__cerrado{
  margin:0;
  padding:14px 16px;
  border-top:1px solid var(--linea);
  background:#fff;
  color:var(--gris);
  font-size:13.5px;
  text-align:center;
}

/* --- Sin conversación abierta ----------------------------------------- */

.chat__bienvenida{
  margin:auto;
  max-width:320px;
  padding:24px;
  text-align:center;
  color:var(--gris);
}
.chat__bienvenida-icono{
  width:74px;height:74px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(150deg,#8E6BFF,#7C4DFF 55%,#5B2FE0);
  box-shadow:0 14px 26px -12px #7C4DFF;
}
.chat__bienvenida-icono svg{width:36px;height:36px;fill:#fff;}
.chat__bienvenida strong{display:block;font-size:17px;color:var(--tinta);margin-bottom:6px;}
.chat__bienvenida p{font-size:14px;margin:0;}

/* --- Elegir a quién escribirle ---------------------------------------- */

.contactos .chat__buscar--modal{margin:0 0 10px;}
.contactos__regla{
  margin:0 0 14px;
  font-size:12.5px;
  color:var(--gris);
}
.contactos__grupo{margin-bottom:14px;}
.contactos__grupo h4{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gris);
}
.contactos__grupo h4 small{font-weight:600;color:var(--gris-claro);}

.contacto{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 9px;
  border-radius:12px;
  color:var(--tinta);
}
.contacto:hover{background:var(--info-suave);color:var(--tinta);}
.contacto span{display:flex;flex-direction:column;min-width:0;}
.contacto strong{font-size:14px;font-weight:600;}
.contacto small{font-size:12px;color:var(--gris);}
.contactos__nada{text-align:center;color:var(--gris);font-size:13.5px;}

/* El contador de mensajes sin leer, en el menú */
.contador-chat{
  min-width:18px;height:18px;
  padding:0 5px;
  display:inline-grid;
  place-items:center;
  border-radius:9px;
  background:#1B9E5A;
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  line-height:1;
}

/* --- En el teléfono: una sola columna --------------------------------- */

@media (max-width:760px){
  .chat{
    grid-template-columns:1fr;
    height:auto;
    border-radius:18px;
  }

  /* Sin conversación: la lista ocupa todo */
  .chat:not(.chat--abierto) .chat__hilo{display:none;}
  .chat:not(.chat--abierto) .chat__lista{border-right:0;}
  .chat:not(.chat--abierto) .chat__conversaciones{max-height:none;overflow:visible;}

  /* Con conversación: la conversación a pantalla completa */
  .chat--abierto .chat__lista{display:none;}
  .chat--abierto{
    height:calc(100dvh - 190px);
    min-height:420px;
  }
  .chat__atras{display:grid;}

  .burbuja{max-width:84%;}
  .chat__mensajes{padding:12px 11px 8px;}
}

/* Estudiantes que aparecen en "Nuevo mensaje" pero aún no tienen cuenta */
.contacto--apagado{opacity:.55;cursor:default;filter:grayscale(.6);}
.contacto--apagado:hover{background:transparent;color:inherit;}
.contacto--apagado small{color:#B26A00;}
.contactos__aviso{
  display:flex;gap:11px;align-items:flex-start;
  margin:0 0 14px;padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,#FFF8E6,#FFF1D0);
  border:1px solid #F5D48A;
  color:#6B4A00;font-size:13.4px;line-height:1.45;
}
.contactos__aviso > svg{width:20px;height:20px;flex:none;fill:#D98E04;margin-top:1px;}
.contactos__aviso strong{display:block;color:#5A3D00;margin-bottom:2px;}
.contactos__aviso form{margin-top:9px;}

/* =====================================================================
   AVANCE de procesos largos (crear cuentas en lote, etc.)
   ===================================================================== */
.avance{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;padding:16px;
  background:rgba(6,24,52,.55);
  backdrop-filter:blur(3px);
  animation:avanceEntra .18s ease-out;
}
@keyframes avanceEntra{from{opacity:0}to{opacity:1}}
.avance__caja{
  width:min(440px,100%);
  background:#fff;border-radius:20px;padding:24px 24px 22px;
  box-shadow:0 30px 60px -20px rgba(6,24,52,.55);
}
.avance__titulo{margin:0 0 6px;font-size:18px;color:var(--azul-oscuro,#0B2A55);}
.avance__texto{margin:0 0 12px;font-size:14.5px;color:var(--gris,#5B6E85);font-variant-numeric:tabular-nums;}
.avance__barra{
  height:14px;border-radius:999px;overflow:hidden;
  background:#E6EDF6;box-shadow:inset 0 1px 2px rgba(6,24,52,.12);
}
.avance__relleno{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#1565C0,#2E9BF0);
  background-size:40px 40px;
  transition:width .35s ease;
  position:relative;
}
/* Rayas en movimiento mientras trabaja: se nota que no se colgo */
.avance:not(.avance--hecho):not(.avance--error) .avance__relleno{
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.22) 75%,transparent 75%),
    linear-gradient(90deg,#1565C0,#2E9BF0);
  background-size:28px 28px,100% 100%;
  animation:avanceRayas .8s linear infinite;
}
@keyframes avanceRayas{from{background-position:0 0,0 0}to{background-position:28px 0,0 0}}
.avance--hecho .avance__relleno{background:linear-gradient(90deg,#1E9E5A,#34C47C);}
.avance--error .avance__relleno{background:linear-gradient(90deg,#C62828,#EF5350);}
.avance__nota{margin:12px 0 0;font-size:12.8px;color:#8A6400;}
.avance__detalle{margin-top:14px;font-size:13.8px;line-height:1.5;color:var(--tinta,#1B2B41);}
.avance__detalle p{margin:0 0 6px;}
.avance__listo{margin-top:12px;width:100%;justify-content:center;}
@media (prefers-reduced-motion:reduce){
  .avance,.avance__relleno{animation:none !important;transition:none;}
}
.avance [hidden]{display:none !important;}

/* =====================================================================
   CONCLUSIONES DESCRIPTIVAS en el registro de notas
   Las notas B y C llevan al lado un cuadro para la conclusion. Ambar
   mientras falta; el boton de la barra la llena desde el banco.
   ===================================================================== */

.barra-conclusiones{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 22px 14px;padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#F4F0FF,#EEF5FF);
  border:1px solid rgba(91,62,196,.14);
}
.barra-conclusiones__texto{display:flex;align-items:center;gap:11px;flex:1 1 320px;min-width:0;font-size:13.6px;color:var(--tinta);}
.barra-conclusiones__texto > svg{width:22px;height:22px;flex:none;fill:#6A4BD6;}
.barra-conclusiones__texto strong{display:block;font-size:14.2px;color:#3D2A8C;}
.barra-conclusiones__texto .pastilla{vertical-align:1px;}
.barra-conclusiones .btn[disabled]{opacity:.5;cursor:default;}
.barra-conclusiones__aviso{
  margin:-4px 22px 14px;padding:10px 14px;border-radius:12px;
  background:#EAF7EF;border:1px solid #BfE6CD;color:#145C36;font-size:13.4px;line-height:1.45;
}

/* Con cuadros de conclusion, las columnas de competencia se ensanchan */
.tabla-notas td.centrado{vertical-align:top;}
.tabla-notas.ver-conclusiones td.celda--con-conclusion{min-width:250px;}

.conclusion{margin-top:8px;text-align:left;}
.conclusion textarea{
  display:block;width:100%;min-width:220px;min-height:74px;resize:vertical;
  padding:8px 10px;border-radius:10px;
  border:1px solid #D5DEEA;background:#fff;
  font:inherit;font-size:12.8px;line-height:1.45;color:var(--tinta);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.conclusion textarea:focus{outline:none;border-color:#6A4BD6;box-shadow:0 0 0 3px rgba(106,75,214,.16);}
.conclusion--falta textarea{background:#FFF9EC;border-color:#F0C66B;}
.conclusion--falta textarea::placeholder{color:#9A7420;}
.conclusion__sugerir{
  margin-top:5px;padding:3px 9px;border:0;border-radius:999px;
  background:transparent;color:#5B3EC4;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.conclusion__sugerir:hover{background:#F0EBFF;}
.conclusion--leida{
  margin:8px 0 0;padding:8px 10px;border-radius:10px;
  background:#F6F8FB;border:1px solid var(--linea);
  font-size:12.6px;line-height:1.45;color:#34465C;
}

@media (max-width:760px){
  .barra-conclusiones{margin:0 12px 12px;}
  .barra-conclusiones .btn{width:100%;justify-content:center;}
  .barra-conclusiones__aviso{margin:-2px 12px 12px;}
  /* En el telefono la conclusion va debajo de la nota, a todo lo ancho */
  .tabla-notas td.centrado{flex-wrap:wrap;}
  .tabla-notas.ver-conclusiones td.celda--con-conclusion{min-width:0;}
  .tabla-notas .conclusion{flex:1 1 100%;margin-top:4px;}
  .tabla-notas .conclusion textarea{min-width:0;font-size:14px;}
}

@media print{
  .conclusion textarea{border:0;background:none;min-height:0;padding:0;resize:none;}
  .conclusion__sugerir{display:none;}
}

/* Banco de conclusiones (Gestión académica) */
.banco-conclusion__niveles{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.banco-conclusion__niveles label{display:flex;align-items:center;gap:8px;}
.banco-conclusion__niveles textarea{min-height:110px;line-height:1.5;}
.banco-conclusion__acciones{justify-content:flex-end;margin:4px 0 24px;gap:10px;flex-wrap:wrap;}
@media (max-width:760px){
  .banco-conclusion__niveles{grid-template-columns:1fr;}
  .banco-conclusion__acciones > *{flex:1 1 100%;}
  .banco-conclusion__acciones .btn{width:100%;justify-content:center;}
}

/* --- Registro liviano: el lapiz junto a la nota y la ventanita --------- */

/* Las conclusiones no se ven dentro de la tabla, salvo con "Ver conclusiones" */
.tabla-notas .conclusion{display:none;}
.tabla-notas.ver-conclusiones .conclusion:not([hidden]){display:block;}

.nota-celda{display:inline-flex;align-items:center;gap:6px;position:relative;}
.nota-celda__concl{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:1px solid transparent;cursor:pointer;position:relative;
  transition:transform .12s, box-shadow .15s;
}
.nota-celda__concl svg{width:15px;height:15px;fill:currentColor;}
.nota-celda__concl:hover{transform:scale(1.08);}
.nota-celda__concl:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(106,75,214,.28);}
.nota-celda__concl.falta{background:#FFF4DC;border-color:#F0C66B;color:#B7791F;}
.nota-celda__concl.falta::after{      /* puntito de "falta" */
  content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:#F59E0B;box-shadow:0 0 0 2px #fff;
}
.nota-celda__concl.lista{background:#E6F6EC;border-color:#A8DDBC;color:#17804A;}
.nota-celda__llamada{font-size:10px;font-weight:700;color:var(--gris);}
.tabla-notas td.celda--editando{background:#F4F0FF !important;box-shadow:inset 0 0 0 2px rgba(106,75,214,.35);}

.pastilla--boton{border:0;cursor:pointer;font:inherit;font-size:12px;}
.pastilla--boton:hover{filter:brightness(.96);}

.panel-conclusion{
  position:fixed;z-index:320;width:min(400px,calc(100vw - 24px));
  background:#fff;border-radius:16px;padding:14px 14px 12px;
  border:1px solid rgba(91,62,196,.18);
  box-shadow:0 24px 50px -18px rgba(6,24,52,.45), 0 2px 6px rgba(6,24,52,.08);
  animation:panelConclusionEntra .14s ease-out;
}
@keyframes panelConclusionEntra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.panel-conclusion__cabecera{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.panel-conclusion__cabecera .nota{flex:none;margin-top:2px;}
.panel-conclusion__quien{flex:1;min-width:0;display:flex;flex-direction:column;}
.panel-conclusion__quien strong{font-size:14px;color:var(--tinta);}
.panel-conclusion__quien span{font-size:12.3px;color:var(--gris);line-height:1.35;}
.panel-conclusion__cerrar{
  flex:none;width:30px;height:30px;border:0;border-radius:50%;background:#F1F4F9;
  font-size:20px;line-height:1;color:var(--gris);cursor:pointer;
}
.panel-conclusion__cerrar:hover{background:#E6EBF3;color:var(--tinta);}
.panel-conclusion textarea{
  display:block;width:100%;min-height:130px;resize:vertical;
  padding:10px 12px;border-radius:12px;border:1px solid #D5DEEA;
  font:inherit;font-size:13.6px;line-height:1.5;color:var(--tinta);
}
.panel-conclusion textarea:focus{outline:none;border-color:#6A4BD6;box-shadow:0 0 0 3px rgba(106,75,214,.16);}
.panel-conclusion textarea[readonly]{background:#F7F9FC;}
.panel-conclusion__pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
.panel-conclusion__contador{font-size:12px;color:var(--gris);margin-right:auto;font-variant-numeric:tabular-nums;}
.panel-conclusion__contador.corto{color:#C0392B;font-weight:600;}

@media (max-width:760px){
  /* En el telefono sube desde abajo, a lo ancho, por encima del menu */
  .panel-conclusion{
    left:0 !important;right:0;top:auto !important;bottom:0;width:auto;
    border-radius:20px 20px 0 0;padding:16px 16px calc(14px + env(safe-area-inset-bottom));
    animation:panelConclusionSube .18s ease-out;
  }
  @keyframes panelConclusionSube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .panel-conclusion textarea{font-size:16px;min-height:150px;}
  .panel-conclusion__pie .btn{flex:1 1 auto;justify-content:center;}
  .nota-celda__concl{width:34px;height:34px;}
}

/* --- En papel ----------------------------------------------------------- */
.conclusiones-papel{display:none;}
@media print{
  .tabla-notas .conclusion,
  .nota-celda__concl,
  .panel-conclusion{display:none !important;}
  .nota-celda__llamada:not([hidden]){display:inline;}
  .conclusiones-papel:not([hidden]){display:block;margin:14px 18px 6px;page-break-inside:auto;}
  .conclusiones-papel h3{font-size:13px;margin:0 0 6px;}
  .conclusiones-papel ol{margin:0;padding-left:22px;font-size:10.5px;line-height:1.4;}
  .conclusiones-papel li{margin-bottom:4px;page-break-inside:avoid;}
}
.nota-celda__concl[hidden],.panel-conclusion[hidden]{display:none !important;}
@media (prefers-reduced-motion:reduce){.panel-conclusion{animation:none !important;}}

/* =====================================================================
   EXCEL DEL SIAGIE
   ===================================================================== */
.siagie-listo{border:1px solid rgba(23,128,74,.22);}
.siagie-listo__icono{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg,#1E9E5A,#15804A);box-shadow:0 10px 22px -12px rgba(21,128,74,.8);
}
.siagie-listo__icono svg{width:24px;height:24px;fill:#fff;}
.siagie-cifras{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.siagie-cifras > div{
  flex:1 1 140px;padding:12px 14px;border-radius:14px;background:#F3F8F5;border:1px solid #D6EBDD;
  display:flex;flex-direction:column;
}
.siagie-cifras strong{font-size:24px;line-height:1.1;color:#15804A;}
.siagie-cifras span{font-size:12.5px;color:var(--gris);}
.siagie-descargar{font-size:15px;padding:12px 20px;max-width:100%;}
.siagie-descargar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.siagie-nota{margin:8px 0 16px;}
.siagie-alerta{margin-top:12px;padding:10px 12px;border-radius:12px;background:#FFF6E5;color:#7A5200;}
.siagie-listas{display:grid;gap:8px;margin-top:14px;}
.siagie-listas details,.siagie-como{border:1px solid var(--linea);border-radius:12px;padding:10px 14px;background:#FBFCFE;}
.siagie-listas summary,.siagie-como summary{cursor:pointer;font-weight:600;font-size:13.8px;}
.siagie-listas ul,.siagie-como ul{margin:8px 0 4px;padding-left:20px;font-size:13.4px;line-height:1.55;}
.siagie-pasos{margin:0 0 18px;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.5;}
.siagie-formulario{
  display:grid;gap:12px;padding:16px;border-radius:14px;
  background:linear-gradient(135deg,#F2F8FF,#F6F3FF);border:1px dashed rgba(21,101,192,.3);margin-bottom:14px;
}
.siagie-formulario .btn{justify-self:start;}
@media (max-width:760px){
  .siagie-formulario .btn,.siagie-descargar{width:100%;justify-content:center;justify-self:stretch;}
}

/* Contadores sin nada que contar: se ocultan aunque su estilo diga display */
.dock__contador[hidden],.hoja__contador[hidden],.contador[hidden]{display:none !important;}

/* Confirmar estudiantes que no se reconocieron (Excel del SIAGIE) */
.siagie-confirmar{
  margin-top:16px;padding:16px;border-radius:16px;
  background:linear-gradient(135deg,#FFF9EC,#FFF4E0);border:1px solid #F3D38C;
  display:grid;gap:14px;
}
.siagie-confirmar__cabecera{display:flex;gap:12px;align-items:flex-start;}
.siagie-confirmar__cabecera > svg{width:24px;height:24px;flex:none;fill:#B7791F;margin-top:2px;}
.siagie-confirmar__cabecera strong{display:block;font-size:15px;color:#6B4A00;margin-bottom:3px;}
.siagie-confirmar__cabecera span{font-size:13.2px;line-height:1.5;color:#6B5320;}
.siagie-confirmar__filas{display:grid;gap:10px;}
.siagie-par{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);gap:12px;align-items:center;
  padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #EFE2C4;
}
.siagie-par__excel,.siagie-par__sistema{display:flex;flex-direction:column;gap:4px;min-width:0;}
.siagie-par__excel strong{font-size:14px;overflow-wrap:anywhere;}
.siagie-par__origen{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);}
.siagie-par__flecha{font-size:20px;color:#C9A24A;}
.siagie-par select{width:100%;min-width:0;}
.siagie-par .pastilla{align-self:flex-start;}
.siagie-confirmar > .btn{justify-self:start;}
@media (max-width:760px){
  .siagie-par{grid-template-columns:1fr;}
  .siagie-par__flecha{display:none;}
  .siagie-confirmar > .btn{width:100%;justify-content:center;}
}

/* Registro de notas: todo alineado a la izquierda, en columnas rectas.
   El lapiz guarda su lugar aunque no se vea (notas AD, A o vacias), asi
   la nota queda siempre en la misma posicion en todas las filas. */
.tabla-notas thead th.centrado,
.tabla-notas td.centrado{text-align:left;}
.tabla-notas .nota-celda{display:flex;justify-content:flex-start;}
.tabla-notas .nota-celda__concl[hidden]{display:grid !important;visibility:hidden;pointer-events:none;}