/* ===== Colegio Sairi · estilos ===== */
:root {
  --azul:#1f4e79; --azul2:#2e75b6; --azul-claro:#eaf1f8; --fondo:#f4f6f9; --blanco:#fff; --texto:#1d2733; --gris:#6b7785;
  --borde:#dde3ea; --verde:#1d7a46; --verde-f:#e5f5ec; --rojo:#b3261e; --rojo-f:#fdecea; --amar:#8a6100; --amar-f:#fff4d6;
  --sombra:0 2px 10px rgba(16,40,70,.07); --radio:10px;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fondo); color:var(--texto); font-size:15px; line-height:1.45; }
a { color:var(--azul2); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:1.45rem; margin:0; color:var(--azul); } h2 { font-size:1.2rem; color:var(--azul); } h3 { font-size:1.05rem; margin:22px 0 8px; color:var(--azul); }
small { color:var(--gris); }
.tenue { color:var(--gris); } .vacio { color:var(--gris); padding:14px; background:#fff; border:1px dashed var(--borde); border-radius:var(--radio); }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Barra superior */
.barra { position:sticky; top:0; z-index:20; background:var(--azul); color:#fff; padding:0 14px; height:52px; display:flex; align-items:center; gap:12px; }
.barra a { color:#fff; } .marca { font-weight:700; font-size:1.05rem; white-space:nowrap; }
.barra .derecha { margin-left:auto; display:flex; align-items:center; gap:16px; }
.barra .quien small { color:#cfe0f2; display:block; font-size:.72rem; line-height:1; }
.barra .quien { text-align:right; line-height:1.15; }
.campana { position:relative; font-size:1.15rem; } .campana b { position:absolute; top:-6px; right:-10px; background:#e74c3c; color:#fff; border-radius:9px; font-size:.65rem; padding:1px 5px; }
.hamburguesa { display:none; background:none; border:0; color:#fff; font-size:1.4rem; padding:4px 6px; cursor:pointer; width:auto; }

/* Menú lateral */
.layout { display:flex; min-height:calc(100vh - 52px); }
.menu { width:250px; flex-shrink:0; background:#fff; border-right:1px solid var(--borde); padding:8px 0 40px; overflow-y:auto; position:sticky; top:52px; height:calc(100vh - 52px); }
.menu > a, .menu details a { display:block; padding:7px 16px; color:var(--texto); font-size:.92rem; border-left:3px solid transparent; }
.menu details a { padding-left:22px; }
.menu a:hover { background:var(--azul-claro); text-decoration:none; }
.menu a.activo { background:var(--azul-claro); color:var(--azul); border-left-color:var(--azul2); font-weight:600; }
.menu summary { cursor:pointer; padding:9px 16px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); font-weight:700; list-style:none; }
.menu summary::-webkit-details-marker { display:none; }
.menu summary::after { content:'▸'; float:right; } .menu details[open] summary::after { content:'▾'; }
main { flex:1; min-width:0; padding:20px 24px 60px; }
.sin-sesion main { max-width:900px; margin:0 auto; }
.velo { display:none; }

.cabecera { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cabecera .acciones { display:flex; gap:6px; flex-wrap:wrap; }

/* Botones y formularios */
button, .boton { display:inline-block; padding:8px 14px; border:0; border-radius:8px; background:var(--azul); color:#fff; font-size:.92rem; cursor:pointer; text-align:center; text-decoration:none; font-family:inherit; line-height:1.3; }
button:hover, .boton:hover { background:var(--azul2); text-decoration:none; }
button.sec, .boton.sec { background:#fff; color:var(--azul); border:1px solid var(--borde); }
button.sec:hover, .boton.sec:hover { background:var(--azul-claro); }
button.peligro, .boton.peligro { background:var(--rojo); } button.verde, .boton.verde { background:var(--verde); }
.boton.peq, button.peq { padding:5px 10px; font-size:.82rem; }
input, select, textarea { font-family:inherit; font-size:.95rem; padding:8px 10px; border:1px solid var(--borde); border-radius:8px; background:#fff; color:var(--texto); max-width:100%; }
input[type=checkbox], input[type=radio] { width:auto; padding:0; }
input:focus, select:focus, textarea:focus { outline:2px solid #b8d4ee; border-color:var(--azul2); }
textarea { width:100%; }
.formulario { background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:18px; box-shadow:var(--sombra); }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px 18px; }
.campo { display:flex; flex-direction:column; gap:4px; font-size:.86rem; color:var(--gris); }
.campo > span { font-weight:600; color:var(--texto); }
.campo input:not([type=checkbox]), .campo select, .campo textarea { width:100%; }
.campo.ancho { grid-column:1 / -1; }
.campo small { font-size:.76rem; }
.valor-ro { padding:8px 0; color:var(--texto); }
.checks { display:flex; flex-wrap:wrap; gap:6px 14px; }
.check { display:inline-flex; align-items:center; gap:6px; color:var(--texto); font-size:.92rem; }
.botones { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.buscar-select { margin-bottom:4px; width:100%; font-size:.85rem; padding:5px 8px; }
.en-linea { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.caja-acciones { background:var(--amar-f); border:1px solid #f0dca0; padding:10px; border-radius:var(--radio); margin:10px 0; display:flex; gap:8px; flex-wrap:wrap; }
.zona-peligro { margin-top:30px; padding-top:14px; border-top:1px dashed var(--borde); }
.mini-label { font-size:.8rem; color:var(--gris); display:inline-flex; align-items:center; gap:4px; }
.actual img.mini { max-height:70px; }

/* Filtros */
.filtros { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:#fff; border:1px solid var(--borde); padding:10px; border-radius:var(--radio); margin-bottom:10px; }
.filtros select, .filtros input { font-size:.85rem; padding:6px 8px; max-width:210px; }

/* Tablas */
.tabla-scroll { overflow-x:auto; background:#fff; border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); }
.tabla { width:100%; border-collapse:collapse; font-size:.88rem; }
.tabla th { background:#f0f4f9; text-align:left; padding:9px 10px; font-weight:600; color:#3b4a5c; white-space:nowrap; border-bottom:1px solid var(--borde); position:sticky; top:0; }
.tabla td { padding:8px 10px; border-bottom:1px solid #eef1f5; vertical-align:top; }
.tabla tbody tr:hover { background:#fafcff; }
.tabla tfoot td { background:#f7f9fc; border-top:2px solid var(--borde); }
.tabla td.acc { white-space:nowrap; text-align:right; }
.tabla td.num, .tabla .num { text-align:right; }
.tabla input, .tabla select { padding:5px 7px; font-size:.86rem; }
.paginas { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.paginas b, .paginas a { padding:4px 9px; border-radius:6px; border:1px solid var(--borde); background:#fff; } .paginas b { background:var(--azul); color:#fff; }
img.mini { height:38px; width:38px; object-fit:cover; border-radius:6px; border:1px solid var(--borde); }
.color { display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:middle; border:1px solid #0002; }

/* Ficha de detalle */
.ficha { display:grid; grid-template-columns:minmax(150px, 230px) 1fr; background:#fff; border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); margin:0; }
.ficha dt { padding:9px 12px; background:#f7f9fc; font-weight:600; font-size:.85rem; color:#3b4a5c; border-bottom:1px solid #eef1f5; }
.ficha dd { padding:9px 12px; margin:0; border-bottom:1px solid #eef1f5; white-space:pre-wrap; word-break:break-word; }

/* Etiquetas de estado */
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:.75rem; font-weight:600; white-space:nowrap; background:#eef1f5; color:#3b4a5c; }
.badge.v { background:var(--verde-f); color:var(--verde); } .badge.r { background:var(--rojo-f); color:var(--rojo); } .badge.a { background:var(--amar-f); color:var(--amar); }

/* Alertas */
.alerta { background:var(--rojo-f); color:var(--rojo); padding:10px 14px; border-radius:8px; margin-bottom:12px; border:1px solid #f5c6c2; }
.alerta.ok { background:var(--verde-f); color:var(--verde); border-color:#bfe5cf; }
.alerta.info { background:var(--azul-claro); color:var(--azul); border-color:#c8dcef; }
.alerta.aviso { background:var(--amar-f); color:var(--amar); border-color:#f0dca0; }

/* KPIs y tarjetas */
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(175px, 1fr)); gap:12px; margin-bottom:18px; }
.kpi { background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:13px 14px; box-shadow:var(--sombra); }
.kpi span { display:block; color:var(--gris); font-size:.8rem; } .kpi b { font-size:1.35rem; color:var(--azul); font-variant-numeric:tabular-nums; }
.kpi.grande b { font-size:1.75rem; } .kpi.rojo b { color:var(--rojo); } .kpi.verde b { color:var(--verde); } .kpi.amar b { color:var(--amar); }
.kpi.grande { background:linear-gradient(135deg, var(--azul), var(--azul2)); border:0; } .kpi.grande span, .kpi.grande b { color:#fff; }
.tarjeta { background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:16px; box-shadow:var(--sombra); margin-bottom:14px; }
.tarjeta h3 { margin-top:0; }
.columnas { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }

/* Panel de control */
.saludo { margin:0 0 4px; }
.mosaico-grupo { margin:20px 0 6px; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--gris); font-weight:700; }
.mosaico { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.mosaico a { background:#fff; border:1px solid var(--borde); border-radius:12px; padding:14px 10px; text-align:center; color:var(--texto); box-shadow:var(--sombra); transition:transform .1s, box-shadow .1s; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.86rem; line-height:1.2; min-height:96px; justify-content:center; }
.mosaico a:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,40,70,.12); text-decoration:none; border-color:#b8d4ee; }
.mosaico a .ico { font-size:1.7rem; }
.lista { list-style:none; padding:0; margin:0; }
.lista li { padding:9px 2px; border-bottom:1px solid #eef1f5; } .lista li:last-child { border-bottom:0; }
.lista li small { display:block; }

/* Barras de gráficos */
.barras { display:flex; flex-direction:column; gap:6px; }
.barra-fila { display:grid; grid-template-columns:110px 1fr 110px; gap:8px; align-items:center; font-size:.85rem; }
.barra-pista { background:#eef1f5; border-radius:6px; height:16px; position:relative; overflow:hidden; }
.barra-relleno { height:100%; border-radius:6px; background:var(--azul2); } .barra-relleno.rojo { background:#d9534f; } .barra-relleno.verde { background:#2e9e5b; }

/* Calendario */
.cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.cal .dia-nombre { text-align:center; font-weight:700; font-size:.8rem; color:var(--gris); padding:4px; }
.cal .dia { background:#fff; border:1px solid var(--borde); border-radius:8px; min-height:92px; padding:4px 5px; font-size:.78rem; }
.cal .dia.fuera { opacity:.4; } .cal .dia.hoy { border:2px solid var(--azul2); }
.cal .dia .n { font-weight:700; color:var(--gris); }
.cal .ev { display:block; color:#fff; border-radius:4px; padding:1px 4px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal .feriado { color:var(--rojo); font-size:.7rem; display:block; }

/* Horario */
.horario td, .horario th { text-align:center; min-width:110px; }
.horario td.recreo { background:#f7f9fc; color:var(--gris); }
.horario .clase { background:var(--azul-claro); border-radius:6px; padding:4px; font-size:.8rem; }

/* Notas */
.notas-grid select { min-width:62px; }

/* Recojo / ficha personas */
.persona { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:10px; margin-bottom:8px; }
.persona img { width:84px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--borde); }
.persona .sin-foto { width:84px; height:84px; border-radius:10px; background:#eef1f5; display:flex; align-items:center; justify-content:center; font-size:2rem; }

/* Carnets y etiquetas */
.carnets { display:grid; grid-template-columns:repeat(auto-fill, 8.6cm); gap:6mm; }
.carnet { width:8.6cm; height:5.4cm; border:1px solid #999; border-radius:3mm; padding:3mm; display:flex; gap:3mm; background:#fff; overflow:hidden; page-break-inside:avoid; }
.carnet .qr { width:2.6cm; height:2.6cm; } .carnet .datos { font-size:9pt; line-height:1.25; } .carnet .cole { font-weight:700; color:var(--azul); font-size:10pt; }
.etiquetas { display:grid; grid-template-columns:repeat(auto-fill, 5cm); gap:4mm; }
.etiqueta { width:5cm; border:1px dashed #999; padding:2mm; text-align:center; font-size:8pt; page-break-inside:avoid; background:#fff; }

/* Documento imprimible */
.hoja { background:#fff; max-width:21cm; margin:0 auto; padding:2cm; border:1px solid var(--borde); box-shadow:var(--sombra); font-family:Georgia, 'Times New Roman', serif; font-size:12pt; line-height:1.6; }
.hoja .membrete { text-align:center; border-bottom:2px solid var(--azul); padding-bottom:8px; margin-bottom:18px; }

/* Login */
.login-pag { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; background:linear-gradient(135deg, #1f4e79, #2e75b6); }
.login-caja { background:#fff; width:100%; max-width:380px; padding:30px; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.2); }
.login-caja h1 { text-align:center; } .login-caja .sub { text-align:center; color:var(--gris); margin:4px 0 20px; }
.login-caja label { display:block; margin-bottom:12px; font-size:.88rem; color:var(--gris); }
.login-caja input { width:100%; margin-top:4px; } .login-caja button { width:100%; padding:12px; font-size:1rem; }

/* Lector QR */
#lector { width:100%; max-width:420px; margin:0 auto; }
.resultado-qr { font-size:1.2rem; text-align:center; padding:16px; border-radius:var(--radio); margin:10px 0; }

/* Móvil */
@media (max-width: 860px) {
  .hamburguesa { display:block; }
  .barra .quien { display:none; }
  .menu { position:fixed; left:0; top:52px; z-index:30; height:calc(100vh - 52px); transform:translateX(-100%); transition:transform .2s; box-shadow:4px 0 20px rgba(0,0,0,.15); }
  body.menu-abierto .menu { transform:none; }
  body.menu-abierto .velo { display:block; position:fixed; inset:52px 0 0 0; background:#0005; z-index:25; }
  main { padding:16px 14px 60px; }
  .ficha { grid-template-columns:1fr; } .ficha dt { border-bottom:0; padding-bottom:2px; }
  .mosaico { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
  .barra-fila { grid-template-columns:80px 1fr 90px; }
  .cal .dia { min-height:60px; font-size:.7rem; }
}

/* Impresión / PDF */
@media print {
  .no-print, .barra, .menu, .filtros, .velo, .acciones, .paginas { display:none !important; }
  body { background:#fff; font-size:11px; } main { padding:0; } .layout { display:block; }
  .tabla-scroll, .tarjeta, .ficha, .kpi, .hoja { box-shadow:none; border-color:#ccc; }
  .hoja { border:0; padding:0; }
  a { color:inherit; }
}