/* =====================================================================
   DISEÑO — Identidad visual de la intranet  ("Manto")
   =====================================================================

   Se carga DESPUES de intranet.css y la ordena: una sola voz visual para
   el administrador (barra lateral) y para docentes, auxiliares y familias
   (menu flotante). No cambia estructura, rutas ni formularios: solo como
   se ven las piezas que ya existen.

   La identidad:
   - Marca: el azul del colegio (configurable en Ajustes > colores). Es el
     color de las acciones principales y de lo que esta activo.
   - Acento: dorado, como el de la medalla de la Virgen Milagrosa. Marca
     lo destacado: la seccion activa, el año en curso, lo nuevo.
   - Fondo claro y limpio, con un velo de color solo arriba.
   - Estados con colores propios y distinguibles (exito, error, aviso,
     informacion), nunca solo por el color: siempre con icono o texto.
   - Tipografia Plus Jakarta Sans: moderna, amplia y muy legible.

   Orden del archivo:
     1. Tokens              6. Formularios
     2. Base                7. Tablas
     3. Estructura          8. Avisos, notificaciones y estados
     4. Botones             9. Modales, menus y hojas
     5. Tarjetas y cifras  10. Panel principal
                           11. Telefono y tablet
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */

:root{
  /* Colores del colegio (llegan de Ajustes; aqui solo se usan) */
  --d-marca: var(--azul);
  --d-primario: var(--azul-medio);
  --d-primario-rgb: var(--azul-medio-rgb, 21,101,192);
  --d-primario-hover: color-mix(in srgb, var(--azul-medio) 86%, #000);
  --d-primario-suave: color-mix(in srgb, var(--azul-medio) 9%, #fff);
  --d-primario-borde: color-mix(in srgb, var(--azul-medio) 24%, #fff);

  /* Acento dorado de la identidad */
  --d-acento: #E0A21B;
  --d-acento-suave: #FDF5E1;
  --d-acento-texto: #8A5B00;

  /* Superficies y texto */
  --d-fondo: #F3F5FA;
  --d-superficie: #FFFFFF;
  --d-superficie-2: #F8FAFC;
  --d-superficie-3: #F1F4F9;
  --d-borde: #E4E8F0;
  --d-borde-fuerte: #CDD5E1;
  --d-texto: #0F172A;
  --d-texto-2: #475569;
  --d-texto-3: #64748B;
  --d-texto-4: #94A3B8;

  /* Estados */
  --d-exito: #0E9F6E;       --d-exito-suave: #ECFDF5;  --d-exito-borde: #A7F3D0;  --d-exito-texto: #047857;
  --d-error: #DC2626;       --d-error-suave: #FEF2F2;  --d-error-borde: #FECACA;  --d-error-texto: #B91C1C;
  --d-aviso: #D97706;       --d-aviso-suave: #FFFBEB;  --d-aviso-borde: #FDE68A;  --d-aviso-texto: #B45309;
  --d-info: #2563EB;        --d-info-suave: #EFF6FF;   --d-info-borde: #BFDBFE;   --d-info-texto: #1D4ED8;

  /* Forma */
  --d-r-xs: 8px;
  --d-r-sm: 10px;
  --d-r: 14px;
  --d-r-lg: 18px;
  --d-r-xl: 24px;

  /* Profundidad: sombras suaves y cortas */
  --d-sombra-1: 0 1px 2px rgba(15,23,42,.05);
  --d-sombra-2: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px -6px rgba(15,23,42,.10);
  --d-sombra-3: 0 12px 32px -12px rgba(15,23,42,.22), 0 2px 6px -2px rgba(15,23,42,.08);
  --d-sombra-4: 0 28px 60px -20px rgba(15,23,42,.35);
  --d-anillo: 0 0 0 4px rgba(var(--d-primario-rgb), .16);

  /* Movimiento: rapido y discreto */
  --d-rapido: .14s cubic-bezier(.2,.8,.2,1);
  --d-medio: .22s cubic-bezier(.2,.8,.2,1);

  --d-fuente: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Los nombres de siempre apuntan a la nueva paleta: asi las pantallas
     con estilos propios (asistencia, chat, carnets...) la heredan. */
  --fondo: var(--d-fondo);
  --panel: var(--d-superficie);
  --tinta: var(--d-texto);
  --gris: var(--d-texto-2);
  --gris-claro: var(--d-texto-4);
  --linea: var(--d-borde);
  --linea-fuerte: var(--d-borde-fuerte);
  --exito: var(--d-exito);   --exito-suave: var(--d-exito-suave);
  --alerta: var(--d-error);  --alerta-suave: var(--d-error-suave);
  --aviso: var(--d-aviso);   --aviso-suave: var(--d-aviso-suave);
  --info: var(--d-info);     --info-suave: var(--d-info-suave);
  --radio: var(--d-r);
  --radio-sm: var(--d-r-sm);
  --sombra: var(--d-sombra-2);
  --sombra-alta: var(--d-sombra-3);
  --transicion: var(--d-medio);
}

@supports not (color: color-mix(in srgb, red 50%, white)){
  :root{
    --d-primario-hover: var(--azul);
    --d-primario-suave: #EEF4FC;
    --d-primario-borde: #C9DAF2;
  }
}

/* =====================================================================
   2. BASE
   ===================================================================== */

body{
  font-family: var(--d-fuente);
  font-size: 15px;
  line-height: 1.55;
  color: var(--d-texto);
  background: var(--d-fondo);
  word-spacing: .06em;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4{color: var(--d-texto); font-weight: 700; letter-spacing: -.018em; line-height: 1.25;}
h1{font-size: 24px;}
h2{font-size: 19px;}
h3{font-size: 16px;}
a{color: var(--d-primario); transition: color var(--d-rapido);}
a:hover{color: var(--d-primario-hover);}
strong,b{font-weight: 700;}
code{font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--d-superficie-3);}
::selection{background: rgba(var(--d-primario-rgb), .18);}

:focus-visible{
  outline: 2px solid var(--d-primario);
  outline-offset: 2px;
  border-radius: var(--d-r-xs);
}

/* Cifras alineadas en tablas, contadores y fechas */
.indicador__valor, table.tabla td.num, .siagie-cifras strong, .contador, .dock__contador{
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   3. ESTRUCTURA
   ===================================================================== */

/* --- El lienzo: fondo claro con un velo de color solo arriba ---------- */
/* Sin isolation en .app: si .app fuera un contexto de apilamiento propio, la
   barra inferior (que vive fuera de .app) quedaria por encima de las
   ventanas modales. El fondo va en el body y el velo en z-index -1. */
body{background: var(--d-fondo);}
.app{position: relative; background: transparent;}
.app::before,
.app--dock::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 440px;
  z-index: -1;
  pointer-events: none;
  transform: none;
  background:
    radial-gradient(760px 320px at 12% -80px, rgba(var(--d-primario-rgb), .16), transparent 70%),
    radial-gradient(620px 300px at 92% -60px, rgba(224,162,27,.13), transparent 70%),
    linear-gradient(180deg, rgba(var(--d-primario-rgb), .05), transparent);
}
.app--dock{background: transparent; isolation: auto;}

/* --- Barra lateral (administrador): un panel claro que flota --------- */
.lateral{
  width: 256px;
  margin: 12px 0 12px 12px;
  height: calc(100vh - 24px);
  top: 12px;
  background: var(--d-superficie);
  color: var(--d-texto-2);
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r-xl);
  box-shadow: var(--d-sombra-2);
}
.lateral::-webkit-scrollbar-thumb{background: var(--d-borde-fuerte);}

.lateral__marca{
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--d-borde);
  color: var(--d-texto);
}
.lateral__marca img{width: 38px; height: 42px;}
.lateral__marca strong{color: var(--d-texto); font-size: 14px; letter-spacing: -.01em;}
.lateral__marca span span,
.lateral__marca > span > span{
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--d-acento-suave);
  color: var(--d-acento-texto);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
}

.lateral__menu{padding: 10px 10px 16px;}
.lateral__grupo{
  padding: 18px 12px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--d-texto-4);
}
.lateral__menu a{
  position: relative;
  gap: 11px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: 11px;
  color: var(--d-texto-2);
  font-size: 14px; font-weight: 550;
}
.lateral__menu a svg{width: 19px; height: 19px; opacity: 1; fill: var(--d-texto-4); transition: fill var(--d-rapido);}
.lateral__menu a:hover{background: var(--d-superficie-3); color: var(--d-texto);}
.lateral__menu a:hover svg{fill: var(--d-texto-2);}
.lateral__menu a.activo{
  background: var(--d-primario-suave);
  color: var(--d-primario);
  font-weight: 700;
  box-shadow: none;
}
.lateral__menu a.activo svg{fill: var(--d-primario);}
/* La marca de la identidad: una linea dorada junto a la seccion activa */
.lateral__menu a.activo::before{
  content: "";
  position: absolute; left: 4px; top: 50%;
  width: 3px; height: 18px; border-radius: 3px;
  transform: translateY(-50%);
  background: var(--d-acento);
}
.lateral__menu .contador{
  background: var(--d-primario);
  color: #fff;
  font-size: 11px;
}
.lateral__pie{
  margin: 0 12px 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--d-superficie-3);
  color: var(--d-texto-3);
  font-size: 12.5px; font-weight: 600;
}

/* --- Barra superior -------------------------------------------------- */
/* Sin desenfoque de fondo: es lo que mas pesa al desplazarse. Un blanco
   casi opaco se ve igual de limpio. */
.superior,
.app--dock .superior{
  min-height: 68px;
  padding: 0 28px;
  gap: 14px;
  background: rgba(255,255,255,.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--d-borde);
  box-shadow: none;
}
.app:not(.app--dock) .superior{
  margin: 12px 12px 0 16px;
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r-lg);
  top: 12px;
  box-shadow: var(--d-sombra-1);
}
.superior__titulo h1,
.app--dock .superior__titulo h1{font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--d-texto);}
.superior__titulo span{font-size: 13px; color: var(--d-texto-3);}

.superior__anio{
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--d-acento-suave);
  color: var(--d-acento-texto);
  font-size: 12.5px; font-weight: 700;
}
.superior__anio svg{width: 15px; height: 15px; fill: currentColor;}

.usuario{
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--d-borde);
  border-radius: 999px;
  background: var(--d-superficie);
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido);
}
.usuario:hover{border-color: var(--d-borde-fuerte); box-shadow: var(--d-sombra-1);}
.usuario__foto{
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--d-marca), var(--d-primario));
  font-weight: 700;
}
.usuario__datos strong{font-size: 13.5px; color: var(--d-texto);}
.usuario__datos span{font-size: 12px; color: var(--d-texto-3);}

.lateral-boton{
  width: 42px; height: 42px;
  border: 1px solid var(--d-borde);
  border-radius: 12px;
  background: var(--d-superficie);
}
.lateral-boton span,.lateral-boton span::before,.lateral-boton span::after{background: var(--d-texto);}
.velo{background: rgba(15,23,42,.45);}

/* --- Zona de contenido: un ancho comodo de leer ----------------------- */
.contenido{
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 28px 40px;
}
.app:not(.app--dock) .contenido{padding: 22px 12px 40px 16px;}

.fila-migas{margin-bottom: 18px;}
.migas{gap: 6px; font-size: 13px; color: var(--d-texto-4); margin-bottom: 0;}
.migas a{color: var(--d-texto-3); font-weight: 550;}
.migas a:hover{color: var(--d-primario);}
.migas > span:last-child{color: var(--d-texto); font-weight: 650;}

/* =====================================================================
   4. BOTONES
   ===================================================================== */

.btn,
.app--dock .btn{
  min-height: 40px;
  padding: 0 16px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  font: 650 14px/1.1 var(--d-fuente);
  letter-spacing: -.005em;
  transition: background var(--d-rapido), border-color var(--d-rapido), box-shadow var(--d-rapido),
              color var(--d-rapido), transform var(--d-rapido);
  -webkit-tap-highlight-color: transparent;
}
.btn svg{width: 17px; height: 17px;}
.btn:hover{transform: none;}
.btn:active:not(:disabled){transform: scale(.97);}
.btn:focus-visible{outline: none; box-shadow: var(--d-anillo);}

/* Principal: el color del colegio, plano y firme */
.btn--primario,
.app--dock .btn--primario{
  background: var(--d-primario);
  border-color: var(--d-primario);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--primario:hover,
.app--dock .btn--primario:hover{
  background: var(--d-primario-hover);
  border-color: var(--d-primario-hover);
  color: #fff;
  transform: none;
  box-shadow: 0 6px 16px -6px rgba(var(--d-primario-rgb), .55);
}
.btn--primario:active:not(:disabled),
.app--dock .btn--primario:active:not(:disabled){transform: scale(.97); box-shadow: none;}

/* Secundario: blanco con borde */
.btn--claro, .btn--borde, .btn--blanco,
.app--dock .btn--claro{
  background: var(--d-superficie);
  border-color: var(--d-borde-fuerte);
  color: var(--d-texto);
  box-shadow: var(--d-sombra-1);
}
.btn--claro:hover, .btn--borde:hover, .btn--blanco:hover,
.app--dock .btn--claro:hover{
  background: var(--d-superficie-2);
  border-color: #B6C1D1;
  color: var(--d-texto);
  transform: none;
}
.btn--claro svg, .btn--borde svg{fill: var(--d-texto-2);}

/* Sin fondo: acciones de poca jerarquia */
.btn--plano, .btn--fantasma{
  background: transparent;
  border-color: transparent;
  color: var(--d-texto-2);
  padding: 0 12px;
  box-shadow: none;
}
.btn--plano:hover, .btn--fantasma:hover{background: var(--d-superficie-3); color: var(--d-texto);}

/* Acento dorado: para lo que se quiere destacar sin ser la accion principal */
.btn--acento{
  background: var(--d-acento);
  border-color: var(--d-acento);
  color: #2B1A00;
  box-shadow: 0 1px 2px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--acento:hover{background: #CB8F0E; border-color: #CB8F0E; color: #1F1300;}

/* Destructivo: se reconoce sin leer */
.btn--peligro{
  background: var(--d-error);
  border-color: var(--d-error);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
}
.btn--peligro:hover{background: #B91C1C; border-color: #B91C1C; color: #fff; filter: none;}
.btn--peligro-suave{
  background: transparent;
  border-color: transparent;
  color: var(--d-error-texto);
  box-shadow: none;
}
.btn--peligro-suave svg{fill: currentColor;}
.btn--peligro-suave:hover{background: var(--d-error-suave); border-color: var(--d-error-borde); color: var(--d-error-texto);}

.btn--exito, .btn--excel{background: var(--d-exito); border-color: var(--d-exito); color: #fff;}
.btn--exito:hover, .btn--excel:hover{background: #057A55; border-color: #057A55; color: #fff; filter: none;}
.btn--pdf{background: #C2410C; border-color: #C2410C; color: #fff;}
.btn--pdf:hover{background: #9A3412; border-color: #9A3412; color: #fff;}
.btn--exito svg, .btn--excel svg, .btn--pdf svg, .btn--peligro svg, .btn--primario svg{fill: currentColor;}

.btn--chico, .app--dock .btn--chico{min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px;}
.btn--chico svg{width: 15px; height: 15px;}
.btn--grande{min-height: 48px; padding: 0 24px; font-size: 15.5px; border-radius: 13px;}
.btn--bloque{width: 100%;}

.btn:disabled, .btn[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Cargando: lo pone "evitar doble envio" al guardar */
.btn.esta-cargando{pointer-events: none; opacity: .85;}
.btn.esta-cargando::before{
  content: "";
  width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: d-girar .7s linear infinite;
}
@keyframes d-girar{to{transform: rotate(360deg);}}

.acciones-fila{gap: 10px;}

/* =====================================================================
   5. TARJETAS, CIFRAS Y MODULOS
   ===================================================================== */

.tarjeta,
.app--dock .tarjeta{
  background: var(--d-superficie);
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r-lg);
  box-shadow: var(--d-sombra-1);
  margin-bottom: 20px;
}
.tarjeta__cabecera{
  gap: 14px;
  padding: 18px 22px;
  background: transparent;
  border-bottom: 1px solid var(--d-borde);
}
.tarjeta__cabecera h2, .tarjeta__cabecera h3{font-size: 16px; font-weight: 750; color: var(--d-texto);}
.tarjeta__cabecera p{font-size: 13px; color: var(--d-texto-3); margin-top: 2px;}
.tarjeta__cabecera > svg{
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 11px;
  background: var(--d-primario-suave);
  fill: var(--d-primario);
  box-shadow: inset 0 0 0 1px var(--d-primario-borde);
}
.tarjeta__cuerpo{padding: 22px;}
.tarjeta__cuerpo--pegado{padding: 0;}
.tarjeta__pie{
  padding: 14px 22px;
  background: var(--d-superficie-2);
  border-top: 1px solid var(--d-borde);
}

/* --- Cifras ---------------------------------------------------------- */
.rejilla{gap: 16px;}
.rejilla--4{grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}

.indicador{
  position: relative;
  gap: 14px;
  padding: 18px 20px;
  background: var(--d-superficie);
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r-lg);
  box-shadow: var(--d-sombra-1);
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido);
}
.indicador:hover{transform: none; border-color: var(--d-borde-fuerte); box-shadow: var(--d-sombra-2);}
.indicador__icono{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--d-primario-suave);
  color: var(--d-primario);
  box-shadow: inset 0 0 0 1px var(--d-primario-borde);
}
.indicador__icono--verde{background: var(--d-exito-suave); color: var(--d-exito); box-shadow: inset 0 0 0 1px var(--d-exito-borde);}
.indicador__icono--ambar{background: var(--d-aviso-suave); color: var(--d-aviso); box-shadow: inset 0 0 0 1px var(--d-aviso-borde);}
.indicador__icono--rojo{background: var(--d-error-suave); color: var(--d-error); box-shadow: inset 0 0 0 1px var(--d-error-borde);}
.indicador__valor{font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: var(--d-texto);}
.indicador__texto{font-size: 13px; color: var(--d-texto-3); font-weight: 550;}

/* --- Modulos: accesos compactos, cada uno con su color ---------------- */
.rejilla--modulos,
.app--dock .rejilla--modulos{grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;}

.modulo,
.app--dock .modulo{
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--d-superficie);
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r);
  box-shadow: none;
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido), transform var(--d-rapido);
}
.modulo::before,
.app--dock .modulo::before{display: none;}
.modulo:hover,
.app--dock .modulo:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-modulo, var(--d-primario)) 40%, #fff);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--color-modulo, var(--d-primario)) 70%, transparent);
}
.modulo:active, .app--dock .modulo:active{transform: scale(.99); box-shadow: none;}
.modulo__icono,
.app--dock .modulo__icono{
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  margin: 0;
  border-radius: 13px;
  color: #fff;
  background: var(--color-modulo, var(--d-primario));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px var(--color-modulo, var(--d-primario));
  transform: none;
}
.modulo:hover .modulo__icono, .app--dock .modulo:hover .modulo__icono{transform: none;}
.modulo__icono svg, .app--dock .modulo__icono svg{width: 23px; height: 23px; filter: none;}
.modulo strong, .app--dock .modulo strong{
  align-self: end;
  margin: 0;
  font-size: 15px; font-weight: 750; letter-spacing: -.01em;
  color: var(--d-texto);
}
.modulo p, .app--dock .modulo p{
  align-self: start;
  margin: 2px 0 0;
  font-size: 12.8px; line-height: 1.45;
  color: var(--d-texto-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =====================================================================
   6. FORMULARIOS
   ===================================================================== */

.campo{margin-bottom: 18px;}
.campo label{font-size: 13.5px; font-weight: 650; color: var(--d-texto); margin-bottom: 6px;}
.campo label .req{color: var(--d-error);}

.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 input[type=month],.campo input[type=datetime-local],
.campo select,.campo textarea{
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--d-borde-fuerte);
  border-radius: 11px;
  background: var(--d-superficie);
  font: 500 15px/1.4 var(--d-fuente);
  color: var(--d-texto);
  box-shadow: var(--d-sombra-1);
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido), background var(--d-rapido);
}
.campo textarea{line-height: 1.55;}
.campo input::placeholder, .campo textarea::placeholder{color: var(--d-texto-4); font-weight: 450;}
.campo input:hover:not(:disabled):not(:focus),
.campo select:hover:not(:disabled):not(:focus),
.campo textarea:hover:not(:disabled):not(:focus){border-color: #B6C1D1;}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline: none;
  border-color: var(--d-primario);
  background: var(--d-superficie);
  box-shadow: var(--d-anillo);
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled{
  background: var(--d-superficie-3);
  color: var(--d-texto-3);
  box-shadow: none;
}
/* Las listas desplegables con su propia flecha, iguales en todos los navegadores */
.campo select, .filtros select{
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2364748B' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.campo select[multiple]{background-image: none; padding-right: 14px;}
.campo small{font-size: 12.5px; color: var(--d-texto-3); margin-top: 6px;}

/* Errores: borde, fondo y mensaje, no solo color */
.campo--error input, .campo--error select, .campo--error textarea{
  border-color: var(--d-error);
  background: #FFFBFB;
}
.campo--error input:focus, .campo--error select:focus, .campo--error textarea:focus{box-shadow: 0 0 0 4px rgba(220,38,38,.14);}
.campo__error{
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--d-error-texto);
}
.campo__error::before{
  content: "!";
  display: grid; place-items: center;
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  background: var(--d-error);
  color: #fff; font-size: 11px; font-weight: 800;
}

.campos{gap: 0 18px;}

.casilla{gap: 11px; margin-bottom: 12px;}
.casilla input{width: 18px; height: 18px; margin-top: 2px; accent-color: var(--d-primario);}
.casilla span{font-size: 14.5px; color: var(--d-texto);}
.casilla small{font-size: 12.8px; color: var(--d-texto-3);}

.grupo-campos{
  padding: 20px;
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r);
  background: var(--d-superficie-2);
}
.grupo-campos > legend, .grupo-campos > h3{
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  color: var(--d-texto-3);
}

/* --- Barra de filtros y busqueda --------------------------------------- */
.filtros{
  gap: 12px;
  padding: 16px 18px;
  background: var(--d-superficie);
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r-lg);
  box-shadow: var(--d-sombra-1);
  margin-bottom: 20px;
}
.filtros .campo label{font-size: 12.5px; color: var(--d-texto-2);}
.filtros input[type=search], .filtros input[type=text]{
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2394A3B8' d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 18px;
}

/* --- Pestañas ---------------------------------------------------------- */
.pestanas{
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--d-borde);
  border-radius: 13px;
  background: var(--d-superficie-3);
  width: fit-content;
  max-width: 100%;
}
.pestanas a{
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  margin: 0;
  font-size: 14px; font-weight: 650;
  color: var(--d-texto-2);
  transition: background var(--d-rapido), color var(--d-rapido);
}
.pestanas a:hover{color: var(--d-texto); background: rgba(255,255,255,.6);}
.pestanas a.activo{background: var(--d-superficie); color: var(--d-texto); box-shadow: var(--d-sombra-2);}

/* =====================================================================
   7. TABLAS
   ===================================================================== */

.tabla-envoltura{border-radius: 0;}
table.tabla{font-size: 14.2px;}
table.tabla th{
  padding: 11px 14px;
  background: var(--d-superficie-2);
  border-bottom: 1px solid var(--d-borde);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--d-texto-3);
}
table.tabla td{
  padding: 13px 14px;
  border-bottom: 1px solid #EDF1F6;
  color: var(--d-texto);
}
table.tabla tbody tr{transition: background var(--d-rapido);}
table.tabla tbody tr:hover{background: #F8FAFD;}
table.tabla--rayada tbody tr:nth-child(even){background: #FBFCFE;}
table.tabla--compacta td, table.tabla--compacta th{padding: 9px 12px; font-size: 13.8px;}
table.tabla .acciones{white-space: nowrap;}
table.tabla td.acciones{text-align: right;}
table.tabla td.acciones > * + *{margin-left: 4px;}
table.tabla td.acciones form{display: inline-flex;}

/* Una persona por fila: nombre legible en dos lineas como maximo */
.alumno-celda{gap: 12px;}
table.tabla .alumno-celda{min-width: 210px;}
.alumno-celda img, .alumno-celda .inicial{
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--d-marca), var(--d-primario));
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--d-borde);
}
.alumno-celda strong{font-size: 14.2px; font-weight: 650; color: var(--d-texto);}
.alumno-celda span{font-size: 12.5px; color: var(--d-texto-3);}

/* --- Paginacion -------------------------------------------------------- */
.paginacion{gap: 6px;}
.paginacion a, .paginacion span{
  min-width: 38px; height: 38px;
  border: 1px solid var(--d-borde);
  border-radius: 11px;
  background: var(--d-superficie);
  font-size: 14px; font-weight: 650;
  color: var(--d-texto-2);
  transition: border-color var(--d-rapido), background var(--d-rapido), color var(--d-rapido);
}
.paginacion a:hover{border-color: var(--d-borde-fuerte); background: var(--d-superficie-2); color: var(--d-texto);}
.paginacion .actual{background: var(--d-primario); border-color: var(--d-primario); color: #fff;}

/* --- Pastillas de estado: con un punto, se leen de un vistazo ------------ */
.pastilla{
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px; font-weight: 650;
  letter-spacing: 0;
}
.pastilla--verde{background: var(--d-exito-suave); color: var(--d-exito-texto); border-color: var(--d-exito-borde);}
.pastilla--roja{background: var(--d-error-suave); color: var(--d-error-texto); border-color: var(--d-error-borde);}
.pastilla--ambar{background: var(--d-aviso-suave); color: var(--d-aviso-texto); border-color: var(--d-aviso-borde);}
.pastilla--azul{background: var(--d-primario-suave); color: var(--d-primario); border-color: var(--d-primario-borde);}
.pastilla--gris{background: var(--d-superficie-3); color: var(--d-texto-2); border-color: var(--d-borde);}
.pastilla--turquesa{background: #ECFEFF; color: #0E7490; border-color: #A5F3FC;}
.pastilla--verde::before, .pastilla--roja::before, .pastilla--ambar::before, .pastilla--gris::before{
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* =====================================================================
   8. AVISOS, NOTIFICACIONES Y ESTADOS
   ===================================================================== */

.aviso{
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid;
  border-left-width: 1px;
  border-radius: var(--d-r);
  font-size: 14.2px;
  box-shadow: var(--d-sombra-1);
  margin-bottom: 18px;
}
.aviso > svg{
  width: 32px; height: 32px;
  padding: 7px;
  margin-top: 0;
  border-radius: 10px;
  background: var(--d-superficie);
  box-shadow: inset 0 0 0 1px currentColor;
}
.aviso strong{font-size: 14.5px; font-weight: 750; margin-bottom: 1px;}
.aviso--exito{background: var(--d-exito-suave); border-color: var(--d-exito-borde); color: #065F46;}
.aviso--exito > svg{fill: var(--d-exito); box-shadow: inset 0 0 0 1px var(--d-exito-borde);}
.aviso--error{background: var(--d-error-suave); border-color: var(--d-error-borde); color: #991B1B;}
.aviso--error > svg{fill: var(--d-error); box-shadow: inset 0 0 0 1px var(--d-error-borde);}
.aviso--aviso{background: var(--d-aviso-suave); border-color: var(--d-aviso-borde); color: #92400E;}
.aviso--aviso > svg{fill: var(--d-aviso); box-shadow: inset 0 0 0 1px var(--d-aviso-borde);}
.aviso--info{background: var(--d-info-suave); border-color: var(--d-info-borde); color: #1E3A8A;}
.aviso--info > svg{fill: var(--d-info); box-shadow: inset 0 0 0 1px var(--d-info-borde);}

/* --- Notificaciones (lo que antes era "Registro guardado correctamente") --- */
.notificaciones{display: grid; gap: 10px; margin-bottom: 18px;}
.con-js .notificaciones{
  position: fixed;
  z-index: 450;
  top: 18px; right: 18px;
  width: min(400px, calc(100vw - 32px));
  margin: 0;
  pointer-events: none;
}
.notificacion{
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 16px;
  background: var(--d-superficie);
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r);
  box-shadow: var(--d-sombra-3);
  overflow: hidden;
  pointer-events: auto;
  animation: d-notificacion-entra .32s cubic-bezier(.2,.9,.3,1.1) both;
}
.notificacion.saliendo{animation: d-notificacion-sale .22s ease-in both;}
@keyframes d-notificacion-entra{from{opacity: 0; transform: translateY(-10px) scale(.98);} to{opacity: 1; transform: none;}}
@keyframes d-notificacion-sale{to{opacity: 0; transform: translateX(24px);}}
.notificacion__icono{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
}
.notificacion__icono svg{width: 18px; height: 18px; fill: currentColor;}
.notificacion strong{display: block; font-size: 14.5px; font-weight: 750; color: var(--d-texto); line-height: 1.3;}
.notificacion p{margin: 2px 0 0; font-size: 13.8px; color: var(--d-texto-2); line-height: 1.45;}
.notificacion__cerrar{
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--d-texto-4);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.notificacion__cerrar:hover{background: var(--d-superficie-3); color: var(--d-texto);}
.notificacion__tiempo{
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left;
  animation: d-tiempo linear forwards;
}
@keyframes d-tiempo{from{transform: scaleX(1);} to{transform: scaleX(0);}}
.notificacion--exito .notificacion__icono{background: var(--d-exito-suave); color: var(--d-exito);}
.notificacion--exito .notificacion__tiempo{background: var(--d-exito);}
.notificacion--error .notificacion__icono{background: var(--d-error-suave); color: var(--d-error);}
.notificacion--error{border-color: var(--d-error-borde);}
.notificacion--aviso .notificacion__icono{background: var(--d-aviso-suave); color: var(--d-aviso);}
.notificacion--aviso .notificacion__tiempo{background: var(--d-aviso);}
.notificacion--info .notificacion__icono{background: var(--d-info-suave); color: var(--d-info);}
.notificacion--info .notificacion__tiempo{background: var(--d-info);}

/* Sin conexion: lo muestra intranet.js cuando el navegador lo avisa */
.sin-conexion{
  position: fixed; z-index: 460;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #1E293B; color: #fff;
  font-size: 13.5px; font-weight: 650;
  box-shadow: var(--d-sombra-3);
  animation: d-notificacion-entra .3s ease both;
}
.sin-conexion::before{content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F87171;}

/* --- Vacio / sin resultados ------------------------------------------- */
.vacio{padding: 44px 24px; color: var(--d-texto-2);}
.vacio > svg{
  width: 60px; height: 60px;
  padding: 15px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--d-primario-suave);
  fill: var(--d-primario);
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--d-primario-borde), 0 8px 20px -12px rgba(var(--d-primario-rgb), .6);
}
.vacio strong{font-size: 16.5px; font-weight: 750; color: var(--d-texto);}
.vacio p{font-size: 14.2px; color: var(--d-texto-3); max-width: 420px;}

/* --- Barra de progreso -------------------------------------------------- */
.progreso{height: 8px; background: var(--d-superficie-3);}
.progreso__valor{background: linear-gradient(90deg, var(--d-primario), color-mix(in srgb, var(--d-primario) 60%, #22D3EE));}

/* --- Esqueleto de carga, para listas que se piden despues -------------- */
.esqueleto{
  border-radius: 8px;
  background: linear-gradient(90deg, #EEF2F7 25%, #F7F9FC 37%, #EEF2F7 63%);
  background-size: 400% 100%;
  animation: d-brillo 1.3s ease infinite;
}
@keyframes d-brillo{from{background-position: 100% 0;} to{background-position: 0 0;}}

/* =====================================================================
   9. MODALES, MENUS Y HOJAS
   ===================================================================== */

.modal{
  padding: 24px 18px;
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(2px);
}
.modal.abierto{animation: d-velo .18s ease both;}
@keyframes d-velo{from{opacity: 0;}}
.modal__caja{
  border: 1px solid var(--d-borde);
  border-radius: 22px;
  box-shadow: var(--d-sombra-4);
}
.modal.abierto .modal__caja{animation: d-modal-entra .26s cubic-bezier(.2,.9,.3,1.1) both;}
@keyframes d-modal-entra{from{opacity: 0; transform: translateY(12px) scale(.97);} to{opacity: 1; transform: none;}}
.modal__cabecera{padding: 20px 24px; border-bottom: 1px solid var(--d-borde);}
.modal__cabecera h3{font-size: 17px; font-weight: 800;}
.modal__cerrar{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--d-superficie-3);
  color: var(--d-texto-2);
  font-size: 20px;
  transition: background var(--d-rapido), color var(--d-rapido);
}
.modal__cerrar:hover{background: var(--d-borde); color: var(--d-texto);}
.modal__cuerpo{padding: 22px 24px;}
.modal__pie{padding: 14px 24px; background: var(--d-superficie-2); border-top: 1px solid var(--d-borde);}

/* --- Menu del usuario ---------------------------------------------------- */
.menu-usuario__lista{
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--d-borde);
  border-radius: var(--d-r);
  box-shadow: var(--d-sombra-3);
}
.menu-usuario__lista a{padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 550; color: var(--d-texto-2);}
.menu-usuario__lista a:hover{background: var(--d-superficie-3); color: var(--d-texto);}
.menu-usuario__lista svg{opacity: 1; fill: var(--d-texto-4);}
.menu-usuario__lista .salir, .menu-usuario__lista .salir:hover{color: var(--d-error-texto);}
.menu-usuario__lista .salir svg{fill: currentColor;}
.menu-usuario__lista .salir:hover{background: var(--d-error-suave);}

/* --- Menu flotante (docentes, auxiliares, familias) ----------------------- */
.dock,
.app--dock .dock{
  gap: 2px;
  padding: 6px;
  background: var(--d-superficie);
  backdrop-filter: none;
  border: 1px solid var(--d-borde);
  border-radius: 22px;
  box-shadow: 0 18px 40px -16px rgba(15,23,42,.35), 0 2px 8px -2px rgba(15,23,42,.10);
}
.dock__boton{
  min-width: 72px;
  padding: 7px 6px 6px;
  border-radius: 16px;
  color: var(--d-texto-3);
  font: 650 11px/1.2 var(--d-fuente);
}
.dock__boton:hover{background: var(--d-superficie-3); color: var(--d-texto);}
.dock__icono,
.app--dock .dock__icono{
  width: 40px; height: 36px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--d-texto-3);
}
.dock__icono svg{width: 22px; height: 22px;}
.dock__boton.activo{color: var(--d-texto);}
.dock__boton.activo .dock__icono,
.app--dock .dock__boton.activo .dock__icono{
  background: color-mix(in srgb, var(--color-dock, var(--d-primario)) 14%, #fff);
  color: var(--color-dock, var(--d-primario));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-dock, var(--d-primario)) 22%, #fff);
  transform: none;
}
.dock__contador{background: var(--d-error); border-color: var(--d-superficie);}

/* =====================================================================
   10. PANEL PRINCIPAL
   ===================================================================== */

.bienvenida{
  position: relative;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 24px 26px;
  margin-bottom: 20px;
  border-radius: var(--d-r-xl);
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(224,162,27,.35), transparent 70%),
    radial-gradient(520px 260px at 0% 120%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(120deg, var(--d-marca), var(--d-primario));
  box-shadow: 0 18px 40px -22px rgba(var(--d-primario-rgb), .9);
}
/* La estrella de la identidad, muy tenue */
.bienvenida::after{
  content: "";
  position: absolute; right: 26px; top: -18px;
  width: 150px; height: 150px;
  opacity: .12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.5l2.6 7.2 7.6.3-6 4.7 2.1 7.3L12 16.8 5.7 21l2.1-7.3-6-4.7 7.6-.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}
.bienvenida__texto{flex: 1 1 320px; min-width: 0; position: relative; z-index: 1;}
.bienvenida__fecha{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: 12.5px; font-weight: 650; letter-spacing: .01em;
  color: rgba(255,255,255,.92);
}
.bienvenida h2{margin: 10px 0 4px; font-size: 25px; font-weight: 800; color: #fff; letter-spacing: -.025em;}
.bienvenida p{margin: 0; color: rgba(255,255,255,.82); font-size: 14.5px;}
.bienvenida__acciones{display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1;}
.acceso-rapido{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px;
  padding: 6px 16px 6px 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-weight: 700; font-size: 14px;
  transition: background var(--d-rapido), transform var(--d-rapido);
}
.acceso-rapido:hover{background: rgba(255,255,255,.22); color: #fff;}
.acceso-rapido:active{transform: scale(.97);}
.acceso-rapido__icono{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #fff;
  color: var(--color-modulo, var(--d-primario));
}
.acceso-rapido__icono svg{width: 18px; height: 18px; fill: currentColor;}

.panel-columnas{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.panel-columnas > .tarjeta,
.panel-columnas > div > .tarjeta:last-child{margin-bottom: 0;}
.panel-columnas > div{display: grid; gap: 20px;}
.panel-columnas > div > .tarjeta{margin-bottom: 0;}

/* Pendientes: cada uno con su icono y su accion al alcance */
.pendientes{list-style: none; margin: 0; padding: 6px;}
.pendiente{
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background var(--d-rapido);
}
.pendiente:hover{background: var(--d-superficie-2);}
.pendiente + .pendiente{border-top: 1px solid #EDF1F6;}
.pendiente__icono{
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--d-aviso-suave); color: var(--d-aviso);
  box-shadow: inset 0 0 0 1px var(--d-aviso-borde);
}
.pendiente__icono svg{width: 18px; height: 18px; fill: currentColor;}
.pendiente--azul .pendiente__icono{background: var(--d-info-suave); color: var(--d-info); box-shadow: inset 0 0 0 1px var(--d-info-borde);}
.pendiente--roja .pendiente__icono{background: var(--d-error-suave); color: var(--d-error); box-shadow: inset 0 0 0 1px var(--d-error-borde);}
.pendiente--verde .pendiente__icono{background: var(--d-exito-suave); color: var(--d-exito); box-shadow: inset 0 0 0 1px var(--d-exito-borde);}
.pendiente__texto{flex: 1; min-width: 0; font-size: 14.2px; font-weight: 600; color: var(--d-texto);}

/* Comunicados en el panel */
.comunicados{list-style: none; margin: 0; padding: 6px;}
.comunicado{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
}
.comunicado:hover{background: var(--d-superficie-2);}
.comunicado + .comunicado{border-top: 1px solid #EDF1F6;}
.comunicado__texto{flex: 1; min-width: 0;}
.comunicado__texto a{display: block; font-weight: 700; font-size: 14.2px; color: var(--d-texto);}
.comunicado__texto a:hover{color: var(--d-primario);}
.comunicado__texto small{display: block; font-size: 12.5px; color: var(--d-texto-3); margin-top: 2px;}
.comunicado__etiquetas{display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;}

/* Titulo de seccion sin tarjeta */
.seccion-titulo{
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  margin: 28px 0 12px;
}
.seccion-titulo h2{margin: 0; font-size: 17px; font-weight: 800;}
.seccion-titulo span{font-size: 13px; color: var(--d-texto-3);}

/* =====================================================================
   11. TABLET Y TELEFONO
   ===================================================================== */

@media (max-width: 1100px){
  .lateral{
    margin: 0;
    height: 100vh; height: 100dvh;
    top: 0;
    border-radius: 0 var(--d-r-xl) var(--d-r-xl) 0;
    border-left: 0;
  }
  .app:not(.app--dock) .superior{margin: 10px 10px 0; top: 10px;}
  .app:not(.app--dock) .contenido{padding: 20px 10px 40px;}
  .panel-columnas{grid-template-columns: 1fr;}
}

@media (max-width: 760px){
  body{font-size: 15.5px;}

  .superior, .app--dock .superior{min-height: 60px; padding: 0 16px;}
  .app:not(.app--dock) .superior{margin: 8px 8px 0; top: 8px; padding: 0 10px; border-radius: 16px;}
  .superior__titulo h1, .app--dock .superior__titulo h1{font-size: 17px;}
  .contenido{padding: 16px 14px 36px;}
  .app:not(.app--dock) .contenido{padding: 16px 8px 36px;}

  /* Botones comodos para el dedo */
  .btn, .app--dock .btn{min-height: 46px; font-size: 15px; border-radius: 12px;}
  .btn--chico, .app--dock .btn--chico{min-height: 40px; font-size: 14px;}
  .filtros .btn, .tarjeta__pie .btn, .modal__pie .btn{flex: 1 1 auto;}

  /* Formularios: 16px evita que el telefono haga zoom al tocar un campo */
  .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{min-height: 48px; font-size: 16px;}

  .tarjeta__cabecera{padding: 16px;}
  .tarjeta__cuerpo{padding: 16px;}
  .tarjeta__cabecera .acciones{width: 100%; margin-left: 0;}
  .tarjeta__cabecera .acciones .btn{flex: 1 1 auto;}

  .filtros{padding: 14px; border-radius: var(--d-r);}
  .filtros .campo{min-width: 100%;}
  .filtros > .btn, .filtros .campo > .btn{width: 100%;}

  .indicador{padding: 14px 16px;}
  .indicador__valor{font-size: 23px;}
  .rejilla--4{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
  .rejilla--4 .indicador{flex-direction: column; align-items: flex-start; gap: 10px;}

  .rejilla--modulos, .app--dock .rejilla--modulos{grid-template-columns: 1fr; gap: 10px;}

  /* Modales: suben desde abajo, al alcance del pulgar */
  .modal{padding: 0; align-items: end; place-items: end center;}
  .modal__caja{
    max-width: none;
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    margin: auto 0 0;
    max-height: 92dvh;
    display: flex; flex-direction: column;
  }
  .modal.abierto .modal__caja{animation: d-modal-sube .28s cubic-bezier(.2,.9,.3,1) both;}
  @keyframes d-modal-sube{from{transform: translateY(40px); opacity: .6;} to{transform: none; opacity: 1;}}
  .modal__cuerpo{overflow-y: auto; min-height: 0;}
  .modal__pie{padding-bottom: calc(14px + env(safe-area-inset-bottom));}

  /* Notificaciones: arriba, a lo ancho */
  .con-js .notificaciones{top: 10px; right: 10px; left: 10px; width: auto;}

  .bienvenida{padding: 20px; border-radius: var(--d-r-lg); gap: 16px;}
  .bienvenida h2{font-size: 21px;}
  .bienvenida__acciones{width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
  .acceso-rapido{min-height: 50px; font-size: 13.5px;}

  .pendiente{flex-wrap: wrap;}
  .pendiente .btn{width: 100%;}
  .comunicado{flex-wrap: wrap;}
  .comunicado__etiquetas{justify-content: flex-start;}

  .pestanas{width: 100%; overflow-x: auto;}
}

@media (prefers-reduced-motion: reduce){
  .notificacion, .modal.abierto .modal__caja, .modal.abierto, .sin-conexion{animation: none !important;}
  .notificacion__tiempo{animation: none; display: none;}
  .btn, .modulo, .indicador{transition: none;}
}

.notificacion:hover .notificacion__tiempo{animation-play-state:paused;}
.bienvenida__fecha svg{width:14px;height:14px;fill:currentColor;}

/* --- Botones solo con icono (acciones de una fila) ---------------------- */
.btn--icono{position: relative; width: 34px; padding: 0; gap: 0;}
.btn--icono svg{width: 17px; height: 17px;}
.btn--icono .btn__texto{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.btn--plano.btn--icono svg{fill: var(--d-texto-3);}
.btn--plano.btn--icono:hover svg{fill: var(--d-texto);}
.btn--exito-suave{background: transparent; border-color: transparent; color: var(--d-exito-texto); box-shadow: none;}
.btn--exito-suave svg{fill: currentColor;}
.btn--exito-suave:hover{background: var(--d-exito-suave); border-color: var(--d-exito-borde);}

/* Tablas vueltas tarjetas en el telefono: las acciones con su texto y a lo ancho */
@media (max-width: 620px){
  .tabla--apilada td.acciones form{display: block;}
  .tabla--apilada td.acciones > * + *{margin-left: 0;}
  .tabla--apilada .btn--icono{width: 100%; gap: 8px; padding: 0 14px;}
  .tabla--apilada .btn--icono .btn__texto{position: static; width: auto; height: auto; overflow: visible; clip: auto;}
  .tabla--apilada tbody tr{border-radius: var(--d-r); border-color: var(--d-borde); box-shadow: var(--d-sombra-1);}
}

/* --- Ajustes finos que chocaban con reglas antiguas ---------------------- */
.modulo, .app--dock .modulo{row-gap: 0; text-align: left;}
/* El bloque de titulo de una cabecera ocupa lo que queda al lado del icono,
   en vez de saltar a otro renglon cuando el texto es largo */
.tarjeta__cabecera > div:not(.acciones){flex: 1 1 0; min-width: 0;}
@media (max-width: 760px){
  .seccion-titulo{flex-direction: column; align-items: flex-start; gap: 2px;}
  .comunicado__texto{flex: 1 1 100%;}
  .modulo, .app--dock .modulo{padding: 14px; grid-template-columns: 44px 1fr;}
  .modulo__icono, .app--dock .modulo__icono{width: 44px; height: 44px;}
}

/* Insignia del colegio en la barra superior (perfiles sin barra lateral) */
.superior__marca{
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--d-superficie);
  border: 1px solid var(--d-borde);
  box-shadow: var(--d-sombra-1);
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido);
}
.superior__marca:hover{border-color: var(--d-acento); box-shadow: 0 0 0 3px var(--d-acento-suave);}
.superior__marca img{width: 30px; height: 32px; object-fit: contain;}
@media (max-width: 760px){
  .superior__marca{width: 38px; height: 38px; border-radius: 11px;}
  .superior__marca img{width: 26px; height: 28px;}
}

/* Una negrita dentro de la frase no es un titulo: sigue en la misma linea */
.aviso strong.en-linea{display: inline; margin: 0; font-size: inherit;}

/* Selector de archivo con el mismo aspecto que un boton secundario */
input[type=file]{font: 500 14px var(--d-fuente); color: var(--d-texto-2); max-width: 100%;}
input[type=file]::file-selector-button{
  margin-right: 12px;
  padding: 9px 14px;
  border: 1px solid var(--d-borde-fuerte);
  border-radius: 10px;
  background: var(--d-superficie);
  color: var(--d-texto);
  font: 650 13.5px var(--d-fuente);
  cursor: pointer;
  box-shadow: var(--d-sombra-1);
  transition: background var(--d-rapido), border-color var(--d-rapido);
}
input[type=file]::file-selector-button:hover{background: var(--d-superficie-2); border-color: #B6C1D1;}

@media (max-width: 760px){
  /* Cifras: icono al lado del numero, dos por fila, sin gastar alto */
  .rejilla--4 .indicador{flex-direction: row; align-items: center; gap: 10px; padding: 12px;}
  .rejilla--4 .indicador__icono{width: 36px; height: 36px; border-radius: 10px;}
  .rejilla--4 .indicador__icono svg{width: 18px; height: 18px;}
  .rejilla--4 .indicador__valor{font-size: 21px;}
  .rejilla--4 .indicador__texto{font-size: 12px; line-height: 1.3;}

  /* El recordatorio de la contraseña, compacto y con sus dos botones en fila */
  .recordatorio-clave{padding: 12px; gap: 10px; font-size: 13.5px;}
  .recordatorio-clave > svg{width: 28px; height: 28px; padding: 6px;}
  .recordatorio-clave__acciones{display: flex !important; gap: 8px; width: 100%; flex-wrap: nowrap;}
  .recordatorio-clave__acciones > *{flex: 1 1 0; min-width: 0;}
  .recordatorio-clave__acciones form{display: flex;}
  .recordatorio-clave__acciones .btn{width: 100%; min-height: 40px; padding: 0 10px; font-size: 13px; white-space: normal; text-align: center; line-height: 1.2;}

  .filtros .btn{width: 100%;}
}

/* Tarjeta de telefono: las acciones una debajo de otra, a lo ancho */
@media (max-width: 620px){
  .app .tabla--apilada td.acciones{
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    white-space: normal;
    padding-bottom: 4px;
  }
  .app .tabla--apilada td.acciones::before{margin-bottom: 0;}
  .app .tabla--apilada td.acciones > *{width: 100%; margin: 0 !important;}
  .app .tabla--apilada td.acciones .btn + .btn{margin-top: 0;}
  .app .tabla--apilada td.acciones form .btn{width: 100%;}
}

/* --- Pantalla de acceso: la tarjeta blanca con el acento dorado ---------- */
.acceso__caja{position: relative; background: var(--d-superficie);}
.acceso__caja::before{
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 72px; height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: var(--d-acento);
}

/* Aparicion suave del contenido al entrar a una pantalla */
/* Solo transparencia: un transform aqui desubicaria las ventanas fijas de adentro */
@keyframes d-aparece{from{opacity: 0;} to{opacity: 1;}}
.contenido{animation: d-aparece .22s ease-out;}
@media (prefers-reduced-motion: reduce){ .contenido{animation: none;} }

/* =====================================================================
   12. TARJETAS CON DEGRADADO ("menu-modulo")
   =====================================================================
   El boton grande del inicio del docente en el telefono. Se usa tambien
   en Asistencia (Lector de carnets). Degradados de la misma familia azul,
   uno por modulo; nada chillon.
   ===================================================================== */

.menu-modulo{
  --m1: #3B82F6; --m2: #1D4ED8; --m-sombra: 37,99,235;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 138px;
  padding: 16px 16px 15px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(140px 110px at 100% 0%, rgba(255,255,255,.26), transparent 70%),
    linear-gradient(150deg, var(--m1), var(--m2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(15,23,42,.10),
    0 14px 26px -14px rgba(var(--m-sombra), .75);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, filter .16s ease;
}
/* Un circulo de luz muy tenue que da profundidad */
.menu-modulo::after{
  content: "";
  position: absolute; right: -34px; bottom: -44px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  pointer-events: none;
}
.menu-modulo:hover{color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 30px -14px rgba(var(--m-sombra), .8);}
.menu-modulo:active{
  transform: scale(.96);
  filter: brightness(.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px -6px rgba(var(--m-sombra), .8);
}
.menu-modulo:focus-visible{outline: 3px solid var(--d-acento); outline-offset: 3px; border-radius: 22px;}

.menu-modulo__icono{
  position: relative; z-index: 1;
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  border-radius: 17px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 6px 14px -8px rgba(15,23,42,.35);
}
.menu-modulo__icono svg{width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));}
.menu-modulo__nombre{
  position: relative; z-index: 1;
  margin-top: 18px;
  font-size: 16px; font-weight: 750; letter-spacing: -.01em; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.menu-modulo__detalle{
  position: relative; z-index: 1;
  display: block;
  margin-top: 3px;
  font-size: 13.5px; font-weight: 550;
  color: rgba(255,255,255,.85);
}
.menu-modulo__contador{
  position: absolute; top: 14px; right: 14px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--m2);
  font-size: 12.5px; font-weight: 800;
  box-shadow: 0 4px 10px -4px rgba(15,23,42,.45);
}
.menu-modulo__contador[hidden]{display: none;}

/* Version ancha: icono al costado del texto (un solo acceso destacado) */
.menu-modulo--ancho{
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px;
  min-height: 96px;
  padding: 18px 20px;
}
.menu-modulo--ancho .menu-modulo__nombre{margin-top: 0; font-size: 17px;}
.menu-modulo__flecha{
  position: relative; z-index: 1;
  margin-left: auto;
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
}
.menu-modulo__flecha svg{width: 18px; height: 18px; fill: #fff; transform: rotate(180deg);}

/* Degradados de la misma familia azul, uno por modulo */
.menu-modulo--asistencia{--m1: #3B8BF6; --m2: #1E4FD8; --m-sombra: 30,79,216;}
.menu-modulo--chat      {--m1: #8B7CF6; --m2: #4F46E5; --m-sombra: 79,70,229;}
.menu-modulo--notas     {--m1: #2F5BD3; --m2: #172E7C; --m-sombra: 23,46,124;}
.menu-modulo--agenda    {--m1: #38BDF8; --m2: #0B7BC4; --m-sombra: 11,123,196;}
.menu-modulo--alumnos   {--m1: #22B8C9; --m2: #0E6F8F; --m-sombra: 14,111,143;}
.menu-modulo--reportes  {--m1: #6D7CF4; --m2: #3342B8; --m-sombra: 51,66,184;}
.menu-modulo--matricula {--m1: #4FA3F7; --m2: #2463C4; --m-sombra: 36,99,196;}
.menu-modulo--mensajes  {--m1: #7A8CF7; --m2: #4B5BC9; --m-sombra: 75,91,201;}
.menu-modulo--lector    {--m1: #2E7CF0; --m2: #173FAE; --m-sombra: 23,63,174;}

/* =====================================================================
   13. INTERFAZ DE APLICACION (todos menos el administrador)
   =====================================================================
   "Inicio = menu de modulos; cada modulo tiene su informacion."
   Docentes, directivos, administrativos, auxiliares y estudiantes
   (body.interfaz-app) ven lo mismo en el celular y en la computadora:
   el inicio es la rejilla de tarjetas con degradado y abajo una barra
   azul con el boton Inicio al centro. El administrador conserva su
   panel y su barra lateral.
   ===================================================================== */

.menu-inicio{display: none;}
.interfaz-app .panel-escritorio{display: none;}
.interfaz-app .menu-inicio{display: block;}

.menu-inicio__saludo{display: flex; align-items: center; gap: 14px; padding: 6px 4px 18px;}
.menu-inicio__saludo div > span{
  display: block;
  font-size: 13px; font-weight: 650;
  color: var(--d-texto-3);
  letter-spacing: .01em;
}
.menu-inicio__saludo h2{margin: 2px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.025em; color: var(--d-texto);}
.menu-inicio__foto{
  flex: none;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #F7C948, #E0A21B);
  color: #fff; font-size: 22px; font-weight: 800;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}

.menu-inicio__rejilla{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.interfaz-app .menu-inicio__rejilla .menu-modulo{min-height: 170px;}

/* --- Barra inferior: el boton Inicio al centro, sobre una franja azul --- */
.interfaz-app .dock{
  left: 0; right: 0; bottom: 0;
  transform: none;
  width: 100%; max-width: none;
  height: calc(58px + env(safe-area-inset-bottom));
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-top: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  background:
    radial-gradient(260px 90px at 50% 0%, rgba(247,201,72,.28), transparent 70%),
    linear-gradient(90deg, #0A2659 0%, #0F4FA8 50%, #0A2659 100%);
  box-shadow: 0 -12px 30px -14px rgba(3,15,40,.7);
}
.interfaz-app .dock__inicio{
  position: relative;
  top: -22px;
  min-width: 0;
  padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent;
  color: #fff;
  font: 750 12px/1.2 var(--d-fuente);
  letter-spacing: .02em;
}
.interfaz-app .dock__inicio:hover{background: transparent; color: #fff;}
.interfaz-app .dock__inicio .dock__icono,
.interfaz-app .dock__inicio.activo .dock__icono{
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #F9D063 0%, #E0A21B 60%, #C4840C 100%);
  color: #fff;
  border: 4px solid #0D3B85;
  box-shadow: 0 10px 22px -8px rgba(224,162,27,.75), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform var(--d-rapido), box-shadow var(--d-rapido);
}
.interfaz-app .dock__inicio .dock__icono svg{width: 27px; height: 27px; fill: #fff;}
.interfaz-app .dock__inicio:hover .dock__icono{transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(224,162,27,.85);}
.interfaz-app .dock__inicio:active .dock__icono{transform: scale(.95);}
.interfaz-app .dock__inicio .dock__texto{color: rgba(255,255,255,.92);}
.interfaz-app .contenido{padding-bottom: calc(110px + env(safe-area-inset-bottom));}

@media (max-width: 760px){
  .menu-inicio__rejilla{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
  .interfaz-app .menu-inicio__rejilla .menu-modulo{min-height: 0;}
  .menu-inicio__foto{width: 56px; height: 56px; font-size: 19px;}
  .menu-inicio__saludo h2{font-size: 21px;}
}

/* =====================================================================
   14. ASISTENCIA: AULAS CON DEGRADADO
   =====================================================================
   Cada aula es una tarjeta con el degradado de su grado (la misma
   familia azul del inicio). El estado va en una pastilla blanca y la
   accion principal, "Registrar asistencia", es un boton blanco que se
   distingue sin esfuerzo.
   ===================================================================== */

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

.aulas .aula{
  --m1: #3B8BF6; --m2: #1E4FD8; --m-sombra: 30,79,216;
  gap: 14px;
  padding: 18px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(180px 130px at 100% 0%, rgba(255,255,255,.24), transparent 70%),
    linear-gradient(150deg, var(--m1), var(--m2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(15,23,42,.10),
    0 16px 30px -16px rgba(var(--m-sombra), .75);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease;
}
.aulas .aula::before{display: none;}
.aulas .aula::after{
  content: "";
  position: absolute; right: -40px; bottom: -60px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.aulas .aula > *{position: relative; z-index: 1;}
.aulas .aula:hover{transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 36px -16px rgba(var(--m-sombra), .8);}

/* Un tono por grado, todos de la misma familia */
.aulas .aula--grado-1{--m1: #3B8BF6; --m2: #1E4FD8; --m-sombra: 30,79,216;}
.aulas .aula--grado-2{--m1: #8B7CF6; --m2: #4F46E5; --m-sombra: 79,70,229;}
.aulas .aula--grado-3{--m1: #2F5BD3; --m2: #172E7C; --m-sombra: 23,46,124;}
.aulas .aula--grado-4{--m1: #38BDF8; --m2: #0B7BC4; --m-sombra: 11,123,196;}
.aulas .aula--grado-5{--m1: #22B8C9; --m2: #0E6F8F; --m-sombra: 14,111,143;}
.aulas .aula--grado-6{--m1: #6D7CF4; --m2: #3342B8; --m-sombra: 51,66,184;}
/* Un aula sin estudiantes se ve apagada: no hay nada que registrar */
.aulas .aula--vacia{--m1: #94A3B8; --m2: #5B6B82; --m-sombra: 71,85,105;}

.aulas .aula__insignia{
  width: 50px; height: 50px;
  border-radius: 15px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  color: #fff;
  font-size: 18px;
}
.aulas .aula__titulo strong{color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.015em;}
.aulas .aula__titulo span{color: rgba(255,255,255,.8); font-size: 13px;}

/* El estado: una pastilla blanca con el color del estado */
.aulas .aula__cabecera .pastilla{
  background: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px -6px rgba(15,23,42,.45);
}
.aulas .aula__cabecera .pastilla--ambar{color: var(--d-aviso-texto);}
.aulas .aula__cabecera .pastilla--verde{color: var(--d-exito-texto);}
.aulas .aula__cabecera .pastilla--gris{color: var(--d-texto-2);}

.aulas .aula__datos{
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.aulas .aula__dato{color: rgba(255,255,255,.92);}
.aulas .aula__dato svg{fill: rgba(255,255,255,.85);}
.aulas .aula__dato b{color: #fff;}
.aulas .aula__dato .gris{color: rgba(255,255,255,.75);}
.aulas .aula__pie .chico.gris{color: rgba(255,255,255,.8);}

/* La accion principal: blanca, con el color de la tarjeta en el texto */
.aulas .btn--asistencia,
.aulas .aula__pie .btn--primario{
  min-height: 46px;
  border: 0;
  background: #fff;
  color: var(--m2);
  font-size: 15px; font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(15,23,42,.55);
}
.aulas .btn--asistencia svg{fill: currentColor;}
.aulas .btn--asistencia:hover{background: #F4F7FF; color: var(--m2); transform: none;}
.aulas .btn--asistencia:active{transform: scale(.97);}
/* Las acciones secundarias: transparentes, con borde claro */
.aulas .aula__pie .btn--claro{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
  color: #fff;
  box-shadow: none;
}
.aulas .aula__pie .btn--claro:hover{background: rgba(255,255,255,.22); color: #fff;}

/* Sus clases en el aula: pastillas translucidas */
.aulas .aula__clases{border-top-color: rgba(255,255,255,.28);}
.aulas .aula__clases .chico.gris{color: rgba(255,255,255,.8);}
.aulas .clase{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.aulas .clase:hover{background: rgba(255,255,255,.26); color: #fff;}
.aulas .clase--lista{background: #fff; color: var(--m2); border-color: #fff;}

.accesos--asistencia{margin: 0 0 20px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px;}

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

@media (prefers-reduced-motion: reduce){
  .menu-modulo, .aulas .aula{transition: none;}
  .menu-modulo:hover, .aulas .aula:hover{transform: none;}
}
@media (max-width: 760px){ .accesos--asistencia{grid-template-columns: 1fr;} }

/* =====================================================================
   15. HOJA DE ASISTENCIA
   =====================================================================
   La cabecera toma el degradado del grado (el mismo de la tarjeta del
   aula) y lleva la cuenta viva en cuatro recuadros translucidos. Las
   fichas quedan blancas y limpias: el genero se ve en el aro del
   retrato y el estado, en la cinta de arriba, el borde y el boton
   elegido del selector segmentado.
   ===================================================================== */

.hoja-cabeza{
  --m1: #3B8BF6; --m2: #1E4FD8; --m-sombra: 30,79,216;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 20px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(255,255,255,.24), transparent 70%),
    linear-gradient(140deg, var(--m1), var(--m2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(15,23,42,.10),
    0 20px 36px -20px rgba(var(--m-sombra), .8);
}
.hoja-cabeza::after{
  content: "";
  position: absolute; right: -60px; bottom: -110px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.hoja-cabeza > *{position: relative; z-index: 1;}
.hoja-cabeza--grado-1{--m1: #3B8BF6; --m2: #1E4FD8; --m-sombra: 30,79,216;}
.hoja-cabeza--grado-2{--m1: #8B7CF6; --m2: #4F46E5; --m-sombra: 79,70,229;}
.hoja-cabeza--grado-3{--m1: #2F5BD3; --m2: #172E7C; --m-sombra: 23,46,124;}
.hoja-cabeza--grado-4{--m1: #38BDF8; --m2: #0B7BC4; --m-sombra: 11,123,196;}
.hoja-cabeza--grado-5{--m1: #22B8C9; --m2: #0E6F8F; --m-sombra: 14,111,143;}
.hoja-cabeza--grado-6{--m1: #6D7CF4; --m2: #3342B8; --m-sombra: 51,66,184;}

.hoja-cabeza__arriba{display: flex; align-items: center; gap: 14px; flex-wrap: wrap;}
.hoja-cabeza__insignia{
  flex: none;
  display: grid; place-items: center; align-content: center;
  width: 56px; height: 56px;
  border-radius: 17px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  font-size: 20px; font-weight: 800; line-height: 1;
}
.hoja-cabeza__insignia small{font-size: 12px; font-weight: 700; opacity: .85; margin-top: 2px;}
.hoja-cabeza__titulo{flex: 1; min-width: 180px;}
.hoja-cabeza__titulo h2{margin: 0; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.02em;}
.hoja-cabeza__titulo p{margin: 3px 0 0; color: rgba(255,255,255,.85); font-size: 13.5px;}
.hoja-cabeza__area{
  display: inline-block;
  margin-right: 6px; padding: 2px 9px;
  border-radius: 99px;
  background: #fff; color: var(--m2);
  font-size: 12px; font-weight: 800;
}
.hoja-cabeza .hoja-cabeza__todos{
  min-height: 44px;
  border: 0;
  background: #fff;
  color: var(--m2);
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(15,23,42,.55);
}
.hoja-cabeza .hoja-cabeza__todos svg{fill: currentColor;}
.hoja-cabeza .hoja-cabeza__todos:hover{background: #F4F7FF; color: var(--m2);}
.hoja-cabeza .hoja-cabeza__todos:active{transform: scale(.97);}

/* La cuenta viva: cuatro recuadros de vidrio */
.hoja-cabeza .marcador{
  gap: 10px;
  margin-top: 18px;
  border: 0;
  background: transparent;
}
.hoja-cabeza .marcador__dato{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "letra cuenta" "nombre nombre";
  align-items: center;
  gap: 4px 10px;
  padding: 12px 14px;
  border-radius: 16px;
  text-align: left;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.hoja-cabeza .marcador__letra{
  grid-area: letra;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #fff;
  font-size: 13px; font-weight: 800;
}
.hoja-cabeza .marcador__dato--presente .marcador__letra{color: var(--presente);}
.hoja-cabeza .marcador__dato--tardanza .marcador__letra{color: var(--tardanza);}
.hoja-cabeza .marcador__dato--justificada .marcador__letra{color: var(--justificada);}
.hoja-cabeza .marcador__dato--falta .marcador__letra{color: var(--falta);}
.hoja-cabeza .marcador__dato strong{grid-area: cuenta; justify-self: end; color: #fff; font-size: 26px; font-weight: 800;}
.hoja-cabeza .marcador__dato span{grid-area: nombre; margin: 0; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600;}

/* La fecha, en una barra blanca suelta debajo de la cabecera */
.barra-fecha--suelta{
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid var(--d-borde);
  border-radius: 18px;
  background: var(--d-superficie);
  box-shadow: var(--d-sombra-1);
}
.barra-fecha--suelta > svg{width: 18px; height: 18px; fill: var(--d-primario);}

/* --- Las fichas ------------------------------------------------------ */

.fichas{gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}

.ficha.ficha--nina, .ficha.ficha--nino, .ficha.ficha--neutro, .ficha{
  padding: 18px 14px 12px;
  border: 1px solid var(--d-borde);
  border-radius: 22px;
  background: var(--d-superficie);
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 28px -22px rgba(15,23,42,.45);
}
.ficha.ficha--nina::after, .ficha.ficha--nino::after, .ficha.ficha--neutro::after, .ficha::after{display: none;}
.ficha::before{height: 5px; background: var(--tono-ficha, transparent);}
.ficha.ficha--presente, .ficha.ficha--tardanza, .ficha.ficha--justificada, .ficha.ficha--falta{
  border-color: color-mix(in srgb, var(--tono-ficha) 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tono-ficha) 25%, transparent),
    0 14px 28px -20px color-mix(in srgb, var(--tono-ficha) 70%, transparent);
}
.ficha.ficha--falta{background: linear-gradient(180deg, #fff 55%, var(--falta-suave));}
.ficha:hover{transform: translateY(-2px);}

.ficha__datos strong{font-size: 14.5px; font-weight: 700; color: var(--d-texto);}

/* Selector segmentado: una pista gris con los cuatro estados */
.ficha__estados{
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--d-superficie-3);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
}
.ficha__estados .estado{
  min-height: 48px;
  padding: 7px 2px 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
.ficha__estados .estado:hover{background: #fff; border-color: transparent; transform: none;}
.ficha__estados .estado .estado__letra{font-size: 16px; font-weight: 800;}
.ficha__estados .estado--presente .estado__letra{color: var(--presente);}
.ficha__estados .estado--tardanza .estado__letra{color: var(--tardanza);}
.ficha__estados .estado--justificada .estado__letra{color: var(--justificada);}
.ficha__estados .estado--falta .estado__letra{color: var(--falta);}
.ficha__estados .estado__nombre{color: var(--d-texto-3);}
.ficha__estados input[value="P"]:checked + .estado{background: var(--presente); box-shadow: 0 8px 16px -8px var(--presente);}
.ficha__estados input[value="T"]:checked + .estado{background: var(--tardanza); box-shadow: 0 8px 16px -8px var(--tardanza);}
.ficha__estados input[value="J"]:checked + .estado{background: var(--justificada); box-shadow: 0 8px 16px -8px var(--justificada);}
.ficha__estados input[value="F"]:checked + .estado{background: var(--falta); box-shadow: 0 8px 16px -8px var(--falta);}
.ficha__estados input:checked + .estado .estado__letra,
.ficha__estados input:checked + .estado .estado__nombre{color: #fff;}

@media (max-width: 760px){
  .hoja-cabeza{padding: 16px; border-radius: 20px;}
  .hoja-cabeza__titulo h2{font-size: 18px;}
  .hoja-cabeza .hoja-cabeza__todos{width: 100%; justify-content: center;}
  .hoja-cabeza .marcador{grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px;}
  .hoja-cabeza .marcador__dato{padding: 10px 12px;}
  .hoja-cabeza .marcador__dato strong{font-size: 22px;}
  .fichas{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
  .ficha.ficha--nina, .ficha.ficha--nino, .ficha.ficha--neutro, .ficha{padding: 14px 8px 8px; border-radius: 18px;}
  .ficha__estados{gap: 2px; padding: 3px; border-radius: 13px;}
  .ficha__estados .estado{min-height: 42px; border-radius: 10px;}
}

/* El estado elegido gana al gris de "sin marcar" (la clase se queda
   puesta cuando se marca desde la pantalla) */
.ficha.ficha--presente{--tono-ficha: var(--presente);}
.ficha.ficha--tardanza{--tono-ficha: var(--tardanza);}
.ficha.ficha--justificada{--tono-ficha: var(--justificada);}
.ficha.ficha--falta{--tono-ficha: var(--falta);}
.ficha.ficha--sin-marcar::before{opacity: .45;}
.ficha.ficha--sin-marcar.ficha--presente::before, .ficha.ficha--sin-marcar.ficha--tardanza::before,
.ficha.ficha--sin-marcar.ficha--justificada::before, .ficha.ficha--sin-marcar.ficha--falta::before{opacity: 1;}

/* =====================================================================
   16. CALIFICACIONES: REGISTRO AUXILIAR Y REGISTRO OFICIAL
   =====================================================================
   La portada son dos botones grandes con degradado (como el inicio).
   El registro oficial muestra las aulas con el mismo estilo de
   Asistencia, y la hoja lleva la cabecera del grado con los selectores
   de area y bimestre en blanco.
   ===================================================================== */

.menu-notas{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.menu-notas .menu-modulo--ancho{min-height: 118px;}
.menu-modulo--auxiliar{--m1: #38BDF8; --m2: #0B7BC4; --m-sombra: 11,123,196;}
.menu-modulo--oficial {--m1: #2F5BD3; --m2: #172E7C; --m-sombra: 23,46,124;}

/* Registro auxiliar: aviso de que llega pronto */
.proximamente{
  display: grid; justify-items: center; gap: 10px;
  max-width: 560px;
  margin: 10px auto;
  padding: 36px 24px;
  border: 1px solid var(--d-borde);
  border-radius: 24px;
  background: var(--d-superficie);
  box-shadow: var(--d-sombra-1);
  text-align: center;
}
.proximamente__icono{
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 21px;
  background: linear-gradient(150deg, #38BDF8, #0B7BC4);
  box-shadow: 0 14px 26px -14px rgba(11,123,196,.75);
}
.proximamente__icono svg{width: 32px; height: 32px; fill: #fff;}
.proximamente strong{font-size: 19px; font-weight: 800; color: var(--d-texto); letter-spacing: -.015em;}
.proximamente p{margin: 0 0 6px; color: var(--d-texto-2); font-size: 14.5px;}

/* Las areas del aula, como fichitas translucidas */
.aulas .aula__areas{display: flex; flex-wrap: wrap; gap: 6px;}
.aulas .aula__areas span{
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  color: #fff;
  font-size: 12px; font-weight: 700;
}
.aulas .aula__cabecera .pastilla--verde{color: var(--d-exito-texto);}

/* La hoja: selectores blancos dentro de la cabecera del grado */
.hoja-cabeza__filtros{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.hoja-cabeza__campo{display: grid; gap: 5px; margin: 0;}
.hoja-cabeza__campo > span{color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 700;}
.hoja-cabeza__campo select{
  width: 100%;
  min-height: 46px;
  padding: 0 38px 0 14px;
  border: 0;
  border-radius: 14px;
  background-color: #fff;
  color: var(--d-texto);
  font: inherit; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 8px 18px -12px rgba(15,23,42,.6);
}
.hoja-cabeza__campo select:focus-visible{outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px;}
.hoja-cabeza + .aviso{margin-top: 0;}

@media (max-width: 760px){
  .menu-notas{grid-template-columns: 1fr; gap: 12px;}
  .menu-notas .menu-modulo--ancho{min-height: 100px;}
  .hoja-cabeza__filtros{grid-template-columns: 1fr; gap: 10px; margin-top: 14px;}
}


/* =====================================================================
   REGISTRO AUXILIAR (criterios de evaluacion por unidad) y el boton
   "Traer del registro auxiliar" del registro oficial
   ===================================================================== */

.barra-auxiliar{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 22px 14px; padding: 12px 14px;
  border-radius: var(--d-r);
  background: linear-gradient(135deg, #FFF8E6, #FDF5E1);
  border: 1px solid #F2DFAE;
}
.barra-auxiliar--traer .barra-conclusiones__texto > svg{fill: var(--d-acento);}
.barra-auxiliar--traer .barra-conclusiones__texto strong{color: var(--d-acento-texto);}
.barra-auxiliar__ver{display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 260px; min-width: 0;}
.barra-auxiliar__chip{
  min-height: 34px; padding: 0 13px;
  border: 1px solid #EBD39A; border-radius: 99px;
  background: #fff; color: var(--d-acento-texto);
  font: inherit; font-size: 13px; font-weight: 800;
  cursor: pointer;
  transition: background var(--d-rapido), color var(--d-rapido);
}
.barra-auxiliar__chip:hover{background: #FFF3D1;}
.barra-auxiliar__chip[aria-pressed="true"]{background: var(--d-acento); border-color: var(--d-acento); color: #fff;}
.barra-auxiliar__aviso{
  margin: -4px 22px 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--d-exito-suave); border: 1px solid var(--d-exito-borde); color: var(--d-exito-texto);
  font-size: 13.4px; line-height: 1.45;
}
.barra-auxiliar__aviso--ambar{background: var(--d-aviso-suave); border-color: var(--d-aviso-borde); color: var(--d-aviso-texto);}

/* Cuadro de criterios: una caja por competencia */
.aux-criterios{
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0 22px 16px;
}
.aux-criterios__grupo{
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--d-borde); border-radius: var(--d-r);
  background: #FBFCFE;
}
.aux-criterios__cabeza{display: flex; align-items: flex-start; gap: 8px;}
.aux-criterios__cabeza strong{
  font-size: 13px; line-height: 1.35; color: var(--d-texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aux-criterios__lista{list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;}
.aux-criterios__vacio{margin: 0;}
.aux-criterio{display: flex; align-items: center; gap: 8px;}
.aux-criterio__num{
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 8px; background: var(--d-acento-suave); color: var(--d-acento-texto);
  font-size: 12px; font-weight: 800;
}
.aux-criterio__texto{
  flex: 1; min-width: 0; min-height: 38px; padding: 0 10px;
  border: 1px solid var(--d-borde-fuerte); border-radius: var(--d-r-sm);
  background: #fff; font: inherit; font-size: 13.5px; color: var(--d-texto);
}
.aux-criterio__texto:focus{outline: none; border-color: var(--d-acento); box-shadow: 0 0 0 3px rgba(224,162,27,.2);}
.aux-criterio__leido{flex: 1; font-size: 13.5px; line-height: 1.4;}
.aux-criterio__quitar{
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: #64748B; font-size: 19px; cursor: pointer;
}
.aux-criterio__quitar:hover{background: var(--d-error-suave); color: var(--d-error);}
.aux-criterios__agregar{
  align-self: flex-start; min-height: 34px; padding: 0 12px;
  border: 1px dashed #D9B860; border-radius: var(--d-r-sm);
  background: #fff; color: var(--d-acento-texto);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.aux-criterios__agregar:hover{background: var(--d-acento-suave);}
.aux-criterios__agregar[disabled]{opacity: .5; cursor: default;}

/* La tabla: competencia arriba, criterios y promedio debajo */
.tabla-auxiliar thead th{vertical-align: bottom;}
.tabla-auxiliar th.aux-comp{
  border-left: 2px solid var(--d-borde-fuerte);
  background: var(--d-primario-suave);
  vertical-align: middle;
}
.aux-comp__codigo{display: block; font-weight: 800; color: var(--d-marca);}
.aux-comp__nombre{
  display: block; max-width: 280px; margin: 2px auto 0;
  font-size: 11.5px; font-weight: 600; line-height: 1.3; color: #475569;
  text-transform: none; letter-spacing: 0; white-space: normal;
}
.tabla-auxiliar th.aux-crit{min-width: 92px; max-width: 150px; text-transform: none; letter-spacing: 0;}
.aux-crit__num{
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; background: var(--d-acento-suave); color: var(--d-acento-texto);
  font-size: 11px; font-weight: 800;
}
.aux-crit__texto{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: normal;
}
.tabla-auxiliar .aux-prom{background: #FFF9EA; border-right: 2px solid var(--d-borde-fuerte);}
.tabla-auxiliar th.aux-prom{color: var(--d-acento-texto); font-weight: 800; min-width: 84px;}
.tabla-auxiliar td.aux-prom select{font-weight: 800;}
.tabla-auxiliar td.aux-prom--calculado select{box-shadow: 0 0 0 3px rgba(14,159,110,.28);}
.tabla-auxiliar td.aux-prom--a-mano{position: relative;}
.tabla-auxiliar td.aux-prom--a-mano::after{
  content: "✎"; position: absolute; top: 3px; right: 4px;
  font-size: 11px; color: var(--d-acento-texto);
}
.aux-crit--nuevo select{box-shadow: 0 0 0 2px rgba(224,162,27,.35);}
.aux-oculta{display: none !important;}

/* Registro oficial: notas traidas del auxiliar */
.tabla-notas td.celda--traida .selector-nota{box-shadow: 0 0 0 3px rgba(14,159,110,.3);}
.tabla-notas td.celda--incompleta .selector-nota{box-shadow: 0 0 0 3px rgba(217,119,6,.45); background: var(--d-aviso-suave);}

/* Ventana "Traer del registro auxiliar" */
.traer p{margin: 0 0 14px; line-height: 1.5;}
.traer__grupo{margin: 0 0 14px; padding: 0; border: 0;}
.traer__grupo legend{margin-bottom: 8px; font-weight: 800; font-size: 14px; color: var(--d-texto);}
.traer__opcion{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--d-borde); border-radius: var(--d-r-sm);
  cursor: pointer;
}
.traer__opcion:has(input:checked){border-color: var(--d-primario); background: var(--d-primario-suave);}
.traer__opcion input{margin-top: 3px; accent-color: var(--d-primario);}
.traer__opcion strong{display: block; font-size: 14px;}
.traer__opcion small{display: block; margin-top: 2px; color: #64748B; font-size: 12.8px; line-height: 1.4;}

.solo-imprimir{display: none;}

@media (max-width: 760px){
  .barra-auxiliar{margin: 0 12px 12px;}
  .barra-auxiliar > .btn{width: 100%; justify-content: center;}
  .barra-auxiliar__aviso{margin: -2px 12px 12px;}
  .aux-criterios{margin: 0 12px 14px; grid-template-columns: 1fr;}
  .aux-criterio__texto{font-size: 15px; min-height: 42px;}
  /* En la tarjeta del estudiante, el promedio se distingue */
  .tabla-auxiliar td.aux-prom{background: #FFF9EA; margin: 0 -14px; padding: 7px 14px; border-right: 0;}
  .tabla-auxiliar td.aux-prom--a-mano::after{top: 50%; right: 14px; transform: translateY(-50%); position: static; margin-left: -4px;}
  /* La etiqueta del criterio se lee entera y la nota conserva su ancho */
  .tabla-auxiliar td[data-etiqueta]::before{flex: 1 1 auto; min-width: 0; text-transform: none; letter-spacing: 0; font-size: 12.8px; line-height: 1.35;}
  .tabla-auxiliar .selector-nota{flex: 0 0 96px; min-width: 96px;}
}

@media print{
  .solo-imprimir{display: block;}
  .aux-oculta{display: table-cell !important;}
  .aux-crit__texto{-webkit-line-clamp: unset; display: block;}
  .aux-papel{margin-top: 14px; font-size: 11px;}
  .aux-papel h3{font-size: 13px; margin: 0 0 6px;}
  .aux-papel p{margin: 6px 0 2px;}
  .aux-papel ol{margin: 0 0 4px; padding-left: 20px;}
}


/* =====================================================================
   MI CARPETA DE DRIVE y DOCUMENTOS DE GESTION
   Botones grandes con el degradado de las tarjetas de modulo que llevan
   a carpetas en la nube (se abren en otra pestaña).
   ===================================================================== */

.menu-modulo--drive  {--m1: #22B8C9; --m2: #0E6F8F; --m-sombra: 14,111,143;}
.menu-modulo--gestion{--m1: #4FA3F7; --m2: #2463C4; --m-sombra: 36,99,196;}
.menu-modulo--acceso-1{--m1: #3B8BF6; --m2: #1E4FD8; --m-sombra: 30,79,216;}
.menu-modulo--acceso-2{--m1: #22B8C9; --m2: #0E6F8F; --m-sombra: 14,111,143;}
.menu-modulo--acceso-3{--m1: #8B7CF6; --m2: #4F46E5; --m-sombra: 79,70,229;}
.menu-modulo--acceso-4{--m1: #38BDF8; --m2: #0B7BC4; --m-sombra: 11,123,196;}
.menu-modulo--acceso-5{--m1: #2F5BD3; --m2: #172E7C; --m-sombra: 23,46,124;}
.menu-modulo--acceso-6{--m1: #6D7CF4; --m2: #3342B8; --m-sombra: 51,66,184;}

.carpetas{display: grid; gap: 14px; max-width: 640px;}
.carpetas--rejilla{max-width: none; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));}
.carpetas .menu-modulo--ancho{min-height: 104px;}
.carpeta-acceso{display: grid; grid-template-rows: 1fr auto; gap: 8px;}
.carpeta-acceso__textos{min-width: 0;}
.carpeta-acceso__textos .menu-modulo__nombre{overflow-wrap: anywhere;}
.carpeta-acceso__acciones{display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 4px;}
.carpeta-acceso__acciones form{margin: 0 0 0 auto;}
.carpeta-acceso--oculto .menu-modulo{filter: grayscale(.85); opacity: .6;}

.carpetas__nota{
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 640px; margin: 16px 0 0; padding: 12px 14px;
  border-radius: var(--d-r); background: var(--d-info-suave); border: 1px solid var(--d-info-borde);
  color: var(--d-info-texto); font-size: 13.6px; line-height: 1.5;
}
.carpetas__nota svg{width: 18px; height: 18px; flex: none; margin-top: 2px; fill: currentColor;}

.carpetas-barra{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 14px 18px;
  border-radius: var(--d-r); background: var(--d-superficie); border: 1px solid var(--d-borde);
}
.carpetas-barra p{margin: 0; flex: 1 1 300px; font-size: 13.6px; line-height: 1.45; color: #475569;}
.carpetas-barra p strong{display: block; font-size: 15px; color: var(--d-texto);}

.tabla-drive .drive-enlace{
  width: 100%; min-width: 260px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--d-borde-fuerte); border-radius: var(--d-r-sm);
  font: inherit; font-size: 13.5px; color: var(--d-texto); background: #fff;
}
.tabla-drive .drive-enlace:focus{outline: none; border-color: var(--d-primario); box-shadow: var(--d-anillo);}

@media (max-width: 760px){
  .carpetas--rejilla{grid-template-columns: 1fr;}
  .carpetas-barra .btn{width: 100%; justify-content: center;}
  .tabla-drive td[data-etiqueta]{flex-wrap: wrap;}
  .tabla-drive td[data-etiqueta]::before{flex-basis: 100%;}
  .tabla-drive .drive-enlace{min-width: 0; font-size: 15px; min-height: 44px;}
  .tabla-drive td.celda-vacia{display: none;}
}


/* =====================================================================
   FONDO DEL COLEGIO: azul intenso en toda la intranet
   =====================================================================
   Un degradado azul profundo fijo detras de todo (body.fondo-colegio).
   Las tarjetas blancas resaltan encima; lo que va directo sobre el fondo
   (migas, saludo, titulos sueltos) pasa a blanco. Las tarjetas con
   degradado llevan un filo claro para no confundirse con el fondo.
   ===================================================================== */

body.fondo-colegio{background: #0B2F6E;}
body.fondo-colegio::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 100% -10%, rgba(91,196,255,.30), transparent 65%),
    radial-gradient(760px 520px at -10% 105%, rgba(56,189,248,.22), transparent 65%),
    radial-gradient(520px 340px at 70% 110%, rgba(224,162,27,.12), transparent 70%),
    linear-gradient(160deg, #0A2659 0%, #0D3F8F 48%, #1565C0 100%);
}
.fondo-colegio .app::before,
.fondo-colegio .app--dock::before{display: none;}

/* Lo que va directo sobre el fondo */
.fondo-colegio .migas,
.fondo-colegio .migas > span{color: rgba(255,255,255,.65);}
.fondo-colegio .migas a{color: rgba(255,255,255,.85);}
.fondo-colegio .migas a:hover{color: #fff;}
.fondo-colegio .migas > span:last-child{color: #fff;}
.fondo-colegio .boton-volver{border-color: transparent; box-shadow: 0 6px 16px -10px rgba(0,0,0,.6);}

.fondo-colegio .menu-inicio__saludo div > span{color: rgba(255,255,255,.78);}
.fondo-colegio .menu-inicio__saludo h2{color: #fff;}
.fondo-colegio .titulo-suelto strong{color: #fff;}
.fondo-colegio .titulo-suelto span{color: rgba(255,255,255,.75);}
.fondo-colegio .seccion-titulo h2{color: #fff;}
.fondo-colegio .seccion-titulo span{color: rgba(255,255,255,.75);}

/* Las tarjetas con degradado: un filo claro y una sombra mas honda */
.fondo-colegio .menu-modulo,
.fondo-colegio .aulas .aula,
.fondo-colegio .hoja-cabeza,
.fondo-colegio .bienvenida{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.30),
    0 22px 40px -20px rgba(0,0,0,.65);
}

/* Las tarjetas blancas, con una sombra que se note sobre el azul */
.fondo-colegio .tarjeta{box-shadow: 0 18px 40px -24px rgba(0,0,0,.55);}

@media print{
  body.fondo-colegio{background: #fff;}
  body.fondo-colegio::before{display: none;}
  .fondo-colegio .migas, .fondo-colegio .titulo-suelto strong{color: #000;}
}


/* =====================================================================
   PORTADA DE LA INTRANET (tipo red social)
   =====================================================================
   La foto que elige el colegio (Configuracion de la intranet > Foto de portada)
   va arriba del inicio. Por abajo se desvanece con una mascara, asi se
   funde con el fondo azul sin un corte. El saludo con la foto del
   usuario se monta sobre esa parte desvanecida.
   ===================================================================== */

.portada-intranet{
  position: relative;
  height: 300px;
  margin: -6px 0 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.portada-intranet__foto{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 75%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 75%, transparent 100%);
}
.portada-intranet__foto--arriba{object-position: center top;}
.portada-intranet__foto--abajo{object-position: center bottom;}
.portada-intranet__texto{
  position: absolute; top: 18px; left: 20px;
  max-width: calc(100% - 40px);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(6,24,58,.55);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 14.5px; font-weight: 750;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.6);
}
.portada-intranet__texto[hidden]{display: none;}

/* El saludo sube y se apoya sobre la parte desvanecida de la foto */
.menu-inicio--con-portada .menu-inicio__saludo{position: relative; z-index: 1; margin-top: -78px;}
.menu-inicio--con-portada .menu-inicio__foto{width: 88px; height: 88px; font-size: 28px; border-width: 4px;}
.menu-inicio--con-portada .menu-inicio__saludo h2{text-shadow: 0 2px 12px rgba(0,0,0,.45);}
/* El administrador: su bienvenida empieza donde la foto se desvanece */
.portada-intranet + .menu-inicio + .panel-escritorio{margin-top: -64px; position: relative;}

/* Vista previa en Configuracion de la intranet > Foto de portada */
.apariencia-portada{display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start;}
.portada-intranet--muestra{
  height: 230px; margin: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, #0A2659 0%, #0D3F8F 48%, #1565C0 100%);
}
.portada-intranet--vacia{display: grid; place-items: center;}
.portada-intranet__vacia{display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-weight: 650;}
.portada-intranet__vacia svg{width: 22px; height: 22px; fill: currentColor;}
.apariencia-portada__campos .campo:last-of-type{margin-bottom: 12px;}
.campo__etiqueta{display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 650; color: var(--d-texto);}
.apariencia-posiciones{display: flex; gap: 8px; flex-wrap: wrap;}
.apariencia-posicion{position: relative; cursor: pointer;}
.apariencia-posicion input{position: absolute; opacity: 0; pointer-events: none;}
.apariencia-posicion span{
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--d-borde-fuerte); border-radius: 999px;
  background: #fff; font-size: 13.5px; font-weight: 650; color: var(--d-texto-2);
}
.apariencia-posicion input:checked + span{background: var(--d-primario); border-color: var(--d-primario); color: #fff;}
.apariencia-posicion input:focus-visible + span{box-shadow: var(--d-anillo);}
.apariencia-portada__pie{display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}

/* Iconos de los modulos */
.apariencia-iconos{display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px;}
.apariencia-icono{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--d-borde); border-radius: 16px;
  background: #FBFCFF;
}
.apariencia-icono__muestra.menu-modulo{
  flex: none; width: 52px; height: 52px; min-height: 0;
  padding: 0; display: grid; place-items: center;
  border-radius: 14px;
  pointer-events: none;
}
.apariencia-icono__muestra .menu-modulo__icono{width: 34px; height: 34px; margin: 0; border-radius: 10px;}
.apariencia-icono__muestra::before, .apariencia-icono__muestra::after{display: none;}
.apariencia-icono__textos{flex: 1 1 140px; min-width: 0;}
.apariencia-icono__textos strong{display: block; font-size: 14.5px;}
.apariencia-icono__textos small{color: var(--d-texto-3); font-size: 12.5px;}
.apariencia-icono__acciones{display: flex; gap: 6px; margin-left: auto;}

.galeria-iconos{display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px;}
.galeria-iconos__opcion{
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid var(--d-borde); border-radius: 14px;
  background: #fff; color: var(--d-marca); cursor: pointer;
  transition: background var(--d-rapido), transform var(--d-rapido);
}
.galeria-iconos__opcion svg{width: 26px; height: 26px; fill: currentColor;}
.galeria-iconos__opcion:hover{background: var(--d-primario-suave); transform: translateY(-1px);}
.galeria-iconos__opcion.elegido{background: linear-gradient(135deg, #3B8BF6, #1E4FD8); color: #fff; border-color: transparent;}

@media (max-width: 760px){
  .portada-intranet{height: 190px; margin: -14px -13px 0; border-radius: 0;}
  .menu-inicio--con-portada .menu-inicio__saludo{margin-top: -58px;}
  .menu-inicio--con-portada .menu-inicio__foto{width: 68px; height: 68px; font-size: 22px;}
  .portada-intranet__texto{top: 12px; left: 13px; font-size: 13px;}
  .apariencia-portada{grid-template-columns: 1fr;}
  .portada-intranet--muestra{height: 170px; margin: 0;}
  .apariencia-iconos{grid-template-columns: 1fr;}
}

/* El aviso de la contrasena se desvanece solo a los 5 segundos */
.aviso--saliendo{
  opacity: 0;
  max-height: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  overflow: hidden;
  transition: opacity .3s ease, max-height .45s ease .15s, margin .45s ease .15s, padding .45s ease .15s;
}


/* =====================================================================
   BARRA SUPERIOR INTEGRADA
   El mismo azul del fondo, con un filo dorado; la insignia (PNG sin
   fondo) va suelta, sin el recuadro blanco.
   ===================================================================== */

.fondo-colegio .superior,
.fondo-colegio .app--dock .superior{
  background: linear-gradient(100deg, #081F4D 0%, #0D3F8F 55%, #1565C0 100%);
  border-bottom: 2px solid rgba(247,201,72,.8);
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.7);
}
.fondo-colegio .app:not(.app--dock) .superior{border: 1px solid rgba(255,255,255,.14); border-bottom: 2px solid rgba(247,201,72,.8);}
.fondo-colegio .superior .superior__titulo h1{color: #fff;}
.fondo-colegio .superior .superior__titulo span{color: rgba(255,255,255,.75);}
.fondo-colegio .superior__anio{background: rgba(247,201,72,.16); color: #FCD873; box-shadow: inset 0 0 0 1px rgba(247,201,72,.35);}
.fondo-colegio .superior .usuario{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);}
.fondo-colegio .superior .usuario:hover{border-color: rgba(255,255,255,.4); box-shadow: none;}
.fondo-colegio .superior .usuario__datos strong{color: #fff;}
.fondo-colegio .superior .usuario__datos span{color: rgba(255,255,255,.72);}
.fondo-colegio .superior .usuario__foto{box-shadow: 0 0 0 2px rgba(255,255,255,.6);}
.fondo-colegio .superior__marca{
  width: auto; height: auto;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.fondo-colegio .superior__marca:hover{border: 0; box-shadow: none; transform: scale(1.05);}
.fondo-colegio .superior__marca img{width: auto; height: 46px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));}
.fondo-colegio .superior .lateral-boton{background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25);}
.fondo-colegio .superior .lateral-boton span,
.fondo-colegio .superior .lateral-boton span::before,
.fondo-colegio .superior .lateral-boton span::after{background: #fff;}
@media (max-width: 760px){
  .fondo-colegio .superior__marca img{height: 38px;}
}


/* =====================================================================
   FORMULARIOS, TARJETAS Y VENTANAS CON EL COLOR DEL COLEGIO
   Cabeceras con un celeste suave, iconos con degradado, campos con un
   fondo apenas azulado y ventanas con cabecera azul. El contenido sigue
   sobre blanco para que se lea igual que antes.
   ===================================================================== */

.fondo-colegio .tarjeta__cabecera{
  background: linear-gradient(180deg, #EDF4FF 0%, #F8FBFF 100%);
  border-bottom-color: #DCE7F5;
  border-radius: calc(var(--d-r-lg) - 1px) calc(var(--d-r-lg) - 1px) 0 0;
}
.fondo-colegio .tarjeta__cabecera > svg{
  background: linear-gradient(135deg, #3B8BF6, #1E4FD8);
  fill: #fff;
  box-shadow: 0 6px 14px -8px rgba(30,79,216,.8);
}
.fondo-colegio .tarjeta__pie{background: #F5F9FF; border-top-color: #DCE7F5;}

.fondo-colegio .campo input[type=text], .fondo-colegio .campo input[type=password],
.fondo-colegio .campo input[type=email], .fondo-colegio .campo input[type=number],
.fondo-colegio .campo input[type=date], .fondo-colegio .campo input[type=time],
.fondo-colegio .campo input[type=search], .fondo-colegio .campo input[type=tel],
.fondo-colegio .campo input[type=url], .fondo-colegio .campo input[type=month],
.fondo-colegio .campo input[type=datetime-local],
.fondo-colegio .campo select, .fondo-colegio .campo textarea{
  background-color: #F6F9FF;
  border-color: #CEDBEE;
}
.fondo-colegio .campo input:focus, .fondo-colegio .campo select:focus, .fondo-colegio .campo textarea:focus{
  background-color: #fff;
}
.fondo-colegio .filtros{background: linear-gradient(180deg, #F1F7FF, #FFFFFF);}

.fondo-colegio .modal__cabecera{
  background: linear-gradient(100deg, #0A2659 0%, #0F4FA8 60%, #1565C0 100%);
  border-bottom: 2px solid rgba(247,201,72,.8);
}
.fondo-colegio .modal__cabecera h3{color: #fff;}
.fondo-colegio .modal__cerrar{background: rgba(255,255,255,.14); border: 0; color: #fff;}
.fondo-colegio .modal__cerrar:hover{background: rgba(255,255,255,.26); color: #fff;}
.fondo-colegio .modal__pie{background: #F5F9FF; border-top-color: #DCE7F5;}
.apariencia-icono [hidden]{display: none !important;}

/* Portada de borde a borde para la interfaz de aplicacion (como una red
   social); pegada a la barra superior cuando no hay un aviso antes */
.interfaz-app .portada-intranet{margin: 0 -28px; border-radius: 0; height: 320px;}
.interfaz-app .contenido > .portada-intranet:first-child{margin-top: -24px;}
.interfaz-app .dock{height: calc(66px + env(safe-area-inset-bottom));}
.interfaz-app .dock__inicio{top: -20px;}
@media (max-width: 760px){
  .interfaz-app .portada-intranet{margin: 0 -13px; height: 200px;}
  .interfaz-app .contenido > .portada-intranet:first-child{margin-top: -14px;}
}
@media (min-width: 761px){ .interfaz-app .portada-intranet__texto{left: 28px; top: 22px;} }

/* =====================================================================
   ADMINISTRADOR: barra lateral y barra superior
   - La lateral no se desplaza entera (su barra de desplazamiento pasaba
     por encima de las esquinas redondeadas): solo se desplaza la lista
     de modulos, por dentro; la insignia y el pie quedan fijos.
   - La barra superior es un rectangulo solido pegado arriba: sin margen
     ni esquinas redondeadas, asi no se ve la pagina por detras.
   ===================================================================== */

.lateral{overflow: hidden;}
.lateral__marca, .lateral__pie{flex: none;}
.lateral__menu{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--d-borde-fuerte) transparent;
}
.lateral__menu::-webkit-scrollbar{width: 6px;}
.lateral__menu::-webkit-scrollbar-track{background: transparent; margin: 8px 0;}
.lateral__menu::-webkit-scrollbar-thumb{background: var(--d-borde-fuerte); border-radius: 3px;}

.fondo-colegio .app:not(.app--dock) .superior{
  top: 0;
  margin: 0;
  border: 0;
  border-bottom: 2px solid rgba(247,201,72,.8);
  border-radius: 0;
}
.app:not(.app--dock) .principal{min-width: 0;}

/* =====================================================================
   PORTADA EN LOS MODULOS (franja arriba de cada pantalla)
   La foto de portada va detras del comienzo de cada pantalla, con un
   velo azul para que la ruta y el boton Inicio se lean, y se desvanece
   hacia abajo detras de las tarjetas. Va con z-index -1 sobre .contenido
   (sin crear un contexto de apilamiento, para no tapar las ventanas).
   Se apaga en Configuracion de la intranet > Foto de portada.
   ===================================================================== */

.contenido--con-franja{position: relative;}
.portada-franja{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 250px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,.5) 65%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,.5) 65%, transparent 100%);
}
.portada-franja__foto{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.portada-franja::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,31,77,.55) 0%, rgba(8,31,77,.30) 55%, rgba(8,31,77,.10) 100%);
}
/* La ruta y el boton Inicio, legibles sobre la foto */
.contenido--con-franja .migas{text-shadow: 0 1px 6px rgba(0,0,0,.55);}

@media (max-width: 760px){
  .portada-franja{height: 180px;}
}
@media print{
  .portada-franja{display: none;}
}

/* Franja de portada con mas espacio, SOLO en el celular: mas alta, menos
   velo y un hueco de foto visible entre la ruta y el contenido. En la
   computadora queda la franja baja de arriba (250 px), para que la
   portada no le quite espacio a los modulos. */
@media (max-width: 760px){
  .portada-franja{
    height: 290px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.2) 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.6) 72%, rgba(0,0,0,.2) 88%, transparent 100%);
  }
  .portada-franja::after{
    background: linear-gradient(180deg, rgba(8,31,77,.45) 0%, rgba(8,31,77,.08) 22%, rgba(8,31,77,0) 50%, rgba(8,31,77,.20) 100%);
  }
  .contenido--con-franja > .fila-migas{margin-bottom: 110px;}
}

/* =====================================================================
   LECTOR QR
   =====================================================================
   Acceso directo en el inicio (como un modulo mas, junto a Asistencia)
   y pantalla propia: un visor oscuro con filo dorado, la mira y una
   linea que barre mientras la camara esta encendida. En la computadora
   el visor va a la izquierda y lo leido a la derecha; en el celular,
   todo en una columna.
   ===================================================================== */

/* --- La tarjeta del inicio ---------------------------------------- */
.menu-modulo--lector{
  --m1: #1A3F9C; --m2: #0A1D4F; --m-sombra: 10,29,79;
  box-shadow:
    inset 0 0 0 1px rgba(244,192,78,.35),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 16px 30px -14px rgba(var(--m-sombra), .85);
}
.menu-modulo--lector .menu-modulo__icono{
  background: linear-gradient(150deg, #F6CB5E, #E0A21B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px rgba(224,162,27,.8);
}
.menu-modulo--lector .menu-modulo__icono svg{fill: #0A1D4F; filter: none;}
.menu-modulo--lector::after{background: rgba(244,192,78,.10);}
/* En el panel del administrador (rejilla de modulos) */
.modulo[href$="asistencia/escaner"] .modulo__icono{background: linear-gradient(150deg, #F6CB5E, #E0A21B);}
.modulo[href$="asistencia/escaner"] .modulo__icono svg{fill: #0A1D4F;}

/* --- La pantalla -------------------------------------------------- */
.lector{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 20px;
  align-items: start;
}
.lector [hidden]{display: none !important;}

.lector__escena{
  position: relative;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(420px 260px at 100% 0%, rgba(244,192,78,.10), transparent 70%),
    linear-gradient(165deg, #0E2A6E 0%, #071638 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 30px 60px -30px rgba(3,10,30,.9);
}

.lector__cabeza{display: flex; align-items: center; gap: 14px;}
.lector__icono{
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(150deg, #F6CB5E, #E0A21B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 20px -10px rgba(224,162,27,.9);
}
.lector__icono svg{width: 28px; height: 28px; fill: #0A1D4F;}
.lector__titulo{flex: 1; min-width: 0;}
.lector__titulo h2{margin: 0; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: -.02em;}
.lector__titulo p{margin: 2px 0 0; color: rgba(255,255,255,.7); font-size: 13.5px;}
.lector__girar{
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 14px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  cursor: pointer;
  transition: background .15s ease;
}
.lector__girar svg{width: 20px; height: 20px; fill: #fff;}
.lector__girar:hover{background: rgba(255,255,255,.18);}

/* El visor */
.lector .visor{
  aspect-ratio: 4 / 3;
  max-height: 52dvh;
  width: 100%;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(46,124,240,.22), transparent 60%),
    #040C22;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 60px rgba(0,0,0,.55);
}
.lector .visor video{position: absolute; inset: 0;}
.visor__reposo{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.visor__reposo svg{width: min(30%, 130px); height: auto; fill: rgba(255,255,255,.10);}
.visor video:not([hidden]) ~ .visor__reposo{display: none;}

/* Un poco arriba del centro: abajo va el aviso */
.lector .visor__mira{width: min(54%, 280px); translate: 0 -22px;}
.lector .visor__mira span{
  width: 38px; height: 38px;
  border-width: 5px;
  border-color: #F4C04E;
  filter: drop-shadow(0 0 8px rgba(244,192,78,.45));
}
.lector .visor__mira span:nth-child(1){border-radius: 16px 0 0 0;}
.lector .visor__mira span:nth-child(2){border-radius: 0 16px 0 0;}
.lector .visor__mira span:nth-child(3){border-radius: 0 0 0 16px;}
.lector .visor__mira span:nth-child(4){border-radius: 0 0 16px 0;}
.lector .visor--bien .visor__mira span{border-color: #3DD68C; filter: drop-shadow(0 0 10px rgba(61,214,140,.6));}
.lector .visor--aviso .visor__mira span{border-color: #F6C445;}
.lector .visor--malo .visor__mira span{border-color: #FF8A7A; filter: drop-shadow(0 0 10px rgba(255,138,122,.55));}

/* La linea que barre: solo con la camara encendida */
.visor__linea{
  position: absolute;
  left: 8%; right: 8%; top: 8%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #F4C04E 20%, #FFE7A3 50%, #F4C04E 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(244,192,78,.55);
  opacity: 0;
}
.visor video:not([hidden]) ~ .visor__mira .visor__linea{
  opacity: 1;
  animation: lector-barrido 2.2s ease-in-out infinite alternate;
}
@keyframes lector-barrido{
  from{top: 8%;}
  to{top: 90%;}
}

/* El aviso del visor: una pastilla de vidrio */
.lector .visor__estado{
  left: 50%; right: auto; bottom: 16px;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 28px);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(4,12,34,.62);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  font-size: 13.5px; font-weight: 600;
}
.lector .visor--bien .visor__estado{background: rgba(22,128,78,.88);}
.lector .visor--aviso .visor__estado{background: rgba(176,114,26,.9);}
.lector .visor--malo .visor__estado{background: rgba(192,57,43,.9);}

/* Botones */
.lector__controles{display: flex; gap: 10px;}
.lector .lector__encender{
  flex: 1;
  min-height: 52px;
  justify-content: center;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(150deg, #F6CB5E, #E0A21B);
  color: #0A1D4F;
  font-size: 15.5px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 24px -12px rgba(224,162,27,.9);
}
.lector .lector__encender svg{fill: currentColor;}
.lector .lector__encender:hover{filter: brightness(1.05); color: #0A1D4F;}
.lector .lector__encender:active{transform: scale(.98);}
.lector .lector__detener{
  flex: 1;
  min-height: 52px;
  justify-content: center;
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: #fff;
  font-weight: 700;
}
.lector .lector__detener:hover{background: rgba(255,255,255,.18); color: #fff;}

/* Las reglas de la hora, en pastillas */
.lector__reglas{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.lector__reglas li{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  font-size: 12.5px; font-weight: 600;
}
.lector__reglas strong{color: #fff;}
.lector__punto{width: 8px; height: 8px; border-radius: 50%;}
.lector__punto--presente{background: #3DD68C; box-shadow: 0 0 0 3px rgba(61,214,140,.2);}
.lector__punto--tardanza{background: #F6C445; box-shadow: 0 0 0 3px rgba(246,196,69,.2);}

/* --- La columna de la derecha ------------------------------------- */
.lector__lado{display: grid; gap: 16px;}

/* El ultimo leido: grande y con el color del estado */
.lector .resultado{
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 40px -24px rgba(3,10,30,.7);
  animation: lector-resultado .3s cubic-bezier(.2,.8,.2,1);
}
.lector .resultado::before{
  content: "";
  display: block;
  height: 6px;
  background: var(--d-borde-fuerte);
}
.lector .resultado--presente::before{background: linear-gradient(90deg, #16A34A, #3DD68C);}
.lector .resultado--tardanza::before{background: linear-gradient(90deg, #D97706, #F6C445);}
.lector .resultado--malo::before{background: linear-gradient(90deg, #C0392B, #FF8A7A);}
.lector .resultado__cuerpo{padding: 18px 20px;}
.lector .resultado__retrato img,
.lector .resultado__inicial{
  width: 84px; height: 84px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--d-borde), 0 10px 20px -12px rgba(3,10,30,.6);
}
.lector .resultado--presente .resultado__retrato img,
.lector .resultado--presente .resultado__inicial{box-shadow: 0 0 0 3px #3DD68C, 0 10px 20px -12px rgba(22,128,78,.7);}
.lector .resultado--tardanza .resultado__retrato img,
.lector .resultado--tardanza .resultado__inicial{box-shadow: 0 0 0 3px #F6C445, 0 10px 20px -12px rgba(176,114,26,.7);}
.lector .resultado__datos strong{font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--d-texto);}
@keyframes lector-resultado{
  from{opacity: 0; transform: translateY(8px) scale(.98);}
  to{opacity: 1; transform: none;}
}

/* El codigo a mano: una tarjeta compacta */
.lector-manual{
  display: grid; gap: 10px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 34px -24px rgba(3,10,30,.7);
}
.lector-manual label{
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  color: var(--d-texto); font-size: 14px; font-weight: 700;
}
.lector-manual label svg{width: 16px; height: 16px; fill: var(--d-primario);}
.lector-manual__fila{display: flex; gap: 8px;}
.lector-manual input{
  flex: 1; min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--d-borde);
  border-radius: 14px;
  background: var(--d-superficie-2, #F5F8FD);
  font: 600 15px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lector-manual input::placeholder{text-transform: none; letter-spacing: .06em; font-weight: 500;}
.lector-manual .btn{min-height: 46px; border-radius: 14px; padding-inline: 18px;}

/* Lo leido hoy */
.lector-hoy{
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 34px -24px rgba(3,10,30,.7);
}
.lector-hoy__cabeza{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
}
.lector-hoy__cabeza div{flex: 1; min-width: 0;}
.lector-hoy__cabeza h3{margin: 0; font-size: 16px; font-weight: 800; color: var(--d-texto);}
.lector-hoy__cabeza p{margin: 1px 0 0; font-size: 12.5px; color: var(--d-texto-3);}
.lector-hoy__total{
  min-width: 40px; height: 40px; padding: 0 10px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, #2E7CF0, #173FAE);
  color: #fff;
  font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lector .leidos{max-height: 460px; padding: 0 10px 10px;}
.lector .leidos__uno{
  margin-top: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--d-superficie-2, #F5F8FD);
}
.lector .leidos__uno--presente{box-shadow: inset 4px 0 0 #22C55E;}
.lector .leidos__uno--tardanza{box-shadow: inset 4px 0 0 #F59E0B;}
.lector .leidos__hora small{text-transform: capitalize;}
.lector .leidos__uno--tardanza .leidos__hora small{color: #B45309;}
.lector .leidos__uno--presente .leidos__hora small{color: #15803D;}
.lector .leidos__vacio{
  display: grid; justify-items: center; gap: 8px;
  padding: 26px 18px 30px;
  color: var(--d-texto-3);
}
.lector .leidos__vacio svg{width: 34px; height: 34px; fill: var(--d-borde-fuerte);}

/* --- Celular ------------------------------------------------------- */
@media (max-width: 980px){
  .lector{grid-template-columns: 1fr; gap: 14px;}
}
@media (max-width: 760px){
  .lector__escena{padding: 14px; border-radius: 24px; gap: 14px;}
  .lector__icono{width: 46px; height: 46px; border-radius: 14px;}
  .lector__titulo h2{font-size: 19px;}
  .lector .visor{aspect-ratio: 1 / 1; max-height: none; border-radius: 18px;}
  .lector .visor__mira{width: 58%; translate: 0 -26px;}
  .lector__reglas li{font-size: 12px; padding: 5px 10px;}
  .lector .resultado__retrato img,
  .lector .resultado__inicial{width: 68px; height: 68px;}
}
@media (prefers-reduced-motion: reduce){
  .visor video:not([hidden]) ~ .visor__mira .visor__linea{animation: none; top: 50%;}
  .lector .resultado{animation: none;}
}
/* Cuando no se pudo registrar no hay foto ni marca: no dejar huecos */
.lector .resultado__marca:empty,
.lector .resultado__retrato:empty{display: none;}
.lector .resultado--malo .resultado__datos strong{color: #B42318;}

/* =====================================================================
   REGISTROS DE NOTAS A TODO LO ANCHO
   En pantallas anchas la hoja de notas usa todo el espacio (antes se
   quedaba en 1440 px y habia que desplazarse de lado con espacio libre).
   ===================================================================== */
.contenido:has(.tabla-notas),
.contenido:has(.tabla-auxiliar){max-width: none;}

/* Avisos de notas guardadas en el equipo (borrador-notas.js) */
.borrador-aviso{align-items: center;}
.borrador-aviso > span:first-child{flex: 1 1 320px;}
.borrador-aviso__acciones{display: flex; gap: 8px; flex-wrap: wrap;}
.borradores__lista{margin: 8px 0 0; padding-left: 18px;}
.borradores__lista li{margin: 3px 0;}
.borradores__lista a{font-weight: 700;}
.borradores__lista small{color: inherit; opacity: .8;}

/* La casilla con el foco, bien visible al moverse con las flechas */
.tabla-notas select.selector-nota:focus-visible,
.tabla-auxiliar select.selector-nota:focus-visible{
  outline: 3px solid var(--d-acento);
  outline-offset: 1px;
}

/* El aviso de notas pendientes va antes de la portada: la portada sigue
   pegada a la barra superior mientras el aviso no se muestre */
.interfaz-app .contenido > [data-borradores][hidden]:first-child + .portada-intranet{margin-top: -24px;}
@media (max-width: 760px){
  .interfaz-app .contenido > [data-borradores][hidden]:first-child + .portada-intranet{margin-top: -14px;}
}

/* =====================================================================
   AVISOS: campana de la barra superior y pantalla de avisos
   ===================================================================== */
.superior__campana{
  position: relative; flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  color: #fff;
}
.superior__campana svg{width: 21px; height: 21px; fill: currentColor;}
.superior__campana:hover, .superior__campana.activo{background: rgba(247,201,72,.22); color: #FCD873;}
.superior__campana-numero{
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--d-error); color: #fff;
  font-size: 11px; font-weight: 800;
  box-shadow: 0 0 0 2px #0D3F8F;
}
.menu-modulo--avisos{--m1: #F9C74F; --m2: #D98E04; --m-sombra: 217,142,4;}

.avisos-celular__estado{display: flex; align-items: center; gap: 10px; font-weight: 650; margin-bottom: 14px;}
.avisos-celular__punto{width: 12px; height: 12px; border-radius: 50%; background: #CBD5E1; box-shadow: 0 0 0 4px #F1F5F9;}
.avisos-celular__punto--encendido{background: var(--d-exito); box-shadow: 0 0 0 4px var(--d-exito-suave);}
.avisos-celular__punto--apagado{background: var(--d-error); box-shadow: 0 0 0 4px var(--d-error-suave);}
.avisos-celular__botones{display: flex; gap: 10px; flex-wrap: wrap;}
.avisos-celular__ayuda{margin: 12px 0 0; line-height: 1.5;}
.avisos-celular__titulo{margin: 22px 0 8px; font-size: 14.5px;}
.avisos-celular__lista{list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;}
.avisos-celular__lista li{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--d-borde); border-radius: 12px; background: #FBFCFF;
}
.avisos-celular__lista li > span{flex: 1; min-width: 0;}
.avisos-celular__lista li strong{display: block; font-size: 14px;}
.avisos-celular__lista li small{color: var(--d-texto-3);}
.avisos-celular__lista li.es-este{border-color: var(--d-exito-borde); background: var(--d-exito-suave);}
.avisos-celular__lista li.es-este strong::after{content: " · este celular"; color: var(--d-exito-texto); font-weight: 650;}
.avisos-celular__lista form{margin: 0;}

.lista-avisos{list-style: none; margin: 0; padding: 0;}
.lista-avisos__item{display: flex; align-items: flex-start; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--d-borde);}
.lista-avisos__item:first-child{border-top: 0;}
.lista-avisos__item--nuevo{background: #F5F9FF;}
.lista-avisos__icono{flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;}
.lista-avisos__icono svg{width: 21px; height: 21px; fill: #fff;}
.lista-avisos__icono--temprano{background: linear-gradient(135deg, #34D399, #0E9F6E);}
.lista-avisos__icono--tarde{background: linear-gradient(135deg, #FBBF24, #D97706);}
.lista-avisos__icono--general{background: linear-gradient(135deg, #3B8BF6, #1E4FD8);}
.lista-avisos__texto{flex: 1; min-width: 0;}
.lista-avisos__texto strong{display: block; font-size: 15px;}
.lista-avisos__texto span{display: block; color: var(--d-texto-2); font-size: 13.8px; margin-top: 2px;}
.lista-avisos__cuando{flex: none; color: var(--d-texto-3); font-size: 12.5px; white-space: nowrap;}
@media (max-width: 760px){
  .lista-avisos__item{padding: 12px 14px; flex-wrap: wrap;}
  .lista-avisos__cuando{width: 100%; padding-left: 52px; margin-top: -4px;}
  .avisos-celular__botones .btn{width: 100%; justify-content: center;}
  .superior__campana{width: 38px; height: 38px;}
}
.avisos-celular [hidden]{display: none !important;}

/* Orden de los modulos (Configuracion de la intranet > Orden e iconos) */
.apariencia-icono__puesto{
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px; background: var(--d-acento-suave); color: var(--d-acento-texto);
  font-size: 12.5px; font-weight: 800;
}
.apariencia-icono__mover{min-width: 34px; padding-left: 0; padding-right: 0; justify-content: center; font-size: 15px;}
.apariencia-icono--movido{animation: d-movido .5s ease;}
/* Por rol solo hay flechas: caben en la misma linea que el nombre */
.apariencia-iconos--orden .apariencia-icono{flex-wrap: nowrap;}
.apariencia-iconos--orden .apariencia-icono__textos{flex-basis: 0;}
@keyframes d-movido{from{box-shadow: 0 0 0 3px var(--d-acento);} to{box-shadow: 0 0 0 0 transparent;}}
.unidad-extra{display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--d-borde);}
.difundir-opciones{display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px;}
.lista-avisos__icono--mensaje{background: linear-gradient(135deg, #A78BFA, #6D28D9);}
.lista-avisos__icono--comunicado{background: linear-gradient(135deg, #38BDF8, #0B7BC4);}
.lista-avisos__texto strong a{color: inherit;}
.lista-avisos__texto strong a::after{content: ""; position: absolute; inset: 0;}
.lista-avisos__item{position: relative;}
.lista-avisos__item:hover{background: #F3F8FF;}
/* La campanita tambien en la barra del administrador */
.app:not(.app--dock) .superior__campana{margin-left: auto;}

/* =====================================================================
   MIS ICONOS (iconos propios en PNG, Configuracion > Orden e iconos)
   Se muestran sobre el azul de las tarjetas: los iconos propios suelen
   ser claros y en blanco no se verian.
   ===================================================================== */
.galeria-propia{
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 18px;
  background: var(--d-primario-suave, #EEF4FF);
  box-shadow: inset 0 0 0 1px var(--d-borde);
}
.galeria-propia__cabeza h4, .galeria-titulo{margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--d-texto);}
.galeria-propia__cabeza p{margin: 0 0 12px; font-size: 13px; color: var(--d-texto-2); line-height: 1.45;}
.galeria-titulo{margin-bottom: 10px;}

.galeria-iconos--propios{grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));}
.galeria-iconos__propio{position: relative;}
.galeria-iconos__propio .galeria-iconos__opcion{
  width: 100%;
  border: 0;
  background: linear-gradient(150deg, #3B8BF6, #1E4FD8);
  box-shadow: 0 8px 16px -10px rgba(30,79,216,.8);
}
.galeria-iconos__propio .galeria-iconos__opcion svg{width: 34px; height: 34px;}
.galeria-iconos__propio .galeria-iconos__opcion:hover{background: linear-gradient(150deg, #4C97F8, #2459E0);}
.galeria-iconos__propio .galeria-iconos__opcion.elegido{box-shadow: 0 0 0 3px #F4C04E, 0 8px 16px -10px rgba(30,79,216,.8);}
.galeria-iconos__quitar{
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #fff; color: #B42318;
  font-size: 16px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(15,23,42,.3);
  cursor: pointer;
  opacity: .9;
}
.galeria-iconos__quitar:hover{opacity: 1; background: #FEE4E2;}

.galeria-iconos__subir{
  aspect-ratio: 1;
  display: grid; place-items: center; align-content: center; gap: 4px;
  margin: 0;
  border: 2px dashed var(--d-primario, #1E4FD8);
  border-radius: 14px;
  background: #fff;
  color: var(--d-primario, #1E4FD8);
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  transition: background var(--d-rapido), transform var(--d-rapido);
}
.galeria-iconos__subir svg{width: 24px; height: 24px; fill: currentColor;}
.galeria-iconos__subir:hover{background: #F4F7FF; transform: translateY(-1px);}
.galeria-iconos__subir:focus-within{outline: 3px solid var(--d-acento, #E0A21B); outline-offset: 2px;}

.galeria-propia__aviso{margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--d-primario, #1E4FD8);}
.galeria-propia__aviso--malo{color: #B42318;}
.galeria-propia [hidden]{display: none !important;}

/* =====================================================================
   INICIO: ICONOS GRANDES, SIN RECUADRO
   El dibujo va suelto (sin la cajita redondeada), centrado y ocupando
   casi toda la tarjeta; el nombre del modulo queda abajo, a la vista.
   Vale para los iconos del sistema y para los PNG propios.
   ===================================================================== */
.menu-inicio__rejilla .menu-modulo{
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 14px 16px;
}
.interfaz-app .menu-inicio__rejilla .menu-modulo{min-height: 200px;}
.menu-inicio__rejilla .menu-modulo__icono,
.menu-inicio__rejilla .menu-modulo--lector .menu-modulo__icono{
  flex: 1 1 auto;
  width: auto; height: auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.menu-inicio__rejilla .menu-modulo__icono svg{
  width: 108px; height: 108px;
  fill: #fff;
  filter: drop-shadow(0 8px 14px rgba(3,15,40,.28));
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.menu-inicio__rejilla .menu-modulo:hover .menu-modulo__icono svg{transform: scale(1.06);}
/* El lector QR conserva su dorado, ahora en el dibujo */
.menu-inicio__rejilla .menu-modulo--lector .menu-modulo__icono svg{fill: #F6CB5E; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));}
.menu-inicio__rejilla .menu-modulo__nombre{
  margin-top: 0;
  text-align: center;
  font-size: 16.5px;
}

@media (max-width: 760px){
  .interfaz-app .menu-inicio__rejilla .menu-modulo{min-height: 158px;}
  .menu-inicio__rejilla .menu-modulo{padding: 10px 10px 14px; gap: 6px;}
  .menu-inicio__rejilla .menu-modulo__icono svg{width: 78px; height: 78px;}
  .menu-inicio__rejilla .menu-modulo__nombre{font-size: 15px;}
}
@media (prefers-reduced-motion: reduce){
  .menu-inicio__rejilla .menu-modulo:hover .menu-modulo__icono svg{transform: none;}
}

/* En la computadora las tarjetas del inicio vuelven a su tamano de antes
   (170 px de alto); el icono, sin recuadro, se ajusta a ese tamano. El
   celular queda como esta. */
@media (min-width: 761px){
  .interfaz-app .menu-inicio__rejilla .menu-modulo{min-height: 170px;}
  .menu-inicio__rejilla .menu-modulo{padding: 12px 14px 14px; gap: 6px;}
  .menu-inicio__rejilla .menu-modulo__icono svg{width: 78px; height: 78px;}
  .menu-inicio__rejilla .menu-modulo__nombre{font-size: 16px;}
}

/* =====================================================================
   ASISTENCIA DE CLASE (docentes de area)
   En las aulas donde dicta sin ser tutor, su boton principal es "Tomar
   asistencia de <su clase>" (uno por clase); la oficial queda como enlace.
   ===================================================================== */
.aulas .aula__pie .aula__mi-clase{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}
.aulas .aula__pie .aula__mi-clase b{font-weight: 800;}
.aulas .aula__pie .aula__mi-clase small{
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--d-exito-suave, #DCFCE7);
  color: var(--d-exito-texto, #166534);
  font-size: 11.5px; font-weight: 800;
}
.aulas .aula__pie .aula__mi-clase + .aula__mi-clase{margin-top: 8px;}
.aulas .aula__oficial{
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.85);
  font-size: 13px; font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aulas .aula__oficial:hover{color: #fff;}

/* Boton dentro de un aviso (Imprimir el reporte de mi clase) */
.aviso .aviso__accion{margin-left: auto; flex: none; align-self: center;}
@media (max-width: 760px){
  .aviso:has(.aviso__accion){flex-wrap: wrap;}
  .aviso .aviso__accion{margin-left: 0; width: 100%; justify-content: center;}
}
/* El nombre del aula no se corta a mitad de palabra: si no cabe junto a
   la pastilla, la pastilla baja a su propia linea */
.aulas .aula__cabecera{flex-wrap: wrap; row-gap: 8px;}
.aulas .aula__titulo{flex: 1 1 150px; min-width: 150px;}
.aulas .aula__titulo strong{overflow-wrap: normal; word-break: normal;}
.aulas .aula__cabecera > .pastilla{margin-left: auto;}
.aulas .aula__pie .aula__mi-clase{flex-wrap: nowrap;}
.aulas .aula__pie .aula__mi-clase > svg{flex: none;}
.aulas .aula__pie .aula__mi-clase > span{min-width: 0;}
.aulas .aula__pie .aula__mi-clase > small{flex: none;}
.aulas .aula__pie .aula__mi-clase{
  white-space: normal;
  height: auto; min-height: 46px;
  padding: 9px 14px;
  line-height: 1.25;
}
.aulas .aula__pie .aula__mi-clase > span{flex: 0 1 auto;}

/* =====================================================================
   RESPALDO COMPLETO (Importar datos)
   ===================================================================== */
.menu-modulo--respaldo{--m1: #1F8A70; --m2: #0B5A47; --m-sombra: 11,90,71; display: flex;}
.respaldo-pasos{gap: 18px; align-items: stretch;}
.respaldo-pasos > .tarjeta{margin-bottom: 0; display: flex; flex-direction: column;}
.respaldo-pasos > .tarjeta .tarjeta__cuerpo{flex: 1;}
.respaldo-pasos + .tarjeta{margin-top: 18px;}
.respaldo-datos{display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0;}
.respaldo-datos dt{color: var(--d-texto-3); font-size: 13px;}
.respaldo-datos dd{margin: 0; overflow-wrap: anywhere;}
@media (max-width: 760px){
  .respaldo-datos{grid-template-columns: 1fr; gap: 2px;}
  .respaldo-datos dd{margin-bottom: 8px;}
}