/* ==========================================================================
   AVANZA · PANEL DE ADMINISTRACIÓN — Maqueta clicable
   --------------------------------------------------------------------------
   Sistema tipo Corvia: lienzo claro de oficina. El verde de marca es uno
   solo, #00B070, en claro y en oscuro: botones, menú activo y “hoy”.
   No se aclara al pasar a modo claro. El teal #005966 es el segundo color
   (lo serio: presupuesto, cajas). Texto blanco encima del menta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA ESCALA
   --------------------------------------------------------------------------
   Todo el programa usa estos valores y solo estos. Antes había 21 tamaños de
   letra y 13 radios distintos: entre 11 y 13,5 píxeles había seis tamaños que
   nadie distingue a simple vista, pero que hacían que dos textos que debían
   alinearse no alinearan del todo.

   LETRA    10  ·  11  ·  12  ·  13  ·  15  ·  18  ·  22  ·  26
            nota etiqueta menor base nombre título cabecera cifra

   RADIOS    4  ·   8  ·  14  ·  999
            barra  botón tarjeta píldora

   Si hace falta un tamaño nuevo, mejor usar el de al lado que inventar uno.
   -------------------------------------------------------------------------- */

html { scrollbar-gutter: stable; }

/* Cuando el programa esconde algo con hidden, tiene que quedar escondido.
   Sin esta línea, cualquier caja que tenga display:flex o grid en su clase
   se sigue viendo aunque el código la haya ocultado: pasaba con la caja de
   escribir de Comunicación, que salía sin tener ningún chat abierto. */
[hidden] { display: none !important; }

:root {
  /* ---- MARCA ---- */
  --verde:        #00B070;
  --verde-claro:  #00B070;
  /* El verde de marca (#00B070) con texto blanco encima da 2,8:1 de
     contraste, por debajo del 4,5 que hace falta para leerlo bien. Este otro
     es el mismo verde un punto más oscuro: 4,55:1 con blanco. Se usa SOLO
     donde hay texto encima; en barras, bordes y acentos sigue el de marca. */
  --verde-boton:  #00875A;
  --sobre-acento: #FFFFFF;
  --acento-texto: #00B070;
  --verde-suave:  rgba(0, 176, 112, .14);
  --teal:         #005966;
  --lila:         #7C6CF0;
  --salvia:       #00B070;
  --arena:        #E0A810;

  /* ---- TEMA CLARO (el que viene puesto) ---- */
  --fondo:        #F2F2F2;
  --panel:        #FFFFFF;
  --panel-2:      #F7F7F7;
  --lateral:      #FAFAFA;

  --texto:        #1A1D1F;
  --texto-2:      rgba(26, 29, 31, .68);
  --texto-3:      rgba(26, 29, 31, .45);

  --linea:        rgba(26, 29, 31, .08);
  --linea-fuerte: rgba(26, 29, 31, .14);

  --burbuja:      rgba(26, 29, 31, .05);
  --zebra:        rgba(26, 29, 31, .025);
  --encima:       rgba(26, 29, 31, .04);
  --rayas:        rgba(0, 176, 112, .16);
  --sombra:       0 1px 2px rgba(26, 29, 31, .04), 0 8px 24px rgba(26, 29, 31, .05);
  --sombra-hover: 0 2px 6px rgba(26, 29, 31, .05), 0 14px 32px rgba(26, 29, 31, .07);
  --scroll:       rgba(26, 29, 31, .20);
  --scroll-hover: rgba(0, 176, 112, .55);

  --ok:           #0D9B8A;
  --aviso:        #E0A810;
  --peligro:      #E87028;
  --info:         #0070C0;

  --eti-ok-f:     rgba(13, 155, 138, .14);   --eti-ok-t:     #0A7A6C;
  --eti-verde-f:  rgba(0, 176, 112, .16);    --eti-verde-t:  #007A4D;
  --eti-aviso-f:  rgba(224, 168, 16, .16);   --eti-aviso-t:  #9A6B00;
  --eti-peli-f:   rgba(232, 112, 40, .12);   --eti-peli-t:   #B45309;
  --eti-info-f:   rgba(0, 112, 192, .12);    --eti-info-t:   #005A9C;

  /* Medidas.
     Los radios salen del logo: una esquina por escala, de la etiqueta al
     panel. Nada de inventar un sexto valor a medio camino. */
  --lateral-ancho: 236px;
  --cabecera-alto: 60px;
  --radio-eti:     6px;   /* etiquetas, celdas de estado, chips pequeños */
  --radio-sm:      8px;   /* botones, campos de formulario, selectores */
  --radio-caja:   10px;   /* tarjetas interiores, cajas de dato */
  --radio:        14px;   /* paneles y contenedores de sección */

  /* Dos familias y solo dos. Archivo es estrecha y con carácter técnico: va
     en titulares, cifras grandes y menú. Work Sans tiene la x alta y se lee
     bien a 14 px en el móvil: va en todo el texto de interfaz.
     No hay monoespaciada. Los datos que tienen que alinearse en columna
     (importes, matrículas, horas) usan Work Sans con cifras tabulares, que
     ocupan todas lo mismo sin cambiar de familia a media tabla. */
  --fuente: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titular: "Archivo", "Work Sans", system-ui, -apple-system, sans-serif;
  --mono: var(--fuente);
  color-scheme: light;
  --desplegable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231A1D1F' stroke-opacity='0.45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2 8 10.2 12 6.2'/%3E%3C/svg%3E");
  --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231A1D1F' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TEMA OSCURO
   --------------------------------------------------------------------------
   Solo cambian fondos y textos. El verde de marca sigue siendo #00B070.
   El acento de tinta se aclara un poco para leerse sobre paneles oscuros.
   ========================================================================== */
:root[data-tema="oscuro"] {
  --acento-texto: #2EC98A;
  --verde-suave:  rgba(0, 176, 112, .16);

  --fondo:        #0A1011;
  --panel:        #141A1B;
  --panel-2:      #1A2224;
  --lateral:      #0A1011;

  --texto:        #F4F7F6;
  --texto-2:      rgba(244, 247, 246, .68);
  --texto-3:      rgba(244, 247, 246, .42);

  --linea:        rgba(244, 247, 246, .08);
  --linea-fuerte: rgba(244, 247, 246, .14);

  --burbuja:      rgba(244, 247, 246, .07);
  --zebra:        rgba(244, 247, 246, .03);
  --encima:       rgba(244, 247, 246, .05);
  --rayas:        rgba(0, 176, 112, .10);
  --sombra:       0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px rgba(0, 0, 0, .40);
  --sombra-hover: 0 12px 32px rgba(0, 0, 0, .50);
  --scroll:       rgba(244, 247, 246, .18);
  --scroll-hover: rgba(0, 176, 112, .55);

  --ok:           #3DCFB6;
  --aviso:        #F8C840;
  --peligro:      #E87028;
  --info:         #0090F8;

  --eti-ok-f:     rgba(61, 207, 182, .16);   --eti-ok-t:     #5EEAD4;
  --eti-verde-f:  rgba(0, 176, 112, .16);    --eti-verde-t:  #5EE0B0;
  --eti-aviso-f:  rgba(248, 200, 64, .16);   --eti-aviso-t:  #F8C840;
  --eti-peli-f:   rgba(232, 112, 40, .16);   --eti-peli-t:   #FDBA74;
  --eti-info-f:   rgba(0, 144, 248, .16);    --eti-info-t:   #7DD3FC;
  --desplegable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23F4F7F6' stroke-opacity='0.5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2 8 10.2 12 6.2'/%3E%3C/svg%3E");
  --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23F4F7F6' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  /* La guía pone el párrafo largo en 400 y el texto de interfaz de 13 px en
     500. Esto es un panel denso, casi todo son etiquetas y filas de tabla, no
     párrafos: el 400 de Work Sans se quedaba lavado a estos tamaños. */
  font-weight: 500;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

select {
  appearance: none;
  -webkit-appearance: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  background-color: var(--fondo);
  background-image: var(--desplegable);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
select:hover { border-color: var(--linea-fuerte); }
select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
select::-ms-expand { display: none; }

/* Los titulares van en Archivo con interletrado negativo: es estrecha, y
   cerrarla un poco más es lo que le da el aire de la marca. El texto
   corrido no se toca, que ahí el interletrado solo estorba. */
h1,h2,h3,h4 { margin: 0; font-family: var(--titular); font-weight: 700; letter-spacing: -.03em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* Las cifras de una tabla tienen que caer en columna. Con cifras tabulares
   todos los dígitos ocupan lo mismo, así que 1.111 y 8.888 miden igual sin
   cambiar de familia a media tabla. */
td, th, .cifra b, .num, input, select { font-variant-numeric: tabular-nums; }
/* Ya no hay monoespaciada: --mono apunta a la misma familia. Lo que antes
   dependía de ella para alinear (matrículas, códigos, importes sueltos) se
   queda con las cifras tabulares, que es lo que de verdad hacía falta. */
[style*="var(--mono)"] { font-variant-numeric: tabular-nums; }

html { color-scheme: light; }
html[data-tema="oscuro"] { color-scheme: dark; }
::selection { background: var(--verde-boton); color: var(--sobre-acento); }

/* Deslizadores: finos, redondos y del color del programa.
   Sin las flechas ni la barra gruesa de Windows. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.lateral::-webkit-scrollbar { width: 6px; }
.pestanas::-webkit-scrollbar { height: 6px; }

/* --------------------------------------------------------------------------
   ESTRUCTURA GENERAL
   -------------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--lateral-ancho) minmax(0, 1fr); min-height: 100vh; }

/* --------------------------------------------------------------------------
   BARRA LATERAL
   -------------------------------------------------------------------------- */
.lateral {
  background: var(--lateral);
  border-right: 1px solid var(--linea);
  padding: 16px 12px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.lateral__nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 8px 8px 16px; font-family: var(--titular); font-weight: 700; font-size: 19px; letter-spacing: -.03em; }
.marca svg { flex: none; }
/* La marca va en contorno y del verde de marca, sin caja detrás: el relleno
   macizo se reserva para botones y estado. */
.marca__logo { display: grid; place-items: center; flex: none; color: var(--verde); }
.lateral__grupo {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); font-weight: 500; padding: 16px 12px 8px;
}
.marca, .lateral__grupo, .lateral a, .lateral__pie { flex-shrink: 0; }
.lateral a {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--radio-caja);
  color: var(--texto-2); font-family: var(--titular); font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.lateral a:hover { background: var(--encima); color: var(--texto); }
.lateral a.activo { background: var(--verde-suave); color: var(--acento-texto); font-weight: 600; }
.lateral a.activo .ico { color: var(--acento-texto); opacity: 1; }
.lateral .globo {
  margin-left: auto; background: var(--verde-boton); color: var(--sobre-acento);
  font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
}
.lateral a.activo .globo {
  background: var(--sobre-acento); color: var(--verde);
}
.lateral__pie { flex: none; padding-top: 14px; border-top: 1px solid var(--linea); }
.usuario { display: flex; align-items: center; gap: 8px; padding: 8px 8px; }
.usuario__foto {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  background: var(--burbuja);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1; text-align: center;
}
/* El nombre y el cargo, sólo dentro de su caja. Antes esto era ".usuario span"
   y alcanzaba también al avatar, que es otro span: le ponía display block y el
   gris del cargo, así que las iniciales salían descolocadas y apagadas por
   mucho color que se les pusiera. */
.usuario__quien { min-width: 0; }
.usuario__quien b { display: block; font-size: 12px; }
.usuario__quien span { display: block; font-size: 11px; color: var(--texto-3); }

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
.principal { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.cabecera {
  height: var(--cabecera-alto);
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
}
.migas { font-size: 13px; color: var(--texto-3); white-space: nowrap; }
.migas b { color: var(--texto); font-weight: 600; }

.sede-sel { position: relative; flex: none; }
.sede-sel__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--linea);
  color: var(--texto); font-size: 12px; font-weight: 600;
  max-width: 220px;
}
.sede-sel__btn:hover { border-color: var(--linea-fuerte); }
.sede-sel__btn .ico { color: var(--acento-texto); flex: none; }
.sede-sel__btn em {
  font-style: normal; font-size: 10px; font-weight: 700;
  color: var(--eti-info-t); background: var(--eti-info-f);
  padding: 2px 8px; border-radius: 999px;
}
.sede-sel__menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px; z-index: 60;
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden;
}
.sede-sel__menu.abierto { display: block; }
.sede-sel__grupo {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-3);
  padding: 8px 16px 4px;
}
.sede-sel__menu button, .sede-sel__menu a {
  display: flex; width: 100%; text-align: left;
  padding: 8px 16px; font-size: 13px; color: var(--texto);
  background: none; border: 0;
}
.sede-sel__menu button:hover, .sede-sel__menu a:hover { background: var(--panel-2); }
.sede-sel__menu button.es-activa { background: var(--verde-suave); }
.sede-sel__menu button span, .sede-sel__menu a span { display: grid; gap: 2px; }
.sede-sel__menu small { color: var(--texto-3); font-size: 11px; font-weight: 500; }
.sede-sel__menu a {
  border-top: 1px solid var(--linea); color: var(--texto-2); font-size: 12px;
}

.buscador { position: relative; margin-left: auto; width: min(360px, 40vw); }
.buscador input {
  width: 100%; padding: 8px 12px 8px 32px;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: 999px; color: var(--texto); font-size: 13px;
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }

.resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); display: none; z-index: 50;
}
.resultados.abierto { display: block; }
.resultados a { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px; }
.resultados a:hover { background: var(--panel-2); }
.resultados .vacio { padding: 16px; color: var(--texto-3); font-size: 13px; }

/* --------------------------------------------------------------------------
   BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s, filter .15s;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--verde { background: var(--verde-boton); color: var(--sobre-acento); }
.btn--verde:hover { filter: brightness(.94); }
.btn--linea { border-color: var(--linea-fuerte); color: var(--texto-2); }
.btn--linea:hover { border-color: var(--texto); color: var(--texto); }
.btn--sm { padding: 4px 12px; font-size: 12px; }

/* --------------------------------------------------------------------------
   CONTENIDO
   -------------------------------------------------------------------------- */
.contenido { padding: 24px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.titulo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.titulo h1 { margin-right: auto; }
.titulo__sub { font-size: 13px; color: var(--texto-3); }
a.titulo__sub { text-decoration: none; }
a.titulo__sub:hover { color: var(--texto); }

/* Tarjetas */
.tarjeta {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.tarjeta__cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 16px; border-bottom: 1px solid var(--linea);
}
.tarjeta__cab h2 { margin-right: auto; }
.tarjeta__cuerpo { padding: 16px; }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 16px; }
.cifra { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 16px; box-shadow: var(--sombra); }
a.cifra, .cifra--enlace { text-decoration: none; color: inherit; cursor: pointer; display: block; }
.cifra:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-hover); }
a.cifra:hover, .cifra--enlace:hover { border-color: var(--verde); }
.cifra small { display: block; font-size: 11px; color: var(--texto-3); margin-bottom: 7px; }
.cifra b { font-family: var(--titular); font-size: 26px; font-weight: 700; letter-spacing: -.03em; display: block; line-height: 1.1; }
.cifra i { font-style: normal; font-size: 11px; font-weight: 600; }
.sube  { color: var(--acento-texto); }
.baja  { color: var(--peligro); }
.ojo   { color: var(--aviso); }
.neutro{ color: var(--texto-3); }

/* --------------------------------------------------------------------------
   LISTAS Y TABLAS
   -------------------------------------------------------------------------- */
.filas { display: grid; }
.fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linea);
  cursor: pointer; transition: background .12s;
}
.fila:last-child { border-bottom: none; }
.fila input[type="text"] {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: 8px 8px;
  color: var(--texto); font: inherit; min-width: 0;
}
.fila:hover { background: var(--panel-2); }
.fila__foto {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--burbuja); display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}
.fila__txt { flex: 1; min-width: 0; }
.fila__txt b { display: block; font-size: 13px; font-weight: 600; }
.fila__txt span { display: block; font-size: 11px; color: var(--texto-3); }
.fila__extra { text-align: right; font-size: 12px; color: var(--texto-2); white-space: nowrap; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linea); font-size: 13px; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--texto-3); font-weight: 500; background: var(--zebra);
}
/* OJO: aquí había un "position: sticky" para dejar fija la cabecera de la
   tabla al hacer scroll. Se ha quitado porque las tablas viven dentro de
   tarjetas con las esquinas recortadas (overflow:hidden), y eso rompe el
   sticky: la cabecera se despegaba y acababa montada encima de la primera
   fila de datos. */
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--panel-2); }
tbody tr:has(.alum__vacio) { cursor: default; }
tbody tr:has(.alum__vacio):hover { background: transparent; }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Etiquetas de estado */
.eti {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radio-eti); white-space: nowrap;
  background: var(--burbuja); color: var(--texto-2);
}
.eti--ok, .eti--verde { background: var(--eti-verde-f); color: var(--eti-verde-t); }
.eti--aviso   { background: var(--eti-aviso-f); color: var(--eti-aviso-t); }
.eti--peligro { background: var(--eti-peli-f);  color: var(--eti-peli-t); }
.eti--info    { background: var(--eti-info-f);  color: var(--eti-info-t); }

/* --------------------------------------------------------------------------
   BARRAS DE PROGRESO (Niebla → Salvia, sin semáforo)
   -------------------------------------------------------------------------- */
.progreso { display: grid; gap: 8px; }
.progreso__t { display: flex; justify-content: space-between; font-size: 12px; }
.progreso__t span { color: var(--texto-3); }
.barra { height: 6px; border-radius: 999px; background: var(--burbuja); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
.barra--medio i { background: var(--salvia); }
.barra--alto  i { background: var(--verde); }

/* El equipo: una fila por profesor, ocupación a la vista, sin la nube de alumnos */
.equipo__fila { gap: 16px; }
.equipo__ocupa { width: 200px; flex: none; display: grid; gap: 4px; }
.equipo__ocupa small { font-size: 11px; color: var(--texto-3); }
.equipo__dato { text-align: right; white-space: nowrap; }
.equipo__dato b { display: block; font-size: 13px; font-weight: 700; }
.equipo__dato span { font-size: 11px; color: var(--texto-3); }
.equipo__barra--lleno i { background: var(--aviso); }
@media (max-width: 820px) {
  .equipo__fila { flex-wrap: wrap; }
  .equipo__ocupa { width: 100%; order: 3; }
  .equipo__dato { margin-left: auto; }
}

/* Lista o tabla larga: el scroll va dentro de la tarjeta, no alarga
   la página. La cabecera de tabla sí puede quedarse fija. */
.tabla-scroll { max-height: min(62vh, 680px); overflow: auto; min-width: 0; }
.tabla-scroll table { border-collapse: separate; border-spacing: 0; }
.tabla-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--linea);
}
.ventana .tabla-scroll { max-height: min(42vh, 380px); }
.tarjeta:has(> .tabla-scroll) { overflow: hidden; min-width: 0; }
.fact-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fact-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0;
}
.fact-cols > .tarjeta { min-width: 0; }
.tabla-fact td, .tabla-fact th { padding: 12px 16px; }
.tabla-fact .fact-alumno {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.tabla-fact .fact-alumno em {
  font-style: normal; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabla-fact .fact-concepto {
  color: var(--texto-2); max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fact-acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) {
  .fact-cols { grid-template-columns: 1fr; }
}

.factura-cab { flex-wrap: wrap; }
.factura-cab__tit {
  display: flex; align-items: baseline; gap: 8px;
  margin-right: auto; min-width: 0;
}
.factura-cab__tit h2 { margin-right: 0; }
.filtro-vista {
  font-weight: 600;
  font-size: 12px;
}

.busca {
  position: relative;
  display: inline-block;
  min-width: min(240px, 100%);
}
.factura-cab .busca, .tarjeta__cab .busca { width: min(280px, 100%); }
.busca input,
input.alumnos-busca {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border-radius: var(--radio-sm);
  background: var(--fondo);
  border: 1px solid var(--linea);
  color: var(--texto);
  font-size: 13px;
}
.busca input:focus,
.alumnos-busca:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}
.busca input::placeholder,
.alumnos-busca::placeholder { color: var(--texto-3); }

/* Una sola tabla: cabecera y filas comparten columna. Dos grids aparte
   desplazaban el 18/24 respecto de «Prácticas» según lo ancha que fuera
   la etiqueta de preparación de cada fila. */
/* La columna se estrecha al ancho de la palabra (Prácticas, Saldo, Deuda).
   Así el 18/24 queda debajo de «Prácticas», no flotando en un hueco del 12%. */
.tabla-alumnos { width: 100%; }
.tabla-alumnos th, .tabla-alumnos td { vertical-align: middle; }
.tabla-alumnos th.num, .tabla-alumnos td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
  min-width: 7em;
  padding-left: 12px;
  padding-right: 12px;
}
.tabla-alumnos th.num {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tabla-alumnos th:nth-child(2),
.tabla-alumnos td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}
.tabla-alumnos .alum__profe a { color: inherit; text-decoration: none; }
.tabla-alumnos .alum__profe a:hover { color: var(--acento-texto); }
.alum__quien { display: flex; align-items: center; gap: 8px; min-width: 0; }
.alum__quien b { display: block; font-size: 13px; font-weight: 600; }
.alum__quien small { display: block; font-size: 11px; color: var(--texto-3); }
.alum__pract i { font-style: normal; color: var(--texto-3); font-weight: 500; }
.alum__vacio { padding: 28px 16px; color: var(--texto-3); font-size: 13px; text-align: center; }
.cifra--filtro { cursor: pointer; text-align: left; font: inherit; color: inherit; appearance: none; }
.cifra--filtro.activa { border-color: var(--verde); }
@media (max-width: 900px) {
  .tabla-alumnos col:nth-child(2),
  .tabla-alumnos th:nth-child(2),
  .tabla-alumnos td:nth-child(2) { display: none; }
}

/* --------------------------------------------------------------------------
   AGENDA
   -------------------------------------------------------------------------- */
.agenda { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--panel); box-shadow: var(--sombra); }
.agenda__cab, .agenda__cuerpo { display: grid; grid-template-columns: 62px repeat(var(--columnas,4), 1fr); }
.agenda__cab { border-bottom: 1px solid var(--linea); background: var(--zebra); }
.agenda__cab > div { padding: 8px 8px; text-align: center; font-size: 12px; font-weight: 700; }
.agenda__cab small { display: block; font-size: 10px; font-weight: 500; color: var(--texto-3); }
.agenda__horas { border-right: 1px solid var(--linea); }
.agenda__horas span {
  display: block; height: 56px; font-size: 10px; color: var(--texto-3);
  text-align: right; padding: 4px 8px 0 0;
}
.agenda__col { border-right: 1px solid var(--linea); padding: 3px; display: grid; gap: 3px; align-content: start; }
.agenda__col:last-child { border-right: none; }

.clase {
  height: 53px; border-radius: var(--radio-sm); padding: 8px 8px;
  border-left: 3px solid var(--verde); background: var(--verde-suave);
  font-size: 11px; line-height: 1.3; cursor: grab; user-select: none;
  transition: transform .12s, box-shadow .12s;
}
.clase:hover { transform: translateY(-1px); box-shadow: var(--sombra-hover); }
.clase:active { cursor: grabbing; }
.clase b { display: block; font-weight: 600; font-size: 12px; }
.clase span { color: var(--texto-3); font-size: 10px; }
.clase--info   { border-color: var(--info);   background: color-mix(in srgb, var(--info) 16%, transparent); }
.clase--ok     { border-color: var(--verde);  background: color-mix(in srgb, var(--verde) 16%, transparent); }
.clase--aviso  { border-color: var(--aviso);  background: color-mix(in srgb, var(--aviso) 16%, transparent); }
.clase.arrastrando { opacity: .35; }

.libre {
  height: 53px; border-radius: var(--radio-sm);
  border: 1px dashed var(--linea-fuerte);
  display: grid; place-items: center; font-size: 10px; color: var(--texto-3);
  background: repeating-linear-gradient(45deg, var(--rayas) 0 6px, transparent 6px 12px);
  transition: border-color .12s, background .12s;
}
.libre.encima { border-color: var(--verde); background: var(--verde-suave); color: var(--texto); }

/* --------------------------------------------------------------------------
   AVISO DEL SISTEMA (la parte "inteligente")
   -------------------------------------------------------------------------- */
.sugerencia {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radio);
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--verde) 28%, var(--linea));
  box-shadow: var(--sombra);
}
.sugerencia__ico {
  width: 32px; height: 32px; border-radius: var(--radio-sm); flex: none;
  background: var(--verde-suave); color: var(--acento-texto);
  display: grid; place-items: center; font-size: 15px;
}
/* Misma caja, pero cuando lo que dice no es una buena noticia */
.sugerencia--aviso {
  background: color-mix(in srgb, var(--aviso) 13%, transparent);
  border-color: color-mix(in srgb, var(--aviso) 45%, transparent);
}
.sugerencia--aviso .sugerencia__ico {
  background: color-mix(in srgb, var(--aviso) 16%, transparent);
  color: var(--eti-aviso-t);
}
.sugerencia__txt { flex: 1; min-width: 0; }
.sugerencia__txt b { display: block; font-size: 13px; }
.sugerencia__txt span { font-size: 12px; color: var(--texto-2); }

/* --------------------------------------------------------------------------
   VENTANA EMERGENTE
   -------------------------------------------------------------------------- */
.velo {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
  display: none; place-items: center; z-index: 100; padding: 20px;
}
.velo.abierto { display: grid; }
.ventana {
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-radius: 14px; width: min(520px, 100%);
  box-shadow: var(--sombra);
  animation: entrar .18s ease;
}
@keyframes entrar { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.ventana__cab { padding: 16px 24px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; }
.ventana__cab h2 { margin-right: auto; }
.ventana__cuerpo { padding: 24px; display: grid; gap: 16px; }
.ventana__pie { padding: 16px 24px; border-top: 1px solid var(--linea); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cerrar { font-size: 18px; color: var(--texto-3); line-height: 1; }
.cerrar:hover { color: var(--texto); }

.campo { display: grid; gap: 8px; align-content: start; }
.campo label { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 8px 12px; border-radius: var(--radio-sm);
  background-color: var(--fondo); border: 1px solid var(--linea);
  color: var(--texto); font-size: 13px;
}
.campo select { padding-right: 34px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); }
.campo textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.campo small { font-size: 12px; color: var(--texto-3); line-height: 1.4; }
.campo--doble {
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  align-items: start;
}
.campo--doble > .campo {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  min-width: 0;
}

.campo-euro {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background-color: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  min-width: 8.5rem;
}
.campo .campo-euro {
  width: 100%;
  max-width: 16rem;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
}
.campo-euro:focus-within { border-color: var(--verde); }
.campo-euro input,
.campo .campo-euro input {
  width: 6.5rem;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 8px 8px 12px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  border-radius: var(--radio-sm) 0 0 var(--radio-sm);
}
.campo-euro input:focus { outline: none; border: none; }
.campo-euro span {
  font-weight: 700;
  font-size: 13px;
  color: var(--texto-2);
  flex: none;
  padding: 0 12px 0 4px;
  line-height: 1;
}

.precio-item {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
.precio-item:first-child { padding-top: 4px; }
.precio-item:last-child { border-bottom: none; padding-bottom: 0; }
.precio-item__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.precio-item__cab b { font-size: 15px; }
.precio-item small { display: block; font-size: 12px; color: var(--texto-3); line-height: 1.45; }

.pack-item { padding: 16px 0; }
.pack-item__datos {
  display: grid;
  grid-template-columns: 5.5rem 8.5rem minmax(7rem, 1fr) 28px;
  gap: 12px;
  align-items: end;
}
.pack-item__total {
  display: block;
  font-size: 15px;
  padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
.pack-item .tramo__x { margin-bottom: 8px; }
@media (max-width: 640px) {
  .pack-item__datos { grid-template-columns: 1fr 1fr 28px; }
  .pack-item__datos .campo:nth-child(3) { grid-column: 1 / 3; }
}

.pack-fila {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  gap: 8px 8px;
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linea);
}
.pack-fila:last-child { border-bottom: none; padding-bottom: 0; }
.pack-fila__nota {
  grid-column: 1 / 3;
  font-size: 12px;
  color: var(--texto-3);
}
.pack-fila .tramo__x { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   PESTAÑAS INTERNAS
   -------------------------------------------------------------------------- */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.pestanas button {
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--texto-3);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--verde); }
.hoja { display: none; }
.hoja.activa { display: grid; gap: 16px; animation: aparecer .2s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   AVISO FLOTANTE
   -------------------------------------------------------------------------- */
.aviso-flotante {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--verde-claro);
  padding: 12px 16px; border-radius: var(--radio); font-size: 13px;
  box-shadow: var(--sombra);
  opacity: 0; transition: all .25s ease; z-index: 200; pointer-events: none;
}
.aviso-flotante.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso-flotante.con-accion { pointer-events: auto; display: flex; align-items: center; gap: 14px; z-index: 400; }
.aviso-flotante button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--verde-boton); white-space: nowrap;
}
.aviso-flotante button:hover { text-decoration: underline; }

.campo-check {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--texto-2); cursor: pointer;
}
.campo-check input { margin-top: 3px; accent-color: var(--verde); }
.aviso-campo {
  margin: 0; font-size: 12px; color: var(--texto-2); line-height: 1.45;
  background: var(--burbuja); padding: 8px 12px; border-radius: var(--radio-sm);
}

.sede-bloque { border-bottom: 1px solid var(--linea); }
.sede-bloque:last-child { border-bottom: none; }
.sede-bloque .fila { border-bottom: none; cursor: default; }
.sede-bloque .fila:hover { background: transparent; }
.sede-coches { padding: 0 16px 16px 64px; display: grid; gap: 8px; }
.sede-coche {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: 8px 8px;
}
.sede-coche__txt { flex: 1; min-width: 140px; font-size: 12px; }
.sede-coche__txt b { font-weight: 700; }
.sede-coche__txt span { color: var(--texto-3); font-size: 11px; }
.sede-coche select {
  padding: 8px 8px; border-radius: var(--radio-sm);
  background: var(--panel); border: 1px solid var(--linea);
  color: var(--texto); font-size: 12px;
}
.sede-coche--vacio {
  color: var(--texto-3); font-size: 12px; border-style: dashed;
}

/* --------------------------------------------------------------------------
   ETIQUETA DE PROTOTIPO (en el pie de la barra lateral)
   -------------------------------------------------------------------------- */
/* Etiqueta discreta abajo a la derecha: recuerda que los datos son de ejemplo
   sin tapar ningún botón. */
.cinta {
  margin-top: 10px; text-align: center;
  background: var(--eti-aviso-f); color: var(--eti-aviso-t);
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 8px; border-radius: 8px;
}

/* --------------------------------------------------------------------------
   PANTALLAS PEQUEÑAS
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: var(--lateral-ancho); z-index: 90;
    transform: translateX(-100%);
    pointer-events: none;
  }
  .lateral.abierta { transform: none; pointer-events: auto; }
  .abrir-menu { display: inline-flex !important; }
  .buscador { width: auto; flex: 1; }
  .contenido { padding: 16px; }
}
.abrir-menu { display: none; font-size: 18px; }


/* --------------------------------------------------------------------------
   BOTÓN DE TEMA (sol / luna)
   -------------------------------------------------------------------------- */
.tema {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  border: 1px solid var(--linea); background: var(--panel);
  display: grid; place-items: center; font-size: 15px;
  transition: border-color .15s, background .15s;
}
.tema:hover { border-color: var(--linea-fuerte); background: var(--panel-2); }

/* --------------------------------------------------------------------------
   CAMPANA DE NOTIFICACIONES
   -------------------------------------------------------------------------- */
.campana { position: relative; flex: none; }
.campana .tema { position: relative; }
.campana__globo {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--verde-boton); color: var(--sobre-acento);
  font-size: 10px; font-weight: 700; border-radius: 999px;
  display: grid; place-items: center; line-height: 1;
  pointer-events: none;
}
.campana__menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: min(340px, calc(100vw - 24px)); z-index: 80;
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); box-shadow: var(--sombra);
  overflow: hidden;
}
.campana.abierto .campana__menu { display: block; }
.campana__cab, .campana__vacio, .campana__todas {
  padding: 12px 16px; font-size: 11px; font-weight: 700; color: var(--texto-3);
}
.campana__vacio { color: var(--texto-3); font-weight: 500; }
.campana__item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--linea);
  color: var(--texto); text-decoration: none;
}
.campana__item:hover { background: var(--panel-2); }
.campana__item .fila__foto { width: 28px; height: 28px; font-size: 11px; }
.campana__cuerpo { min-width: 0; }
.campana__cuerpo b {
  display: block; font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.campana__cuerpo small {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 500; color: var(--texto-3); line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.campana__item .eti {
  margin: 0; max-width: 6.8rem;
  font-size: 10px; padding: 4px 8px; line-height: 1.25;
  white-space: normal; text-align: center;
}
.campana__todas {
  display: block; text-align: center; color: var(--acento-texto);
  border-top: 1px solid var(--linea); font-weight: 700;
  padding: 12px 16px; text-decoration: none;
}
.campana__todas:hover { background: var(--panel-2); }

.doc-chip {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.docs-alta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.docs-alta__card {
  display: grid; gap: 8px; justify-items: start;
  padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--panel-2);
}
.docs-alta__card b { font-size: 13px; }
.docs-alta__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
tbody tr.es-alta { background: color-mix(in srgb, var(--verde) 10%, transparent); }
.fila.es-alta { background: color-mix(in srgb, var(--verde) 8%, transparent); }
.chips-docs { display: flex; flex-wrap: wrap; gap: 4px; }

/* --------------------------------------------------------------------------
   TABLA DE MATRÍCULAS
   --------------------------------------------------------------------------
   Los anchos van marcados a mano porque el navegador se los repartía a ojo:
   el nombre se partía en tres líneas y los botones de "Revisar" y "Dar de
   alta" acababan fuera de la pantalla.
   -------------------------------------------------------------------------- */
.tabla-matriculas { table-layout: fixed; width: 100%; min-width: 740px; }
.tabla-matriculas th:nth-child(1), .tabla-matriculas td:nth-child(1) { width: auto; }
.tabla-matriculas th:nth-child(2), .tabla-matriculas td:nth-child(2) { width: 148px; }
.tabla-matriculas th:nth-child(3), .tabla-matriculas td:nth-child(3) { width: 158px; }
.tabla-matriculas th:nth-child(4), .tabla-matriculas td:nth-child(4) { width: 196px; }

/* La etiqueta de estado no puede crecer hasta pisar los botones */
.tabla-matriculas td:nth-child(3) .eti {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* El nombre no parte la fila: si no cabe, se corta con puntos suspensivos
   y el nombre entero se ve al pasar el ratón. */
.tabla-matriculas .alum__txt { min-width: 0; }
.tabla-matriculas .alum__txt b,
.tabla-matriculas .alum__txt small {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.matri__acciones {
  text-align: right; white-space: nowrap;
  display: flex; gap: 8px; justify-content: flex-end;
}
.matri__acciones .btn { flex: none; }

/* Al estrechar se van quitando columnas en vez de dejar que la tabla se
   salga: lo que nunca puede desaparecer son "Revisar" y "Dar de alta", que
   es lo que se viene a hacer a esta pantalla. Lo que se quita se sigue
   viendo entero al pulsar "Revisar". */
@media (max-width: 1000px) {
  .tabla-matriculas { min-width: 470px; }
  .tabla-matriculas th:nth-child(2),
  .tabla-matriculas td:nth-child(2) { display: none; }
}
@media (max-width: 620px) {
  .tabla-matriculas { min-width: 340px; }
  .tabla-matriculas th:nth-child(3),
  .tabla-matriculas td:nth-child(3) { display: none; }
  .tabla-matriculas th:nth-child(4),
  .tabla-matriculas td:nth-child(4) { width: 168px; }
}

/* Solo para lectores de pantalla: la columna de botones no lleva título
   visible, pero tiene que tener nombre. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 720px) {
  .docs-alta { grid-template-columns: 1fr; }
}

/* En tema claro la barra lateral se separa del contenido con una línea */
:root[data-tema="claro"] .lateral { box-shadow: 1px 0 0 var(--linea); }
:root[data-tema="claro"] .clase { box-shadow: 0 1px 2px rgba(14,17,22,.06); }

/* --------------------------------------------------------------------------
   INTERRUPTOR (activar / desactivar una regla)
   -------------------------------------------------------------------------- */
.interruptor {
  width: 40px; height: 23px; border-radius: 999px; flex: none;
  background: var(--burbuja); border: 1px solid var(--linea);
  position: relative; transition: background .18s, border-color .18s;
}
.interruptor::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--texto-3); transition: transform .18s, background .18s;
}
.interruptor.encendido { background: var(--verde); border-color: var(--verde); }
.interruptor.encendido::after { transform: translateX(17px); background: var(--sobre-acento); }

/* --------------------------------------------------------------------------
   EDITOR DE HORARIOS (Configuración)
   -------------------------------------------------------------------------- */
.horario__dia {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}
.horario__dia:last-child { border-bottom: none; }
.horario__nombre { display: flex; align-items: center; gap: 12px; }
.horario__nombre b { font-size: 13px; }
.horario__tramos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.horario__cerrado {
  font-size: 12px; color: var(--texto-3); font-style: italic;
}

.tramo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--burbuja); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: 4px 4px 4px 8px;
}
.tramo input {
  background: transparent; border: none; color: var(--texto);
  font-family: var(--mono); font-size: 12px; padding: 2px;
  width: 6ch; text-align: center;
}
.tramo input:focus { outline: none; color: var(--acento-texto); }
.tramo i { font-style: normal; font-size: 11px; color: var(--texto-3); }
.tramo__x {
  width: 19px; height: 19px; border-radius: 4px; flex: none;
  color: var(--texto-3); font-size: 15px; line-height: 1;
}
.tramo__x:hover {
  background: color-mix(in srgb, var(--peligro) 16%, transparent);
  color: var(--peligro);
}

.ausencia {
  display: grid;
  grid-template-columns: 140px 1fr 1fr minmax(0, 1.5fr) 28px;
  gap: 8px;
  align-items: end;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
.ausencia:last-child { border-bottom: none; }
.ausencia .campo { gap: 4px; }
.ausencia .campo input,
.ausencia .campo select { padding: 8px 8px; font-size: 12px; }
.ausencia .tramo__x { margin-bottom: 8px; }
html[data-tema="oscuro"] input[type="date"] { color-scheme: dark; }
html[data-tema="claro"] input[type="date"] { color-scheme: light; }
@media (max-width: 720px) {
  .ausencia { grid-template-columns: 1fr 1fr 28px; }
  .ausencia .campo--tipo,
  .ausencia .campo--motivo { grid-column: 1 / -2; }
}

.equipo__acciones { display: flex; gap: 8px; flex: none; }

/* El rato en que no se puede poner clase: fuera del turno del profesor,
   descanso entre mañana y tarde, o el centro sin prácticas. Fondo liso,
   sin rayas: las rayas competían con las clases y no se leía nada. */
.cal__fuera {
  position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0;
  display: grid; place-items: center; overflow: hidden;
  background: color-mix(in srgb, var(--fondo) 55%, var(--panel));
}
.cal__fuera span {
  font-size: 11px; font-weight: 700; color: var(--texto-2); letter-spacing: .15px;
  padding: 3px 8px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--linea);
  max-width: calc(100% - 16px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__fuera--ausencia {
  background: color-mix(in srgb, var(--aviso) 12%, var(--fondo));
}
.cal__fuera--ausencia span {
  color: var(--eti-aviso-t);
  border-color: color-mix(in srgb, var(--aviso) 40%, var(--linea));
}
.cal__cerrado {
  position: absolute; left: 0; right: 0; pointer-events: none;
  background: color-mix(in srgb, var(--texto-3) 11%, transparent);
  border-top: 1px dashed color-mix(in srgb, var(--texto-3) 30%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--texto-3) 30%, transparent);
}

/* --------------------------------------------------------------------------
   REGLA: la frase de tres partes
   -------------------------------------------------------------------------- */
.regla { border-bottom: 1px solid var(--linea); padding: 16px 16px; }
.regla:last-child { border-bottom: none; }
.regla__cab { display: flex; align-items: center; gap: 12px; }
.regla__cab b { font-size: 15px; }
.regla__cuerpo { display: grid; gap: 8px; margin-top: 12px; }
.regla.apagada .regla__cuerpo, .regla.apagada .regla__cab b { opacity: .45; }

/* La primera columna se adapta a la palabra más larga ("ENTONCES").
   Antes estaba fija en 82 px y el texto se salía de su caja. */
.paso { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.paso__eti {
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 8px; text-align: center;
  background: var(--burbuja); color: var(--texto-3);
  white-space: nowrap; min-width: 84px;
}
.paso--cuando .paso__eti  { background: var(--eti-info-f);  color: var(--eti-info-t); }
.paso--si .paso__eti      { background: var(--eti-aviso-f); color: var(--eti-aviso-t); }
.paso--entonces .paso__eti{ background: var(--eti-ok-f);    color: var(--eti-ok-t); }
.paso span { font-size: 13px; color: var(--texto-2); padding-top: 2px; }

@media (max-width: 620px) {
  .paso { grid-template-columns: 1fr; gap: 4px; }
  .paso__eti { justify-self: start; }
}

/* --------------------------------------------------------------------------
   ICONOS
   -------------------------------------------------------------------------- */
.ico { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.lateral .ico { width: 20px; height: 20px; }
.btn svg, .tema svg { flex: none; }
.tema { display: grid; place-items: center; }

/* La lupa del buscador es un dibujo, no un emoji */
.buscador__ico, .busca__ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); pointer-events: none; display: grid;
}

/* Círculo de icono dentro de una fila (documentos, avisos...) */
.fila__foto svg { opacity: .85; }

/* --------------------------------------------------------------------------
   DESPLEGABLE DEL BOTÓN "NUEVO"
   -------------------------------------------------------------------------- */
.nuevo { position: relative; flex: none; }
.nuevo__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 232px;
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 8px; display: none; z-index: 60;
}
.nuevo__menu.abierto { display: block; }
.nuevo__menu button {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--radio-sm);
  font-size: 13px; font-weight: 600; color: var(--texto-2); text-align: left;
}
.nuevo__menu button:hover { background: var(--panel-2); color: var(--texto); }
.nuevo__menu button small {
  display: block; font-size: 11px; font-weight: 500; color: var(--texto-3);
}
.nuevo__menu button .ico { color: var(--acento-texto); }
.nuevo__sep { height: 1px; background: var(--linea); margin: 8px 4px; }

/* --------------------------------------------------------------------------
   PLANTILLAS DE AUTOMATIZACIÓN
   Empezar por una plantilla en vez de por un formulario vacío
   -------------------------------------------------------------------------- */
.plantillas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.plantilla {
  text-align: left; padding: 16px 16px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: var(--panel);
  display: grid; gap: 4px; transition: border-color .15s, transform .12s, box-shadow .15s;
  box-shadow: var(--sombra);
}
.plantilla:hover { border-color: var(--verde); transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.plantilla__ico {
  width: 34px; height: 34px; border-radius: 8px; margin-bottom: 6px;
  background: var(--verde-suave); color: var(--acento-texto);
  display: grid; place-items: center;
}
.plantilla b { font-size: 13px; }
.plantilla > span { font-size: 12px; color: var(--texto-3); }
.plantilla em {
  font-style: normal; font-size: 11px; color: var(--texto-3);
  border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 8px;
}

/* La regla escrita como frase, con las partes cambiables subrayadas */
.frase {
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 16px 16px;
  font-size: 15px; line-height: 1.75;
}
.frase b { color: var(--acento-texto); font-weight: 700; }
.frase u { text-decoration-color: var(--linea-fuerte); text-underline-offset: 4px; }

/* Pantallas que aún no existen: se marcan, no se dejan como enlace muerto */
.lateral a.pronto { opacity: .55; }
.lateral a.pronto:hover { opacity: .8; }
.globo--gris {
  background: var(--burbuja) !important; color: var(--texto-3) !important;
  font-size: 10px !important; letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   GRÁFICOS DEL PANEL
   -------------------------------------------------------------------------- */
.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.grafico { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { position: relative; flex: none; }
.donut__centro {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.donut__centro b { display: block; font-family: var(--titular); font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.donut__centro span { font-size: 11px; color: var(--texto-3); }

.leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 132px; }
.leyenda li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.leyenda i { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.leyenda span { color: var(--texto-2); flex: 1; }
.leyenda b { font-variant-numeric: tabular-nums; }

/* Barras verticales */
.barras { display: flex; align-items: flex-end; gap: 8px; }
.barras__col { flex: 1; display: grid; justify-items: center; gap: 8px; align-content: end; }
.barras__valor { font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.barras__barra {
  width: 100%; max-width: 34px; border-radius: var(--radio-eti) var(--radio-eti) 0 0;
  background: var(--verde);
  transition: opacity .15s;
}
.barras__barra.es-futura { opacity: .38; }
.barras__col:hover .barras__barra:not(.es-futura) { opacity: .8; }
.barras__col:hover .barras__barra.es-futura { opacity: .55; }
.barras__eti { font-size: 11px; color: var(--texto-3); font-weight: 500; }

@media (max-width: 520px) {
  .grafico { justify-content: center; }
}

.bloque-tit {
  display: flex; align-items: center; gap: 16px;
  padding: 2px 2px 0;
}
.bloque-tit h2 { margin-right: auto; font-size: 15px; }

/* Escala de cantidad: más → verde, menos → naranja */
.escala-cantidad {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--texto-3); font-weight: 600;
}
.escala-cantidad i {
  width: 10px; height: 10px; border-radius: 4px; flex: none;
}

/* --------------------------------------------------------------------------
   GRÁFICOS DE ANALÍTICA
   -------------------------------------------------------------------------- */

/* Barras horizontales: comparar profesores, coches o franjas */
.barrasH { display: grid; gap: 4px; }
.barrasH__fila {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center;
}
.barrasH__eti { font-size: 12px; font-weight: 600; }
.barrasH__pista { height: 9px; border-radius: 999px; background: var(--burbuja); overflow: hidden; }
.barrasH__barra {
  display: block; height: 100%; border-radius: 999px;
  background: var(--verde);
}
.barrasH__valor { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barrasH__pie {
  font-size: 11px; color: var(--texto-3);
  margin: 0 0 8px 120px; padding-bottom: 8px;
  border-bottom: 1px solid var(--linea);
}
.barrasH__fila:last-of-type + .barrasH__pie { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Evolución en el tiempo */
.evolucion { display: grid; gap: 2px; }
.evolucion__graf { position: relative; }
.evolucion__graf svg { width: 100%; height: auto; display: block; }
.evolucion__punto {
  transform-box: fill-box; transform-origin: center;
}
.evolucion__punto.es-activo { transform: none; }
.evolucion__punto--a.es-activo { fill: var(--verde); }
.evolucion__eje { position: absolute; inset: 0; pointer-events: none; }
.evolucion__eje span {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: 10px; color: var(--texto-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.evolucion__hits { position: absolute; inset: 0; }
.evolucion__hit {
  position: absolute; top: 0; bottom: 0; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  transform: translateX(-50%);
  border-radius: 8px;
}
.evolucion__hit:hover, .evolucion__hit.es-activo {
  background: transparent;
}
.evolucion__hit:focus { outline: none; }
.evolucion__guia {
  position: absolute; top: 8px; bottom: 8px; width: 1px;
  background: var(--verde-claro); opacity: .45;
  pointer-events: none; transform: translateX(-50%);
}
.evolucion__tip {
  position: absolute; z-index: 3; min-width: 168px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--linea-fuerte);
  box-shadow: var(--sombra); pointer-events: none;
}
.evolucion__tip b { display: block; font-size: 12px; margin-bottom: 8px; }
.evolucion__tip div {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--texto-2); margin-top: 4px;
}
.evolucion__tip strong { margin-left: auto; color: var(--texto); font-variant-numeric: tabular-nums; }
.evolucion__tip i {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
}
.evolucion__tip i.es-a { background: var(--verde-claro); }
.evolucion__tip i.es-b { background: var(--texto-3); }
.evolucion__tip em {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 11px; color: var(--texto-3);
  border-top: 1px solid var(--linea); padding-top: 7px;
}
.evolucion__meses {
  position: relative; height: 20px; margin-top: 4px;
  font-size: 12px; color: var(--texto-3);
}
.evolucion__meses span {
  position: absolute; transform: translateX(-50%);
  white-space: nowrap; letter-spacing: 0;
  transition: color .15s ease;
}
.evolucion__meses span.es-activo { color: var(--texto); font-weight: 700; }
.evolucion__leyenda {
  display: flex; gap: 20px; margin-top: 12px; font-size: 12px; color: var(--texto-2);
}
.evolucion__leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.evolucion__leyenda i { width: 14px; height: 3px; border-radius: 4px; }
.evolucion__leyenda i.es-a { background: var(--verde-claro); }
.evolucion__leyenda i.es-b { background: var(--texto-3); }

/* Embudo de conversión */
.embudo { display: grid; gap: 16px; }
.embudo__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.embudo__cab b { font-size: 13px; }
.embudo__cab span { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.embudo__pista { height: 12px; border-radius: 999px; background: var(--burbuja); overflow: hidden; margin-top: 6px; }
.embudo__pista span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--verde);
}
.embudo__caida { font-size: 11px; color: var(--texto-3); margin-top: 6px; }

@media (max-width: 560px) {
  .barrasH__fila { grid-template-columns: 92px 1fr auto; gap: 8px; }
  .barrasH__pie { margin-left: 100px; }
}

/* ==========================================================================
   AGENDA (versión nueva, al estilo de los calendarios de cita previa)
   ========================================================================== */

/* --- barra de control de arriba --- */
.agenda-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
/* Botón de solo icono: ocupa lo mínimo en la barra, que ya va justa */
.btn--icono { padding: 0; width: 32px; min-width: 32px; justify-content: center; }
.btn--icono span { display: grid; place-items: center; }

.agenda-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.agenda-nav button {
  border: 1px solid var(--linea); background: var(--panel);
  border-radius: 8px; color: var(--texto);
  min-width: 34px; height: 34px; padding: 0 12px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
  transition: border-color .15s, background .15s, color .15s;
}
.agenda-nav .btn-hoy { font-size: 13px; }
.agenda-nav button:hover { border-color: var(--linea-fuerte); }
.agenda-nav .btn-hoy.es-hoy {
  border-color: var(--verde);
  color: var(--sobre-acento);
  background: var(--verde-boton);
}
.agenda-barra__rango {
  font-family: var(--fuente); font-size: 18px; font-weight: 700;
  letter-spacing: -.03em; flex: 1; text-align: center; white-space: nowrap;
}
.flechas { display: flex; gap: 2px; }
.flechas button, .btn-hoy {
  border: 1px solid var(--linea); background: var(--panel);
  border-radius: var(--radio-sm); color: var(--texto-2);
  width: 32px; height: 32px; display: grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.btn-hoy { width: auto; padding: 0 16px; font-size: 13px; font-weight: 700; }
.flechas button:hover, .btn-hoy:hover { border-color: var(--linea-fuerte); color: var(--texto); }

/* Selector Mes / Semana / 3 días / Día */
.vistas {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--burbuja); border-radius: 999px; flex: none;
}
.vistas button {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--texto-3); transition: all .15s;
}
.vistas button:hover { color: var(--texto); }
.vistas button.activa {
  background: var(--verde-boton); color: var(--sobre-acento);
  box-shadow: none;
}
:root[data-tema="oscuro"] .vistas button.activa {
  box-shadow: none;
}
.vistas__sep {
  width: 1px; height: 16px; margin: 0 4px;
  background: var(--linea-fuerte); flex: none;
}

/* Selector de cuánto dura una clase */
.duracion {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linea); background: var(--panel);
  border-radius: var(--radio-sm); padding: 0 8px 0 12px; height: 32px;
  font-size: 12px; color: var(--texto-3);
}
.duracion select {
  border: none; background: none; color: var(--texto);
  font-weight: 700; font-size: 12px; padding: 0; cursor: pointer;
}
.duracion select:focus { outline: none; }

/* --- rejilla ---
   Cada clase se coloca por MINUTOS dentro de la columna, no en casillas de
   una hora. Así puede empezar a y cuarto, a y media o a cualquier hora.
   Las zonas fuera de horario van tapadas y no se puede soltar una clase
   encima: el resto de la columna queda limpia, sin rayas. */
.cal {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}
.cal__cab, .cal__cuerpo {
  display: grid; grid-template-columns: 62px repeat(var(--cols, 6), minmax(0, 1fr));
}
.cal__cab { border-bottom: 1px solid var(--linea); }
.cal__zona {
  font-size: 10px; color: var(--texto-3); display: grid; place-items: center;
  border-right: 1px solid var(--linea); text-align: center; line-height: 1.25;
}
.cal__dia { padding: 12px 8px; text-align: center; border-right: 1px solid var(--linea); }
.cal__dia:last-child { border-right: none; }
.cal__dia small {
  display: block; font-size: 10px; letter-spacing: .12em; font-weight: 700;
  color: var(--texto-3); margin-bottom: 5px;
}
.cal__dia b {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.03em;
}
.cal__dia.es-hoy b { background: var(--verde-boton); color: var(--sobre-acento); }
.cal__dia.es-hoy small { color: var(--texto); }
/* El motivo por el que el centro cierra ese día */
.cal__cierre {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 10px; font-weight: 700; line-height: 1.2;
  color: var(--aviso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Cabecera con la foto del profesor: nombre AL LADO, no debajo */
.cal__profe { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cal__profe .foto {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
}
.cal__profe .quien { text-align: left; line-height: 1.15; }
.cal__profe .quien b {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: -.02em;
  margin: 0; padding: 0; width: auto; height: auto; background: none; border-radius: 0;
}
.cal__profe .quien small {
  display: block; font-size: 10px; letter-spacing: .04em; color: var(--texto-3);
  font-family: var(--mono); margin: 1px 0 0;
}

/* Columna de horas.
   La etiqueta va justo DEBAJO de su línea y con aire, para que ninguna
   línea le pase por encima del texto. */
/* --------------------------------------------------------------------------
   MAÑANA Y TARDE
   --------------------------------------------------------------------------
   La cabecera de cada media jornada. Se pulsa para plegarla, y con la banda
   plegada sigue diciendo cuántas clases hay dentro.
   -------------------------------------------------------------------------- */
.cal__tramo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 16px; border: none; border-top: 1px solid var(--linea);
  background: var(--panel-2); color: var(--texto-2);
  font-size: 12px; text-align: left; cursor: pointer;
}
.cal__cab + .cal__tramo { border-top: none; }
.cal__tramo:hover { background: color-mix(in srgb, var(--verde) 8%, var(--panel-2)); }
.cal__tramo b { font-size: 12px; color: var(--texto-1); }
.cal__tramo small { color: var(--texto-3); font-size: 11px; }
.cal__tramo-n {
  margin-left: auto; font-size: 11px; color: var(--texto-3);
  background: var(--burbuja); border-radius: 999px; padding: 2px 8px;
}
.cal__tramo-flecha { display: grid; place-items: center; color: var(--texto-3); }
.cal__tramo-flecha svg { transition: transform .15s ease; }
.cal__tramo.cerrado .cal__tramo-flecha svg { transform: rotate(-90deg); }

.cal__horas { position: relative; border-right: 1px solid var(--linea); }
.cal__horas span, .cal__hora {
  position: absolute; right: 10px; font-size: 11px; color: var(--texto-3);
  transform: translateY(6px); font-variant-numeric: tabular-nums;
  line-height: 1; padding: 2px 0; background: var(--panel);
}
/* La hora es un botón: pinchándola se pone una clase a esa hora aunque la
   franja esté llena. Se nota al pasar por encima, que si no nadie descubre
   que se puede tocar. */
.cal__hora {
  border: 0; cursor: pointer; font-family: inherit; font-weight: inherit;
  padding: 2px 4px; margin-right: -4px; border-radius: var(--radio-eti);
  transition: background .15s, color .15s;
}
.cal__hora:hover { background: var(--verde-suave); color: var(--acento-texto); }
.cal__hora:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* Columna de un día (o de un profesor) */
.cal__col { position: relative; border-right: 1px solid var(--linea); }
.cal__col:last-child { border-right: none; }

/* Líneas de cada hora y de cada media hora */
.cal__linea {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid var(--linea); pointer-events: none;
}
.cal__linea.media { border-top-style: dotted; opacity: .45; }

/* Puntos donde se puede colocar una clase, cada cuarto de hora.
   Son invisibles a propósito: lo que se ve es la GUÍA de abajo, que tiene
   el tamaño real que va a ocupar la clase. */
.slot { position: absolute; left: 0; right: 0; cursor: pointer; z-index: 1; }
.slot--no { cursor: not-allowed; }

/* La guía: enseña el hueco del tamaño exacto de la clase que se va a poner */
.guia {
  position: absolute; left: 3px; right: 3px; z-index: 1;
  border-radius: 8px; display: none;
  border: 1.5px dashed color-mix(in srgb, var(--verde) 55%, transparent);
  background: color-mix(in srgb, var(--verde) 5%, var(--panel));
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--texto-3);
  pointer-events: none; overflow: hidden;
}
.guia.visible { display: flex; }
.guia.soltando { border-style: solid; background: color-mix(in srgb, var(--verde) 22%, transparent); }
.guia.no {
  border-color: var(--aviso);
  background: color-mix(in srgb, var(--aviso) 16%, transparent);
  color: var(--aviso);
}
.guia.no.soltando { border-style: solid; }

/* --- la cita ---
   El nombre va AL LADO de la foto, no debajo: así una clase de media hora
   sigue leyéndose sin que se corte nada. */
.cita {
  position: absolute; left: 3px; right: 3px; z-index: 2;
  border-radius: 8px; padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--cita-fuerte) 40%, transparent);
  border-left: 3px solid var(--cita-fuerte);
  display: grid; grid-template-columns: auto 1fr auto; gap: 0 8px;
  align-items: center; align-content: center;
  cursor: grab; user-select: none; overflow: hidden;
  transition: box-shadow .12s, filter .12s;
  touch-action: none;
}
.cita:hover { box-shadow: 0 5px 16px rgba(0,0,0,.34); filter: brightness(1.07); z-index: 4; }
.cita:active { cursor: grabbing; }

.cita__foto {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--cita-fuerte); color: #fff;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  grid-row: 1 / -1;
}
.cita.verde .cita__foto { color: var(--sobre-acento); }
.cita__quien {
  font-size: 11px; font-weight: 600; line-height: 1.2; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cita__hora {
  font-size: 10px; font-weight: 700; color: var(--cita-fuerte);
  white-space: nowrap; text-align: right;
}
.cita.verde .cita__hora { color: var(--acento-texto); }
.cita__que {
  grid-column: 2 / -1; font-size: 10px; color: var(--texto-3); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bloques bajos (media hora, o varias clases apiladas): una sola línea */
.cita.corta .cita__que { display: none; }
.cita.corta { padding: 2px 8px; }
.cita.corta .cita__foto { width: 17px; height: 17px; font-size: 10px; }
.cita.corta .cita__quien { font-size: 10px; }
.cita.corta .cita__hora { font-size: 10px; }

/* --------------------------------------------------------------------------
   LAS QUE HA MOVIDO AVANZA
   --------------------------------------------------------------------------
   Al aceptar una propuesta, las clases que han cambiado de sitio quedan con
   una estrellita en la esquina, para distinguir de un vistazo lo que ha hecho
   el sistema de lo que has puesto tú. Se quita en cuanto la mueves a mano.
   -------------------------------------------------------------------------- */
.cita.por-ia { border-left-color: var(--verde); padding-right: 22px; }
.cita.verde .cita__foto { color: var(--sobre-acento); }
.cita__ia {
  position: absolute; top: 3px; right: 3px;
  width: 15px; height: 15px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--verde-boton); color: var(--sobre-acento);
  pointer-events: none;
}
.cita__ia svg { width: 10px; height: 10px; }

.cita.por-alumno { padding-right: 22px; }
.cita__app {
  position: absolute; top: 3px; right: 4px;
  width: 15px; height: 15px;
  display: grid; place-items: center;
  color: var(--lila);
  pointer-events: none;
}
.cita__app svg { width: 13px; height: 13px; stroke-width: 2.6; }
.cita.por-ia .cita__app { right: 21px; }
.cita.por-ia.por-alumno { padding-right: 40px; }

/* "+N más": cuando a una hora hay más clases de las que caben legibles */
.cita--mas {
  border-left: 3px solid var(--texto-3);
  background: var(--burbuja);
  color: var(--texto-2); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cita--mas:hover { color: var(--texto); border-left-color: var(--verde); }

.cita.moviendo { opacity: .25; }

/* Mientras se arrastra, la que va en la mano no intercepta el ratón: si no,
   se detecta a sí misma como destino.

   Las DEMÁS sí: pasar por encima de otra clase ya no es un estorbo que hay
   que esquivar, es la manera de proponer que compartan coche. Antes esta
   regla las apagaba todas y por eso soltar encima de una clase no hacía
   absolutamente nada. */
.cal.arrastrando .cita.moviendo { pointer-events: none; }

/* Colores de cada tipo. Se mezclan con el fondo del panel en vez de usar
   transparencia, así que quedan SÓLIDOS: no se ve nada a través de ellos.
   La copia que sigue al ratón al arrastrar lleva estas mismas clases pero
   no la de .cita, así que tiene que entrar aquí o se queda sin color. */
.cita.verde,   .cita-fantasma.verde   { --cita-fuerte: var(--verde); }
.cita.morado,  .cita-fantasma.morado  { --cita-fuerte: var(--lila); }
.cita.naranja, .cita-fantasma.naranja { --cita-fuerte: var(--arena); }
.cita.azul,    .cita-fantasma.azul    { --cita-fuerte: var(--info); }
.cita.gris,    .cita-fantasma.gris    { --cita-fuerte: #8A9099; }
.cita { background: color-mix(in srgb, var(--cita-fuerte) 26%, var(--panel)); }
:root[data-tema="claro"] .cita { background: color-mix(in srgb, var(--cita-fuerte) 15%, #fff); }

/* Las ya dadas se apagan de COLOR, no de transparencia: el bloque sigue
   sólido (no se ve la rejilla a través) pero con menos tinta, para que
   destaquen las que aún faltan. */
.cita.hecha {
  opacity: 1;
  filter: none;
  background: color-mix(in srgb, var(--cita-fuerte) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--cita-fuerte) 14%, transparent);
  border-left-color: color-mix(in srgb, var(--cita-fuerte) 28%, #7A7A86);
  cursor: pointer;
}
.cita.hecha .cita__quien { color: var(--texto-3); }
.cita.hecha .cita__hora  { color: var(--texto-3); }
.cita.hecha .cita__que   { color: var(--texto-3); }
.cita.hecha .cita__foto  {
  background: color-mix(in srgb, var(--cita-fuerte) 28%, var(--panel));
  color: var(--texto-2);
}
.cita.hecha:hover {
  filter: none;
  background: color-mix(in srgb, var(--cita-fuerte) 13%, var(--panel));
}
:root[data-tema="claro"] .cita.hecha {
  background: color-mix(in srgb, var(--cita-fuerte) 5%, #fff);
  border-left-color: color-mix(in srgb, var(--cita-fuerte) 22%, #9AA0AA);
}
:root[data-tema="claro"] .cita.hecha:hover {
  background: color-mix(in srgb, var(--cita-fuerte) 9%, #fff);
}

/* --- vista de lista --- */
.lista-dia { display: grid; gap: 2px; }
.lista-dia__cab {
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); padding: 16px 16px 8px;
}
.lista-dia__cab.es-hoy { color: var(--verde); }
.lista-dia__hora {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  width: 92px; flex: none; color: var(--texto-2);
}
.lista-dia .fila { border-left: 3px solid transparent; }
.lista-dia .fila.verde   { border-left-color: var(--verde); }
.lista-dia .fila.morado  { border-left-color: var(--lila); }
.lista-dia .fila.naranja { border-left-color: var(--arena); }
.lista-dia .fila.hecha { opacity: 1; }
.lista-dia .fila.hecha .lista-dia__hora,
.lista-dia .fila.hecha .fila__txt b { color: var(--texto-3); }
.lista-dia .fila.hecha .fila__foto {
  background: var(--burbuja);
  color: var(--texto-3);
}

/* --- leyenda --- */
.leyenda-cal { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); }
.leyenda-cal span { display: inline-flex; align-items: center; gap: 8px; }
.leyenda-cal i { width: 8px; height: 8px; border-radius: 999px; }

/* --- la copia que sigue al ratón al arrastrar --- */
.cita-fantasma {
  position: fixed; z-index: 500; pointer-events: none;
  border-radius: 8px; padding: 4px 8px;
  border-left: 3px solid var(--cita-fuerte);
  /* El mismo fondo sólido que la cita de la que es copia. Antes usaba una
     variable que no existe, así que salía transparente y se leía encima de
     la agenda mientras se arrastraba. */
  background: color-mix(in srgb, var(--cita-fuerte) 26%, var(--panel));
  display: grid; grid-template-columns: auto 1fr auto; gap: 0 8px; align-items: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.5);
  transform: rotate(-1.4deg) scale(1.02);
  outline: 1.5px solid var(--cita-fuerte);
}
:root[data-tema="claro"] .cita-fantasma {
  background: color-mix(in srgb, var(--cita-fuerte) 15%, #fff);
}

/* --- selector de duración (temporal, su sitio es Configuración) --- */
.duracion {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linea); background: var(--panel);
  border-radius: var(--radio-sm); padding: 0 8px 0 12px; height: 32px;
  font-size: 12px; color: var(--texto-3);
}
.duracion select {
  border: none; background: none; color: var(--texto);
  font-weight: 700; font-size: 12px; padding: 0; cursor: pointer;
}
.duracion select:focus { outline: none; }

@media (max-width: 900px) {
  .cal__cab, .cal__cuerpo { grid-template-columns: 48px repeat(var(--cols, 6), minmax(124px, 1fr)); }
  .cal { overflow-x: auto; }
  .cal__cab, .cal__cuerpo { min-width: max-content; }
  .agenda-barra__rango { width: 100%; margin-bottom: 2px; order: -1; text-align: center; }
}

/* El recuadro de la esquina en la vista de día, cuando es hoy */
.cal__zona.es-hoy { color: var(--texto); font-weight: 700; }
.cal__zona b {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; font-size: 15px; font-weight: 700; margin-top: 3px;
}
.cal__zona.es-hoy b { background: var(--verde-boton); color: var(--sobre-acento); }

/* --------------------------------------------------------------------------
   CALENDARIO PEQUEÑO (para saltar de fecha y ver marcas)
   -------------------------------------------------------------------------- */
.mini-cal { user-select: none; }
.mini-cal__cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mini-cal__cab b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.mini-cal__flechas { display: flex; gap: 2px; }
.mini-cal__flechas button {
  width: 26px; height: 26px; border-radius: 8px; color: var(--texto-3);
  border: 1px solid transparent; font-size: 15px; line-height: 1;
}
.mini-cal__flechas button:hover { background: var(--burbuja); color: var(--texto); }

.mini-cal__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mini-cal__ini {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--texto-3); padding-bottom: 6px;
}
.mini-cal__dia {
  position: relative; aspect-ratio: 1; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
  display: grid; place-items: center; transition: background .12s;
}
.mini-cal__dia:hover { background: var(--burbuja); color: var(--texto); }
.mini-cal__dia.fuera { color: var(--texto-3); opacity: .45; }
.mini-cal__dia.hoy { background: var(--verde-boton); color: var(--sobre-acento); font-weight: 700; }
.mini-cal__dia.elegido { box-shadow: inset 0 0 0 1.5px var(--verde); color: var(--texto); }
.mini-cal__dia i {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--verde);
}
.mini-cal__dia.hoy i { background: var(--sobre-acento); }
.mini-cal__dia.abierta i  { background: var(--salvia); }
.mini-cal__dia.cerrada i  { background: var(--texto-3); }
.mini-cal__dia.prevista i { background: var(--lila); }
.mini-cal__dia.cierre i   { background: var(--arena); }

/* --------------------------------------------------------------------------
   VISTA DE MES DE LA AGENDA
   Aquí no se ven las clases una a una: se ve cuánta carga tiene cada día.
   -------------------------------------------------------------------------- */
.mes {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}
.mes__cab { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--linea); }
.mes__cab div {
  padding: 8px 8px; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: var(--texto-3); border-right: 1px solid var(--linea);
}
.mes__cab div:last-child { border-right: none; }

.mes__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.mes__dia {
  min-height: 92px; padding: 8px 8px; text-align: left;
  border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  display: grid; gap: 8px; align-content: start;
  transition: background .12s;
}
.mes__dia:nth-child(7n) { border-right: none; }
.mes__dia:hover { background: var(--burbuja); }
.mes__dia.fuera { opacity: .38; }
.mes__num {
  font-size: 13px; font-weight: 700;
  display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 8px;
}
.mes__dia.hoy .mes__num { background: var(--verde-boton); color: var(--sobre-acento); font-weight: 700; }
.mes__dato { font-size: 11px; color: var(--texto-2); }
.mes__dato b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.mes__barra { height: 5px; border-radius: 999px; background: var(--burbuja); overflow: hidden; }
.mes__barra i { display: block; height: 100%; border-radius: 999px; }
.mes__vacio { font-size: 11px; color: var(--texto-3); }
.mes__eti {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  justify-self: start; text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 760px) {
  .mes__dia { min-height: 62px; padding: 4px; }
  .mes__dato b { font-size: 13px; }
  .mes__dato span { display: none; }
}

/* Cabecera de día que se puede pulsar para abrir ese día */
.cal__dia.pulsable { cursor: pointer; font: inherit; color: inherit; width: 100%; }
.cal__dia.pulsable:hover { background: var(--burbuja); }
.cal__dia.pulsable:hover b { background: var(--verde-suave); color: var(--texto); }
.cal__dia.pulsable.es-hoy:hover b { background: var(--verde-boton); color: var(--sobre-acento); }

/* --------------------------------------------------------------------------
   FICHA: icono de escribir junto al nombre
   -------------------------------------------------------------------------- */
.ficha__cab {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
}
.ficha__cab .fila__foto { margin-top: 1px; }
.ficha__quien { margin-right: auto; min-width: 0; }
.ficha__tit { display: flex; align-items: center; gap: 8px; }
.ficha__tit h1 { margin: 0; }
.ficha__chat {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--texto-3);
  position: relative;
}
.ficha__chat:hover { background: var(--verde-suave); color: var(--acento-texto); }
.ficha__chat[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 7px);
  transform: translateX(-50%);
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra);
  padding: 4px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 8;
}
.ficha__chat:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   COMUNICACIÓN (lista + hilo)
   -------------------------------------------------------------------------- */
.chat {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(280px, 340px) 1fr;
  background: var(--panel);
  border-top: 1px solid var(--linea);
}
.chat__lista {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--linea); background: var(--panel);
}
.chat__lista-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 8px;
}
.chat__lista-cab h1 { font-size: 18px; margin-right: auto; }
.chat__busca { padding: 0 16px 8px; }
.chat__busca .busca { display: block; width: 100%; min-width: 0; }
.chat__filtros {
  display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap;
}
.chat__filtros button {
  font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 999px;
  background: var(--burbuja); color: var(--texto-2);
}
.chat__filtros button.activa { background: var(--verde-boton); color: var(--sobre-acento); }
.chat__convos { flex: 1; overflow: auto; }
.chat__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 12px 16px;
  border-bottom: 1px solid var(--linea); background: transparent; color: inherit;
}
.chat__item:hover { background: var(--panel-2); }
.chat__item.activa { background: var(--verde-suave); }
.chat__item .fila__foto { width: 42px; height: 42px; border-radius: 50%; font-size: 13px; }
.chat__item-txt { flex: 1; min-width: 0; }
.chat__item-txt b { display: block; font-size: 13px; font-weight: 700; }
.chat__item-txt span {
  display: block; font-size: 12px; color: var(--texto-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat__item-meta {
  display: grid; justify-items: end; gap: 8px; flex: none;
}
.chat__item-meta time { font-size: 11px; color: var(--texto-3); }
.chat__badge {
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--verde-boton); color: var(--sobre-acento);
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.chat__hilo { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fondo); }
.chat__hilo-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--linea);
}
.chat__hilo-cab .fila__foto { width: 40px; height: 40px; border-radius: 50%; font-size: 13px; }
.chat__hilo-cab a { color: inherit; }
.chat__hilo-cab a:hover { color: var(--acento-texto); }
.chat__msgs {
  flex: 1; overflow: auto; padding: 16px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat__dia {
  align-self: center; font-size: 11px; font-weight: 600; color: var(--texto-3);
  background: var(--panel); border: 1px solid var(--linea);
  padding: 4px 8px; border-radius: 999px; margin: 8px 0;
}
.chat__burbuja {
  max-width: min(72%, 520px); padding: 8px 12px 8px;
  border-radius: 14px; font-size: 13px; line-height: 1.45;
  display: grid; gap: 4px;
}
.chat__burbuja time { font-size: 10px; color: var(--texto-3); justify-self: end; }
.chat__burbuja--in {
  align-self: start;
  background: var(--panel); border: 1px solid var(--linea);
  border-bottom-left-radius: 4px;
}
.chat__burbuja--out {
  align-self: end;
  background: var(--verde-boton); color: var(--sobre-acento);
  border-bottom-right-radius: 4px;
}
.chat__burbuja--out time { color: rgba(255,255,255,.75); }
.chat__foto img { display: block; max-width: 240px; max-height: 240px; border-radius: 8px; }
.chat__adjunto {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,.08); font-size: 13px;
}
.chat__adjunto small { color: inherit; opacity: .7; }
.chat__adjunto svg { flex: none; }
.chat__vacio {
  margin: auto; text-align: center; max-width: 360px;
  color: var(--texto-3); font-size: 13px;
}
.chat__pie {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--panel); border-top: 1px solid var(--linea);
}
.chat__pie input {
  flex: 1; min-width: 0;
  background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 999px; padding: 12px 16px; font: inherit; color: var(--texto);
}
.chat__pie input:focus { outline: none; border-color: var(--verde); }
.chat__ico {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--texto-3);
  padding: 0; line-height: 0;
}
.chat__ico svg { display: block; }
.chat__ico:hover { background: var(--burbuja); color: var(--texto); }
.chat__ico--enviar { background: var(--verde-boton); color: var(--sobre-acento); }
.chat__ico--enviar:hover { background: var(--verde-boton); color: var(--sobre-acento); }
.chat__pie small {
  display: none;
}
.chat__volver { display: none; }
@media (max-width: 820px) {
  .chat { grid-template-columns: 1fr; }
  .chat.es-hilo .chat__lista { display: none; }
  .chat:not(.es-hilo) .chat__hilo { display: none; }
  .chat__volver { display: grid; }
}


/* --------------------------------------------------------------------------
   AGENDA A PANTALLA COMPLETA
   --------------------------------------------------------------------------
   Se esconde todo lo que no es la agenda para poder cuadrar la semana con
   la rejilla entera delante. La barra de control se queda arriba pegada.
   -------------------------------------------------------------------------- */
body.agenda-llena .lateral,
body.agenda-llena .cabecera,
body.agenda-llena .cinta { display: none !important; }

body.agenda-llena .app { display: block; }
body.agenda-llena .principal { margin: 0; padding: 0; width: 100%; max-width: none; }

body.agenda-llena .contenido {
  max-width: none; padding: 12px 16px 16px; gap: 12px;
}

/* La barra de Hoy / vistas / filtros se queda a la vista al bajar */
body.agenda-llena .agenda-barra {
  position: sticky; top: 0; z-index: 30;
  background: var(--fondo); padding-top: 8px; padding-bottom: 8px;
}

/* La rejilla se estira hasta abajo del todo */
body.agenda-llena .cal { box-shadow: none; }

/* ==========================================================================
   QUIÉN ESTÁ FUERA
   --------------------------------------------------------------------------
   Una franja por profesor y un cuadradito por día del mes. Se lee de un
   vistazo dónde se queda el centro sin gente, que es lo que hay que mirar
   antes de aprobar unas vacaciones.
   ========================================================================== */
.fuera-cal { display: grid; gap: 4px; overflow-x: auto; }
.fuera-cal__fila { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }
.fuera-cal__quien { font-size: 12.5px; font-weight: 700; }

.fuera-cal__dias { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; min-width: 420px; }
.fuera-cal__dias > span {
  height: 22px; border-radius: 4px; background: var(--burbuja);
  display: block;
}
.fuera-cal__fila--cab .fuera-cal__dias > span {
  height: auto; background: none; text-align: center;
  font-size: 9px; font-weight: 700; color: var(--texto-3);
}
.fuera-cal__fila--cab .fuera-cal__dias > span.finde { color: var(--linea-fuerte); }

/* Cada motivo con su color, y todos distinguibles también por el título al
   pasar por encima: el color solo no basta. */
.fuera-cal__dias > span.fuera--vacaciones,
.fuera-cal__leyenda i.fuera--vacaciones { background: var(--info); }
.fuera-cal__dias > span.fuera--libre,
.fuera-cal__leyenda i.fuera--libre      { background: var(--lila); }
.fuera-cal__dias > span.fuera--permiso,
.fuera-cal__leyenda i.fuera--permiso    { background: var(--ok); }
.fuera-cal__dias > span.fuera--baja,
.fuera-cal__leyenda i.fuera--baja       { background: var(--peligro); }
.fuera-cal__dias > span.fuera--incidencia { background: var(--aviso); }
.fuera-cal__dias > span.pedido,
.fuera-cal__leyenda i.pedido {
  background: repeating-linear-gradient(45deg,
    var(--aviso) 0 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 1px var(--aviso);
}

.fuera-cal__leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: 11.5px; color: var(--texto-3);
}
.fuera-cal__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.fuera-cal__leyenda i { width: 14px; height: 10px; border-radius: 3px; display: block; }

/* El estado de una ausencia en la ficha del profesor: en qué quedó y quién
   la resolvió. Va debajo de los campos, en su propia línea. */
.ausencia__estado {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 2px;
}
.ausencia__estado small { font-size: 11.5px; color: var(--texto-3); }

/* --------------------------------------------------------------------------
   EL PIE DEL LATERAL: QUIÉN ESTÁ DENTRO
   --------------------------------------------------------------------------
   Es un enlace a su cuenta, así que tiene que parecerlo: cambia al pasar por
   encima y lleva una flecha. Antes era un rótulo muerto y nadie sabía que
   ahí se podía tocar.
   -------------------------------------------------------------------------- */
a.usuario {
  text-decoration: none; color: inherit; border-radius: var(--radio-caja);
  transition: background .15s;
}
a.usuario:hover { background: var(--encima); }
a.usuario.usuario--activa { background: var(--encima); }
.usuario__quien { flex: 1; }
.usuario__flecha { color: var(--texto-3); display: flex; flex: none; }
a.usuario:hover .usuario__flecha { color: var(--texto-2); }

/* La foto, si la ha puesto */
img.usuario__foto { object-fit: cover; display: block; }

/* Y si no, sus iniciales en el color que haya elegido */
.usuario__foto--verde  { background: var(--verde-boton); color: var(--sobre-acento); }
.usuario__foto--info   { background: var(--info);        color: #fff; }
.usuario__foto--lila   { background: var(--lila);        color: #fff; }
.usuario__foto--aviso  { background: var(--aviso);       color: #1A1D1F; }
.usuario__foto--peligro{ background: var(--peligro);     color: #fff; }
.usuario__foto--teal   { background: var(--teal);        color: #fff; }

/* --------------------------------------------------------------------------
   TU CUENTA
   -------------------------------------------------------------------------- */
/* La previa arranca arriba del todo, a la misma altura que "Subir una foto".
   Centrada quedaba flotando en medio de los botones. */
.cuenta-foto { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.cuenta-foto__acciones { display: grid; gap: 10px; align-content: start; max-width: 260px; }

.cuenta-foto__grande {
  width: 104px; height: 104px; border-radius: 999px; flex: none;
  display: grid; place-items: center; object-fit: cover;
  font-family: var(--titular); font-size: 34px; font-weight: 700; letter-spacing: -.03em;
}

/* Los colores de las iniciales, cuando no hay foto */
.cuenta-colores { display: flex; gap: 8px; flex-wrap: wrap; }
.cuenta-color {
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  transition: transform .12s;
}
.cuenta-color:hover { transform: scale(1.06); }
.cuenta-color.elegido { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--texto); }

@media (max-width: 900px) {
  #dosCol { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   PESTAÑAS DE SECCIÓN
   --------------------------------------------------------------------------
   Alumnos/Matrículas y Profesores/Ausencias. Son enlaces, no botones: cada
   pestaña sigue siendo su propia página. El globo va dentro de la pestaña
   porque es lo que sustituye al que antes llevaban en el menú.
   -------------------------------------------------------------------------- */
/* Sin la raya de abajo que trae .pestanas: estas van en píldora, y la línea
   por debajo quedaba colgando a lo ancho de la pantalla sin separar nada. */
.pestanas--seccion { display: inline-flex; margin-bottom: 2px; border-bottom: 0; }
.pestanas--seccion a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--texto-3);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.pestanas--seccion a:hover { color: var(--texto); }
.pestanas--seccion a.activa { background: var(--panel); color: var(--texto); }
.pestanas--seccion .globo {
  background: var(--verde-boton); color: var(--sobre-acento);
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
.pestanas--seccion a:not(.activa) .globo { background: var(--aviso); color: #1A1D1F; }

/* --------------------------------------------------------------------------
   DESPLEGABLE CON BUSCADOR
   --------------------------------------------------------------------------
   La caja es igual que un campo normal para que no cante al lado de los
   otros; lo que cambia es que debajo cuelga una lista que se recorta según
   escribes. La lista va en absoluto para no empujar el resto de la ventana,
   y con un tope de alto para que doscientos nombres no se salgan de la
   pantalla: a partir de ahí se pasa la rueda por dentro de la lista.
   -------------------------------------------------------------------------- */
.buscable { position: relative; }

.buscable__caja {
  width: 100%;
  padding: 8px 12px; border-radius: var(--radio-sm);
  background-color: var(--fondo); border: 1px solid var(--linea);
  color: var(--texto); font: inherit; font-size: 13px; font-weight: 500;
  background-image: var(--lupa);
  background-repeat: no-repeat; background-position: left 11px center; background-size: 16px;
  padding-left: 34px;
  transition: border-color .15s, box-shadow .15s;
}
/* Dentro de una ventana manda «.campo input», que tiene más peso que
   «.buscable__caja» y le devolvía el relleno de 12 px: la lupa quedaba
   debajo del nombre. Con el doble selector empatan y gana este, que va
   después. */
.buscable .buscable__caja { padding: 8px 12px 8px 34px; }
.buscable .buscable__caja:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.buscable__caja:hover { border-color: var(--linea-fuerte); }
.buscable__caja:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-suave);
}

.buscable__lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  max-height: 260px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-caja); box-shadow: var(--sombra);
  padding: 6px; display: grid; gap: 1px;
}
.buscable__op {
  text-align: left; width: 100%;
  padding: 8px 10px; border-radius: var(--radio-sm);
  font-size: 13px; font-weight: 500; color: var(--texto);
}
.buscable__op:hover, .buscable__op.marcada { background: var(--verde-suave); color: var(--acento-texto); }
.buscable__nada { padding: 10px; font-size: 12px; color: var(--texto-3); }

/* --------------------------------------------------------------------------
   ARRASTRAR ENCIMA DE OTRA CLASE
   --------------------------------------------------------------------------
   Soltar una clase sobre otra propone compartir coche. Hay que verlo ANTES
   de soltar: se marca la de abajo con el verde de la marca y un latido
   suave, y en ámbar si ahí no se puede. Soltar a ciegas encima de algo que
   ya tiene a alguien asusta, y con razón.
   -------------------------------------------------------------------------- */
.cita.es-diana {
  outline: 2px solid var(--verde);
  outline-offset: 1px;
  box-shadow: 0 0 0 6px var(--verde-suave);
  z-index: 6;
  animation: latido 1.1s ease-in-out infinite;
}
.cita.es-diana--no {
  outline-color: var(--aviso);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--aviso) 18%, transparent);
  animation: none;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 4px var(--verde-suave); }
  50%      { box-shadow: 0 0 0 9px var(--verde-suave); }
}
@media (prefers-reduced-motion: reduce) {
  .cita.es-diana { animation: none; }
}

/* --------------------------------------------------------------------------
   CLASE COMPARTIDA
   --------------------------------------------------------------------------
   Dos alumnos en el mismo coche. Las dos iniciales van montadas una sobre
   otra, como los avatares de un grupo, para que se distinga de una clase
   normal sin leer nada.
   -------------------------------------------------------------------------- */
.cita.compartida .cita__foto {
  background: none; display: flex; align-items: center; width: auto; padding: 0;
}
.cita.compartida .cita__foto i {
  font-style: normal;
  width: 19px; height: 19px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font-size: 8.5px; font-weight: 700; letter-spacing: -.02em;
  background: var(--cita-fuerte); color: #fff;
  box-shadow: 0 0 0 1.5px var(--panel);
}
.cita.compartida .cita__foto i + i { margin-left: -7px; }
.cita.compartida { border-left-width: 4px; }