:root {
  --fondo: #0f1115;
  --panel: #171a21;
  --panel2: #1e222b;
  --borde: #2a2f3a;
  --texto: #e8eaee;
  --apagado: #8b93a3;
  --acento: #4a9eff;
  --ok: #34c759;
  --aviso: #ffb02e;
  --alerta: #ff453a;
  --radio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Tiene que ir por delante de cualquier regla con display: si no, un panel
   oculto con [hidden] sigue tapando la pantalla y se come los toques. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

h1, h2 { margin: 0 0 8px; }
h1 { font-size: 20px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--apagado); }
small { font-size: .5em; color: var(--apagado); }
.apagado { color: var(--apagado); }
.error { color: var(--alerta); }

button, .boton {
  font: inherit;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.secundario, .secundario {
  background: var(--panel2);
  color: var(--texto);
  border: 1px solid var(--borde);
}
button:active { transform: scale(.98); }

/* ---------- login ---------- */
.centrado { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(320px, 90vw); text-align: center; }
.login input {
  width: 100%;
  font-size: 32px;
  text-align: center;
  letter-spacing: .4em;
  padding: 14px;
  margin: 12px 0;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--panel2);
  color: var(--texto);
}
.login button { width: 100%; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin: 0 0 14px;
}

/* ---------- pantalla del niño ---------- */
.nino { padding: 12px 14px 24px; max-width: 560px; margin: 0 auto; }

.cabecera { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.cabecera .fecha { text-transform: capitalize; color: var(--apagado); font-size: 14px; }
.cabecera .reloj { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.marcador { text-align: right; }
.marcador span { font-size: 34px; font-weight: 800; color: var(--ok); }
.marcador .apagado { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

.ahora {
  background: linear-gradient(160deg, #1d2633, var(--panel));
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  padding: 18px;
  margin-bottom: 10px;
}
.ahora .etiqueta { font-size: 11px; letter-spacing: .18em; color: var(--acento); font-weight: 700; }
.ahora .titulo { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 6px 0; }
.ahora .detalle { color: var(--apagado); font-size: 14px; }
.ahora .cuenta { margin-top: 10px; font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 700; }

.siguiente {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
}
.siguiente .etiqueta { color: var(--apagado); font-size: 11px; letter-spacing: .14em; margin-right: 8px; }

.lista { display: flex; flex-direction: column; gap: 10px; }

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
}
.item .horas { font-size: 12px; color: var(--apagado); font-variant-numeric: tabular-nums; min-width: 84px; }
.item .cuerpo { flex: 1; min-width: 0; }
.item .nombre { font-weight: 700; font-size: 17px; }
.item .sub { font-size: 12px; color: var(--apagado); }
.item .pts { font-size: 12px; color: var(--apagado); }
.item button { padding: 12px 14px; font-size: 15px; }

.item.hecha { border-color: var(--ok); opacity: .75; }
.item.hecha .nombre { text-decoration: line-through; }
.item.rechazada { border-color: var(--alerta); }
.item.cerrada { opacity: .45; }
.item.futura { opacity: .6; }
.item .tic { font-size: 22px; color: var(--ok); }
.item .cruz { font-size: 22px; color: var(--alerta); }

.aviso {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 18px;
  max-width: 90vw;
  z-index: 20;
}
.aviso.mal { border-color: var(--alerta); }
.aviso.bien { border-color: var(--ok); }

.pie { margin-top: 20px; display: flex; gap: 14px; font-size: 12px; justify-content: center; }

/* ---------- panel de padres ---------- */
.padres { padding: 14px; max-width: 1100px; margin: 0 auto; }
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acciones input[type=date] {
  background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px; font: inherit;
}

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rejilla .tarjeta { margin: 0; }

.grande { font-size: 40px; font-weight: 800; line-height: 1.1; margin: 4px 0 10px; }
.estado .grande.enlinea { color: var(--ok); }
.estado .grande.fuera { color: var(--alerta); }

.dato { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 4px 0; border-top: 1px solid var(--borde); }
.dato span { color: var(--apagado); }
.dato b { font-weight: 600; text-align: right; }

.barra-bateria { height: 8px; background: var(--panel2); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.barra-bateria div { height: 100%; width: 0; background: var(--ok); transition: width .4s; }

.canje { font-size: 13px; color: var(--aviso); margin-bottom: 8px; }
.semana-barras { display: flex; gap: 4px; align-items: flex-end; height: 48px; }
.semana-barras .col { flex: 1; background: var(--panel2); border-radius: 3px; position: relative; height: 100%; display: flex; align-items: flex-end; }
.semana-barras .col i { display: block; width: 100%; background: var(--acento); border-radius: 3px; }
.semana-barras .col b { position: absolute; bottom: -16px; width: 100%; text-align: center; font-size: 10px; color: var(--apagado); font-weight: 400; }
.semana-barras { margin-bottom: 18px; }

.tabla { display: flex; flex-direction: column; gap: 8px; }
.fila {
  display: grid;
  grid-template-columns: 78px 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.fila .horas { color: var(--apagado); font-size: 12px; font-variant-numeric: tabular-nums; }
.fila .nombre { font-weight: 600; }
.fila .sub { font-size: 12px; color: var(--apagado); }
.fila .botones { display: flex; gap: 6px; }
.fila button { padding: 7px 10px; font-size: 13px; }
.fila img.miniatura { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--borde); }
.fila.pendiente { border-left: 3px solid var(--apagado); }
.fila.hecho { border-left: 3px solid var(--acento); }
.fila.aprobado { border-left: 3px solid var(--ok); }
.fila.rechazado { border-left: 3px solid var(--alerta); }

.etiqueta-estado { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 20px; background: var(--panel); border: 1px solid var(--borde); }

.eventos .fila { grid-template-columns: 130px 1fr; }
.eventos .nivel-alerta { border-left: 3px solid var(--alerta); }
.eventos .nivel-aviso { border-left: 3px solid var(--aviso); }
.eventos .nivel-info { border-left: 3px solid var(--borde); }

.visor { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; gap: 14px; z-index: 40; padding: 20px; }
.visor img { max-width: 100%; max-height: 80vh; border-radius: 10px; }

/* Las reglas responsive van todas juntas al final del fichero. */

/* ---------- boton ancho ---------- */
.ancho { width: 100%; margin-bottom: 14px; }
.pequeno { font-size: 12px; margin: 0 0 12px; }

/* ---------- horario semanal (pantalla del niño) ---------- */
.pantalla-completa {
  position: fixed; inset: 0; z-index: 50;
  background: var(--fondo);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}
.barra-horario {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px; border-bottom: 1px solid var(--borde);
}
.barra-horario h2 { margin: 0; color: var(--texto); font-size: 16px; }
.horario-desliza { flex: 1; overflow: auto; padding: 10px 12px 24px; }

.horario { display: grid; grid-template-columns: 44px repeat(7, minmax(84px, 1fr)); gap: 4px; min-width: 640px; }
.horario .cabeza {
  position: sticky; top: 0; z-index: 2;
  background: var(--fondo); text-align: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--apagado);
  padding: 6px 0 8px;
}
.horario .cabeza.hoy { color: var(--acento); }
.horario .horas-col { position: relative; }
.horario .horas-col span {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums;
}
.horario .col-dia {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.horario .col-dia.hoy { border-color: var(--acento); }
.horario .linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--borde); opacity: .5; }
.horario .bloque {
  position: absolute; left: 3px; right: 3px;
  background: var(--panel2);
  border-left: 3px solid var(--acento);
  border-radius: 6px;
  padding: 4px 6px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
}
.horario .bloque b { display: block; font-size: 12px; font-weight: 700; }
.horario .bloque i { font-style: normal; color: var(--apagado); font-variant-numeric: tabular-nums; }
.horario .bloque.deporte { border-left-color: var(--ok); }
.horario .bloque.estudio { border-left-color: var(--aviso); }
.horario .bloque.rutina  { border-left-color: var(--apagado); }

/* ---------- editor de tareas (panel de padres) ---------- */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pestanas button {
  padding: 8px 14px; font-size: 13px;
  background: var(--panel2); color: var(--apagado);
  border: 1px solid var(--borde);
}
.pestanas button.activa { background: var(--acento); color: #fff; border-color: var(--acento); }

.editor-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--panel2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px;
}
.editor-fila.inactiva { opacity: .5; }
.editor-linea { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.editor-fila input[type=text], .editor-fila input[type=time], .editor-fila input[type=number] {
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 14px;
}
.editor-fila input[type=text].nombre { flex: 1; min-width: 150px; font-weight: 600; }
.editor-fila input[type=text].detalle { flex: 1; min-width: 200px; font-size: 13px; }
.editor-fila input[type=number] { width: 70px; }
.editor-fila label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--apagado); }
.editor-fila label.interruptor { cursor: pointer; user-select: none; }
.editor-fila input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--acento); }
.editor-fila .campo { display: inline-flex; flex-direction: column; gap: 3px; }
.editor-fila .campo small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.editor-fila .acciones-fila { display: flex; gap: 6px; margin-left: auto; }
.editor-fila button { padding: 8px 12px; font-size: 13px; }
.editor-fila .sucia { border-color: var(--aviso); }

/* =========================================================================
   RESPONSIVE
   Movil primero para la pantalla del niño (siempre va en un telefono) y
   adaptacion del panel de padres, que se mira tanto en el PC como en el movil.
   ========================================================================= */

html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
.solo-movil { display: none; }

/* ---------- tablet y movil (hasta 900 px) ---------- */
@media (max-width: 900px) {
  .padres { padding: 12px; }

  .barra { align-items: flex-start; }
  .barra h1 { font-size: 18px; }
  .acciones { width: 100%; }
  .acciones > * { flex: 1 1 auto; text-align: center; }
  .acciones input[type=date] { flex: 1 1 140px; min-width: 0; }

  .rejilla { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .grande { font-size: clamp(28px, 8vw, 40px); }
}

/* ---------- movil (hasta 720 px) ---------- */
@media (max-width: 720px) {
  /* Nada de zoom automatico al tocar un campo: 16 px minimo */
  input, select, textarea, button { font-size: 16px; }

  /* Filas de tareas: se apilan en tarjeta en vez de comprimirse */
  .fila {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "horas  prueba"
      "cuerpo prueba"
      "botones botones";
    row-gap: 8px;
  }
  .fila .horas   { grid-area: horas; }
  .fila .cuerpo  { grid-area: cuerpo; min-width: 0; }
  .fila .prueba  { grid-area: prueba; align-self: start; }
  .fila .botones { grid-area: botones; flex-wrap: wrap; }
  .fila .botones button { flex: 1 1 auto; min-height: 40px; }
  .fila .nombre { font-size: 15px; }

  /* El registro de avisos solo tiene hora y texto */
  .eventos .fila {
    grid-template-columns: 1fr;
    grid-template-areas: "horas" "cuerpo";
    row-gap: 2px;
  }

  /* Editor del horario */
  .pestanas { gap: 5px; }
  .pestanas button { flex: 1 1 auto; padding: 10px 6px; font-size: 13px; }

  .editor-fila { padding: 12px 10px; }
  /* Objetivos tactiles de 44 px: en un movil, con el dedo, 38 no basta */
  .editor-fila input[type=text],
  .editor-fila input[type=time],
  .editor-fila input[type=number],
  .acciones input[type=date] { padding: 12px 10px; min-height: 44px; }
  .editor-fila input[type=checkbox] { width: 24px; height: 24px; }
  .editor-fila input[type=text].nombre,
  .editor-fila input[type=text].detalle { flex: 1 1 100%; min-width: 0; }
  .editor-linea { gap: 10px 12px; }
  .editor-fila .campo { flex: 0 0 auto; }
  .editor-fila input[type=number] { width: 84px; }
  .editor-fila label { flex: 1 1 100%; min-height: 34px; }
  .editor-fila .acciones-fila { margin-left: 0; width: 100%; }
  .editor-fila .acciones-fila button { flex: 1 1 0; min-height: 44px; }

  /* Pantalla del niño: tipografia y botones mas comodos */
  .nino { padding: 10px 12px 28px; }
  .ahora { padding: 15px; }
  .ahora .titulo { font-size: clamp(24px, 8vw, 30px); }
  .item { padding: 12px; gap: 10px; }
  .item .horas { min-width: 56px; font-size: 11px; }
  .item button { min-height: 46px; min-width: 76px; }
  .cabecera .reloj { font-size: 26px; }
  .marcador span { font-size: 30px; }

  /* Horario semanal: columnas mas estrechas, menos scroll lateral */
  .horario { grid-template-columns: 30px repeat(7, minmax(62px, 1fr)); min-width: 480px; gap: 3px; }
  .horario .cabeza { font-size: 10px; }
  .horario .horas-col span { font-size: 9px; right: 4px; }
  .horario .bloque { font-size: 9px; padding: 3px 4px; left: 2px; right: 2px; }
  .horario .bloque b { font-size: 10px; }
  .horario-desliza { padding: 8px 10px 20px; }
  .solo-movil { display: block; }
}

/* ---------- movil estrecho (hasta 380 px) ---------- */
@media (max-width: 380px) {
  .rejilla { grid-template-columns: 1fr; }
  .fila { grid-template-columns: 1fr; grid-template-areas: "horas" "cuerpo" "prueba" "botones"; }
  .fila .prueba { justify-self: start; }
  .item .horas { min-width: 44px; font-size: 10px; }
  .horario { grid-template-columns: 28px repeat(7, minmax(56px, 1fr)); min-width: 440px; }
}

/* ---------- movil tumbado: el horario a pantalla completa ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  .horario { min-width: 0; grid-template-columns: 32px repeat(7, 1fr); }
  .solo-movil { display: none; }
}

/* ---------- pantallas grandes ---------- */
@media (min-width: 1200px) {
  .padres { max-width: 1280px; }
  .rejilla { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- impresion ---------- */
@media print {
  .barra, .acciones, .pestanas, #btn-nueva, .botones, .pie { display: none !important; }
  body { background: #fff; color: #000; }
  .tarjeta { border-color: #ccc; break-inside: avoid; }
}

/* Bloques del horario: texto que no se sale y bloques informativos al fondo */
.horario .bloque b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.horario .bloque.informativo {
  background: transparent;
  border: 1px dashed var(--borde);
  border-left: 1px dashed var(--borde);
  color: var(--apagado);
  z-index: 0;
}
.horario .bloque.informativo b { font-weight: 600; color: var(--apagado); }
.horario .bloque:not(.informativo) { z-index: 1; }