/* Generado por construir_estilo.py desde src/phi/estilo.py. No editar a mano. */
*{box-sizing:border-box}
body{font-family:'Segoe UI',Arial,sans-serif;background:#f7f8f9;color:#222;margin:0;
padding:18px 22px;max-width:1280px;margin:0 auto}
a{color:#1e7d40}

/* ---------------------------------------------------------------- cabecera */
.barra{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
flex-wrap:wrap;margin-bottom:4px}
h1{font-size:20px;margin:0}
.sub{color:#666;font-size:12.5px;margin:2px 0 14px}
.quien{font-size:12.5px;color:#555}
.quien form{display:inline}
.quien button{border:none;background:none;color:#1e7d40;cursor:pointer;
font-size:12.5px;text-decoration:underline;padding:0 0 0 8px}
.aviso{background:#fdf3d8;border-left:4px solid #e0a92e;padding:9px 14px;
font-size:12.5px;border-radius:4px;margin-bottom:12px}
.aviso.malo{background:#fbe9e9;border-left-color:#b03a3a;
color:#b03a3a}

/* ------------------------------------------------------------------ panel */
.panel{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);
padding:14px 16px;margin-bottom:12px}
.panel label{display:block;font-size:12.5px;color:#555;margin-bottom:6px}
.busqueda{width:max-content;max-width:100%}
#busca{width:100%;padding:8px 11px;border:1px solid #ccc;
border-radius:6px;font-size:15px}
.filtros{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap;font-size:13px;
color:#555;align-items:center}
.filtros select{margin-left:6px;padding:4px 8px;border:1px solid #ccc;
border-radius:6px;font-size:13px;background:#fff}
.filtros button{border:1px solid #bbb;background:#fff;border-radius:16px;
padding:5px 15px;font-size:13px;cursor:pointer}
.filtros button:hover{background:#f0f0f0}
.pista{margin-top:9px;font-size:12.5px;color:#777}
.tope{margin-top:8px;font-size:12.5px;color:#b03a3a;font-weight:600}

/* --------------------------------------------------------------- resultados */
#lista{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:16px;
overflow:hidden}
#lista:empty{display:none}
#lista .fila{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;
font-size:13.5px;border-bottom:1px solid #eef0f1;cursor:pointer}
#lista .fila:last-child{border-bottom:none}
#lista .fila:hover{background:#eef6ef}
#lista .fila.abierta{background:#e8f6ec;font-weight:600}
#lista .meta{color:#777;font-size:12px;font-weight:400;text-align:right;
white-space:nowrap}
#lista .vacio{padding:11px 14px;font-size:13px;color:#777}

/* ------------------------------------------------------------------ leyenda */
.leyenda{display:flex;gap:16px;font-size:12.5px;color:#444;margin:8px 2px 16px;
flex-wrap:wrap}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda i{width:14px;height:14px;border-radius:3px;display:inline-block;
border:1px solid #0002}
.leyenda .lg-clase{background:#ddf0e0;border-color:#4caf72}
.leyenda .lg-disp{background:#f4faf5;border-color:#2e9e57}
.leyenda .lg-fuera{background:#e4e6e8}
.leyenda .lg-quinc{background:#eef7f0;border:1px dashed #4caf72}
.leyenda .lg-choque{background:#fbe9e9;border-color:#b03a3a}

/* ------------------------------------------------------------------- ficha */
section.alumno{--h:21px;background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);
margin:0 0 22px;overflow:hidden}
.cab{display:flex;justify-content:space-between;align-items:center;gap:12px;
background:#33a058;color:#fff;padding:9px 16px}
.cab .nom{font-weight:700;letter-spacing:.3px}
.cab .der{font-size:13px;text-align:right}
.cab button{border:1px solid #ffffff66;background:#ffffff22;color:#fff;
border-radius:14px;padding:2px 11px;font-size:12px;cursor:pointer}
.banda{background:#e8f6ec;padding:7px 16px;font-size:12.5px;color:#333;
border-bottom:1px solid #d4e9da}
.banda .et{color:#1e7d40;font-weight:700;margin-right:8px}
.banda .fdia{font-family:Consolas,monospace;font-size:12px;margin-right:10px}
.banda.alarma{background:#fbe9e9;border-bottom-color:#eecccc}
.banda.alarma .et{color:#b03a3a}

/* lo que la familia escribió en la matrícula: texto ajeno, se presenta como una
   cita sobre el crema de los avisos del proyecto */
.obs{background:#fdf3d8;border-left:4px solid #e0a92e;
border-bottom:1px solid #e0a92e;padding:9px 16px 10px}
.obs .et{color:#8a6100;font-weight:700;font-size:12px;
text-transform:uppercase;letter-spacing:.5px}
.obs .cuando{font-family:Consolas,monospace;font-size:11.5px;color:#9a8358;margin-left:8px}
.obs blockquote{margin:5px 0 0;padding:0 0 0 11px;border-left:3px solid #e0a92e;
font-size:13px;color:#4a3a12;white-space:pre-wrap;overflow-wrap:anywhere}
.obs .peroluego{display:block;margin-top:6px;font-size:12px;color:#b03a3a}

/* cuando jefatura ha anotado algo posterior, el texto de la familia no se
   muestra (ni se envía) y en su lugar va este aviso, en rojo claro */
.obs.jefatura{background:#fbe9e9;border-left-color:#b03a3a;
border-bottom-color:#eecccc}
.obs.jefatura .et{color:#b03a3a}
.obs.jefatura p{margin:5px 0 0;font-size:13px;color:#6d2626}

.rejwrap{margin:12px 16px}
table.rej{border-collapse:collapse;width:100%;table-layout:fixed}
.rej th,.rej td{border:1px solid #e1e4e6;font-size:12px;text-align:center;padding:0}
.rej tr{height:var(--h)}
.rej tr:first-child th{height:24px;font-weight:600;background:#fff;
border-color:#c9cdd1;font-size:12.5px}
.rej th.hora{width:88px;font-weight:normal;font-family:Consolas,monospace;font-size:10px;
color:#666;background:#fcfcfd;letter-spacing:-.2px}
.rej tr.enpunto th.hora{border-top-color:#c9cdd1}
.rej td.dia{position:relative;padding:0}
/* la columna del día es una sola celda con rowspan: los bloques se sitúan en %
   de su alto y cuadran a cualquier ancho, zoom o papel, sin medir desde JS */
.col{position:absolute;inset:0;background:#fff}
.col.condisp{background:#e4e6e8}
.disp{position:absolute;left:0;right:0;background:#f4faf5;
border-top:2px solid #2e9e57;border-bottom:2px solid #2e9e57}
/* la media hora, en un gris que se distingue TAMBIÉN sobre la banda gris de
   fuera de disponibilidad */
.rayas{position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(to bottom,
  transparent 0,transparent calc(100%/var(--n) - 1px),
  #ccd3d8 calc(100%/var(--n) - 1px),#ccd3d8 calc(100%/var(--n)))}
.celda{position:absolute}
.bloque{position:absolute;inset:1px 2px;background:#ddf0e0;
border:1px solid #4caf72;border-left:4px solid #4caf72;
border-radius:5px;overflow:hidden;display:flex;align-items:center;
justify-content:center;text-align:center;padding:0 3px;line-height:1.12;
color:#14532d;font-weight:600;font-size:11px}
.celda[data-nc="2"] .bloque{font-size:9.5px;padding:0 1px}
.celda[data-nc="3"] .bloque,.celda[data-nc="4"] .bloque{font-size:8px;padding:0 1px}
.bloque i{font-style:normal;font-weight:400;opacity:.75}
.bloque.quinc{border-style:dashed;background:#eef7f0}
.bloque.choque{border-color:#b03a3a;border-left-color:#b03a3a;
background:#fbe9e9;color:#b03a3a}

table.listado{border-collapse:collapse;margin:4px 16px 16px;width:calc(100% - 32px);
font-size:12.5px}
.listado th{text-transform:uppercase;font-size:10.5px;letter-spacing:.6px;color:#888;
text-align:left;font-weight:600;border-bottom:1px solid #ddd;padding:5px 10px 5px 0}
.listado td{border-bottom:1px solid #eee;padding:5px 10px 5px 0;vertical-align:top}
.listado .mono{font-family:Consolas,monospace;font-size:11.5px}
.listado .doc{color:#7a2c2c}
.listado tr.choque td{background:#fbe9e9}
.sinclases{margin:6px 16px 16px;font-size:12.5px;color:#555}
.sinclases b{color:#b03a3a}

.pie{color:#888;font-size:11.5px;margin:24px 2px 8px;border-top:1px solid #e2e5e7;
padding-top:9px}
.pie .viejo{color:#b03a3a;font-weight:600}

/* ------------------------------------------------------------------ entrada */
.entrada{max-width:380px;margin:9vh auto}
.entrada .panel{padding:22px 24px}
.entrada h1{font-size:19px;margin-bottom:4px;text-align:center}
.entrada .sub{text-align:center}
.entrada label{margin-top:12px}
.entrada input{width:100%;padding:9px 11px;border:1px solid #ccc;
border-radius:6px;font-size:15px}
.entrada button{margin-top:18px;width:100%;padding:10px;border:none;
border-radius:6px;background:#33a058;color:#fff;font-size:15px;cursor:pointer}
.entrada button:hover{background:#2c8c4c}
.entrada .err{margin-top:12px;background:#fbe9e9;color:#b03a3a;
padding:9px 12px;border-radius:5px;font-size:13px}

@media print{
  body{background:#fff;padding:0;max-width:none}
  .panel,.aviso,.leyenda,#lista,h1,.sub,.pie,.barra,.cab button{display:none}
  section.alumno{--h:16px;page-break-after:always;page-break-inside:avoid;
  box-shadow:none;border-radius:0;margin:0}
  section.alumno:last-child{page-break-after:auto}
  .cab{padding:6px 16px}
  .banda{padding:5px 16px;font-size:11.5px}
  .rejwrap{margin:8px 16px}
  table.listado{font-size:11px;margin:2px 16px 8px}
  .listado td{padding:2px 8px 2px 0}
  .listado th{padding:3px 8px 3px 0}
  .sinclases{margin:2px 16px 8px;font-size:11px}
}