/* ==========================================================================
   Cuaderno del Maestro · Maestra de PT · Curso 2026/2027
   Interfaz Material Design con seis paletas pastel suaves.
   ========================================================================== */

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  src: url('fuentes/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2') format('woff2');
}

:root {
  --radio: 18px;
  --radio-s: 12px;
  --sombra: 0 2px 4px rgba(60, 50, 100, .06), 0 6px 18px rgba(60, 50, 100, .08);
  --sombra-alta: 0 10px 30px rgba(60, 50, 100, .16);
  --fuente: 'Roboto', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Tema 1 · Lavanda (por defecto) ---------- */
html[data-tema="lavanda"] {
  --fondo: #f7f5fd;
  --fondo-2: #efeafa;
  --superficie: #ffffff;
  --superficie-2: #f4f1fc;
  --texto: #2f2a44;
  --texto-suave: #6d6690;
  --primario: #7d6ad4;
  --primario-osc: #5b48ab;
  --primario-cont: #e9e3fb;
  --acento: #a9c9ef;
  --acento-cont: #e4f0fd;
  --menta: #bfe3d4;
  --menta-cont: #e3f5ec;
  --melocoton: #ffdcc6;
  --melocoton-cont: #fff0e6;
  --amarillo: #fbeec2;
  --amarillo-cont: #fff8e0;
  --rosa: #f8d3e2;
  --rosa-cont: #fdeaf2;
  --borde: #e6e1f3;
  --ok: #4f9c78;
  --aviso: #cf9b45;
  --alerta: #c46b8a;
}

/* ---------- Tema 2 · Menta ---------- */
html[data-tema="menta"] {
  --fondo: #f3faf7;
  --fondo-2: #e6f4ee;
  --superficie: #ffffff;
  --superficie-2: #eef8f3;
  --texto: #26382f;
  --texto-suave: #5d7a6d;
  --primario: #55a37f;
  --primario-osc: #3b7d5e;
  --primario-cont: #ddf0e7;
  --acento: #9fd0c6;
  --acento-cont: #e3f3f0;
  --menta: #bfe3d4;
  --menta-cont: #e3f5ec;
  --melocoton: #ffdcc6;
  --melocoton-cont: #fff0e6;
  --amarillo: #fbeec2;
  --amarillo-cont: #fff8e0;
  --rosa: #f8d3e2;
  --rosa-cont: #fdeaf2;
  --borde: #dcece4;
  --ok: #3f8f6b;
  --aviso: #c79a44;
  --alerta: #c1708c;
}

/* ---------- Tema 3 · Celeste ---------- */
html[data-tema="celeste"] {
  --fondo: #f4f8fd;
  --fondo-2: #e8f1fa;
  --superficie: #ffffff;
  --superficie-2: #eef5fc;
  --texto: #24384c;
  --texto-suave: #5c7791;
  --primario: #4e93c8;
  --primario-osc: #37719d;
  --primario-cont: #dcecf9;
  --acento: #a9cfe8;
  --acento-cont: #e6f2fb;
  --menta: #bfe3d4;
  --menta-cont: #e3f5ec;
  --melocoton: #ffdcc6;
  --melocoton-cont: #fff0e6;
  --amarillo: #fbeec2;
  --amarillo-cont: #fff8e0;
  --rosa: #f8d3e2;
  --rosa-cont: #fdeaf2;
  --borde: #dbe9f4;
  --ok: #478f79;
  --aviso: #c2963f;
  --alerta: #c2708c;
}

/* ---------- Tema 4 · Floral ---------- */
html[data-tema="floral"] {
  --fondo: #fdf5fa;
  --fondo-2: #f9e9f3;
  --superficie: #ffffff;
  --superficie-2: #fdf1f8;
  --texto: #462c3c;
  --texto-suave: #8b6c80;
  --primario: #c477a6;
  --primario-osc: #a2557e;
  --primario-cont: #fadff0;
  --acento: #eec4dc;
  --acento-cont: #fdebf5;
  --menta: #c3e5d8;
  --menta-cont: #e6f6ef;
  --melocoton: #ffdcc6;
  --melocoton-cont: #fff0e6;
  --amarillo: #fbeec2;
  --amarillo-cont: #fff8e0;
  --rosa: #f8d3e2;
  --rosa-cont: #fdeaf2;
  --borde: #f2d9e8;
  --ok: #4d9474;
  --aviso: #c29447;
  --alerta: #c1627f;
}

/* ---------- Tema 5 · Melocotón ---------- */
html[data-tema="melocoton"] {
  --fondo: #fef8f2;
  --fondo-2: #fcece0;
  --superficie: #ffffff;
  --superficie-2: #fdf2e9;
  --texto: #4b3527;
  --texto-suave: #8d6e59;
  --primario: #d98f5c;
  --primario-osc: #b06f41;
  --primario-cont: #fbe3d0;
  --acento: #f3caa6;
  --acento-cont: #fdf0e2;
  --menta: #bfe3d4;
  --menta-cont: #e3f5ec;
  --melocoton: #ffdcc6;
  --melocoton-cont: #fff0e6;
  --amarillo: #fbeec2;
  --amarillo-cont: #fff8e0;
  --rosa: #f8d3e2;
  --rosa-cont: #fdeaf2;
  --borde: #f4e2d3;
  --ok: #4f9673;
  --aviso: #bd8b3b;
  --alerta: #c26b6b;
}

/* ---------- Tema 6 · Arena ---------- */
html[data-tema="arena"] {
  --fondo: #faf8f2;
  --fondo-2: #f2eee1;
  --superficie: #ffffff;
  --superficie-2: #f6f3e9;
  --texto: #3e3830;
  --texto-suave: #7b7263;
  --primario: #a89269;
  --primario-osc: #86744f;
  --primario-cont: #efe6d3;
  --acento: #d7c7a4;
  --acento-cont: #f5f0e2;
  --menta: #c6e2d5;
  --menta-cont: #e8f4ee;
  --melocoton: #f5ddca;
  --melocoton-cont: #fcf1e7;
  --amarillo: #f6ecc9;
  --amarillo-cont: #fdf7e4;
  --rosa: #f4dbe4;
  --rosa-cont: #fdeff4;
  --borde: #e9e1cf;
  --ok: #5a9071;
  --aviso: #bc8d40;
  --alerta: #b27070;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.mi {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.mi.r25 { font-size: 25px; }
.mi.grande { font-size: 34px; }
.mi.relleno { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---------- Estructura ---------- */
.app {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: 100vh;
  overflow: hidden;
}

.lateral {
  background: linear-gradient(170deg, var(--fondo-2) 0%, var(--superficie) 55%, var(--superficie-2) 100%);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.marca .logo {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--primario-cont);
  color: var(--primario-osc);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.marca h1 { font-size: 15px; margin: 0; line-height: 1.2; font-weight: 600; }
.marca p { margin: 2px 0 0; font-size: 11.5px; color: var(--texto-suave); }

/* Banner "Día de hoy" en la parte superior del menú */
.banner-dia {
  margin: 0 12px 10px;
  padding: 10px 12px;
  border-radius: var(--radio-s);
  background: linear-gradient(135deg, var(--amarillo-cont), var(--rosa-cont));
  border: 1px solid var(--borde);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.banner-dia .mi { color: var(--primario-osc); font-size: 22px; margin-top: 1px; }
.banner-dia .txt { min-width: 0; }
.banner-dia .et { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); font-weight: 600; }
.banner-dia .nm { font-size: 13px; font-weight: 600; line-height: 1.25; }
.banner-dia .fc { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }

.menu {
  padding: 0 10px 10px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
.teja {
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: var(--radio-s);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: box-shadow .16s, transform .16s, background .16s;
  text-align: center;
  font-family: inherit;
  color: var(--texto);
  min-height: 78px;
  justify-content: center;
}
.teja:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.teja .mi { font-size: 26px; color: var(--primario-osc); }
.teja span.et { font-size: 11.5px; line-height: 1.15; font-weight: 500; }
.teja.activa {
  background: var(--primario-cont);
  border-color: color-mix(in srgb, var(--primario) 45%, white);
  box-shadow: var(--sombra);
}
.teja.activa .mi { color: var(--primario-osc); }
.pie-lateral {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--borde);
  font-size: 11px;
  color: var(--texto-suave);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* ---------- Zona principal ---------- */
.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.barra h2 { font-size: 19px; margin: 0; font-weight: 600; }
.barra .sub { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.barra .relleno { flex: 1 1 auto; }
.insignias { display: flex; gap: 8px; flex-wrap: wrap; }
.insignia {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.insignia .mi { font-size: 16px; }
.insignia.ok { background: var(--menta-cont); color: var(--ok); border-color: transparent; }
.insignia.aviso { background: var(--amarillo-cont); color: var(--aviso); border-color: transparent; }

.vista { padding: 20px 22px 40px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.vista > * + * { margin-top: 16px; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
}
.tarjeta h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.tarjeta h3 .mi { color: var(--primario-osc); font-size: 20px; }
.tarjeta h3 .acciones { margin-left: auto; display: flex; gap: 8px; }
.rejilla { display: grid; gap: 14px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.metrica .mi { font-size: 30px; color: var(--primario-osc); }
.metrica .n { font-size: 24px; font-weight: 600; line-height: 1; }
.metrica .t { font-size: 12px; color: var(--texto-suave); margin-top: 3px; }
/* tarjetas de resumen clicables: llevan a su apartado */
.metrica.clicable {
  width: 100%; text-align: left; font-family: inherit; color: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.metrica.clicable:hover { transform: translateY(-2px); border-color: var(--primario); box-shadow: 0 6px 16px rgba(0,0,0,.09); }
.metrica.clicable:active { transform: translateY(0); }
.metrica.clicable:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.metrica .flecha { margin-left: auto; font-size: 24px; color: var(--texto-suave); transition: color .12s ease, transform .12s ease; }
.metrica.clicable:hover .flecha { color: var(--primario); transform: translateX(3px); }

/* ---------- Botones ---------- */
.btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primario);
  color: #fff;
  transition: filter .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); box-shadow: var(--sombra); }
.btn .mi { font-size: 19px; }
.btn.tonal { background: var(--primario-cont); color: var(--primario-osc); }
.btn.suave { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
.btn.peligro { background: var(--rosa-cont); color: var(--alerta); }
.btn.chico { padding: 6px 12px; font-size: 12.5px; }
.btn.chico .mi { font-size: 17px; }
.btn.icono { padding: 7px; border-radius: 50%; background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borde); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Etiquetas de estado ---------- */
.etiqueta { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); white-space: nowrap; }
.etiqueta.lectivo { background: var(--menta-cont); color: var(--ok); border-color: transparent; }
.etiqueta.festivo { background: var(--rosa-cont); color: var(--alerta); border-color: transparent; }
.etiqueta.no_lectivo { background: var(--amarillo-cont); color: var(--aviso); border-color: transparent; }
.etiqueta.vacaciones { background: var(--acento-cont); color: var(--primario-osc); border-color: transparent; }
.etiqueta.neae { background: var(--melocoton-cont); color: #b5723f; border-color: transparent; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.campo label { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  outline: none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-cont);
}
.campo textarea { resize: vertical; min-height: 74px; }
.fila-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fila-campos .campo.ancho { grid-column: 1 / -1; }
.campo-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.campo-check input { width: 18px; height: 18px; accent-color: var(--primario); }

/* ---------- Tablas ---------- */
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th, table.tabla td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.tabla th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 600; }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla td.acciones { text-align: right; white-space: nowrap; }
.enlace { color: var(--primario-osc); cursor: pointer; text-decoration: none; font-weight: 500; }
.enlace:hover { text-decoration: underline; }

/* ---------- Lista de alumnos ---------- */
.lista-alumnos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.ficha-alumno {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  display: flex; gap: 12px; align-items: center;
}
.ficha-alumno:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; font-size: 15px;
  background: var(--primario-cont); color: var(--primario-osc);
  flex: 0 0 auto;
}
.avatar.infantil { background: var(--melocoton-cont); color: #b5723f; }
.avatar.primaria { background: var(--acento-cont); color: var(--primario-osc); }
.ficha-alumno .datos { min-width: 0; }
.ficha-alumno .nm { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-alumno .sb { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.ficha-alumno .mini { font-size: 11px; color: var(--texto-suave); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Borrar (acción destructiva) ---------- */
.btn-borrar {
  margin-left: auto; flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--texto-suave);
  opacity: .5; transition: opacity .15s, background .15s, color .15s;
}
.btn-borrar .mi { font-size: 19px; }
.btn-borrar:hover { opacity: 1; background: var(--rosa-cont); color: var(--alerta); }
.aviso-borrar { display: grid; gap: 8px; }
.aviso-borrar p { margin: 0; line-height: 1.45; }
.borrar-final {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 8px 10px; border-radius: 10px; font-weight: 600;
  background: var(--rosa-cont); color: var(--alerta);
}
.borrar-final .mi { font-size: 18px; }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; flex-wrap: wrap; }
.pestana {
  border: none; background: none; font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 14px; cursor: pointer; color: var(--texto-suave);
  border-bottom: 2.5px solid transparent; border-radius: 8px 8px 0 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.pestana .mi { font-size: 18px; }
.pestana:hover { background: var(--superficie-2); }
.pestana.activa { color: var(--primario-osc); border-bottom-color: var(--primario); background: var(--superficie-2); }

/* ---------- Evaluación con cruces ---------- */
tbody.area-fila td {
  background: var(--primario-cont);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .03em;
}
table.evaluacion td.celda { text-align: center; width: 74px; cursor: pointer; }
table.evaluacion td.celda .cruz {
  width: 30px; height: 30px; border-radius: 9px; border: 1.5px dashed var(--borde);
  display: inline-grid; place-items: center; color: transparent; font-size: 20px;
  transition: background .12s, border-color .12s, color .12s;
}
table.evaluacion td.celda:hover .cruz { border-color: var(--primario); }
table.evaluacion td.celda .cruz.marcada {
  background: var(--primario-cont);
  border: 1.5px solid var(--primario);
  color: var(--primario-osc);
  font-variation-settings: 'FILL' 1;
}
table.evaluacion td.celda .cruz.v3 { background: var(--menta-cont); border-color: var(--ok); color: var(--ok); }
table.evaluacion td.celda .cruz.v2 { background: var(--amarillo-cont); border-color: var(--aviso); color: var(--aviso); }
table.evaluacion td.celda .cruz.v1 { background: var(--rosa-cont); border-color: var(--alerta); color: var(--alerta); }
table.evaluacion td.item { min-width: 320px; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-suave); margin: 8px 0 0; }
.leyenda b { color: var(--texto); }

/* ---------- Calendario ---------- */
.meses { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); }
.mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 13px; box-shadow: var(--sombra); }
.mes h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.mes h4 .lect { margin-left: auto; font-size: 11px; color: var(--texto-suave); font-weight: 400; }
.mes table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mes th { font-size: 10.5px; color: var(--texto-suave); font-weight: 600; padding: 3px 0; }
.mes td { text-align: center; padding: 3px 0; border-radius: 8px; }
.mes td.d { height: 26px; width: 26px; position: relative; }
.mes td.lectivo { background: var(--menta-cont); color: var(--ok); font-weight: 600; }
.mes td.festivo { background: var(--rosa-cont); color: var(--alerta); font-weight: 600; }
.mes td.no_lectivo { background: var(--amarillo-cont); color: var(--aviso); font-weight: 600; }
.mes td.vacaciones { background: var(--acento-cont); color: var(--primario-osc); }
.mes td.finde { color: var(--texto-suave); opacity: .7; }
.mes td.otro { opacity: .25; }
.mes td.hoy { outline: 2px solid var(--primario); outline-offset: -2px; font-weight: 700; }
.mes td .punto { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--primario); }
.hitos { display: grid; gap: 8px; }
.hito { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; padding: 8px 10px; border-radius: var(--radio-s); background: var(--superficie-2); }
.hito .mi { color: var(--primario-osc); font-size: 19px; }
.hito .f { font-weight: 600; }

/* ---------- Horario ---------- */
table.horario { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
table.horario th { font-size: 12px; color: var(--texto-suave); text-transform: capitalize; padding: 4px; }
table.horario td { background: var(--superficie-2); border-radius: var(--radio-s); vertical-align: top; padding: 6px; height: 62px; }
table.horario td.vacia { text-align: center; }
.celda-hor {
  background: var(--primario-cont); border-radius: 10px; padding: 6px 8px; font-size: 12px;
  margin-bottom: 5px; cursor: pointer; border-left: 4px solid var(--primario);
}
.celda-hor .h { font-weight: 600; }
.celda-hor .m { color: var(--texto-suave); }
.celda-hor.g1 { background: var(--melocoton-cont); border-left-color: var(--melocoton); }
.celda-hor.g2 { background: var(--menta-cont); border-left-color: var(--menta); }
.celda-hor.g3 { background: var(--amarillo-cont); border-left-color: var(--amarillo); }
.celda-hor.g4 { background: var(--rosa-cont); border-left-color: var(--rosa); }
.celda-hor.g5 { background: var(--acento-cont); border-left-color: var(--acento); }

/* Selector de color de las sesiones del horario (muestras visibles) */
.selector-color { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.opcion-color { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.muestra-color { width: 42px; height: 42px; border-radius: var(--radio-s); border: 2px solid rgba(0, 0, 0, .10); display: inline-flex; align-items: center; justify-content: center; color: #45464a; transition: transform .12s, box-shadow .12s, border-color .12s; }
.opcion-color:hover .muestra-color { transform: translateY(-2px); }
.opcion-color .mi { font-size: 20px; opacity: 0; }
.opcion-color.activo .mi { opacity: 1; }
.opcion-color.activo .muestra-color { border-color: var(--primario); box-shadow: 0 0 0 3px var(--acento-cont); }
.muestra-color.g0 { background: var(--superficie); border-style: dashed; color: var(--texto-suave); }
.muestra-color.g0 .mi { opacity: .55; }
.opcion-color.sin.activo .muestra-color .mi { opacity: 1; }
.muestra-color.g1 { background: var(--melocoton); }
.muestra-color.g2 { background: var(--menta); }
.muestra-color.g3 { background: var(--amarillo); }
.muestra-color.g4 { background: var(--rosa); }
.muestra-color.g5 { background: var(--acento); }
.nombre-color { font-size: 11px; color: var(--texto-suave); text-align: center; }
.opcion-color.activo .nombre-color { color: var(--primario-osc); font-weight: 600; }

/* ---------- Adjuntos ---------- */
.grupos-adj { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grupo-adj { border: 1px dashed var(--borde); border-radius: var(--radio); padding: 12px; background: var(--superficie); }
.grupo-adj h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.adjunto { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radio-s); background: var(--superficie-2); margin-bottom: 7px; }
.adjunto .mi { color: var(--primario-osc); }
.adjunto .nm { font-size: 13px; font-weight: 500; word-break: break-word; }
.adjunto .mt { font-size: 11px; color: var(--texto-suave); }
.adjunto .acc { margin-left: auto; display: flex; gap: 4px; }
.zona-soltar { border: 2px dashed var(--primario-cont); border-radius: var(--radio); padding: 18px; text-align: center; color: var(--texto-suave); font-size: 13px; cursor: pointer; background: var(--superficie-2); }
.zona-soltar.sobre { border-color: var(--primario); background: var(--primario-cont); }

/* ---------- Diálogos ---------- */
dialog {
  border: none; border-radius: var(--radio); padding: 0; box-shadow: var(--sombra-alta);
  background: var(--superficie); color: var(--texto); max-width: 760px; width: 92vw; max-height: 90vh;
}
dialog::backdrop { background: rgba(45, 38, 70, .38); backdrop-filter: blur(2px); }
dialog .cab { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--borde); }
dialog .cab h3 { margin: 0; font-size: 16px; }
dialog .cab .mi { color: var(--primario-osc); }
dialog .cuerpo { padding: 16px 20px; overflow: auto; max-height: 66vh; }
dialog .piedialogo { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); }

/* ---------- Diálogo a pantalla completa (formulario de sesión) ----------
   Se activa solo el diálogo que lo pide (dialog.grande). El resto de
   diálogos de la aplicación conservan su tamaño de siempre.            */
dialog.grande { width: 95vw; max-width: 95vw; height: 93vh; max-height: 93vh; border-radius: var(--radio); }
dialog.grande[open] { display: flex; flex-direction: column; }
dialog.grande .cab { flex: 0 0 auto; }
dialog.grande .cuerpo { flex: 1 1 auto; max-height: none; min-height: 0; }
dialog.grande .piedialogo { flex: 0 0 auto; }
dialog.grande .fila-campos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
dialog.grande .opciones-alumnos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
dialog.grande .campo textarea { min-height: 140px; }

/* Dos columnas: a la izquierda los datos de la sesión, a la derecha lo
   trabajado y las observaciones. En pantallas normales, una sola columna. */
.col-sesion { min-width: 0; }
@media (min-width: 1000px) {
  dialog.grande .rejilla-sesion {
    display: grid; gap: 16px 22px; align-items: start;
    grid-template-columns: minmax(330px, 1fr) minmax(400px, 1.3fr);
  }
  dialog.grande .rejilla-sesion .col-sesion { display: flex; flex-direction: column; }
  dialog.grande .rejilla-sesion .campo textarea.alto { min-height: 240px; }
  dialog.grande .rejilla-sesion .campo textarea.alto-medio { min-height: 190px; }
}

/* ---------- Varios ---------- */
.vacio { text-align: center; padding: 34px 18px; color: var(--texto-suave); }
.vacio .mi { font-size: 46px; color: var(--primario-cont); display: block; margin-bottom: 8px; }
.aviso-caja { background: var(--amarillo-cont); border-radius: var(--radio-s); padding: 11px 13px; font-size: 12.5px; display: flex; gap: 9px; align-items: flex-start; }
.aviso-caja .mi { color: var(--aviso); font-size: 19px; }
.info-caja { background: var(--acento-cont); border-radius: var(--radio-s); padding: 11px 13px; font-size: 12.5px; display: flex; gap: 9px; }
.info-caja .mi { color: var(--primario-osc); font-size: 19px; }
.buscador { display: flex; align-items: center; gap: 8px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; padding: 7px 14px; min-width: 240px; }
.buscador input { border: none; background: none; outline: none; font-family: inherit; font-size: 13.5px; width: 100%; color: var(--texto); }
.buscador .mi { color: var(--texto-suave); font-size: 19px; }
.tostada {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--texto); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 13.5px;
  box-shadow: var(--sombra-alta); opacity: 0; transition: opacity .2s, transform .2s; z-index: 60; pointer-events: none;
}
.tostada.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.pie { text-align: center; font-size: 11.5px; color: var(--texto-suave); padding: 8px 0 0; }
.solopantalla { }

/* ---------- Impresión ---------- */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #fff; font-size: 11.5px; }
  .lateral, .barra .acciones, .no-imprimir, .pie-lateral, .pestanas { display: none !important; }
  .app { display: block; height: auto; }
  .vista { padding: 0; overflow: visible; }
  .tarjeta, .mes { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .cabecera-impresion { display: block !important; margin-bottom: 10px; }
  table.evaluacion td.celda .cruz { border-color: #999; }
  table.evaluacion td.celda .cruz.marcada { background: #eee; border-color: #333; color: #000; }
  a { color: #000; text-decoration: none; }
}
.cabecera-impresion { display: none; }


/* ============ Clases, alumnado y ficha centrada en el alumno ============ */

.rejilla-clases { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 14px; }
.tarjeta-clase { text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; box-shadow: var(--sombra); cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  font: inherit; color: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tarjeta-clase:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--primario); }
.tarjeta-clase .cab { display: flex; gap: 12px; align-items: center; }
.tarjeta-clase .cab .mi { font-size: 28px; color: var(--primario-osc); background: var(--primario-cont); border-radius: 12px; padding: 7px; }
.tarjeta-clase .cab .nm { font-weight: 600; font-size: 15.5px; }
.tarjeta-clase .sb { font-size: 12px; color: var(--texto-suave); }
.tarjeta-clase .cifras { display: flex; gap: 18px; font-size: 12.5px; color: var(--texto-suave); }
.tarjeta-clase .cifras b { color: var(--primario-osc); font-size: 15px; }
.tarjeta-clase.sinclase .cab .mi { color: var(--aviso); background: var(--amarillo-cont); }

.rejilla-alumnos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tarjeta-alumno { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: var(--radio-s); padding: 12px; cursor: pointer; font: inherit;
  color: inherit; width: 100%; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.tarjeta-alumno:hover { transform: translateY(-1px); box-shadow: var(--sombra); background: var(--superficie); border-color: var(--primario); }
.tarjeta-alumno .datos { flex: 1; min-width: 0; }
.tarjeta-alumno .nm { font-weight: 600; font-size: 14.5px; }
.tarjeta-alumno .sb { font-size: 12px; color: var(--texto-suave); }
.tarjeta-alumno .diag { font-size: 11.5px; color: var(--primario-osc); margin-top: 3px; }
.tarjeta-alumno .flecha { color: var(--texto-suave); }

.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.con-foto { background: var(--superficie); padding: 0; overflow: hidden; border: 2px solid var(--primario-cont); }
.avatar-grande { width: 118px; height: 118px; min-width: 118px; font-size: 34px; }

.ficha-arriba { display: flex; gap: 20px; align-items: flex-start; }
.ficha-texto { flex: 1; min-width: 0; }
.ficha-texto h3 { margin: 0 0 4px; font-size: 21px; }
.ficha-texto .sb { color: var(--texto-suave); font-size: 13px; }
.ficha-texto .diag { margin-top: 6px; font-size: 13px; color: var(--primario-osc); display: flex; gap: 6px; align-items: center; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pista-foto { max-width: 280px; background: var(--primario-cont); color: var(--primario-osc); border-radius: var(--radio-s);
  padding: 12px 14px; font-size: 12.5px; display: flex; gap: 10px; align-items: center; }

.tejas-grandes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.teja-grande { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 10px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-s);
  cursor: pointer; font: inherit; color: var(--texto); text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.teja-grande:hover { transform: translateY(-2px); box-shadow: var(--sombra); background: var(--superficie); }
.teja-grande .mi { font-size: 32px; color: var(--primario-osc); }
.teja-grande span:last-child { font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.teja-grande.activa { background: var(--primario-cont); border-color: var(--primario); }

.acciones-celda { display: flex; gap: 6px; }
.celda-nota select { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie);
  font: inherit; font-size: 12px; max-width: 100%; }
.tabla-notas td { vertical-align: middle; }
.etiqueta.ok { background: var(--menta-cont); color: var(--ok); border-color: transparent; }
.etiqueta.aviso { background: var(--amarillo-cont); color: var(--aviso); border-color: transparent; }

.capa-creditos { position: fixed; inset: 0; background: rgba(40, 32, 66, .35); display: flex; align-items: center;
  justify-content: center; z-index: 999; opacity: 1; transition: opacity .3s ease; }
.capa-creditos.fuera { opacity: 0; }
.caja-creditos { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra-alta);
  padding: 26px 34px; text-align: center; max-width: 470px; animation: subir .35s ease; }
.caja-creditos img { width: 96px; height: auto; margin-bottom: 10px; }
.caja-creditos img.au-logo { width: 150px; height: 150px; margin-bottom: 8px; }
.caja-creditos h3 { margin: 0 0 4px; font-size: 18px; }
.caja-creditos .au { font-size: 13.5px; font-weight: 500; }
.caja-creditos .au-cargo { font-size: 12.5px; font-weight: 500; color: var(--primario-osc); margin-bottom: 2px; }
.caja-creditos a { color: var(--primario-osc); text-decoration: none; }
.caja-creditos a:hover { text-decoration: underline; }
.caja-creditos .sb { font-size: 12px; color: var(--texto-suave); }
.caja-creditos .lema { font-style: italic; color: var(--primario-osc); margin: 10px 0 6px; font-size: 13.5px; }
@keyframes subir { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media print { .capa-creditos { display: none; } }

/* ============================ Tema oscuro (Noche) ============================
   Misma estructura de variables que los temas pastel; los tonos "cont" pasan a
   ser fondos apagados y los acentos se aclaran para leerse sobre fondo oscuro. */
html[data-tema="noche"] {
  --fondo: #12101c;
  --fondo-2: #1a1726;
  --superficie: #232033;
  --superficie-2: #2c2841;
  --texto: #eae7f6;
  --texto-suave: #a8a1c4;
  --primario: #8d75f2;
  --primario-osc: #cfc2ff;
  --primario-cont: #2f2846;
  --acento: #7fb0e6;
  --acento-cont: #1c2c42;
  --menta: #6fc4a4;
  --menta-cont: #1b3329;
  --melocoton: #e6a678;
  --melocoton-cont: #3a2a1e;
  --amarillo: #e0c56f;
  --amarillo-cont: #3a3320;
  --rosa: #e096b8;
  --rosa-cont: #3a2130;
  --borde: #342f49;
  --ok: #7fc9a3;
  --aviso: #e0b567;
  --alerta: #e08aa6;
  --sombra: 0 2px 4px rgba(0, 0, 0, .38), 0 6px 18px rgba(0, 0, 0, .42);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, .58);
}
/* el primario es claro: el texto del botón tiene que ser oscuro para contrastar */
html[data-tema="noche"] .btn { color: #16121f; }
html[data-tema="noche"] .btn.suave { background: var(--superficie-2); color: var(--texto); }
html[data-tema="noche"] .btn.tonal { background: var(--primario-cont); color: var(--primario-osc); }
/* barra de desplazamiento acorde con el fondo oscuro */
html[data-tema="noche"] { scrollbar-width: thin; scrollbar-color: #4a4468 #12101c; }
html[data-tema="noche"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-tema="noche"] ::-webkit-scrollbar-track { background: #12101c; }
html[data-tema="noche"] ::-webkit-scrollbar-thumb { background: #4a4468; border-radius: 8px; border: 3px solid #12101c; }
/* bordes de las muestras de color y velos de diálogo, mas visibles en oscuro */
html[data-tema="noche"] .muestra-color { border-color: rgba(255, 255, 255, .22); }
html[data-tema="noche"] dialog::backdrop { background: rgba(5, 3, 12, .62); }
html[data-tema="noche"] .capa-creditos { background: rgba(5, 3, 12, .66); }
/* la tostada se aclara en vez de oscurecerse */
html[data-tema="noche"] .tostada {
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde);
}

/* ======================================================================== */
/*  AGENDA · vistas de día, semana, mes · ficha de reuniones (app4.js)      */
/* ======================================================================== */

/* --- conmutador de vistas (Día / Semana / Mes / Curso) --- */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: 999px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--texto-suave);
  background: none; padding: 7px 13px; border-radius: 999px; }
.seg button .mi { font-size: 17px; }
.seg button:hover { background: var(--superficie); color: var(--texto); }
.seg button.activa { background: var(--primario); color: #fff; box-shadow: var(--sombra); }

/* --- cabeceras de la agenda --- */
.ag-titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-titulo > .mi { font-size: 30px; color: var(--primario); }
.ag-titulo b { font-size: 16.5px; }
.ag-titulo .t { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.ag-titulo > .etiqueta, .ag-titulo > .leyenda-ag { margin-left: auto; }
.ag-cab-dia, .ag-cab-sem { margin-bottom: 14px; }
.leyenda-ag { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.leyenda-ag .etiqueta { display: inline-flex; align-items: center; gap: 6px; }
.ag-punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  background: var(--primario); }
.ag-punto.reunion { background: var(--alerta); }
.ag-punto.tutoria { background: var(--ok); }
.ag-punto.evento { background: var(--primario); }

/* --- vista de semana --- */
.ag-sem { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1200px) { .ag-sem { gap: 8px; overflow-x: auto; padding-bottom: 6px; } }
.ag-col { display: flex; flex-direction: column; gap: 8px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px; min-height: 150px; }
.ag-col.finde { background: var(--superficie-2); opacity: .82; }
.ag-col.festivo, .ag-col.vacaciones, .ag-col.no_lectivo { background: var(--superficie-2); }
.ag-col.hoy { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario-cont); }
.ag-col-cab { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px 6px;
  border-bottom: 1px dashed var(--borde); }
.ag-col-cab:hover { background: var(--primario-cont); border-radius: 8px; }
.ag-dow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.ag-num { font-size: 19px; font-weight: 700; }
.ag-mes { font-size: 11.5px; color: var(--texto-suave); }
.ag-aviso { font-size: 11px; color: var(--aviso); background: var(--amarillo-cont);
  border-radius: 8px; padding: 4px 6px; }
.ag-col-cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ag-nada { color: var(--texto-suave); font-size: 12px; text-align: center; padding: 6px 0; opacity: .6; }
.ag-mas { border: 1px dashed var(--borde); background: none; color: var(--texto-suave);
  font-family: inherit; font-size: 12px; padding: 5px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ag-mas:hover { border-color: var(--primario); color: var(--primario-osc); background: var(--primario-cont); }
.ag-mas .mi { font-size: 15px; }

/* --- piezas de agenda (ítems) --- */
.ag-lista { display: flex; flex-direction: column; gap: 8px; }
.ag-item { display: flex; gap: 9px; align-items: flex-start; text-align: left; width: 100%;
  font-family: inherit; cursor: pointer; border: 1px solid var(--borde); border-left: 4px solid var(--primario);
  background: var(--superficie-2); color: var(--texto); border-radius: 12px; padding: 8px 10px; }
.ag-item:hover { background: var(--primario-cont); }
.ag-item.reunion { border-left-color: var(--alerta); }
.ag-item.tutoria { border-left-color: var(--ok); }
.ag-item.hecho { opacity: .6; }
.ag-item.hecho .ag-tit b { text-decoration: line-through; }
.ag-hora { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); min-width: 44px; padding-top: 2px; }
.ag-hora .mi { font-size: 15px; }
.ag-tit { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ag-tit b { font-size: 13.5px; font-weight: 600; }
.ag-tit .mi { font-size: 15px; vertical-align: -3px; margin-right: 4px; color: var(--texto-suave); }
.ag-tit i { font-style: normal; font-size: 12px; color: var(--texto-suave); }
.ag-tit .ag-lugar .mi { font-size: 13px; }
.ag-tit .etiqueta { align-self: flex-start; margin-top: 2px; }

/* --- vista de mes --- */
.ag-mes { margin-top: 12px; }
.ag-mes-cab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.ag-mes-cab div { text-align: center; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-suave); }
.ag-mes-cuerpo { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ag-celda { min-height: 92px; border: 1px solid var(--borde); border-radius: 12px; padding: 6px;
  background: var(--superficie); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.ag-celda:hover { border-color: var(--primario); background: var(--primario-cont); }
.ag-celda.otro { opacity: .45; }
.ag-celda.finde { background: var(--superficie-2); }
.ag-celda.hoy { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario-cont); }
.ag-celda.festivo, .ag-celda.no_lectivo, .ag-celda.vacaciones { background: var(--fondo-2); }
.ag-celda-cab { display: flex; align-items: center; gap: 6px; }
.ag-celda-cab .mi { font-size: 15px; color: var(--aviso); }
.ag-puntos { margin-left: auto; display: inline-flex; gap: 3px; }
.ag-mini { font-size: 11.5px; line-height: 1.25; color: var(--texto); background: var(--superficie-2);
  border-radius: 7px; padding: 2px 5px; border-left: 3px solid var(--primario); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ag-mini.reunion { border-left-color: var(--alerta); }
.ag-mini.tutoria { border-left-color: var(--ok); }
.ag-mini.mas { border-left: none; color: var(--texto-suave); background: none; padding-left: 2px; }
.ag-mini .mi { font-size: 13px; vertical-align: -2px; }

/* --- asunto con papelera: se abre para editarlo o se borra en el sitio --- */
.ag-caja { display: flex; align-items: stretch; gap: 5px; width: 100%; }
.ag-caja .ag-item { flex: 1 1 auto; min-width: 0; }
.ag-del { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center;
  justify-content: center; font-family: inherit; cursor: pointer; border: 1px solid var(--borde);
  background: var(--superficie-2); color: var(--texto-suave); border-radius: 10px; padding: 5px 7px; }
.ag-del:hover { color: var(--alerta); border-color: var(--alerta); background: var(--rosa-cont); }
.ag-del .mi { font-size: 17px; }
.ag-del:disabled { opacity: .5; cursor: default; }
.ag-caja.mini { gap: 3px; }
.ag-caja.mini .ag-mini { flex: 1 1 auto; min-width: 0; border: 1px solid var(--borde);
  border-left: 3px solid var(--primario); }
.ag-caja.mini .ag-mini.reunion { border-left-color: var(--alerta); }
.ag-caja.mini .ag-mini.tutoria { border-left-color: var(--ok); }
.ag-caja.mini .ag-del { border-radius: 7px; padding: 1px 4px; }
button.ag-mini { font-family: inherit; cursor: pointer; text-align: left; width: 100%; }
button.ag-mini:hover { background: var(--primario-cont); }

/* --- diálogo del día: lo que ya hay agendado ese día --- */
.ag-ya { margin: 6px 0 10px; padding: 9px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie-2); }
.ag-ya-tit { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 7px; }
.ag-ya-tit .mi { font-size: 17px; }
.ag-ya-tit .etiqueta { margin-left: auto; }
.ag-ayuda { margin: 7px 0 0; font-size: 12px; color: var(--texto-suave); }

/* --- diálogo «¿qué quieres agendar?» --- */
.rejilla-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.tipo-evento { display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit;
  font-size: 13.5px; cursor: pointer; border: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--texto); border-radius: 14px; padding: 11px 13px; }
.tipo-evento:hover { border-color: var(--primario); background: var(--primario-cont); }
.tipo-evento .mi { font-size: 22px; color: var(--primario); }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0; cursor: pointer; }

/* --- ficha de reunión --- */
.ficha-reu { margin-bottom: 14px; }
tr.tratado td { color: var(--texto-suave); }
.lista-acuerdos { display: flex; flex-direction: column; gap: 10px; }
.acuerdo { border: 1px solid var(--borde); border-left: 4px solid var(--aviso); border-radius: 12px;
  padding: 10px 12px; background: var(--superficie-2); }
.acuerdo.cumplido { border-left-color: var(--ok); opacity: .78; }
.acuerdo.cumplido .acuerdo-cab b { text-decoration: line-through; }
.acuerdo-cab { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.acuerdo-cab b { font-size: 13.5px; }
.acuerdo-notas { font-size: 12.5px; color: var(--texto-suave); margin-top: 6px; }
.lista-notas { display: flex; flex-direction: column; gap: 10px; }
.nota-reu { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--superficie-2); }
.nota-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-suave); }
.nota-cab b { color: var(--texto); font-size: 13px; }
.nota-cab .mi { font-size: 16px; color: var(--primario); }
.nota-cab .acciones { margin-left: auto; }
.nota-reu p { margin: 6px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.lista-od { margin: 8px 0 0 18px; font-size: 13.5px; }
.lista-od li { margin-bottom: 6px; }

/* --- próximas reuniones --- */
.lista-reuniones { display: flex; flex-direction: column; gap: 10px; }
.reunion-tarjeta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer; border: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--texto); border-radius: 14px; padding: 12px 14px; }
.reunion-tarjeta:hover { border-color: var(--primario); background: var(--primario-cont); }
.rt-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--primario); color: #fff; border-radius: 12px; padding: 6px 10px; min-width: 54px; }
.rt-fecha b { font-size: 19px; line-height: 1; }
.rt-cuerpo { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rt-cuerpo b { font-size: 14px; }
.rt-cuerpo i { font-style: normal; font-size: 12.5px; color: var(--texto-suave); }
.rt-cuerpo .etiqueta { align-self: flex-start; }
.reunion-tarjeta > .mi { color: var(--texto-suave); }

/* ========================================================================
   PROGRAMACIÓN DE AULA (sesiones del día) y SALIDA DE LA APLICACIÓN
   ======================================================================== */

/* --- botón de salida del pie lateral --- */
.btn.salir { width: 100%; justify-content: center; margin-top: 8px;
  background: var(--rosa-cont); color: var(--alerta); border: 1px solid transparent; }
.apagado { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 70vh; text-align: center; color: var(--texto-suave); }
.apagado .mi { font-size: 56px; color: var(--ok); }
.apagado h2 { margin: 0; color: var(--texto); }

/* --- barra de control de la programación --- */
.prog-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.prog-pestanas { display: flex; gap: 6px; }
.prog-nav { display: flex; align-items: center; gap: 6px; }
.prog-nav input[type="date"] { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.prog-titulo { margin-left: auto; font-size: 13.5px; font-weight: 500; }
.prog-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 4px 0 12px; border-bottom: 1px dashed var(--borde); margin-bottom: 12px; }
.prog-dia { font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.prog-resumen { display: flex; gap: 8px; flex-wrap: wrap; }
.prog-resumen .etiqueta .mi, .etiqueta .mi { font-size: 15px; vertical-align: -3px; margin-right: 3px; }

/* --- tarjeta de una sesión --- */
.sesion { display: flex; gap: 14px; border: 1px solid var(--borde); border-left-width: 6px;
  border-radius: 14px; background: var(--superficie-2); padding: 12px 14px; margin-bottom: 12px; }
.sesion.primario { border-left-color: var(--primario); }
.sesion.celeste { border-left-color: #4e93c8; }
.sesion.menta { border-left-color: #55a37f; }
.sesion.arena { border-left-color: #b09355; }
.sesion.floral { border-left-color: #c477a6; }
.sesion.melocoton { border-left-color: #d98f5c; }
.sesion.gris { border-left-color: #9a94ab; }
.sesion-hora { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  min-width: 118px; }
.sesion-hora b { font-size: 15px; }
.sesion-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sesion-meta { font-size: 12.5px; color: var(--texto-suave); display: flex; gap: 12px; flex-wrap: wrap; }
.sesion-meta .mi { font-size: 16px; vertical-align: -3px; margin-right: 3px; color: var(--primario-osc); }
.sesion-alumnos { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-alumno { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px;
  background: var(--primario-cont); color: var(--primario-osc); border-radius: 999px; padding: 3px 10px; }
.chip-alumno .mi { font-size: 15px; }
.sesion-rot { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin-top: 4px; }
.texto-largo { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.texto-largo.vacio-linea { color: var(--texto-suave); font-style: italic; }
.sesion-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* --- vista de la semana --- */
.semana { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; }
.col-semana { border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie-2);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.col-semana.hoy { border-color: var(--primario); box-shadow: var(--sombra); }
.col-cab { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.col-cab b { font-size: 12.5px; letter-spacing: .03em; }
.col-cab .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-suave); margin-left: auto; }
.col-cab .punto.lectivo { background: var(--ok); }
.col-cab .punto.festivo { background: var(--alerta); }
.col-cab .punto.no_lectivo { background: var(--aviso); }
.col-cab .punto.vacaciones { background: var(--primario); }
.col-cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.col-add { justify-content: center; }
.ficha-sesion { display: flex; flex-direction: column; gap: 2px; text-align: left; font-family: inherit;
  border: 1px solid var(--borde); border-left-width: 4px; border-radius: 10px; padding: 6px 8px;
  background: var(--superficie); color: var(--texto); cursor: pointer; }
.ficha-sesion:hover { border-color: var(--primario); }
.ficha-sesion b { font-size: 12.5px; }
.ficha-sesion span { font-size: 11.5px; color: var(--texto-suave); }
.ficha-sesion i { font-style: normal; font-size: 11.5px; }
.ficha-sesion.primario { border-left-color: var(--primario); }
.ficha-sesion.celeste { border-left-color: #4e93c8; }
.ficha-sesion.menta { border-left-color: #55a37f; }
.ficha-sesion.arena { border-left-color: #b09355; }
.ficha-sesion.floral { border-left-color: #c477a6; }
.ficha-sesion.melocoton { border-left-color: #d98f5c; }
.ficha-sesion.gris { border-left-color: #9a94ab; }
.vacio.chico { font-size: 12px; padding: 8px; }

/* --- formulario de sesión --- */
.opciones-alumnos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px;
  border: 1px solid var(--borde); border-radius: 12px; padding: 10px; background: var(--superficie-2); }
.opcion-alumno { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
  padding: 5px 7px; border-radius: 9px; }
.opcion-alumno:hover { background: var(--primario-cont); }
.fila-botones { display: flex; gap: 8px; margin-top: 8px; }
.campo textarea.alto { min-height: 200px; }
.campo textarea.alto-medio { min-height: 130px; }
.centrado { text-align: center; margin: 8px 0; }
.ayuda { font-size: 12px; color: var(--texto-suave); }

/* --- impresión de la programación del día --- */
@media print {
  .sesion { break-inside: avoid; }
}