/* Selloo — hoja de estilo única. Sin frameworks: carga en cualquier red. */

:root{
  --tinta:#0E2438;
  --tinta-2:#1B3A57;
  --acento:#1F6FEB;
  --acento-suave:#EAF1FE;
  --texto:#25384A;
  --gris:#64798C;
  --gris-claro:#8DA0B2;
  --linea:#E1E8EF;
  --fondo:#F4F7FA;
  --blanco:#fff;

  --ok:#067647;      --ok-bg:#ECFDF3;   --ok-borde:#ABEFC6;
  --warn:#B54708;    --warn-bg:#FFFAEB; --warn-borde:#FEDF89;
  --mal:#B42318;     --mal-bg:#FEF3F2;  --mal-borde:#FECDCA;
  --neutro:#475467;  --neutro-bg:#F2F4F7; --neutro-borde:#E4E7EC;

  --r:12px;
  --sombra:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --sombra-md:0 4px 12px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--acento); text-decoration:none}
h1,h2,h3{margin:0; color:var(--tinta); letter-spacing:-.01em}

/* ---------- barra superior ---------- */
.barra{
  background:var(--tinta); color:#fff; padding:0 20px;
  display:flex; align-items:center; gap:20px; height:60px;
  position:sticky; top:0; z-index:10;
}
.marca{display:flex; align-items:center; gap:9px; font-weight:650; font-size:17px; color:#fff}
.marca svg{display:block}
.barra nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.barra nav a{
  color:#B9C9D8; padding:7px 12px; border-radius:8px; font-size:14px; font-weight:500;
}
.barra nav a:hover{background:rgba(255,255,255,.08); color:#fff}
.barra nav a.activo{background:rgba(255,255,255,.14); color:#fff}
.etiqueta-demo{
  background:#FDB022; color:#4E2A02; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:20px; letter-spacing:.04em;
}

.envoltura{max-width:1180px; margin:0 auto; padding:24px 20px 60px}

/* ---------- encabezado de sección ---------- */
.encabezado{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.encabezado h1{font-size:24px}
.encabezado .sub{color:var(--gris); font-size:14px; margin-top:3px}
.reloj{
  margin-left:auto; text-align:right; background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r); padding:10px 16px; box-shadow:var(--sombra);
}
.reloj .hora{font-size:26px; font-weight:680; color:var(--tinta); line-height:1;
  font-variant-numeric:tabular-nums}
.reloj .fecha{font-size:12px; color:var(--gris); margin-top:4px}

/* ---------- tarjetas de resumen ---------- */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px}
.tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--sombra);
}
.tarjeta .num{font-size:30px; font-weight:680; line-height:1.1; font-variant-numeric:tabular-nums}
.tarjeta .rot{font-size:13px; color:var(--gris); margin-top:4px; font-weight:500}
.tarjeta.ok .num{color:var(--ok)}
.tarjeta.warn .num{color:var(--warn)}
.tarjeta.mal .num{color:var(--mal)}
.tarjeta.mal{border-color:var(--mal-borde); background:var(--mal-bg)}

.barra-progreso{height:8px; background:var(--neutro-bg); border-radius:99px; overflow:hidden; margin-top:10px}
.barra-progreso span{display:block; height:100%; background:var(--ok); border-radius:99px}

/* ---------- bloques y paneles ---------- */
.panel{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin-bottom:20px; overflow:hidden;
}
.panel > header{
  padding:14px 18px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:10px;
}
.panel > header h2{font-size:16px}
.panel > header .cuenta{
  margin-left:auto; font-size:13px; color:var(--gris); font-weight:500;
}
.panel.urgente{border-color:var(--mal-borde)}
.panel.urgente > header{background:var(--mal-bg); border-bottom-color:var(--mal-borde)}
.panel.urgente > header h2{color:var(--mal)}
.cuerpo{padding:18px}

/* ---------- lista de alertas ---------- */
.alertas{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; padding:16px}
.alerta{
  border:1px solid var(--mal-borde); background:var(--mal-bg); border-radius:10px; padding:13px 15px;
}
.alerta .top{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.alerta .salon{font-weight:700; color:var(--tinta); font-size:16px}
.alerta .det{font-size:13px; color:var(--neutro); line-height:1.45}
.alerta .det b{color:var(--tinta); font-weight:600}
.vacio{padding:28px 18px; text-align:center; color:var(--gris); font-size:14px}
.vacio svg{display:block; margin:0 auto 8px}

/* ---------- tabla ---------- */
.tabla-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gris-claro); font-weight:600; padding:10px 18px; background:#FAFBFC;
  border-bottom:1px solid var(--linea); white-space:nowrap;
}
tbody td{padding:11px 18px; border-bottom:1px solid #F0F4F7; vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.destacada{background:var(--mal-bg)}
tbody tr:hover{background:#FBFCFD}
tbody tr.destacada:hover{background:#FDEDEA}
td.salon{font-weight:650; color:var(--tinta); white-space:nowrap}
td.hora{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--gris)}
td.maestro{min-width:190px}
td.materia{color:var(--gris)}
.grupo{font-size:12px; color:var(--gris-claro)}

.fila-bloque td{
  background:#F7F9FB; font-weight:650; color:var(--tinta-2); font-size:13px;
  padding:8px 18px; border-bottom:1px solid var(--linea); border-top:1px solid var(--linea);
}
.fila-bloque .ahora{
  background:var(--acento); color:#fff; font-size:11px; padding:2px 7px;
  border-radius:20px; margin-left:8px; font-weight:600; letter-spacing:.03em;
}

/* ---------- píldoras de estado ---------- */
.pildora{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px;
  font-size:12.5px; font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.pildora .punto{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.p-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-borde)}
.p-warn{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-borde)}
.p-mal{background:var(--mal-bg); color:var(--mal); border-color:var(--mal-borde)}
.p-neutro{background:var(--neutro-bg); color:var(--neutro); border-color:var(--neutro-borde)}
.p-espera{background:var(--acento-suave); color:var(--acento); border-color:#C6DBFC}

/* ---------- botones y formularios ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:9px;
  border:1px solid var(--linea); background:var(--blanco); color:var(--texto);
  font-size:14px; font-weight:550; cursor:pointer; font-family:inherit;
}
.btn:hover{background:#F7F9FB; border-color:#CFDAE4}
.btn-principal{background:var(--acento); border-color:var(--acento); color:#fff}
.btn-principal:hover{background:#1A5FD0; border-color:#1A5FD0}
.btn-fantasma{background:transparent; border-color:transparent; color:var(--gris)}
.btn-chico{padding:6px 11px; font-size:13px}
.btn-peligro{color:var(--mal); border-color:var(--mal-borde); background:var(--mal-bg)}
form.enlinea{display:inline}
input[type=time], select{
  padding:8px 11px; border:1px solid var(--linea); border-radius:9px; font-size:14px;
  font-family:inherit; background:#fff; color:var(--texto);
}
.controles{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.nota{font-size:13px; color:var(--gris); line-height:1.55}
.nota b{color:var(--tinta)}

/* ---------- la pantalla del maestro ---------- */
body.movil{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:18px}
.ficha{
  background:var(--blanco); border-radius:18px; box-shadow:var(--sombra-md);
  max-width:400px; width:100%; padding:34px 26px; text-align:center;
  border:1px solid var(--linea);
}
.ficha .simbolo{
  width:76px; height:76px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.simbolo.s-ok{background:var(--ok-bg); color:var(--ok)}
.simbolo.s-warn{background:var(--warn-bg); color:var(--warn)}
.simbolo.s-mal{background:var(--mal-bg); color:var(--mal)}
.simbolo.s-neutro{background:var(--acento-suave); color:var(--acento)}
.ficha h1{font-size:21px; margin-bottom:9px}
.ficha p{color:var(--gris); font-size:15px; margin:0; line-height:1.55}
.ficha .pie{
  margin-top:22px; padding-top:15px; border-top:1px solid var(--linea);
  font-size:12.5px; color:var(--gris-claro); line-height:1.7;
}
.ficha .pie b{color:var(--gris); font-weight:600}
.marca-ficha{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-bottom:22px; color:var(--tinta); font-weight:650; font-size:15px;
}

/* elegir maestro (solo demo) */
.lista-maestros{display:flex; flex-direction:column; gap:7px; margin-top:18px; text-align:left}
.lista-maestros button{
  width:100%; text-align:left; padding:11px 14px; border-radius:10px;
  border:1px solid var(--linea); background:#fff; cursor:pointer; font-family:inherit;
  font-size:14.5px; color:var(--tinta); font-weight:550;
}
.lista-maestros button:hover{border-color:var(--acento); background:var(--acento-suave)}
.lista-maestros small{display:block; color:var(--gris-claro); font-weight:400; font-size:12.5px}

/* ---------- portada ---------- */
.hero{text-align:center; padding:46px 20px 34px}
.hero h1{font-size:34px; margin-bottom:12px; letter-spacing:-.02em}
.hero p{color:var(--gris); font-size:16.5px; max-width:560px; margin:0 auto; line-height:1.6}
.accesos{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:32px}
.acceso{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r);
  padding:22px; box-shadow:var(--sombra); display:block; color:inherit;
}
.acceso:hover{border-color:var(--acento); box-shadow:var(--sombra-md)}
.acceso .ic{
  width:40px; height:40px; border-radius:10px; background:var(--acento-suave); color:var(--acento);
  display:flex; align-items:center; justify-content:center; margin-bottom:13px;
}
.acceso h3{font-size:16px; margin-bottom:6px}
.acceso p{font-size:13.5px; color:var(--gris); margin:0; line-height:1.55}
.paso{display:flex; gap:13px; margin-bottom:15px; align-items:flex-start}
.paso .n{
  width:25px; height:25px; border-radius:50%; background:var(--tinta); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:650; flex:none;
}
.paso div{font-size:14.5px; line-height:1.55}
.paso b{color:var(--tinta)}

.rejilla-salones{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px}
.chip-salon{
  border:1px solid var(--linea); border-radius:9px; padding:10px 12px; background:#fff;
  font-size:13.5px; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.chip-salon b{color:var(--tinta)}
.chip-salon a{font-size:12.5px; font-weight:600}

@media (max-width:640px){
  .envoltura{padding:16px 14px 40px}
  .encabezado h1{font-size:20px}
  .reloj{margin-left:0; width:100%; display:flex; align-items:center; gap:12px; text-align:left}
  .reloj .fecha{margin-top:0}
  .barra nav a{padding:7px 9px; font-size:13px}
  thead th, tbody td{padding:9px 12px}
}

/* el logo hereda el color del contexto; aquí lo pintamos con el azul de marca */
.marca-ficha svg{color:var(--acento)}
.hero svg{color:var(--acento)}