/* ==========================================================================
   LOS COLORES Y LOS BOTONES GRANDES

   Esto sale tal cual del boceto que Andres aprobo
   (boceto-lista-profesora.html). Los colores, los tamanos y los redondeos son
   los mismos. Lo que se agrego esta marcado con un comentario "AGREGADO":
   son las pantallas que el boceto no dibujaba (la de entrar, el cajon de las
   rechazadas, el aviso de que se termino la hora).

   Pensado para TABLET: se usa parada, con una mano, sin mirar de cerca.
   Los botones de marcar no bajan de 106px de ancho y 18px de alto por dentro.
   ========================================================================== */

:root{
  --negro:#0B0910; --tinta:#191320; --lila:#BA94FB; --lila-hondo:#5A32A8;
  --lila-humo:#F4EFFD; --gris:#6A6478; --linea:#E6DEF5; --blanco:#fff; --fondo:#EEEAF6;
  --verde:#116B39; --verde-humo:#DCF3E5; --verde-borde:#63C48F;
  --rojo:#A81C15; --rojo-humo:#FCE6E4; --rojo-borde:#EE968F;
  --ambar:#8A6100; --ambar-humo:#FFF3D6; --ambar-borde:#E8C46B;
  --dato:#1F4E79; --dato-humo:#E7F0F9; --dato-borde:#9FC2E0;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.45}

/* El cartel de arriba de todo. En el boceto decia "esto es un dibujo".
   Aca dice la verdad de esta version, que es igual de importante. */
.aviso{background:#FFF8E1;border-bottom:2px solid #B8860B;color:#5c4300;
       padding:10px 18px;font-size:.88rem;text-align:center}
.aviso b{color:#3d2c00}

.escenario{max-width:880px;margin:0 auto;padding:22px 16px 70px}
.tablet{background:var(--blanco);border-radius:18px;box-shadow:0 6px 26px rgba(30,10,60,.13);
        overflow:hidden}

/* --- El cartel grande de sin conexion ---------------------------------- */
/* La conexion se muestra al reves de lo habitual: cuando esta conectada, una
   etiqueta chica; cuando NO lo esta, esto, arriba de todo. */
.desconectada{background:#8A2A00;color:#fff;padding:17px 20px;align-items:center;gap:14px;display:none}
.desconectada.se-ve{display:flex}
.desconectada .pto{width:15px;height:15px;border-radius:50%;background:#FFB4A0;flex-shrink:0}
.desconectada b{display:block;font-size:1.1rem}
.desconectada em{display:block;font-style:normal;font-size:.88rem;color:#FFD9CC;margin-top:3px}

.cab{background:var(--negro);color:#fff;padding:16px 20px}
.cab__fila{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.cab h1{margin:0;font-size:1.2rem}
.cab .sub{color:#B4A7C9;font-size:.87rem;margin-top:3px}
.estado{background:#12321f;color:#7FE0AC;font-size:.78rem;font-weight:700;padding:7px 13px;
        border-radius:999px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.estado i{width:8px;height:8px;border-radius:50%;background:#4CD48A;display:block}
.estado.no-se-ve{display:none}
/* AGREGADO: la etiqueta chica cambia de color cuando hay cosas esperando. */
.estado.esperando{background:#3a2f10;color:#F0D68A}
.estado.esperando i{background:#E8C46B}

/* --- La barra de las clases del dia ------------------------------------ */
.dia{background:#F6F2FC;border-bottom:1px solid var(--linea);padding:12px 20px}
.dia__t{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
        color:var(--gris);font-weight:800;margin-bottom:8px}
.dia__l{display:flex;gap:9px;flex-wrap:wrap}
.dia__b{font-family:inherit;text-align:left;border-radius:11px;padding:9px 14px;cursor:pointer;
        border:2px solid var(--linea);background:var(--blanco);color:var(--tinta);
        font-size:.95rem;font-weight:800;line-height:1.15}
.dia__b em{display:block;font-style:normal;font-size:.7rem;font-weight:700;color:var(--gris);
           text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.dia__b.on{background:var(--negro);border-color:var(--negro);color:#fff}
.dia__b.on em{color:#B4A7C9}
.dia__b.pend{border-color:var(--ambar-borde);background:var(--ambar-humo)}
.dia__b.pend em{color:var(--ambar)}
.dia__b.on.pend{background:var(--negro);border-color:var(--ambar-borde)}
.dia__b.on.pend em{color:#F0D68A}

/* --- La pregunta de las llegadas tarde --------------------------------- */
.pregunta{background:var(--ambar-humo);border-bottom:2px solid var(--ambar-borde);
          padding:14px 20px;font-size:.92rem;color:#5c4300}
.pregunta b{color:#3d2c00}
.pregunta__b{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.pb{font-family:inherit;font-weight:800;font-size:.86rem;padding:10px 16px;border-radius:10px;
    border:2px solid var(--ambar-borde);background:var(--blanco);color:var(--ambar);cursor:pointer}
.pb--si{background:var(--ambar);border-color:var(--ambar);color:#fff}

/* --- La lista ---------------------------------------------------------- */
.grupo__t{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
          font-weight:800;padding:16px 20px 8px;background:#FAF8FD}
.fila{display:flex;align-items:center;gap:15px;padding:14px 20px;border-bottom:1px solid #F0EBF9}
.fila:last-child{border-bottom:0}
.fila.vino{background:var(--verde-humo)}
.fila.falto{background:var(--rojo-humo)}

/* El cuadradito con la inicial. NO es un dibujo provisorio: hoy no hay ni una
   foto carnet cargada en la base, asi que esto es lo que se ve de verdad.
   El dia que haya fotos, se pone la imagen adentro de este mismo cuadrado. */
.foto{width:64px;height:64px;border-radius:12px;flex-shrink:0;position:relative;overflow:hidden;
      background:var(--lila-humo);border:2px solid var(--linea);
      display:flex;align-items:center;justify-content:center;
      font-size:1.55rem;font-weight:800;color:var(--lila-hondo)}
.foto span{position:absolute;bottom:0;left:0;right:0;background:rgba(90,50,168,.85);
           color:#fff;font-size:.5rem;text-align:center;letter-spacing:.05em;
           padding:1px 0;text-transform:uppercase}
.fila.vino .foto{border-color:var(--verde-borde)}
.fila.falto .foto{border-color:var(--rojo-borde);opacity:.5}

.nom{flex:1;min-width:0}
.nom b{display:block;font-size:1.12rem;font-weight:700;line-height:1.25}
.nom small{display:block;font-size:.83rem;color:var(--gris);margin-top:2px}
.etq{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:999px;
     text-transform:uppercase;letter-spacing:.05em;margin-top:5px;margin-right:5px}
.etq--prueba{background:var(--ambar-humo);color:var(--ambar);border:1px solid var(--ambar-borde)}
.etq--primera{background:var(--lila-humo);color:var(--lila-hondo);border:1px solid var(--lila)}
.etq--motivo{background:#EEF1F6;color:#40506B;border:1px solid #C6D0E0}
.etq--cumple{background:#FFF0F6;color:#9B1D5B;border:1px solid #F0A8C8}
/* AGREGADO: la que llego tarde y la que se fue antes, dicho en la fila. */
.etq--tarde{background:var(--ambar-humo);color:var(--ambar);border:1px solid var(--ambar-borde)}
.etq--antes{background:#EEF1F6;color:#3F5A80;border:1px solid #C6D0E0}
/* AGREGADO 14/9/2026: la que viene a recuperar una falta. Solo esta etiqueta: ni de donde
   viene ni que falta recupera. */
.etq--recupera{background:#E6F4EF;color:#17624F;border:1px solid #86C8B2}

/* La nota fija: lo que la profesora tiene que saber siempre. La escribe la
   oficina, la profesora no. */
.nota{display:block;margin-top:7px;background:var(--dato-humo);border-left:4px solid var(--dato-borde);
      border-radius:0 8px 8px 0;padding:7px 11px;font-size:.85rem;color:var(--dato);line-height:1.35}
.nota b{display:inline;font-size:.85rem;font-weight:800}

/* La salud (13/9/2026): lo que escribio la familia y que implica en la clase. Se abre tocando. */
.salud{display:block;margin-top:7px;border-left:4px solid var(--dato-borde);border-radius:0 8px 8px 0;
       background:#fff;padding:5px 11px;font-size:.85rem}
.salud summary{cursor:pointer;font-weight:800;color:var(--dato);text-transform:uppercase;
               letter-spacing:.05em;font-size:.75rem;padding:4px 0}
.salud--imp{border-left-color:var(--rojo-borde)}
.salud--imp summary{color:var(--rojo)}
.salud__item{padding:6px 0;border-top:1px solid var(--linea)}
.salud__item b{display:block;font-size:.85rem;text-transform:capitalize}
.salud__fam{margin:3px 0 0;color:var(--gris);line-height:1.35}
.salud__rec{margin:4px 0 0;line-height:1.35}

.par{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.b{font-family:inherit;font-weight:800;font-size:1rem;min-width:106px;padding:18px 8px;
   border-radius:14px;cursor:pointer;border:2.5px solid var(--linea);
   background:var(--blanco);color:var(--gris)}
.fila.vino .b.si{background:var(--verde);border-color:var(--verde);color:#fff}
.fila.falto .b.no{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* Los dos botones secundarios: se ven mas apagados que el de faltar, porque
   son la excepcion de la excepcion. Y son CONTEXTUALES: "se fue antes" solo
   sobre la que vino, "llego tarde" solo sobre la que falto. Nunca los dos. */
.extra{display:none;font-family:inherit;font-weight:800;font-size:.83rem;padding:13px 14px;
       border-radius:12px;cursor:pointer;flex-shrink:0}
.fila.vino .antes{display:block;border:2px solid #CBD5E4;background:var(--blanco);color:#4A5B78}
.fila.vino.antes-si .antes{background:#3F5A80;border-color:#3F5A80;color:#fff}
.fila.falto .tarde{display:block;border:2px solid var(--ambar-borde);
                   background:var(--ambar-humo);color:var(--ambar)}

.barra{background:var(--lila-humo);border-top:1px solid var(--linea);padding:14px 20px;
       font-size:.96rem;font-weight:700;color:var(--lila-hondo)}
.barra.lista{background:var(--verde-humo);color:var(--verde)}

.extras{padding:18px 20px 22px;background:#FAF8FD;border-top:1px solid var(--linea)}
.extras h3{margin:0 0 4px;font-size:.9rem}
.extras p{margin:0 0 10px;font-size:.84rem;color:var(--gris)}
.agregar{width:100%;font-family:inherit;font-size:.94rem;font-weight:700;padding:15px;
         border-radius:12px;border:2px dashed var(--lila);background:var(--lila-humo);
         color:var(--lila-hondo);cursor:pointer;margin-bottom:14px}
/* AGREGADO: los dos botones del final quedan DIBUJADOS Y APAGADOS, con el
   motivo escrito al lado. No se esconden: se ve que van a estar. */
.agregar:disabled{border-color:#D6CEE6;background:#F3F1F7;color:#9A93AC;cursor:not-allowed}
.porque{font-size:.78rem;color:var(--gris);margin:-8px 0 16px;font-style:italic}

.cerrar{padding:18px 20px 24px}
.cerrar button{width:100%;font-family:inherit;font-size:1.05rem;font-weight:800;padding:19px;
    border-radius:14px;border:0;background:var(--negro);color:#fff;cursor:pointer}
.cerrar button:disabled{background:#D6CEE6;color:#877CA0;cursor:not-allowed}

/* ==========================================================================
   AGREGADO: lo que el boceto no dibujaba
   ========================================================================== */

/* --- La pantalla de entrar --------------------------------------------- */
.entrar{max-width:560px;margin:40px auto;background:var(--blanco);border-radius:18px;
        box-shadow:0 6px 26px rgba(30,10,60,.13);padding:28px 26px}
.entrar h1{margin:0 0 6px;font-size:1.3rem}
.entrar p{margin:0 0 18px;font-size:.92rem;color:var(--gris)}
.entrar label{display:block;font-size:.78rem;font-weight:800;text-transform:uppercase;
              letter-spacing:.07em;color:var(--gris);margin-bottom:6px}
.entrar select,.entrar input{width:100%;font-family:inherit;font-size:1rem;padding:14px;
        border-radius:12px;border:2px solid var(--linea);background:var(--blanco);
        color:var(--tinta);margin-bottom:16px}
.entrar button{width:100%;font-family:inherit;font-size:1.05rem;font-weight:800;padding:18px;
        border-radius:14px;border:0;background:var(--negro);color:#fff;cursor:pointer}
.entrar button:disabled{background:#D6CEE6;color:#877CA0;cursor:not-allowed}

/* --- Cuando se termino la hora y quedan sin marcar --------------------- */
.tarde-aviso{background:var(--rojo-humo);border-bottom:2px solid var(--rojo-borde);
             padding:14px 20px;font-size:.92rem;color:#6b1710;display:none}
.tarde-aviso.se-ve{display:block}
.tarde-aviso b{display:block;font-size:1rem;margin-bottom:4px;color:var(--rojo)}

/* --- El cajon de las rechazadas ---------------------------------------- */
/* Lo peor que puede pasar es que algo se pierda EN SILENCIO. Por eso esto
   esta a la vista, con el motivo que dio la base escrito tal cual. */
.negadas{background:#FFF1EE;border-top:2px solid var(--rojo-borde);padding:0;display:none}
.negadas.se-ve{display:block}
.negadas__t{width:100%;text-align:left;font-family:inherit;font-size:.9rem;font-weight:800;
            padding:14px 20px;border:0;background:transparent;color:var(--rojo);cursor:pointer}
.negadas__l{padding:0 20px 16px;margin:0;list-style:none}
.negadas__l li{background:var(--blanco);border:1px solid var(--rojo-borde);border-radius:10px;
               padding:10px 12px;margin-bottom:8px;font-size:.85rem;color:#6b1710}
.negadas__l li b{display:block;color:var(--rojo)}
.negadas__l button{font-family:inherit;font-size:.78rem;font-weight:700;margin-top:6px;
                   padding:6px 12px;border-radius:8px;border:1px solid var(--rojo-borde);
                   background:var(--blanco);color:var(--rojo);cursor:pointer}

/* --- Carteles sueltos --------------------------------------------------- */
.mensaje{padding:40px 22px;text-align:center;color:var(--gris)}
.mensaje b{display:block;font-size:1.05rem;color:var(--tinta);margin-bottom:6px}
.reloj-corrido{background:var(--ambar-humo);border-bottom:2px solid var(--ambar-borde);
               padding:12px 20px;font-size:.88rem;color:#5c4300;display:none}
.reloj-corrido.se-ve{display:block}

/* --- AGREGADO 14/9/2026: entrar con Supabase, Salir, sin conexion ------ */
/* Los botones de mas en las pantallas de entrar y de mensajes, uno abajo del otro. */
.entrar__botones button{margin-top:10px}
.entrar button.peligro{background:var(--rojo)}
.entrar button.suave{background:var(--blanco);color:var(--tinta);border:2px solid var(--linea)}
/* El sello cuando se corta: "Sin conexion" (decision del 8/9/2026). */
.estado.sin{background:#3a1a10;color:#FFB4A0}
.estado.sin i{background:#FFB4A0}
.cab__der{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.salir{font-family:inherit;font-size:.78rem;font-weight:700;padding:7px 13px;border-radius:999px;
       border:1px solid #4a4058;background:transparent;color:#D9CFEA;cursor:pointer}
/* Antes era un style="..." adentro de pantalla.js; como clase deja poner una CSP estricta. */
.dia__vacio{color:var(--gris);font-size:.9rem}
.mensaje__b{margin-top:14px}

@media (max-width:660px){
  .fila{padding:12px 13px;gap:11px;flex-wrap:wrap}
  .b{min-width:calc(50% - 5px);font-size:.94rem;padding:16px 6px}
  .foto{width:54px;height:54px;font-size:1.3rem}
  .nom{flex:1 1 55%}
  .par{width:100%}
  .extra{width:100%}
}

/* --- AGREGADO 14/9/2026 (parte 2): los dos botones de abajo y su hoja ---- */
/* Letras grandes: se usa parada, con una mano, en medio de la clase. */
.agregar--grande{font-size:1.15rem;font-weight:800;padding:20px 16px;border-style:solid;min-height:64px}
.agregar[hidden]{display:none}
.porque:empty{display:none}
/* El "Anotado." Sin numeros. Se va solo. */
.anotado{background:var(--verde-humo);border:2px solid var(--verde-borde);color:var(--verde);
         font-size:1.1rem;font-weight:800;border-radius:12px;padding:14px 16px;margin:0 0 16px}
.anotado[hidden]{display:none}

/* La hoja: tapa la lista mientras se escribe, asi no se marca a nadie sin querer. */
.hoja{position:fixed;inset:0;background:rgba(11,9,16,.6);display:flex;align-items:flex-start;
      justify-content:center;padding:24px 14px;overflow-y:auto;z-index:50}
.hoja[hidden]{display:none}
.hoja__caja{width:100%;max-width:620px;background:var(--blanco);border-radius:18px;padding:26px 24px;
            box-shadow:0 10px 40px rgba(0,0,0,.3)}
.hoja h2{margin:0 0 4px;font-size:1.5rem;line-height:1.25}
.hoja__clase{margin:0 0 10px;font-size:1rem;font-weight:700;color:var(--lila-hondo)}
.hoja__texto{margin:0 0 18px;font-size:1.05rem;color:var(--gris)}
.hoja label{display:block;font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
            color:var(--tinta);margin-bottom:6px}
.hoja label span{text-transform:none;letter-spacing:0;font-weight:600;color:var(--gris)}
.hoja input{width:100%;font-family:inherit;font-size:1.35rem;padding:16px;border-radius:12px;
            border:2px solid var(--linea);background:var(--blanco);color:var(--tinta);margin-bottom:18px}
.hoja input:focus{outline:3px solid var(--lila);border-color:var(--lila-hondo)}
#grupoEdad input{max-width:10rem}
.hoja__error{margin:0 0 14px;font-size:1.05rem;font-weight:700;color:var(--rojo)}
.hoja__error:empty{display:none}
.hoja__botones{display:flex;gap:12px;flex-wrap:wrap}
.hoja__botones button{flex:1 1 200px;font-family:inherit;font-size:1.2rem;font-weight:800;padding:20px;
                      border-radius:14px;cursor:pointer}
.hoja__si{border:0;background:var(--negro);color:#fff}
.hoja__si:disabled{background:#D6CEE6;color:#877CA0;cursor:not-allowed}
.hoja__no{border:2px solid var(--linea);background:var(--blanco);color:var(--tinta)}
/* Cuando el boton no esta, el por que va sin el margen negativo de .porque. */
#porqueVinoSinLista,#porquePruebaSinAviso{margin:0 0 16px;font-size:.95rem}