/* TURBO FP · curso 2026/2027
   Paleta sacada del logotipo (LOGOTIPOS/TURBOFP LOGO 2): azul oscuro #1a466b,
   naranja #f57200 y blanco. El azul manda en cabecera, títulos y tablas; el
   naranja queda para lo accionable (botones principales, curso activo,
   subrayados) y para el botón del logotipo al pasar el ratón. */

:root {
  --azul-oscuro: #1a466b;
  --azul-medio: #245a86;
  --azul-claro: #d9e6f2;
  --azul-muy-claro: #eef4f9;
  --naranja: #f57200;
  --naranja-oscuro: #c65c00;
  --naranja-claro: #fff1e3;
  --borde: #c9d8e6;
  --texto: #17212b;
  --gris: #6B7280;
  --verde: #2E7D32;
  --verde-claro: #DDF2DE;
  /* Tono más oscuro del mismo verde: en el escenario «a 8 h por día» son los
     últimos días marcados, que quedarían libres (ni en la empresa ni en el
     centro) para no pasar del cómputo anual. */
  --verde-oscuro: #1B5E20;
  --verde-oscuro-fondo: #A5D6A7;
  /* Morado: días de prácticas del otro curso del mismo ciclo formativo */
  --morado: #6A1B9A;
  --morado-claro: #EFE2F8;
  --rojo: #B3261E;
  --rojo-claro: #F8DEDA;
  --ambar-claro: #FBEFC9;
  --ambar-texto: #8A6100;
  --sombra: 0 1px 3px rgba(26, 70, 107, .18);
  --sombra-alta: 0 14px 34px rgba(26, 70, 107, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* El atributo «hidden» debe mandar siempre: hay elementos con display propio
   (p. ej. .radio o .barra-usuario) que si no lo anularían. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", "Noto Sans", Arial, system-ui, sans-serif;
  color: var(--texto);
  background: #f4f7fa;
  font-size: 15px;
  line-height: 1.45;
}

/* ── Ventana de acceso ────────────────────────────────────────────────── */
.acceso {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* El azul del logotipo, con un halo naranja muy suave arriba a la derecha
     (el mismo acento del logotipo). */
  background:
    radial-gradient(circle at 82% 8%, rgba(245, 114, 0, .22), transparent 44%),
    linear-gradient(135deg, #143a59, var(--azul-oscuro) 48%, #245a86);
  /* El formulario de registro es más alto que la pantalla de un portátil
     (1366x768): sin esto, la caja se salía por arriba y por abajo y había
     campos y enlaces a los que no se podía llegar. Con `margin: auto` en la
     caja, si no cabe se pega arriba y esta ventana se puede desplazar. */
  overflow-y: auto;
}
.acceso.oculto { display: none; }
.acceso-caja {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 12px;
  padding: 26px 26px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  text-align: center;
  margin: auto;
}
/* Franja de marca en la parte de arriba de la tarjeta de acceso: el logotipo
   sobre el azul de la cabecera, con las esquinas de la tarjeta. */
.acceso-marca {
  margin: -26px -26px 16px;
  padding: 16px 18px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #143a59, var(--azul-oscuro) 55%, #245a86);
}
.acceso-logo { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 auto; }
.acceso-caja h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--azul-oscuro); }
/* Dos campos en la misma fila (nombre y apellidos). Los dos se reparten el
   ancho; el 0 de flex-basis evita que un texto largo deforme la fila. */
.acceso-doble { display: flex; gap: 8px; }
.acceso-doble input { flex: 1 1 0; min-width: 0; }

/* Nombre del proyecto y, al lado y más pequeño, el nombre descriptivo. */
.h1-sub { font-size: .58em; font-weight: 600; color: var(--gris); }   /* sin uso desde 12/10/2026 */
.acceso-centro { margin: 0 0 16px; font-size: .78rem; color: var(--gris); }
.acceso-texto { margin: 0 0 10px; font-size: .88rem; line-height: 1.35; }
.acceso-caja input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 10px;
}
.acceso-caja input[type="password"] { letter-spacing: .12em; }
.acceso-caja input:focus { outline: 2px solid var(--azul-medio); outline-offset: 1px; }
.acceso-caja button { width: 100%; padding: 10px; font-size: .95rem; }
.acceso-error { margin: 10px 0 0; min-height: 18px; font-size: .82rem; color: var(--rojo); font-weight: 600; }
.acceso-pie { margin: 2px 0 0; min-height: 16px; font-size: .75rem; color: var(--gris); }
.acceso-enlace { margin: 12px 0 0; font-size: .82rem; color: var(--gris); }
/* Pie legal de la ventana de acceso (07/10/2026): derechos y correo de contacto
   también SIN sesión — el pie de la aplicación está tapado por esta ventana. */
.acceso-legal {
  margin: 14px 0 2px;
  padding-top: 10px;
  border-top: 1px solid #E3E8F2;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--gris);
  text-align: center;
}
.acceso-legal p { margin: 4px 0; }
/* Aviso de que no es un sitio oficial (auditoría legal, H3, 15/10/2026): tiene
   que verse, no quedarse en los términos. Va destacado en su propio renglón. */
.acceso-no-oficial {
  color: #7A4A00;
  background: #FFF6E5;
  border: 1px solid #F0DDB4;
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1.35;
}
.acceso-legal a { color: #1a466b; }
/* El botón «Contacto» del bloque legal se ve como un enlace del mismo tamaño
   que el resto (09/10/2026). */
.acceso-legal button.enlace { font-size: inherit; }
.enlace {
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: var(--azul-medio);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.enlace:hover { color: var(--azul-oscuro); }

/* ── Menú CUENTA de la barra superior (12/10/2026) ──────────────────────── */
.menu-cuenta { position: relative; }
.btn-cuenta {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: .84rem; font-weight: 700; letter-spacing: .4px;
  color: var(--azul-oscuro); background: #fff;
  border: 1px solid rgba(26, 70, 107, .35); border-radius: 8px; cursor: pointer;
}
.btn-cuenta:hover { background: #eaf1f7; }
.btn-cuenta-flecha { font-size: .68rem; }
/* Punto ámbar: hay un aviso de solo lectura dentro del menú. */
.btn-cuenta-aviso::after {
  content: ""; position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #F3B23C; border: 1px solid #fff;
}
.menu-cuenta-panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 245px; z-index: 60;
  background: #fff; color: #1E2430;
  border: 1px solid var(--borde); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 25, 45, .30);
  padding: 8px; display: flex; flex-direction: column; gap: 3px;
}
.menu-cuenta-panel[hidden] { display: none !important; }
.menu-cuenta-usuario {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 2px 6px 6px; margin-bottom: 3px;
  border-bottom: 1px solid var(--borde); font-size: .8rem;
}
.menu-cuenta-usuario .usuario-icono { color: var(--verde); font-size: .7rem; }
.menu-cuenta-usuario .usuario-nombre { font-weight: 700; }
.menu-cuenta-usuario .usuario-rol { color: var(--gris); font-size: .74rem; }
.menu-cuenta-usuario .subtitulo { flex-basis: 100%; margin: 0; font-size: .74rem; color: var(--gris); }
.menu-item {
  text-align: left; padding: 8px 10px; font-size: .85rem; font-weight: 600;
  background: none; border: none; border-radius: 7px; cursor: pointer;
  color: var(--azul-oscuro); font-family: inherit;
}
.menu-item:hover { background: #eaf1f7; }
.menu-item[hidden] { display: none !important; }
.menu-salir { color: var(--rojo); }
.menu-cuenta .aviso-rol { margin: 0 0 4px; font-size: .76rem; }
.aviso-rol {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ambar-claro, #FDF3D8);
  border-left: 4px solid #C98A00;
  color: #6B4A00;
  font-size: .84rem;
}
.calendario.solo-lectura td.dia, .calendario.solo-lectura td.semana { cursor: default; }
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.acceso.sacudida .acceso-caja { animation: sacudir .35s ease; }

/* ── Aviso de arranque ──────────────────────────────────────────────────
   Cuando la aplicación no llega a cargar (falta un fichero, el servidor
   entrega otra cosa, el navegador mezcla versiones…), este aviso sale arriba
   y por encima de todo, para que no haya que adivinar qué pasa. */
.aviso-arranque {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;                 /* por encima de la ventana de acceso (1000) */
  max-height: 82vh;
  overflow: auto;
  padding: 16px 22px 14px;
  background: #FFF7F6;
  border-bottom: 3px solid var(--rojo);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: .88rem;
  line-height: 1.45;
}
.aviso-arranque h2 { margin: 0 0 8px; font-size: 1.02rem; color: var(--rojo); }
.aviso-arranque ul { margin: 0 0 10px; padding-left: 20px; }
.aviso-arranque li { margin-bottom: 3px; }
.aviso-arranque p { margin: 0 0 8px; }
.aviso-arranque code {
  background: #EFE3E2;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: .92em;
  word-break: break-all;
}
.aviso-arranque-datos { color: var(--gris); font-size: .8rem; }
.aviso-arranque-botones { margin: 0 !important; }
.aviso-arranque button { padding: 8px 14px; font-size: .86rem; width: auto; }

/* ── Cabecera: barra de menú, siempre visible (12/10/2026) ────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 40;   /* siempre visible al desplazar */
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio));
  color: #fff;
  padding: 0 16px; height: 48px; box-sizing: border-box;
  box-shadow: 0 1px 5px rgba(15, 25, 45, .28);
}
.cabecera-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 100%;
}
.cabecera-titulo {
  margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El logotipo de la izquierda es el botón de inicio. La imagen es la marca
   sobre el mismo azul de la cabecera; al pasar el ratón se ilumina el borde
   naranja para que se vea que se puede pulsar. */
.cabecera-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cabecera-logo {
  display: inline-flex; align-items: center;
  padding: 0; margin: 0; border: 0; background: none;
  border-radius: 6px; cursor: pointer; line-height: 0;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cabecera-logo img { display: block; height: 34px; width: auto; border-radius: 5px; }
.cabecera-logo:hover { box-shadow: 0 0 0 2px var(--naranja); transform: translateY(-1px); }
.cabecera-logo:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.cabecera-seccion {
  font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #cfe0ee; border-left: 1px solid rgba(255, 255, 255, .35); padding-left: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecera-dcha { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Botón «COLABORA» al final de la barra (30/09/2026; 12/10/2026 ya no absoluto). */
.btn-colabora {
  padding: 8px 16px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, #ff8a26, var(--naranja));
  border: 1px solid #c65c00;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
  white-space: nowrap;
}
.btn-colabora:hover { filter: brightness(1.06); }
.btn-colabora:active { transform: translateY(1px); }
.cabecera .subtitulo { margin: 0; font-size: .82rem; opacity: .95; }

/* ── Controles ────────────────────────────────────────────────────────── */
.controles {
  background: #fff;
  border-bottom: 1px solid var(--borde);
  padding: 9px 22px 8px;
  box-shadow: var(--sombra);
  position: sticky;
  top: 48px;                          /* justo debajo de la barra de menú */
  z-index: 30;
}
.controles .fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: flex-end;
  margin-bottom: 7px;
}
.controles .fila:last-of-type { margin-bottom: 0; }
.barra-acciones { align-items: center; }
.control { display: flex; flex-direction: column; gap: 2px; }
.control label, .control .etiqueta {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--azul-medio);
}
/* El buscador de centros de la barra de controles lleva el mismo aspecto que
   los demás campos de esa barra. Se nombra con `.controles` a propósito: el
   buscador de instituto del registro también vive dentro de un `.control` y
   debe conservar el aspecto de los campos de la ventana de acceso. */
.control select, .control input[type="date"], .controles .control .buscador input {
  font: inherit;
  font-size: .82rem;
  padding: 4px 7px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
  color: var(--texto);
  min-width: 0;
  max-width: 340px;
}
/* Misma altura para los tres tipos de campo de la barra: el navegador los pinta
   a 29 px (texto), 30 px (select) y 31 px (date) y esa diferencia desalineaba
   los rótulos de Centro, Grupo y las dos fechas (13/10/2026). */
.controles .control select,
.controles .control input[type="date"],
.controles .control .buscador input { height: 31px; }
.control input[type="date"] { min-width: 140px; }
.control select:focus, .control input:focus { outline: 2px solid var(--azul-medio); outline-offset: 1px; }

.radios { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 3px 0 1px; }
.radio { display: flex; align-items: center; gap: 6px; font-size: .84rem; cursor: pointer; }

.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Check «Avisar de coincidencias 1.º ↔ 2.º», a la derecha de «Empezar de cero»
   (petición del profesor, 30/09/2026). */
.chk-coincidencias {
  font-weight: 600;
  color: var(--azul-oscuro);
  background: var(--azul-muy-claro);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  user-select: none;
}
.chk-coincidencias input { accent-color: var(--azul-medio); width: 1rem; height: 1rem; }
.separador {
  width: 1px;
  height: 20px;
  background: var(--borde);
  margin: 0 3px;
}
button {
  font: inherit;
  font-size: .82rem;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--azul-medio);
  background: #fff;
  color: var(--azul-oscuro);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
button:hover { background: var(--azul-muy-claro); }
button.activo, button.primario { background: var(--azul-oscuro); color: #fff; }
button.activo:hover, button.primario:hover { background: var(--azul-medio); }
button.peligro { border-color: var(--rojo); color: var(--rojo); }
button.peligro:hover { background: var(--rojo-claro); }

.ayuda {
  margin: 7px 0 0;
  padding: 5px 10px;
  background: var(--azul-muy-claro);
  border-left: 4px solid var(--azul-medio);
  border-radius: 0 6px 6px 0;
  font-size: .78rem;
  color: var(--azul-oscuro);
}

/* ── Indicador de guardado (Netlify Blobs) ────────────────────────────── */
.sincronia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: #fff;
  font-size: .74rem;
  color: var(--gris);
  white-space: nowrap;
  cursor: default;
}
.sincronia .punto {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--gris);
}
.sincronia[data-estado="cargando"] .punto,
.sincronia[data-estado="guardando"] .punto { background: var(--azul-medio); animation: latido 1s infinite; }
.sincronia[data-estado="guardado"] {
  color: var(--verde);
  border-color: #BCE0BE;
  background: var(--verde-claro);
}
.sincronia[data-estado="guardado"] .punto { background: var(--verde); }
.sincronia[data-estado="error"] {
  color: var(--rojo);
  border-color: #E7B4AF;
  background: var(--rojo-claro);
}
.sincronia[data-estado="error"] .punto { background: var(--rojo); }
@keyframes latido { 50% { opacity: .25; } }

/* ── Distribución general ─────────────────────────────────────────────── */
.contenido {
  display: grid;
  /* Columna del resumen: 340px → 358px (petición del profesor 01/10/2026, «un 5 %
     más ancha»). Motivo medido: con 340px la tabla de módulos no cabía en varios
     grupos (2.º ELE2-2, 1.º/2.º ELE2-3, 1.º/2.º ELE3-1, 2.º ELE3-2) y se salía
     entre 18 y 27 px por la derecha, justo lo que ocultaba la cifra de la última
     columna «Empresa». */
  grid-template-columns: minmax(0, 1fr) 358px;
  gap: 18px;
  padding: 16px 22px 28px;
  /* la columna del resumen se estira hasta abajo del todo: acaba a la misma
     altura que el calendario (ver .columna-resumen y .resumen) */
  align-items: stretch;
  max-width: 1500px;
  margin: 0 auto;
}

/* ── Leyenda ──────────────────────────────────────────────────────────── */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
  font-size: .82rem;
}
.chip { display: inline-flex; align-items: center; gap: 6px; color: var(--gris); }
.chip::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid var(--borde);
}
.chip.lectivo::before { background: #fff; }
.chip.practica::before { background: var(--verde-claro); border-color: var(--verde); }
.chip.practica-oscuro::before { background: var(--verde-oscuro-fondo); border-color: var(--verde-oscuro); }
.chip.compartida::before { background: var(--morado-claro); border-color: var(--morado); }
.chip.semana::before {
  background: #EDF7EE;
  border-color: var(--verde);
  box-shadow: inset 3px 0 0 var(--verde);
}
.chip.festivo::before { background: var(--rojo-claro); border-color: var(--rojo); }
.chip.vacaciones::before { background: var(--ambar-claro); border-color: var(--ambar-texto); }
.chip.finde::before { background: #E9ECF2; }

/* Marca de letra (P/F/V) visible sólo al imprimir, para que el calendario se
   entienda también en blanco y negro. */
.marca { display: none; }

/* Bloque explicativo sobre el calendario: sólo al imprimir (en pantalla esa
   información ya está en la ayuda, los indicadores y los textos emergentes) */
.impresion-nota { display: none; }
.impresion-cabecera, .impresion-leyenda, .hoja-pie { display: none; }

/* Envoltorio para la impresión: en pantalla no pinta nada; al imprimir forma
   la página de portada (cabecera + leyenda + resumen) con sus márgenes propios */
.hoja { display: contents; }

.resumen-cabecera {
  margin: 0 0 8px;
  font-size: .78rem;
  color: var(--gris);
  line-height: 1.3;
}
.resumen-cabecera strong { color: var(--azul-oscuro); }

/* ── Calendario ───────────────────────────────────────────────────────── */
.calendario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 16px;
}
/* Bienvenida de una cuenta sin centros (06/10/2026): en lugar de quedarse en
   «Cargando el centro…», se explica dónde se reclama el primero. */
.bienvenida-centros {
  grid-column: 1 / -1;
  max-width: 34rem; margin: 3rem auto; padding: 1.5rem 2rem;
  background: var(--fondo, #F2F6FC); border: 1px solid var(--borde, #d9e6f2);
  border-radius: 10px; text-align: center;
}
.bienvenida-centros h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.bienvenida-centros p { margin: 0 0 1rem; font-size: .95rem; }
.mes {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.mes h3 {
  margin: 0;
  padding: 8px 12px;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-size: .95rem;
  text-transform: capitalize;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--borde);
}
.mes table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mes th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris);
  font-weight: 700;
  padding: 4px 0;
  border-bottom: 1px solid var(--borde);
}
.mes td {
  height: 34px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #EDF0F6;
  font-size: .82rem;
  position: relative;
  user-select: none;
}
.mes td.vacia { background: #FAFBFD; border-color: transparent; }
.mes td.finde { background: #E9ECF2; color: #98A2B3; }
.mes td.fuera { background: #FAFBFD; color: #C4CBD6; }
.mes td.sinClase { background: #F1F3F7; color: #A9B2C0; }
.mes td.lectivo { background: #fff; cursor: pointer; }
.mes td.lectivo:hover { background: var(--azul-muy-claro); }
.mes td.practica { background: var(--verde-claro); font-weight: 700; color: var(--verde); }
/* Escenario a 8 h/día: los últimos días marcados quedarían libres (tono oscuro).
   Petición del profesor 26/09/2026: sin remarqueo, igual que el verde claro. */
.mes td.practica.oscuro {
  background: var(--verde-oscuro-fondo);
  color: var(--verde-oscuro);
  box-shadow: none;
}
.mes td.practica.oscuro:hover { background: #8BC78E; }
/* Día ya marcado como FEOE en el otro curso del mismo ciclo: se avisa en morado */
.mes td.practica-compartida {
  background: var(--morado-claro);
  font-weight: 700;
  color: var(--morado);
  cursor: pointer;
}
.mes td.practica-compartida:hover { background: #E4D0F3; }
/* Coincidencia de ciclo (05/10/2026): el día está marcado en LOS DOS cursos.
   Se queda VERDE y sólo lleva un punto morado en la esquina que avisa de la
   coincidencia: ni cambios de color ni avisos, y cada curso conserva sus
   marcas. */
.mes td .punto-coincidencia {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--morado);
  box-shadow: 0 0 0 1px #fff;
}
.mes td.practica.oscuro .punto-coincidencia { box-shadow: 0 0 0 1px var(--verde-oscuro-fondo); }
.mes td.festivo { background: var(--rojo-claro); color: var(--rojo); font-weight: 700; }
.mes td.vacaciones { background: var(--ambar-claro); color: var(--ambar-texto); }
.mes td .motivo {
  display: block;
  font-size: .58rem;
  line-height: 1.1;
  color: inherit;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.mes td.rango-inicio { outline: 3px solid var(--azul-medio); outline-offset: -3px; }

/* ── Columna de semana (clic = marcar la semana completa) ─────────────── */
.mes th.semana, .mes td.semana { width: 34px; }
.mes th.semana {
  background: var(--azul-muy-claro);
  color: var(--azul-medio);
  border-right: 1px solid var(--borde);
  cursor: help;
}
.mes td.semana {
  background: #F1F4FA;
  color: var(--azul-medio);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2px;
  border-right: 1px solid var(--borde);
  cursor: pointer;
}
.mes td.semana:hover { background: var(--azul-claro); }
.mes td.semana.completa { background: var(--verde-claro); color: var(--verde); }
.mes td.semana.completa:hover { background: #C7E9C9; }
.mes td.semana.parcial {
  background: #EDF7EE;
  color: var(--verde);
  box-shadow: inset 3px 0 0 var(--verde);
}
.mes td.semana.parcial:hover { background: var(--verde-claro); }
/* Semana sin marcar aquí pero ya marcada en el otro curso del ciclo */
.mes td.semana.compartida {
  background: var(--morado-claro);
  color: var(--morado);
  box-shadow: inset 3px 0 0 var(--morado);
}
.mes td.semana.compartida:hover { background: #E4D0F3; }
/* Resaltar toda la fila al pasar por la semana (navegadores compatibles con :has) */
.mes tr:has(td.semana:hover) td.lectivo { background: var(--azul-muy-claro); }
.mes tr:has(td.semana:hover) td.semana { background: var(--azul-claro); }

/* ── Resumen ──────────────────────────────────────────────────────────── */
/* La altura de la columna la marca el calendario. El panel se coloca fuera del
   flujo (absolute) para que su propio contenido no alargue la fila: así el borde
   inferior del panel coincide exactamente con el mes más bajo del calendario. */
.columna-resumen { position: relative; }
.resumen {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px;
  box-shadow: var(--sombra);
  position: absolute;
  inset: 0;
  /* si el resumen no cupiera, se desplaza dentro del propio panel */
  overflow: auto;
}
.resumen h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--azul-oscuro);
  border-bottom: 2px solid var(--azul-claro);
  padding-bottom: 5px;
}
.resumen h3 {
  margin: 9px 0 4px;
  font-size: .88rem;
  color: var(--azul-medio);
}
/* Seis indicadores en dos filas de tres (días y horas) para que el panel no
   desperdicie altura: el resumen debe caber entero sin desplazamiento interno. */
.indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.indicador {
  background: var(--azul-muy-claro);
  border-radius: 6px;
  padding: 4px 6px;
}
.indicador .valor { display: block; font-size: 1rem; font-weight: 700; color: var(--azul-oscuro); }
.indicador .nombre {
  font-size: .63rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .2px;
  color: var(--gris);
}
.indicador.destacado { background: var(--verde-claro); }
.indicador.destacado .valor { color: var(--verde); }

/* Aviso de ciclo: días que el otro curso del mismo ciclo ya tiene de prácticas */
.coincidencia-ciclo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 0;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--morado-claro);
  color: var(--morado);
  font-size: .62rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .2px;
}
.coincidencia-ciclo .valor { font-size: 1rem; font-weight: 700; }
/* Sin días morados (nada pendiente en el otro curso) el aviso pasa a azul */
.coincidencia-ciclo:not(.morado) { background: var(--azul-muy-claro); color: var(--azul-oscuro); }

.resumen table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.resumen th, .resumen td { padding: 2px 5px; border-bottom: 1px solid #EAEEF5; text-align: left; }
.resumen thead th {
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}
/* Columnas de cifras con ancho fijo (para que el nombre del módulo se quede el
   resto del ancho) y alineadas a la derecha con cifras de ancho uniforme. */
.resumen td.num, .resumen th.num {
  width: 36px;
  padding: 2px 3px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Las cabeceras de las cifras son más pequeñas para que «empresa» quepa en una línea */
.resumen th.num { font-size: .58rem; letter-spacing: 0; }
/* Horas que el módulo pierde por la FEOE: destacadas en verde */
.resumen td.perdidas { color: var(--verde); font-weight: 700; }
.resumen tfoot td { font-weight: 700; border-top: 2px solid var(--azul-claro); }
.resumen .codigo { font-weight: 700; color: var(--azul-oscuro); }
.resumen .nombre-mod { display: block; font-size: .64rem; line-height: 1.05; color: var(--gris); }

/* Nota del cómputo: pequeña y ajustada, para no comer altura al panel */
.nota-resumen { margin: 10px 0 0; font-size: .68rem; line-height: 1.3; color: var(--gris); }
/* Escenario informativo «a 8 horas por día» en el panel de resumen */
.nota-escenario8 {
  margin: 12px 0 2px;
  padding: 7px 9px;
  background: var(--verde-claro);
  border-left: 4px solid var(--verde);
  border-radius: 6px;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--texto);
}
.nota-escenario8 strong { color: var(--verde-oscuro); }
/* Aviso rojo del escenario a 8 h/día: la estancia en la empresa pasa del tope
   de 700 h (petición del profesor, 14/10/2026). Va dentro de la propia nota
   del escenario, como bloque, para no añadir otro párrafo al panel. */
.nota-escenario8 .aviso-intensiva {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 7px;
  background: var(--rojo-claro);
  border-left: 3px solid var(--rojo);
  border-radius: 4px;
  font-weight: 700;
  color: var(--rojo);
}
.escenario-detalle { margin-bottom: 10px; }

/* Check «A 8 horas por día» y su píldora de aviso (exceso y días libres) */
.escenario8 { margin-top: 4px; }
.escenario8 .radio { font-weight: 600; }
.aviso-ocho {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px 2px;
  border-radius: 10px;
  background: var(--verde-oscuro);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
.aviso-ocho[hidden] { display: none; }
/* La primera columna (nombre del módulo) es la única que puede crecer: si una
   palabra sola no cupiera, la tabla entera se salía del panel y se perdía la
   última columna. Hace falta «anywhere» y no «break-word»: «break-word» permite
   partir la palabra pero NO reduce el ancho mínimo, así que la tabla seguía
   desbordando 9 px en 2.º ELE2-3, 2.º ELE3-1 y 2.º ELE3-4. «anywhere» sí lo
   reduce, de modo que la tabla nunca supera el ancho del panel. */
.resumen th:first-child, .resumen td:first-child { overflow-wrap: anywhere; }
.resumen tbody tr.sinPracticas td.num { color: var(--verde); font-weight: 700; }

.lista-festivos { list-style: none; margin: 0; padding: 0; font-size: .78rem; }
.lista-festivos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dashed #E4E9F2;
}
.lista-festivos .quitar {
  border: none;
  background: none;
  color: var(--rojo);
  cursor: pointer;
  font-size: .95rem;
  padding: 0 4px;
}
.anadir-festivo { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.anadir-festivo input[type="date"] { font: inherit; padding: 5px 6px; border: 1px solid var(--borde); border-radius: 6px; }
.anadir-festivo input[type="text"] { font: inherit; padding: 5px 6px; border: 1px solid var(--borde); border-radius: 6px; flex: 1; min-width: 80px; }

/* Copia en la nube: última vez guardada y vuelta atrás */
.nube {
  background: var(--azul-muy-claro);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .76rem;
  color: var(--gris);
}
.nube p { margin: 0 0 6px; }
.nube p strong { color: var(--azul-oscuro); }
.acciones-nube { display: flex; flex-wrap: wrap; gap: 6px; }
.acciones-nube button { font-size: .76rem; padding: 4px 8px; }
.acciones-nube button:disabled { border-color: var(--borde); color: #9AA3B2; cursor: not-allowed; background: #fff; }

.pie {
  padding: 14px 26px 26px;
  font-size: .76rem;
  color: var(--gris);
  max-width: 1500px;
  margin: 0 auto;
}
.pie p { margin: 2px 0; }

/* ── Impresión (A4) ───────────────────────────────────────────────────── */
@page { size: A4 portrait; margin: 9mm 8mm; }

@media print {
  /* Colores siempre visibles al imprimir */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  html, body { background: #fff; color: #1E2430; }

  /* Nada de pantalla fuera de las hojas nuevas */
  .acceso, .cabecera, .controles, .ayuda, .pie, .sincronia,
  button, .botones, .anadir-festivo, .nube, .sincronia, .aviso-arranque,
  .solo-pantalla, .leyenda, .barra-usuario, .aviso-rol,
  /* El check «Prácticas a 8 horas» y su píldora: sólo son de pantalla
     (regresión del 29/09 al moverse dentro del resumen; arreglo 09/10) */
  .escenario8-resumen, .aviso-ocho { display: none !important; }

  /* Las hojas de impresión mandan; lo demás no pinta */
  .hoja { display: block; }
  .hoja-pie { display: none !important; }

  /* ══ PORTADA: cabecera + leyenda + resumen ══════════════════════════ */
  .impresion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--azul-oscuro);
    margin-bottom: 7px;
  }
  .impresion-cabecera h1 {
    margin: 0 0 2px;
    font-size: 15px;
    color: var(--azul-oscuro);
  }
  .impresion-cabecera p { margin: 0; font-size: 9.5px; color: #333; }
  .impresion-sello {
    flex: none;
    text-align: right;
    font-size: 8.5px;
    color: var(--azul-oscuro);
    background: var(--azul-claro);
    border-radius: 4px;
    padding: 4px 8px;
  }

  /* Nota explicativa de cómo leer el calendario */
  .impresion-nota {
    display: block;
    font-size: 8.5px;
    line-height: 1.45;
    color: #333;
    background: #F4F7FB;
    border: 1px solid #D7E0EE;
    border-left: 3px solid var(--azul-medio);
    border-radius: 4px;
    padding: 5px 8px;
    margin: 0 0 7px;
  }
  .impresion-nota p { margin: 0 0 2px; }
  .impresion-nota p:last-child { margin-bottom: 0; }

  .impresion-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 8.5px;
    margin-bottom: 7px;
  }
  .impresion-leyenda .chip { color: #333; }

  /* Resumen compacto al principio, con toda la información del cómputo */
  .contenido { display: flex; flex-direction: column; gap: 7px; padding: 0; margin: 0; max-width: none; }
  /* La leyenda de la pantalla no se imprime: el PDF ya lleva la suya propia
     (.impresion-leyenda) y saldría duplicada al final del calendario. */
  .leyenda-calendario { display: none !important; }
  .columna-resumen { order: -1; position: static; }
  .resumen {
    box-shadow: none;
    border: 1px solid #9AA8C0;
    border-radius: 4px;
    padding: 6px 9px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .resumen h2 { font-size: 12px; margin: 0 0 3px; padding-bottom: 2px; }
  .resumen h3 { font-size: 9.5px; margin: 5px 0 2px; }
  .resumen-cabecera { font-size: 8.5px; margin-bottom: 4px; line-height: 1.35; }
  .resumen .indicadores { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .resumen .indicador { padding: 4px 6px; }
  .resumen .indicador .valor { font-size: 13px; }
  .resumen .indicador .nombre { font-size: 6.5px; }
  .resumen table { font-size: 8px; }
  .resumen th, .resumen td { padding: 1.5px 4px; }
  .resumen .nombre-mod { display: inline; font-size: 7px; }
  .resumen tbody tr.sinPracticas td.num { color: #14501D; }
  .resumen td.perdidas, .resumen tfoot td.perdidas { color: #14501D; }
  .lista-festivos { font-size: 8px; }
  .lista-festivos .quitar { display: none !important; }
  .resumen .nota-resumen { font-size: 7.5px; }
  .resumen .coincidencia-ciclo { font-size: 7px; padding: 2px 5px; margin-top: 3px; }
  .resumen .coincidencia-ciclo .valor { font-size: 9.5px; }

  /* ══ MESES: dos por página, a todo el ancho (igual que el PDF) ═════════ */
  .columna-calendario { display: block; }
  .calendario { display: block; }
  .mes {
    display: block;
    border: 1.5px solid #8FA3C4;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 6mm;
  }
  /* El primer mes abre la segunda página: la portada va sola */
  .columna-calendario .mes:first-child { break-before: page; page-break-before: always; }
  .mes h3 {
    font-size: 12px;
    text-align: center;
    padding: 4px 10px;
    background: var(--azul-oscuro);
    color: #fff;
    letter-spacing: .5px;
  }
  .mes th { font-size: 8px; padding: 3px 0; color: var(--azul-oscuro); }
  .mes th.semana, .mes td.semana { width: 22px; font-size: 7.5px; }
  .mes table { table-layout: fixed; height: 112mm; }
  .mes td {
    vertical-align: top;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 4px;
    border: 1px solid #C9D4E6;
  }
  .mes td .num { float: left; }
  /* Letra identificativa (P de prácticas, F de festivo, V de vacaciones) para
     que el calendario se entienda incluso en blanco y negro. */
  .marca {
    display: block;
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
  }
  .mes td.practica .marca { color: #1B5E20; }
  .mes td.practica.oscuro .marca { color: var(--verde-oscuro); }
  .mes td.practica-compartida .marca { color: #4A148C; }
  .mes td.festivo .marca, .mes td.vacaciones .marca { color: #7A1610; }
  .mes td .motivo {
    display: block;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 6px;
    margin: 0;
    font-size: 7.5px;
    font-weight: 400;
    text-align: center;
    opacity: 1;
  }
  .mes td.vacia { background: #F3F6FA; border-color: #E3E9F2; }
  .mes td.fuera { background: #FAFBFD; color: #C4CBD6; }
  .mes td.finde { background: #EDEFF3; color: #98A2B3; }
  .mes td.lectivo { background: #fff; }
  .mes td.practica { background: var(--verde-claro); color: #1B5E20; box-shadow: inset 0 0 0 2px var(--verde); }
  .mes td.practica.oscuro { background: var(--verde-oscuro-fondo); color: var(--verde-oscuro); box-shadow: none; }
  .chip.practica-oscuro::before { background: var(--verde-oscuro-fondo); border-color: var(--verde-oscuro); }
  .mes td.practica-compartida { background: var(--morado-claro); color: var(--morado); box-shadow: inset 0 0 0 2px var(--morado); }
  .mes td.festivo { background: var(--rojo-claro); color: #7A1610; box-shadow: inset 0 0 0 2px #C86A62; }
  .mes td.vacaciones { background: var(--ambar-claro); color: var(--ambar-texto); box-shadow: inset 0 0 0 2px #D9A94E; }
  .mes td.semana { vertical-align: middle; text-align: center; }
  .mes td.semana.practica { box-shadow: inset 3px 0 0 var(--verde); }
  .mes td.semana.practica-compartida { box-shadow: inset 3px 0 0 var(--morado); }

  /* Pie de cada mes: repite el sello de identificación */
  .mes-pie {
    display: block;
    font-size: 8.5px;
    color: var(--azul-oscuro);
    background: var(--azul-claro);
    padding: 3px 10px;
    text-align: right;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .contenido { grid-template-columns: 1fr; }
  .resumen { position: static; }
}

/* ── Ventanas modales (historial, usuarios, invitaciones y centros) ────
   OJO: si un modal no se incluye en estas dos reglas, no se esconde nunca
   (queda como un bloque suelto al final de la página) y su botón «no hace
   nada», porque añadir «abierto» no cambia nada. Pasó con #modalInvitar y
   #modalCentros (arreglado el 28/09/2026) y otra vez con
   #modalCuenta (arreglado el 29/09/2026). */
#modalHistorial, #modalUsuarios, #modalInvitar, #modalCentros,
#modalInstitutos, #modalCuenta,
/* Las tres ventanas añadidas el 30/09/2026 (COLABORA, barra del PDF y contacto)
   TIENEN que estar en esta lista: si se olvidan, el bloque se queda al final de
   la página en vez de flotar. Pasó con las tres y con #modalCuenta. */
#modalColabora, #modalPdf, #modalProgramacion, #modalContacto, #modalHorasReales,
/* Aviso de disputa de tutoría dual (14/10/2026): sale solo, al iniciar sesión,
   y no se puede cerrar sin contestar («Ceder» o «Conservar»). Y la copia de
   seguridad (15/10/2026), que también tiene que estar AQUÍ: sin esta regla el
   bloque se queda al final de la página en vez de flotar (le pasó a las tres
   ventanas del 30/09/2026 y a la de la copia). */
#modalDisputa, #modalCopia, #modalDisputas {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(27, 35, 54, .45);
  padding: 40px 16px;
  overflow: auto;
}
#modalHistorial.abierto, #modalUsuarios.abierto,
#modalInvitar.abierto, #modalCentros.abierto,
#modalInstitutos.abierto, #modalCuenta.abierto,
#modalColabora.abierto, #modalPdf.abierto, #modalProgramacion.abierto, #modalContacto.abierto,
#modalHorasReales.abierto, #modalDisputa.abierto, #modalCopia.abierto,
#modalDisputas.abierto {
  display: flex; align-items: flex-start; justify-content: center;
}
/* El aviso de disputa va en una caja estrecha y centrada: es una decisión, no
   un panel para leer documentos. */
.modal-disputa { width: min(560px, 100%); }
.modal-disputa .disputa-botones {
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 14px 0 4px;
}
.modal-disputa .disputa-botones button { flex: 1 1 200px; }
.modal-disputa .disputa-fecha { font-weight: 700; color: #B3261E; }
.modal-historial {
  background: #fff;
  width: min(860px, 100%);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 25, 45, .35);
  padding: 18px 22px 20px;
}
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-cabecera h2 { margin: 0; color: var(--azul-oscuro); font-size: 1.15rem; }
.modal-cabecera .cerrar {
  border: none; background: var(--azul-claro); color: var(--azul-oscuro);
  width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.modal-cabecera .cerrar:hover { background: var(--azul-medio); color: #fff; }
.modal-nota { color: var(--gris); font-size: .85rem; margin: 8px 0 12px; }
.tabla-historial { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-historial th, .tabla-historial td {
  border: 1px solid var(--borde); padding: 6px 9px; text-align: left; vertical-align: middle;
}
.tabla-historial th { background: var(--azul-claro); color: var(--azul-oscuro); }
.tabla-historial tbody tr:nth-child(even) { background: var(--azul-muy-claro); }
.tabla-historial tr.hoy td { background: var(--verde-claro); }
.tabla-historial .col-grupos { font-size: .8rem; color: var(--gris); max-width: 260px; }
.tabla-historial td:last-child { text-align: right; white-space: nowrap; }

/* ── Horas reales: horario semanal con bloques por módulo (08/10/2026) ── */
.modal-horas-reales { width: min(1060px, 100%); }
.horas-reales-entrada {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 4px;
}
.horas-reales {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
}
.hr-modulos { flex: 1 1 300px; max-width: 360px; }
.hr-mod-fila {
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 6px; background: var(--blanco);
}
.hr-mod-cab {
  display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
  font-size: .8rem; color: var(--azul-oscuro);
}
.hr-mod-cab .hr-cuenta {
  margin-left: auto; font-size: .72rem; color: var(--gris); white-space: nowrap;
}
.hr-color { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }
.hr-bloques { display: flex; flex-wrap: wrap; gap: 5px; min-height: 30px; }
.hr-bloque {
  width: 46px; height: 28px; border-radius: 6px;
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .4px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  box-shadow: 0 1px 3px rgba(15, 25, 45, .3);
}
.hr-bloque:active { cursor: grabbing; }
.hr-bloque.oculto { visibility: hidden; }
.hr-fantasma {
  position: fixed; z-index: 3000; pointer-events: none;
  opacity: .92; transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px rgba(15, 25, 45, .4);
}
.hr-rejilla-caja { flex: 2 1 380px; overflow-x: auto; }
.hr-rejilla { border-collapse: collapse; width: 100%; }
.hr-rejilla th {
  background: var(--azul-claro); color: var(--azul-oscuro);
  font-size: .78rem; padding: 5px 6px; border: 1px solid var(--borde);
}
.hr-rejilla th.hr-periodo {
  background: var(--azul-muy-claro); white-space: nowrap; text-align: right;
  font-weight: 600;
}
.hr-celda {
  border: 1px solid var(--borde); height: 38px; min-width: 62px;
  background: var(--azul-muy-claro); padding: 2px; vertical-align: middle;
  text-align: center;
}
.hr-celda.objetivo {
  outline: 3px solid var(--azul); outline-offset: -3px;
  background: var(--verde-claro, #E7F4E9);
}
/* Destino denegado (casilla ya ocupada por otro bloque): el bloque no entra */
.hr-celda.denegada {
  outline: 3px solid var(--rojo, #C0392B); outline-offset: -3px;
  background: #FBE9E7;
}
.hr-celda .hr-bloque { width: 100%; height: 30px; cursor: grab; }
/* Solo lectura (quien no puede editar este grupo): nada de arrastre */
.horas-reales.solo-lectura .hr-bloque { cursor: default; opacity: .85; }
.horas-reales.solo-lectura .hr-bloque:hover { cursor: default; }

/* Fase 2 (08/10/2026): botón «Calcular horas reales» y su resultado. */
.hr-calcular {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 4px;
}
.hr-calcular .nota-mini { margin: 0; flex: 1 1 240px; }
.hr-resultado { margin-top: 10px; }
.hr-tabla { border-collapse: collapse; width: 100%; font-size: .84rem; }
.hr-tabla th, .hr-tabla td { border: 1px solid var(--borde); padding: 4px 8px; }
.hr-tabla thead th {
  background: #d9e6f2; color: var(--azul-oscuro); text-align: left;
  font-size: .8rem;
}
.hr-tabla th.num, .hr-tabla td.num { text-align: right; white-space: nowrap; }
.hr-tabla .sub { display: block; font-weight: 400; font-size: .7rem; color: var(--gris); }
.hr-tabla tfoot td { font-weight: 700; background: #eef4f9; }
.hr-tabla tr.hr-difiere td { background: #FFF4E5; }
.hr-avisos { margin: 8px 0 0; padding-left: 20px; font-size: .84rem; }
.hr-avisos li { margin-bottom: 4px; }
.hr-aviso { color: var(--rojo); font-size: .85rem; font-weight: 600; }


/* ── Panel de usuarios (solo administración) ────────────────────────── */
.modal-usuarios { width: min(1000px, 100%); }
.aviso-usuarios {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 8px;
  background: var(--verde-claro, #E7F4E9); color: #1B5E20; font-size: .85rem;
}
.tabla-usuarios { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla-usuarios th, .tabla-usuarios td {
  border: 1px solid var(--borde); padding: 6px 9px; text-align: left; vertical-align: middle;
}
.tabla-usuarios th { background: var(--azul-claro); color: var(--azul-oscuro); }
.tabla-usuarios tbody tr:nth-child(even) { background: var(--azul-muy-claro); }
.tabla-usuarios tr.fila-baja { opacity: .6; }
.tabla-usuarios .correo { color: var(--gris); font-size: .78rem; }
.tabla-usuarios .etiqueta-baja { color: var(--rojo); font-weight: 600; }
.tabla-usuarios .nota-admin { color: var(--gris); font-size: .8rem; font-style: italic; }
.tabla-usuarios td.acciones-usuario { white-space: nowrap; }
.tabla-usuarios td.acciones-usuario button,
.tabla-usuarios td.acciones-usuario select {
  width: auto; font-size: .76rem; padding: 3px 8px; margin: 1px 2px 1px 0;
}
.sel-grupo { font: inherit; border: 1px solid var(--borde); border-radius: 6px; padding: 3px 6px; }

.nota-simulado {
  margin: 8px 0 10px; padding: 8px 11px; border-radius: 8px; font-size: .82rem;
  background: var(--ambar-claro, #FBF0C9); color: #7A5A00;
  border: 1px solid #E3C463;
}

/* ── Panel de centros (administración y prospectors) ─────────────────── */
.modal-centros { width: min(1100px, 100%); }
.modal-centros h3 {
  margin: 14px 0 6px; font-size: .95rem; color: var(--azul-oscuro);
}
.sel-centro, .sel-prospector, .sel-grupo-centro, #nuevoCentro, #centroLibre {
  font: inherit; font-size: .8rem; border: 1px solid var(--borde);
  border-radius: 6px; padding: 3px 6px; max-width: 340px;
}
.tabla-usuarios td .fila-campos { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.alta-centro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  background: var(--azul-muy-claro); border: 1px solid var(--borde);
}
.alta-centro label { font-size: .8rem; font-weight: 600; color: var(--azul-oscuro); }
.alta-centro select { flex: 1 1 320px; }
.lista-centros { list-style: none; margin: 0 0 6px; padding: 0; }
.lista-centros li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px;
  margin-bottom: 5px; background: var(--blanco); font-size: .86rem;
}

@media print {
  #modalHistorial, #modalUsuarios, #modalInvitar, #modalCentros, #modalCuenta,
  #modalInstitutos,
  #modalColabora, #modalPdf, #modalProgramacion, #modalContacto, #modalHorasReales,
  #modalDisputa { display: none !important; }
}

/* ── Panel de institutos del prospector (a pantalla completa) ────────── */
.modal-institutos {
  width: min(1200px, 100%);
  height: 100%;                     /* toda la altura que deja la capa */
  display: flex; flex-direction: column;
}
.modal-institutos .selector-centros {
  flex: 1 1 auto; max-height: none; margin: .5rem 0 .2rem;
}
.buscar-instituto {
  font: inherit; font-size: .95rem; width: 100%; padding: 9px 12px;
  border: 1px solid var(--borde); border-radius: 8px;
}
.buscar-instituto:focus { outline: 2px solid var(--azul-medio); outline-offset: 1px; }
.cuenta-institutos { margin: .45rem 0 .1rem; font-size: .82rem; color: var(--gris); }
.cuenta-institutos.pasado { color: var(--rojo); font-weight: 600; }
/* Cabecera de provincia y de localidad: se ve de un vistazo dónde empieza cada zona */
.grupo-provincia {
  position: sticky; top: 0; z-index: 1; margin: 0 0 .35rem;
  padding: .3rem .55rem; border-radius: 6px;
  background: var(--azul-oscuro); color: #fff;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.grupo-localidad {
  margin: .55rem 0 .15rem; font-size: .78rem; font-weight: 700;
  color: var(--azul-medio); text-transform: uppercase; letter-spacing: .03em;
}
#btnElegirInstitutos { width: 100%; }
.modal-institutos .selector-centros label { display: flex; gap: .45rem; align-items: flex-start; }
.institutos-elegidos { margin: .4rem 0 .1rem; font-size: .82rem; color: var(--azul-oscuro); }

.modal-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.modal-botones button { width: auto; }

/* ══ Contacto: ventana con el formulario del pie ═════════════════════════ */
.modal-contacto { width: min(560px, 100%); }
.contacto-de { font-size: .85rem; color: var(--gris); margin: 0 0 6px; }
.contacto-de strong { color: var(--azul-oscuro); }
#formContacto label {
  display: block; margin: 0 0 4px; font-size: .85rem; font-weight: 600;
  color: var(--azul-oscuro);
}
#formContacto textarea {
  width: 100%; box-sizing: border-box; min-height: 9rem; resize: vertical;
  padding: .5rem .6rem; font: inherit; font-size: .9rem; line-height: 1.45;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: #1a1a1a;
}
#formContacto textarea:focus { outline: 2px solid var(--azul-medio); outline-offset: 1px; }
/* Nombre y correo del formulario de contacto (09/10/2026): se piden solo
   cuando NO hay sesión (pantalla de acceso). Con sesión se ocultan. */
#contactoIdentificacion[hidden] { display: none; }
#formContacto input[type="text"],
#formContacto input[type="email"] {
  width: 100%; box-sizing: border-box; margin: 0 0 10px;
  padding: .5rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; color: #1a1a1a;
}
#formContacto input:focus { outline: 2px solid var(--azul-medio); outline-offset: 1px; }
/* Aviso del doble paso (09/10/2026): sin sesión, el mensaje se confirma
   desde el correo. Se explica dentro del bloque de identificación. */
.contacto-confirmar {
  margin: -2px 0 10px; font-size: .82rem; line-height: 1.4; color: var(--gris);
}
/* Trampa anti-robots: fuera de la vista pero sin display:none, que algunos
   robots detectan y saltan. No ocupa espacio ni se puede enfocar. */
.contacto-trampa {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ══ Colabora y «Generando PDF» (30/09/2026) ════════════════════════════ */
.modal-pdf { width: min(900px, 96vw); }
/* El mensaje de donativo: una imagen centrada que no se sale de la ventana. */
/* Mensaje de donativo: un 50 % más grande que antes (petición 30/09/2026).
   Antes cabía en 52vh de alto; ahora llega hasta el 78 %, y la ventana que lo
   contiene se ensancha para aprovecharlo. */
.img-donativo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
  margin: 10px auto 4px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: #fff;
}
/* La ventana de COLABORA también se ensancha, que si no la imagen crecería
   hasta el tope pero no ganaría ancho. */
.modal-colabora { width: min(1360px, 96vw); }
/* Rótulo que va encima de la barra del PDF (petición 30/09/2026). */
.progreso-titulo {
  margin: 10px 0 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--azul-oscuro);
  text-align: center;
}
/* Barra de proceso de los 8 segundos antes de descargar el PDF. */
.progreso {
  width: 100%;
  height: 18px;
  margin: 12px 0 4px;
  background: var(--azul-muy-claro);
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
}
.progreso-barra {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--azul-medio), var(--azul-oscuro));
  border-radius: 999px;
  transition: width .12s linear;
}
.progreso-cuenta {
  margin: 0 0 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  text-align: right;
}

/* ══ Aceptación de términos en el registro ══════════════════════════════ */
.aceptacion { margin: 0.6rem 0 0.9rem; font-size: 0.88rem; line-height: 1.45; }
.aceptacion label { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.aceptacion input[type="checkbox"] { margin-top: 0.2rem; flex: 0 0 auto; width: 1rem; height: 1rem; }
.aceptacion a, .pie-legal a { color: #1a466b; }

/* ══ Aviso de cookies ══════════════════════════════════════════════════ */
.aviso-cookies {
  position: fixed; inset: 0; z-index: 3000;   /* por encima del acceso (1000) */
  background: rgba(16, 24, 40, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies-caja {
  background: #fff; color: #1a1a1a;
  max-width: 44rem; width: 100%;
  border-radius: 12px; padding: 1.1rem 1.25rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
  border-top: 4px solid #1a466b;
}
.aviso-cookies-caja h2 { margin: 0 0 .5rem; font-size: 1.05rem; color: #1a466b; }
.aviso-cookies-caja p { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.5; }
.aviso-cookies-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
.aviso-cookies-botones .primario { flex: 1 1 12rem; }
.aviso-cookies-botones .secundario { flex: 0 1 14rem; }
.aviso-cookies a { color: #1a466b; }

/* ══ Página de términos ═════════════════════════════════════════════════ */
.pagina-terminos { background: #f6f7f9; }
.terminos {
  max-width: 52rem; margin: 0 auto; padding: 2rem 1.25rem 4rem;
  background: #fff; color: #1a1a1a; line-height: 1.6;
}
.terminos h1 { font-size: 1.6rem; color: #1a466b; margin: .4rem 0 .2rem; }
.terminos h2 { font-size: 1.12rem; color: #1a466b; margin: 2rem 0 .4rem; }
.terminos h3 { font-size: 1rem; color: #245a86; margin: 1.2rem 0 .3rem; }
.terminos p, .terminos li { font-size: .95rem; }
.terminos ul, .terminos ol { padding-left: 1.2rem; }
.terminos li { margin-bottom: .35rem; }
.terminos-sub, .terminos-fecha { color: #555; font-size: .9rem; margin: .1rem 0; }
.terminos-indice {
  background: #F2F6FC; border: 1px solid #d9e6f2; border-radius: 10px;
  padding: .9rem 1rem; margin: 1.2rem 0; font-size: .9rem;
}
.terminos-indice ol { margin: .4rem 0 0; columns: 2; column-gap: 1.5rem; }
.terminos a { color: #1a466b; }
.terminos-tabla {
  width: 100%; border-collapse: collapse; margin: .8rem 0 1rem; font-size: .88rem;
}
.terminos-tabla th, .terminos-tabla td {
  border: 1px solid #d9e6f2; padding: .45rem .55rem; text-align: left; vertical-align: top;
}
.terminos-tabla thead th { background: #d9e6f2; color: #1a466b; }
.terminos code { background: #F2F2F2; padding: .1rem .3rem; border-radius: 4px; font-size: .88em; }
.terminos section { scroll-margin-top: 1rem; }
.terminos-vuelta, .terminos-pie { margin: 1rem 0; font-size: .9rem; }
.terminos-pie { border-top: 1px solid #d9e6f2; padding-top: 1rem; margin-top: 2.5rem; }
.pie-legal { font-size: .88rem; margin-top: .5rem; }

@media (max-width: 40rem) {
  .terminos-indice ol { columns: 1; }
  .terminos-tabla { font-size: .82rem; }
}

/* El check de 8 h/día vive ahora en la columna del resumen (petición 26/09/2026) */
.escenario8-resumen {
  background: #F7F9FC; border: 1px solid #d9e6f2; border-radius: 10px;
  padding: .6rem .7rem; margin-bottom: .8rem;
}
.escenario8-resumen .radio { font-size: .9rem; }
.escenario8-resumen .aviso-ocho { display: block; margin-top: .4rem; }

/* Avisos del resumen sobre los módulos, y estilo de la tabla de módulos
   («Horas por módulo»), que es la que se queda. */
.nota-modulos { font-size: .84rem; color: #555; line-height: 1.45; margin: .2rem 0 .5rem; }
.tabla-modulos { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabla-modulos th, .tabla-modulos td {
  border-bottom: 1px solid #E3E8F0; padding: .3rem .4rem; text-align: left;
}
.tabla-modulos th { color: #1a466b; font-weight: 600; }
.tabla-modulos td.num, .tabla-modulos th.num { text-align: right; white-space: nowrap; }
.tabla-modulos tfoot td { font-weight: 600; border-top: 2px solid #d9e6f2; }

/* ── Registro: perfil, grupo, prospector ───────────────────────────────── */
/* Perfil del registro. La caja del acceso está centrada (text-align: center),
   así que aquí se vuelve a alinear todo a la izquierda y los tres perfiles se
   apilan en una columna, cada uno con su radio en su sitio. */
.acceso-etiqueta {
  margin: .55rem 0 .2rem; text-align: left;
  font-size: .85rem; font-weight: 600; color: var(--azul-oscuro);
}
.acceso-radios {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .35rem; margin: .25rem 0 .7rem; text-align: left;
}
.acceso-radios .radio {
  font-size: .9rem; line-height: 1.35;
  justify-content: flex-start; width: 100%;
}
/* Los campos del acceso son de ancho completo (100 %); aplicado a un radio lo
   estiraba hasta deformarlo. Aquí recupera su tamaño natural. */
.acceso-caja input[type="radio"] { width: auto; margin: 0; padding: 0; flex: 0 0 auto; }
/* El perfil elegido se destaca (mejora progresiva: si el navegador no entiende
   :has(), simplemente no se pone en negrita). */
.acceso-radios .radio:has(input:checked) { font-weight: 700; color: var(--azul-oscuro); }
.nota-mini { font-size: .82rem; color: #555; margin: .3rem 0; }
.selector-centros {
  max-height: 11rem; overflow-y: auto; border: 1px solid #d9e6f2;
  border-radius: 8px; padding: .4rem; margin-bottom: .6rem;
  font-size: .85rem; background: #fff;
}
.selector-centros label { display: block; padding: .12rem .2rem; cursor: pointer; }
.selector-centros label:hover { background: #F2F6FC; }
#bloqueCentro, #bloqueGrupo { margin: .4rem 0; }
#bloqueGrupo label, #bloqueCentro label, #bloqueCentrosProspector label {
  display: block; font-size: .85rem; margin-bottom: .2rem;
}
#bloqueGrupo select { width: 100%; }
/* Comunidad del prospector (06/10/2026): los dos desplegables (el del
   instituto propio y el del prospector) son idénticos. */
#bloqueCentrosProspector select { width: 100%; margin-bottom: .5rem; }

/* ── Buscador de instituto (registro) ────────────────────────────────────
   Antes era un <select> con los 118 institutos: el texto largo de las
   opciones desbordaba la caja del acceso y el campo quedaba más bajo que
   los demás. Ahora es un campo de texto con sugerencias: se escribe y
   aparecen los institutos que mejor encajan, con la coincidencia resaltada
   y la primera opción ya seleccionada (se elige con el ratón o con Enter). */
#bloqueCentro { text-align: left; }
.buscador { position: relative; }
.buscador input { margin-bottom: 0; }
.buscador-lista {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  max-height: 14rem;
  overflow-y: auto;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  text-align: left;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(26, 70, 107, .22);
}
/* Si no hay sitio debajo del campo, la lista se abre hacia arriba */
.buscador-lista.arriba { top: auto; bottom: calc(100% + 3px); }
.buscador-lista li { padding: .45rem .6rem; font-size: .85rem; line-height: 1.25; cursor: pointer; }
.buscador-lista li[aria-selected="true"] { background: var(--azul-muy-claro); }
.buscador-lista .bl-nombre { display: block; font-weight: 600; color: var(--azul-oscuro); }
.buscador-lista .bl-lugar { display: block; font-size: .76rem; color: var(--gris); }
.buscador-lista mark { background: #FFE9A8; color: inherit; padding: 0; }
.buscador-lista li.bl-vacio { color: var(--gris); font-style: italic; cursor: default; }
.buscador-aviso { margin: .3rem 0 0; min-height: .95rem; font-size: .78rem; color: var(--gris); }
.buscador-aviso.elegido { color: var(--verde); font-weight: 600; }
.buscador-aviso.error { color: var(--rojo); font-weight: 600; }
/* El aviso del buscador de centros de la barra de controles (superadministración)
   está siempre vacío en app.js (solo se le asigna ""), pero ocupaba su altura
   reservada y, además, contaba como hijo en el `gap` del `.control`; ambas cosas
   desalineaban «Centro» respecto a Grupo y a las fechas (13/10/2026). */
#controlCentro .buscador-aviso { display: none; }

/* ── Panel de invitaciones ─────────────────────────────────────────────── */
.invitaciones { margin: .8rem 0; }
.invitaciones-caja {
  border: 1px solid #d9e6f2; border-radius: 10px; padding: .8rem; background: #F8FAFD;
}
.invitaciones h3 { margin: 0 0 .3rem; font-size: .98rem; color: #1a466b; }
.invitaciones-caja > p { font-size: .84rem; color: #555; margin: 0 0 .6rem; }
.invitaciones-fila { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.invitaciones-fila input[type="email"], .invitaciones-fila input[type="text"] {
  flex: 1 1 14rem; min-width: 0;
}
.invitaciones-fila select { flex: 0 1 12rem; }
.invitacion-enviada { margin-top: .5rem; }
.invitacion-caja {
  border-left: 3px solid #1a466b; background: #fff; padding: .45rem .6rem;
  margin-top: .4rem; font-size: .84rem; border-radius: 0 6px 6px 0;
}
.invitacion-caja .token {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700;
  background: #eef4f9; padding: .1rem .35rem; border-radius: 4px;
  user-select: all;
}
.invitacion-caja.usada { opacity: .55; border-left-color: #999; }
.invitacion-vacia { color: #777; font-size: .84rem; }
.disputa {
  border-left: 3px solid #B3261E; background: #FDF3F2; padding: .5rem .7rem;
  border-radius: 0 6px 6px 0; font-size: .85rem; margin-top: .5rem;
}
.disputa button { margin-top: .35rem; }

/* El acceso por PIN se retiró el 01/10/2026: desaparecieron con él las
   clases .acceso-sep y .acceso-global (el «o» y el botón «Volver al acceso
   con correo»). */
.acceso-caja .secundario { width: 100%; }

/* Centros desactivados por la administración (29/09/2026). */
.fila-inactiva td { opacity: .62; }
.fila-inactiva { background: rgba(0, 0, 0, .04); }
.etiqueta-inactiva {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: .6rem;
  background: #7a2020;
  color: #fff;
  font-size: .68rem;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* ── Leyenda de colores al pie del calendario (petición 29/09/2026) ────── */
.leyenda-calendario {
  margin-top: 14px;
  padding: 12px 14px 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.leyenda-calendario h3 {
  margin: 0 0 .6rem;
  font-size: .92rem;
  color: var(--azul-oscuro);
}
.leyenda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: .5rem 1.1rem;
}
.leyenda-lista li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  line-height: 1.45;
  color: #444;
}
/* El texto va en su propio <span>: si se sueltan varios <strong> dentro del
   flex, cada uno se convierte en un elemento flexible y el texto se descose. */
.leyenda-lista li > span:last-child { min-width: 0; }
.nota-leyenda {
  margin: .7rem 0 0;
  font-size: .78rem;
  color: #555;
  line-height: 1.4;
}
.leyenda-lista li strong { color: #1a466b; }
.muestra {
  flex: 0 0 auto;
  position: relative;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1px solid var(--borde);
}
/* La muestra verde «con punto» de la leyenda lleva el mismo punto que el día */
.muestra .punto-coincidencia { top: 1px; right: 1px; box-shadow: none; }
.muestra-lectivo { background: #fff; }
.muestra-practica { background: var(--verde-claro); border-color: var(--verde); }
.muestra-oscuro { background: var(--verde-oscuro-fondo); border-color: var(--verde-oscuro); }
.muestra-compartida { background: var(--morado-claro); border-color: var(--morado); }
.muestra-festivo { background: var(--rojo-claro); border-color: var(--rojo); }
.muestra-vacaciones { background: var(--ambar-claro); border-color: var(--ambar-texto); }
.muestra-finde { background: #E9ECF2; }
.muestra-fuera { background: #FAFBFD; border-color: #E4E8EF; }
.muestra-sinClase { background: #F1F3F7; border-color: #E4E8EF; }
.muestra-rango { background: #fff; outline: 2px solid var(--azul-medio); outline-offset: -2px; }

/* ── Panel «Mi cuenta» ─────────────────────────────────────────────────── */
.modal-cuenta { max-width: 640px; }
.aviso-cuenta {
  margin: .5rem 0;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: #E8F4EA;
  border: 1px solid #B7D8BE;
  color: #1B5E20;
  font-size: .84rem;
}
.aviso-cuenta.malo { background: #FDECEC; border-color: #E7B4B4; color: #8A1F1F; }
.modal-cuenta h3 {
  margin: 1.1rem 0 .4rem;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--azul-medio);
}
.modal-cuenta .fila-campos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.modal-cuenta input[type="text"], .modal-cuenta input[type="email"],
.modal-cuenta input[type="password"] { flex: 1 1 190px; min-width: 0; }
/* Que el botón quepa a la derecha del selector en «Mi cuenta». */
.modal-cuenta .fila-campos select { flex: 0 1 320px; min-width: 0; }
.modal-cuenta .fila-campos button { flex: 0 0 auto; }

/* ══ Copia de seguridad (petición del profesor, 15/10/2026) ════════════════
   Ventana del menú CUENTA (solo superadministración) para descargar todos los
   datos del servidor y volver a subirlos. Los botones del pie van en fila y la
   caja del fichero elegido se marca con un fondo suave para que se vea que la
   restauración todavía no se ha hecho. */
.modal-copia { max-width: 680px; }
.copia-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: .85rem 0 .25rem; }
.copia-acciones button { width: auto; }
#detalleCopia { margin-top: .35rem; }
#detalleCopia h3 {
  margin: .9rem 0 .35rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--azul-medio);
}
.copia-caja {
  border: 1px solid var(--borde); border-radius: 8px; padding: .5rem .7rem;
  background: var(--azul-muy-claro, #F5F8FD);
}
.copia-lista { margin: .2rem 0 .4rem 1.1rem; padding: 0; font-size: .86rem; color: #333; }
.copia-lista li { margin: .1rem 0; }
.copia-lista strong { color: var(--azul-oscuro); font-weight: 600; }
.modal-copia .nota-mini { border-top: 1px solid var(--borde); margin-top: .9rem; padding-top: .6rem; }

/* ══ Panel de disputas (petición del profesor, 15/10/2026) ═════════════════
   Lo ven todos los perfiles. Arriba las abiertas (con los botones que le tocan
   a cada quien) y debajo el historial, plegado para que el panel no se alargue. */
.modal-disputas { width: min(760px, 100%); }
.disputas-titulo {
  margin: 1rem 0 .4rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--azul-medio);
}
#disputasAbiertas, #disputasResueltas { display: flex; flex-direction: column; gap: .5rem; }
.disputa-caja {
  border: 1px solid var(--borde); border-left: 4px solid var(--ambar, #D8A228);
  border-radius: 8px; padding: .55rem .7rem; background: #FFFDF7;
}
.disputa-caja.mia { border-left-color: var(--azul-medio); background: var(--azul-muy-claro, #F5F8FD); }
.disputa-caja h4 { margin: 0 0 .25rem; font-size: .95rem; color: var(--azul-oscuro); }
.disputa-caja p { margin: .12rem 0; font-size: .86rem; color: #333; }
.disputa-caja .papel {
  display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--azul-claro); color: var(--azul-oscuro); font-size: .74rem;
  font-weight: 600; vertical-align: middle;
}
.disputa-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.disputa-acciones button { width: auto; font-size: .85rem; padding: .35rem .7rem; }
.disputa-vacia { font-size: .86rem; color: var(--gris); margin: .2rem 0 .6rem; }
.disputa-resuelta {
  border: 1px solid var(--borde); border-radius: 8px; padding: .45rem .65rem;
  background: #F7F9FC; font-size: .85rem; color: #333;
}
.disputa-resuelta .resultado { font-weight: 600; color: var(--azul-oscuro); }
.disputas-historial { margin-top: 1rem; }
.disputas-historial summary {
  cursor: pointer; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--azul-medio); font-weight: 600;
}
.disputas-historial[open] summary { margin-bottom: .5rem; }

/* «Al hacer clic en un día»: el rótulo y sus dos opciones en la misma línea
   (petición 29/09/2026). Los demás controles siguen con el rótulo encima. */
.control-linea {
  flex-direction: row;
  align-items: center;
  gap: .5rem .7rem;
  flex: 0 0 auto;
}
.control-linea > .etiqueta { white-space: nowrap; }
.control-linea .radios { padding: 0; }

/* Código oficial del ciclo junto al nombre corto del grupo */
.codigo-oficial {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .35rem;
  border: 1px solid var(--borde);
  border-radius: .5rem;
  background: #F2F5FA;
  color: #5A6B87;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

/* Tabla de horas por módulo: se distingue lo oficial del currículo de las clases
   reales del centro (petición 29/09/2026). */
.tabla-modulos th .sub {
  display: block;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #7A8699;
}
.marca-dif {
  display: inline-block;
  margin-left: .2rem;
  padding: 0 .25rem;
  border-radius: .5rem;
  background: #FDF0D8;
  color: #8A5A12;
  font-size: .7rem;
  font-weight: 700;
  cursor: help;
}

/* Descargo de responsabilidad sobre los datos (30/09/2026) */
.descargo {
  margin: .6rem 0 0;
  padding: .45rem .6rem;
  border-left: 3px solid var(--ambar-texto);
  background: #FDF8EC;
  color: #6B5320;
  font-size: .78rem;
  line-height: 1.45;
}

/* Botón para reclamar la tutoría dual del grupo (30/09/2026) */
.reclamar-tutor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: .3rem 0 .6rem;
}
.reclamar-tutor .nota-mini { flex: 1 1 200px; }

/* Aviso de las cajas de invitaciones (30/09/2026): aclaran qué listas se ven. */
.invitacion-aviso {
  margin: 0 0 6px;
  font-size: .74rem;
  line-height: 1.4;
  color: #5A6B87;
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA Y PROGRAMACIONES (19/10/2026)
   Paleta del logotipo: azul #1a466b para la estructura, naranja #f57200 para
   lo accionable y blanco para el aire. La portada es lo primero que se ve al
   entrar; el logotipo de la cabecera vuelve aquí desde cualquier pantalla.
   ══════════════════════════════════════════════════════════════════════════ */
.vista-inicio {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 22px 44px;
}

/* Franja de marca: el logotipo va sobre azul porque su «FP» es blanco. */
.inicio-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: 20px 24px 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 6%, rgba(245, 114, 0, .30), transparent 42%),
    linear-gradient(135deg, #143a59, var(--azul-oscuro) 52%, #245a86);
  box-shadow: var(--sombra-alta);
}
.inicio-hero::after {
  /* Filo naranja inferior: la misma unión azul→naranja del logotipo. */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--naranja), #ff9d42);
}
.inicio-logo {
  display: block;
  width: min(230px, 62vw);
  height: auto;
  margin: 0 auto 8px;
}
.inicio-saludo {
  margin: 0 0 2px;
  font-size: .82rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #ffc38c;
  font-weight: 700;
}
.inicio-hero h1 {
  margin: 0 0 5px;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  letter-spacing: -.2px;
}
.inicio-intro {
  max-width: 600px;
  margin: 0 auto;
  font-size: .88rem;
  line-height: 1.45;
  color: #d9e7f2;
}

/* Portada en dos filas de tres (20/10/2026): cada fila es un grupo con su
   etiqueta («PARA PROFESORES» / «PARA TUTOR FEOE»). */
.inicio-grupo { margin-top: 16px; }
.inicio-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--azul-oscuro);
}
.inicio-grupo-titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--naranja), transparent 78%);
}
.inicio-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  max-width: 1080px;
  margin: 24px auto 0;
}
.inicio-grupo .inicio-opciones {
  /* Tres por fila, como pidió el profesor (20/10/2026). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}
.inicio-grupo .inicio-opciones { gap: 16px; }
.inicio-grupo .opcion { padding: 15px 18px 11px; gap: 4px; }
.inicio-grupo .opcion-icono { width: 38px; height: 38px; margin-bottom: 2px; }
.inicio-grupo .opcion-titulo { font-size: 1.04rem; }
.inicio-grupo .opcion-texto { font-size: .82rem; line-height: 1.4; }
.inicio-grupo .opcion-accion { margin-top: 6px; padding-top: 7px; font-size: .8rem; }
.opcion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  /* Los botones llevan white-space: nowrap en la regla general; aquí el texto
     es largo y tiene que partirse en varias líneas. */
  white-space: normal;
  padding: 24px 24px 20px;
  font: inherit;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--borde);
  border-top: 5px solid var(--naranja);
  border-radius: 14px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.opcion-programaciones { border-top-color: var(--azul-medio); }
.opcion-empresas { border-top-color: var(--azul-oscuro); }
/* Botones en construcción (20/10/2026): se ven, pero no se pueden pulsar. */
.opcion[disabled],
.opcion-construccion {
  cursor: not-allowed;
  opacity: .78;
  background: #f6f8fa;
  border-top-color: #b6c3cf;
  box-shadow: none;
}
.opcion[disabled]:hover,
.opcion-construccion:hover {
  transform: none;
  border-color: var(--borde);
  box-shadow: none;
}
.opcion[disabled] .opcion-icono { color: #8b99a6; }
.opcion[disabled] .opcion-titulo { color: #3f5468; }
.opcion-etiqueta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  vertical-align: 2px;
  color: #7a3d00;
  background: var(--naranja-claro);
  border: 1px solid #f0cfa8;
}
.opcion-accion-espera { color: #6b7885 !important; font-weight: 700; }
.opcion:hover {
  transform: translateY(-3px);
  border-color: var(--naranja);
  box-shadow: var(--sombra-alta);
}
.opcion:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.opcion-icono { width: 46px; height: 46px; color: var(--naranja); margin-bottom: 4px; }
.opcion-programaciones .opcion-icono { color: var(--azul-medio); }
.opcion-empresas .opcion-icono { color: var(--azul-oscuro); }
.opcion-icono svg { width: 100%; height: 100%; }
.opcion-titulo { font-size: 1.18rem; font-weight: 800; color: var(--azul-oscuro); }
.opcion-texto { font-size: .88rem; line-height: 1.5; color: #51606f; flex: 1 1 auto; }
.opcion-accion {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: .86rem; font-weight: 800; color: var(--naranja-oscuro);
}
.opcion-programaciones .opcion-accion { color: var(--azul-medio); }
.opcion-empresas .opcion-accion { color: var(--azul-oscuro); }
.opcion:hover .opcion-accion { color: var(--naranja-oscuro); }
.inicio-pie {
  margin: 22px 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--gris);
}
.inicio-pie strong { color: var(--azul-oscuro); }

/* ── Pantalla de programaciones ─────────────────────────────────────────── */
.vista-programaciones,
.vista-empresas {
  min-height: calc(100vh - 48px);
  padding: 30px 20px 64px;
  background:
    radial-gradient(circle at 100% 0, rgba(245, 114, 0, .08), transparent 34%),
    #f4f7fa;
}
.prog-caja {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 30px 28px;
  background: #fff;
  border: 1px solid var(--borde);
  border-top: 5px solid var(--naranja);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
}
.prog-volver { margin: 0 0 8px; font-size: .84rem; }
.prog-volver .enlace { color: var(--azul-medio); }
.prog-titulo {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--azul-oscuro);
}
.prog-intro { margin: 0; font-size: .92rem; line-height: 1.5; color: #51606f; }
.prog-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 22px 0 18px;
}
.prog-campo { min-width: 0; }
.prog-campo label {
  display: block; margin-bottom: 5px;
  font-size: .74rem; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--azul-medio);
}
.prog-campo select {
  width: 100%; height: 42px; padding: 0 10px;
  font: inherit; font-size: .9rem; color: var(--texto);
  background: #fff; border: 1px solid var(--borde); border-radius: 9px;
}
.prog-campo select:hover { border-color: var(--azul-medio); }
.prog-campo select:focus {
  outline: 2px solid var(--naranja); outline-offset: 1px; border-color: var(--naranja);
}
.prog-resumen {
  padding: 16px 18px;
  background: var(--azul-muy-claro);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--naranja);
  border-radius: 10px;
}
.prog-resumen-titulo {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--azul-oscuro);
}
.prog-vacio { margin: 0; font-size: .88rem; color: var(--gris); }
.prog-datos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
  font-size: .88rem;
}
.prog-datos > div { display: contents; }
.prog-datos dt { color: var(--gris); font-weight: 700; }
.prog-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prog-ojo {
  margin: 12px 0 0;
  padding: 8px 10px;
  font-size: .82rem; line-height: 1.45;
  color: #7a3d00; background: var(--naranja-claro);
  border-radius: 7px;
}
.prog-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 18px;
}
button.prog-boton {
  padding: 12px 24px;
  font-size: .95rem; font-weight: 800;
  white-space: normal;
  color: #fff;
  background: var(--naranja-oscuro);
  border: 1px solid #a94e00;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 2px 0 #8f4200;
}
button.prog-boton:hover:not(:disabled) { background: #a94e00; }
button.prog-boton:disabled {
  color: #6d7d8d; background: #dbe4ec; border-color: #c9d5e0;
  box-shadow: none; cursor: not-allowed;
}
.prog-aviso { margin: 0; min-height: 1.2em; font-size: .85rem; color: var(--gris); }
.prog-aviso-error { color: var(--rojo); font-weight: 700; }
.prog-aviso-ok { color: var(--verde); font-weight: 700; }
.prog-nota { margin: 18px 0 0; color: var(--gris); }


/* ── Información de empresas (19/10/2026) ──────────────────────────────── */
.prog-caja-empresas { max-width: 980px; }
.emp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 22px 0 4px;
}
.emp-form .prog-campo input {
  width: 100%; height: 42px; padding: 0 12px;
  font: inherit; font-size: .95rem; color: var(--texto);
  background: #fff; border: 1px solid var(--borde); border-radius: 9px;
}
.emp-form .prog-campo input:hover { border-color: var(--azul-medio); }
.emp-form .prog-campo input:focus {
  outline: 2px solid var(--naranja); outline-offset: 1px; border-color: var(--naranja);
}
.emp-opcional {
  font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gris);
}
.emp-acciones {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.emp-aviso { grid-column: 1 / -1; margin: 0; min-height: 1.2em; }
.emp-resultados { margin-top: 6px; }
.emp-cuenta { margin: 18px 0 10px; font-size: .84rem; font-weight: 700; color: var(--azul-medio); }

.emp-ficha {
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.emp-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 8px 14px;
  padding: 15px 18px;
  background: var(--azul-muy-claro);
  border-bottom: 1px solid var(--borde);
}
.emp-nombre { margin: 0; font-size: 1.2rem; color: var(--azul-oscuro); }
.emp-razon { margin: 3px 0 0; font-size: .84rem; color: #51606f; }
.emp-sello {
  padding: 4px 10px;
  font-size: .72rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: #14501d; background: var(--verde-claro);
  border: 1px solid #bfe3c4; border-radius: 999px;
  white-space: nowrap;
}
.emp-sello-vivo { color: #7a3d00; background: var(--naranja-claro); border-color: #f0cfa8; }
.emp-bloque { padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.emp-bloque h3 { margin: 0 0 9px; font-size: .98rem; color: var(--azul-oscuro); }
.emp-bloque ul { margin: 0; padding-left: 20px; font-size: .87rem; line-height: 1.55; }
.emp-bloque li + li { margin-top: 5px; }
.emp-ok { background: #f5fbf5; }
.emp-ok h3 { color: #14501d; }
.emp-warn { background: #fffaf0; }
.emp-warn h3 { color: #8a5a00; }
.emp-pedir { background: #fff5f3; }
.emp-pedir h3 { color: #8c241b; }
.emp-datos {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 18px;
  margin: 0;
  font-size: .88rem;
}
.emp-datos > div { display: contents; }
.emp-datos dt { color: var(--gris); font-weight: 700; }
.emp-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.emp-datos a, .emp-fuentes a { color: var(--azul-medio); }
.emp-pie-ficha {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px 18px;
  padding: 13px 18px 16px;
}
.emp-fuentes { flex: 1 1 320px; font-size: .8rem; color: var(--gris); }
.emp-fuentes-titulo { margin: 0; font-weight: 800; color: var(--azul-oscuro); }
.emp-fuentes ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.5; }
.emp-fecha { white-space: nowrap; }
.emp-aviso-legal { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; color: #51606f; }
button.emp-copiar { white-space: normal; font-size: .84rem; font-weight: 700; }

.emp-vacio {
  margin: 18px 0 0;
  padding: 18px 20px;
  background: var(--azul-muy-claro);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--naranja);
  border-radius: 10px;
}
.emp-vacio h2 { margin: 0 0 8px; font-size: 1.08rem; color: var(--azul-oscuro); }
.emp-vacio p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; }
.emp-vacio ul { margin: 0 0 10px; padding-left: 20px; font-size: .86rem; line-height: 1.5; }
.emp-guia-nif {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.emp-guia-nif h2 { margin: 0 0 6px; font-size: .98rem; }
.emp-guia-nif p { margin: 0 0 6px; }
.emp-guia-pasos { margin: 0; padding-left: 20px; font-size: .86rem; line-height: 1.55; }
.emp-guia-pasos a { color: var(--azul-oscuro); }
.emp-vacio-nota { color: #51606f; }
.emp-aviso-vivo {
  margin: 16px 0 0;
  padding: 9px 12px;
  font-size: .84rem; color: #7a3d00;
  background: var(--naranja-claro); border-left: 4px solid var(--naranja);
  border-radius: 8px;
}
.emp-dni {
  margin: 18px 0 0;
  padding: 10px 12px;
  font-size: .84rem; line-height: 1.5;
  color: var(--azul-oscuro); background: var(--azul-muy-claro);
  border-left: 4px solid var(--azul-medio); border-radius: 8px;
}
.emp-lista { margin-top: 18px; }
.emp-lista h2 { margin: 0 0 6px; font-size: 1.05rem; color: var(--azul-oscuro); }
.emp-lista p { margin: 0 0 10px; font-size: .87rem; color: #51606f; }
.emp-lista-empresas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
button.emp-elegir {
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 12px;
  text-align: left; white-space: normal;
  font: inherit; font-size: .9rem; color: var(--texto);
  background: #fff; border: 1px solid var(--borde); border-radius: 9px;
}
button.emp-elegir:hover { border-color: var(--naranja); background: #fffdfa; }
button.emp-elegir strong { color: var(--azul-oscuro); }
button.emp-elegir span { font-size: .8rem; color: var(--gris); }

@media (max-width: 700px) {
  .emp-form { grid-template-columns: 1fr; }
  .emp-datos { grid-template-columns: 1fr; gap: 2px; }
  .emp-datos dt { margin-top: 8px; }
  .emp-pie-ficha { flex-direction: column; }
  .emp-sello { white-space: normal; }
}

/* Aviso de las horas de empresa (19/10/2026): si el Planificador no tiene al
   menos 500 h de FEOE marcadas entre 1.º y 2.º del ciclo, el documento usa las
   horas simuladas y hay que decirlo donde se elige el módulo. */
.prog-horas {
  margin: 12px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  border-radius: 9px;
}
p.prog-horas { margin: 12px 0 0; padding: 9px 12px; }
.prog-horas p { margin: 0 0 6px; }
.prog-horas p:last-of-type { margin-bottom: 8px; }
.prog-horas-aviso {
  padding: 12px 14px;
  color: #7a3d00;
  background: var(--naranja-claro);
  border: 1px solid #f0cfa8;
  border-left: 4px solid var(--naranja);
}
.prog-horas-aviso strong { color: #a1440d; }
.prog-horas-aviso button { margin-top: 2px; }
.prog-horas-ok {
  padding: 9px 12px;
  color: #14501d;
  background: #edf7ee;
  border: 1px solid #bfe3c4;
  border-left: 4px solid var(--verde);
}
@media print {
  .prog-horas { display: none !important; }
}

@media (max-width: 980px) {
  /* Dos por fila en tablet: sigue siendo una rejilla ordenada. */
  .inicio-grupo .inicio-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .vista-inicio { padding: 18px 12px 44px; }
  .inicio-hero { padding: 22px 16px 24px; border-radius: 14px; }
  .inicio-opciones { gap: 14px; margin-top: 16px; }
  .inicio-grupo .inicio-opciones { grid-template-columns: 1fr; }
  .inicio-grupo { margin-top: 18px; }
  .opcion { padding: 18px; }
  .vista-programaciones { padding: 16px 10px 44px; }
  .prog-caja { padding: 18px 16px 22px; border-radius: 12px; }
  .prog-form { grid-template-columns: 1fr; gap: 12px; }
  .prog-datos { grid-template-columns: 1fr; gap: 2px; }
  .prog-datos dt { margin-top: 8px; }
  .cabecera-seccion { display: none; }
}
@media print {
  .vista-inicio, .vista-programaciones, .vista-empresas { display: none !important; }
}