/* =====================================================================
   Brújula y Bitácora · Colegio Gonzaga
   Lenguaje visual. Sobriedad tipográfica, fidelidad al papel.

   La paleta de la sección 9.2 se conserva como identidad, suavizada:
   los mismos colores, con menos dureza en pantalla, y letra más grande
   para leer cómodo en laptop, tableta y teléfono.
   ===================================================================== */

:root {
  /* --- Identidad institucional, suavizada --- */
  --azul-fuerte:   #2C4574;  /* barra superior */
  --azul-marino:   #3A5488;  /* barras de sección, versalitas blancas */
  --azul-claro:    #5E77A8;  /* acentos y enlaces secundarios */
  --verde-azulado: #3A757C;  /* calendarios de planificación */

  --gris-encabezado: #A8AFBC; /* número de día grande */
  --gris-linea:    #D6DAE1;  /* rayado de escritura */
  --gris-suave:    #E4E7ED;  /* bordes de celda */
  --fondo-bloque:  #F4F6FA;  /* franjas de subtítulo */
  --papel:         #FFFFFF;
  --escritorio-fondo: #ECEEF3;

  --tinta:         #2B3038;
  --tinta-suave:   #5D6675;
  --rojo-discreto: #9C4646;
  --ambar:         #B08033;
  --verde:         #4A7A57;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Source Serif Pro",
           Georgia, "Times New Roman", serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Escalas. El modo de vista y el tamaño de letra las mueven. --- */
  --escala: 1;        /* tipografía */
  --densidad: 1;      /* espaciado y alto de renglón */
  --toque: 0px;       /* relleno extra para el dedo */
  --letra: 1;         /* ajuste fino de tamaño, independiente del modo */

  --ancho: 1240px;
}

/* Modo automático: la pantalla decide. */
@media (max-width: 1100px) and (min-width: 821px) {
  body.modo-automatico { --escala: 1.06; --densidad: 1.22; --toque: 4px; }
}
@media (max-width: 820px) {
  body.modo-automatico { --escala: 1.10; --densidad: 1.42; --toque: 7px; }
}

/* Modos elegidos a mano. Ganan siempre sobre el automático. */
body.modo-laptop  { --escala: 1;    --densidad: 1;    --toque: 0px; }
body.modo-tableta { --escala: 1.06; --densidad: 1.22; --toque: 4px; }
body.modo-movil   { --escala: 1.10; --densidad: 1.42; --toque: 7px; }

/* Cada escalón sube un peldaño: lo que era Normal es ahora el punto de
   partida más holgado, y arriba se añadió un tamaño más para quien lo
   necesite de verdad. Leer cómodo no es un lujo. */
body.letra-grande { --letra: 1.22; }
body.letra-mayor  { --letra: 1.36; }
body.letra-maxima { --letra: 1.52; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  /* Se declara aquí, no en :root: las clases modo-* y letra-* van en el body,
     y una propiedad calculada en :root se sustituiría con los valores de :root. */
  --base: calc(18px * var(--escala) * var(--letra));

  margin: 0;
  background: var(--escritorio-fondo);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--base);
  line-height: 1.5;
}

a { color: var(--azul-marino); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Barra superior y navegación
   --------------------------------------------------------------- */

/* El cintillo de arriba: discreto. Es el marco del trabajo, no el trabajo.
   Se le quitó altura y se le bajó el filo de abajo, que pesaba de más. */
.barra-superior {
  background: var(--azul-fuerte);
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .22);
}

.barra-superior .contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: calc(44px * var(--densidad));
}

.marca {
  font-family: var(--serif);
  font-size: calc(var(--base) * .95);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca .fina { opacity: .58; }

/* El menú del cintillo va en UNA línea y no se parte nunca.

   Antes era `flex-wrap: wrap`, y con el menú completo —diecisiete
   entradas— se repartía en cuatro renglones desiguales, centrados, que
   dejaban el cintillo del triple de alto y con un aire descuidado.

   Ahora ocupa el hueco que queda entre la marca y la identidad, se pega a
   la derecha, y lo que no cabe se recoge en «Más» (lo hace web/menu.js).
   El `overflow: hidden` es a la vez el recorte y la manera de medir: si
   scrollWidth pasa de clientWidth, es que sobra algo. */
.navegacion {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  overflow: hidden;
}
.navegacion > a,
.navegacion > .nav-mas { flex: 0 0 auto; white-space: nowrap; }

.navegacion a {
  color: #D3DBEC;
  font-size: calc(var(--base) * .74);
  /* Menos espaciado y menos relleno que antes: con diecisiete entradas,
     tres píxeles por letra son dos entradas más en la fila. */
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: calc(8px + var(--toque)) calc(10px + var(--toque));
  border-radius: 3px;
}
.navegacion a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.navegacion a.activo { background: #fff; color: var(--azul-fuerte); }

/* --- «Más»: lo que no cupo en la línea ------------------------------
   El panel va `fixed` a propósito. La barra de navegación recorta lo que
   se sale (es como mide), y un panel dentro de ella saldría cortado a la
   mitad; colocándolo respecto a la ventana, el recorte no le afecta y se
   sitúa a mano bajo el botón. */
.nav-mas { position: relative; display: flex; }

.nav-mas-boton {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #D3DBEC;
  font-size: calc(var(--base) * .74);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: calc(8px + var(--toque)) calc(10px + var(--toque));
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-mas-boton:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-mas.abierto .nav-mas-boton,
.nav-mas.dentro .nav-mas-boton { background: #fff; color: var(--azul-fuerte); }

/* La puntita de flecha, dibujada y no escrita: un carácter ▾ cambia de
   tamaño y de peso según la tipografía que haya cargado. */
.nav-mas-punta {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .7;
}

.nav-mas-lista {
  position: fixed;
  z-index: 80;
  display: none;
  flex-direction: column;
  min-width: 200px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.nav-mas.abierto .nav-mas-lista { display: flex; }

.nav-mas-lista a {
  color: var(--tinta);
  text-align: left;
  padding: calc(8px + var(--toque) / 2) 13px;
  border-radius: 2px;
  font-size: calc(var(--base) * .74);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nav-mas-lista a:hover {
  background: var(--bloque);
  color: var(--azul-fuerte);
  text-decoration: none;
}
.nav-mas-lista a.activo { background: var(--azul-fuerte); color: #fff; }

.identidad {
  font-size: calc(var(--base) * .76);
  color: #D3DBEC;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}
.identidad a { color: #fff; }

/* ---------------------------------------------------------------
   El conmutador de vista
   --------------------------------------------------------------- */

.vista { position: relative; }

.vista-boton {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff;
  font-family: var(--serif);
  font-size: calc(var(--base) * .74);
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: calc(5px + var(--toque)) calc(11px + var(--toque));
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.vista-boton:hover { background: rgba(255,255,255,.22); }

.vista-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  background: var(--papel);
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  box-shadow: 0 6px 22px rgba(32,57,107,.20);
  padding: 12px 14px 14px;
  min-width: 250px;
  z-index: 40;
  color: var(--tinta);
}
.vista-panel.abierto { display: block; }

.vista-panel h3 {
  margin: 0 0 7px;
  font-size: calc(var(--base) * .7);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 400;
}
.vista-panel h3 + .vista-opciones { margin-bottom: 14px; }

.vista-opciones { display: flex; flex-direction: column; gap: 3px; }

.vista-opciones a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(7px + var(--toque)) 10px;
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  color: var(--tinta);
  font-size: calc(var(--base) * .86);
}
.vista-opciones a:hover { background: var(--fondo-bloque); text-decoration: none; }
.vista-opciones a.elegido {
  border-color: var(--azul-marino);
  background: var(--fondo-bloque);
  color: var(--azul-marino);
}
.vista-opciones a em {
  font-style: normal;
  font-size: calc(var(--base) * .72);
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------
   Estructura de página
   --------------------------------------------------------------- */

.pagina {
  max-width: var(--ancho);
  margin: calc(20px * var(--densidad)) auto calc(60px * var(--densidad));
  padding: 0 18px;
}

.hoja {
  background: var(--papel);
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(44,69,116,.07);
}

/* Barra de sección: versalitas espaciadas, blancas sobre azul marino. */
.barra-seccion {
  background: var(--azul-marino);
  color: #fff;
  font-size: calc(var(--base) * .74);
  letter-spacing: .20em;
  text-transform: uppercase;
  padding: calc(8px * var(--densidad)) 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 2px 2px 0 0;
}
.barra-seccion.verde { background: var(--verde-azulado); }
.barra-seccion .acciones { display: flex; gap: 14px; letter-spacing: .07em; flex-wrap: wrap; }
.barra-seccion .acciones a { color: #DCE3F1; }
.barra-seccion .acciones a:hover { color: #fff; }

.franja {
  background: var(--fondo-bloque);
  border-bottom: 1px solid var(--gris-suave);
  padding: calc(7px * var(--densidad)) 13px;
  font-size: calc(var(--base) * .74);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------
   Encabezado de la hoja diaria
   --------------------------------------------------------------- */

.encabezado-dia {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: flex-start;
  padding: calc(16px * var(--densidad)) 17px calc(14px * var(--densidad));
  border-bottom: 2px solid var(--azul-marino);
}

.numero-dia {
  font-size: calc(var(--base) * 4.1);
  line-height: .82;
  color: var(--gris-encabezado);
  font-weight: 400;
  letter-spacing: -.02em;
}

.titulo-dia .nombre-dia {
  font-size: calc(var(--base) * 1.06);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--azul-marino);
}
.titulo-dia .mes-anio {
  font-size: calc(var(--base) * .92);
  color: var(--tinta-suave);
  margin-top: 3px;
}
.titulo-dia .conteo {
  font-size: calc(var(--base) * .78);
  color: var(--gris-encabezado);
  letter-spacing: .05em;
  margin-top: 6px;
}

.navegacion-dia { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.navegacion-dia a {
  border: 1px solid var(--gris-suave);
  padding: calc(5px + var(--toque)) calc(11px + var(--toque));
  color: var(--tinta-suave);
  border-radius: 3px;
  font-size: calc(var(--base) * .82);
}
.navegacion-dia a:hover { border-color: var(--azul-marino); color: var(--azul-marino); text-decoration: none; }

/* Calendarios en miniatura */
.calendarios { display: flex; gap: 15px; }

.mini-calendario { font-family: var(--sans); font-size: calc(var(--base) * .62); }
.mini-calendario caption {
  font-family: var(--serif);
  font-size: calc(var(--base) * .68);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: 4px;
}
.mini-calendario table { border-collapse: collapse; }
.mini-calendario td, .mini-calendario th {
  width: calc(var(--base) * 1.05);
  height: calc(var(--base) * .98);
  text-align: center;
  color: var(--tinta-suave);
  font-weight: 400;
}
.mini-calendario th { color: var(--gris-encabezado); font-size: calc(var(--base) * .55); }
.mini-calendario td.hoy {
  background: var(--azul-marino);
  color: #fff;
  border-radius: 2px;
  font-weight: 600;
}
.mini-calendario.grande td, .mini-calendario.grande th {
  width: calc(var(--base) * 1.35);
  height: calc(var(--base) * 1.22);
  font-size: calc(var(--base) * .74);
}

/* ---------------------------------------------------------------
   Leyenda de símbolos
   --------------------------------------------------------------- */

.leyenda-simbolos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: calc(8px * var(--densidad)) 13px;
  background: var(--fondo-bloque);
  border-bottom: 1px solid var(--gris-suave);
}
.leyenda-item { display: inline-flex; align-items: center; gap: 5px; color: var(--tinta-suave); }
.leyenda-item em {
  font-style: normal;
  font-size: calc(var(--base) * .7);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.simbolo { vertical-align: -2px; }
.simbolo-completada { color: var(--verde); }
.simbolo-anulada { color: var(--rojo-discreto); }
.simbolo-delegada { color: var(--verde-azulado); }
.simbolo-reprogramada { color: var(--ambar); }
.simbolo-pendiente { color: var(--gris-linea); }

/* ---------------------------------------------------------------
   Cuerpo de la hoja diaria
   --------------------------------------------------------------- */

.cuerpo-dia { display: grid; grid-template-columns: 1.15fr 1fr; }
.columna-tareas { border-right: 1px solid var(--gris-suave); }

.lista-tareas { width: 100%; border-collapse: collapse; }
.lista-tareas th {
  font-size: calc(var(--base) * .66);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris-encabezado);
  font-weight: 400;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gris-suave);
}
.lista-tareas td {
  border-bottom: 1px solid var(--gris-linea);
  padding: calc(7px * var(--densidad)) 8px;
  vertical-align: top;
  height: calc(30px * var(--densidad));
}
.lista-tareas .col-estado { width: calc(34px + var(--toque) * 2); text-align: center; }
.lista-tareas .col-prioridad {
  width: calc(42px + var(--toque));
  text-align: center;
  font-size: calc(var(--base) * .95);
  letter-spacing: .04em;
  color: var(--azul-marino);
  border-right: 1px solid var(--gris-suave);
  border-left: 1px solid var(--gris-suave);
}
.lista-tareas tr.completada .descripcion { color: var(--tinta-suave); }
.lista-tareas tr.anulada .descripcion { text-decoration: line-through; color: var(--gris-encabezado); }
.lista-tareas tr.reprogramada .descripcion { color: var(--tinta-suave); font-style: italic; }
.lista-tareas tr:hover { background: #FAFBFD; }

.renglon-vacio td { height: calc(30px * var(--densidad)); }

.marca-tarea {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(var(--base) * .76);
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--gris-suave);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.marca-tarea .punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.marca-cuadrante { font-size: calc(var(--base) * .68); color: var(--gris-encabezado); letter-spacing: .09em; }
.nota-al-pie { font-size: calc(var(--base) * .74); color: var(--gris-encabezado); letter-spacing: .03em; }

/* Agenda de citas */
.agenda-citas { width: 100%; border-collapse: collapse; }
.agenda-citas td {
  border-bottom: 1px solid var(--gris-linea);
  height: calc(25px * var(--densidad));
  padding: 3px 8px;
  vertical-align: middle;
}
.agenda-citas td.hora {
  width: calc(50px + var(--toque));
  text-align: right;
  font-size: calc(var(--base) * .8);
  color: var(--tinta-suave);
  border-right: 1px solid var(--gris-suave);
  padding-right: 9px;
}
.agenda-citas tr.media td { border-bottom-style: dotted; }
.agenda-citas tr.media td.hora { color: var(--gris-encabezado); font-size: calc(var(--base) * .7); }
.agenda-citas .cita {
  display: inline-block;
  border-left: 3px solid var(--azul-marino);
  padding-left: 8px;
  font-size: calc(var(--base) * .94);
}
.agenda-citas .cita .lugar { color: var(--tinta-suave); font-size: calc(var(--base) * .78); }
.agenda-citas .cita.roca { border-left-color: var(--verde-azulado); }
.agenda-citas .cita.roca::after {
  content: "gran roca";
  font-size: calc(var(--base) * .66);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--verde-azulado);
  margin-left: 8px;
}

/* Notas del día */
.notas-dia { border-top: 2px solid var(--azul-marino); }
.notas-dia .area {
  min-height: calc(120px * var(--densidad));
  padding: 12px 14px 12px 50px;
  position: relative;
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--base) * 1.5),
    var(--gris-linea) calc(var(--base) * 1.5), var(--gris-linea) calc(var(--base) * 1.5 + 1px));
  background-position: 0 7px;
}
.notas-dia .area::before {
  content: "";
  position: absolute;
  left: 37px; top: 0; bottom: 0;
  border-left: 1px solid var(--rojo-discreto);
  opacity: .30;
}
.notas-dia .area p { margin: 0 0 9px; line-height: calc(var(--base) * 1.5); }

/* ---------------------------------------------------------------
   Piezas comunes
   --------------------------------------------------------------- */

.rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rejilla-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pila > * + * { margin-top: 18px; }

.bloque { padding: calc(14px * var(--densidad)) 15px; }
.bloque + .bloque { border-top: 1px solid var(--gris-suave); }

.ayuda { font-size: calc(var(--base) * .84); color: var(--tinta-suave); line-height: 1.55; }

.ayuda-metodo {
  background: var(--fondo-bloque);
  border-left: 3px solid var(--verde-azulado);
  padding: calc(11px * var(--densidad)) 14px;
  font-size: calc(var(--base) * .86);
  color: var(--tinta-suave);
  line-height: 1.55;
}
.ayuda-metodo strong { color: var(--azul-marino); font-weight: 600; }

.vacio {
  padding: calc(26px * var(--densidad)) 15px;
  text-align: center;
  color: var(--gris-encabezado);
  font-size: calc(var(--base) * .92);
}

.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  background: var(--fondo-bloque);
  font-size: calc(var(--base) * .72);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 400;
  text-align: left;
  padding: calc(8px * var(--densidad)) 11px;
  border-bottom: 1px solid var(--gris-suave);
}
.tabla td {
  padding: calc(9px * var(--densidad)) 11px;
  border-bottom: 1px solid var(--gris-suave);
  vertical-align: top;
}
.tabla tr:hover td { background: #FAFBFD; }

.semaforo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }
.semaforo.verde { background: var(--verde); }
.semaforo.ambar { background: var(--ambar); }
.semaforo.rojo  { background: var(--rojo-discreto); }
.semaforo.sin   { background: var(--gris-suave); }

.etiqueta {
  display: inline-block;
  font-size: calc(var(--base) * .7);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid currentColor;
}

.boton {
  display: inline-block;
  font-family: var(--serif);
  font-size: calc(var(--base) * .8);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: calc(9px + var(--toque)) calc(18px + var(--toque));
  border: 1px solid var(--azul-marino);
  background: var(--azul-marino);
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}
.boton:hover { background: var(--azul-fuerte); text-decoration: none; color: #fff; }
.boton.secundario { background: transparent; color: var(--azul-marino); }
.boton.secundario:hover { background: var(--fondo-bloque); color: var(--azul-marino); }
.boton.pequeno { font-size: calc(var(--base) * .72); padding: calc(5px + var(--toque)) calc(11px + var(--toque)); }

.campo { display: block; margin-bottom: 13px; }
.campo span {
  display: block;
  font-size: calc(var(--base) * .72);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 4px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: calc(var(--base) * .92);
  padding: calc(9px + var(--toque)) 11px;
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  background: var(--papel);
  color: var(--tinta);
}
.campo textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-marino);
  box-shadow: 0 0 0 3px rgba(58,84,136,.13);
}

.aviso {
  padding: calc(11px * var(--densidad)) 14px;
  border-left: 3px solid var(--ambar);
  background: #FCF8F0;
  font-size: calc(var(--base) * .9);
  color: var(--tinta-suave);
}
.aviso.error { border-left-color: var(--rojo-discreto); background: #FBF1F1; }
.aviso.bien  { border-left-color: var(--verde); background: #F1F7F3; }

/* Las doce pestañas */
.pestanas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 15px; }

.pestana {
  display: block;
  border: 1px solid var(--gris-suave);
  border-top: 4px solid var(--azul-marino);
  border-radius: 3px;
  background: var(--papel);
  padding: 12px 13px 14px;
  min-height: calc(130px * var(--densidad));
}
.pestana:hover { text-decoration: none; box-shadow: 0 3px 10px rgba(44,69,116,.14); }
.pestana .numero { font-size: calc(var(--base) * 1.7); line-height: 1; color: var(--gris-encabezado); }
.pestana .nombre { font-size: calc(var(--base) * .96); color: var(--tinta); margin: 6px 0 5px; line-height: 1.35; }
.pestana .pie { font-size: calc(var(--base) * .74); color: var(--tinta-suave); letter-spacing: .05em; line-height: 1.5; }
.pestana.libre { border-top-color: var(--gris-suave); background: #FBFCFD; }
.pestana.libre .nombre { color: var(--gris-encabezado); font-style: italic; }

/* Los cinco verbos */
.verbo { border-bottom: 1px solid var(--gris-suave); }
.verbo:last-child { border-bottom: none; }
.verbo .cabeza { display: flex; align-items: baseline; gap: 11px; padding: calc(10px * var(--densidad)) 15px 3px; flex-wrap: wrap; }
.verbo .nombre { font-size: calc(var(--base) * .92); letter-spacing: .21em; text-transform: uppercase; color: var(--azul-marino); }
.verbo .pregunta { font-size: calc(var(--base) * .9); color: var(--tinta-suave); }
.verbo .guia { font-size: calc(var(--base) * .78); color: var(--gris-encabezado); padding: 0 15px 6px; }
.verbo .texto { padding: 3px 15px 14px; line-height: 1.6; }
.verbo .texto:empty::before { content: "Sin escribir"; color: var(--gris-encabezado); font-style: italic; }

/* Cuadrantes */
.matriz { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gris-suave); }
.matriz .celda {
  border-right: 1px solid var(--gris-suave);
  border-bottom: 1px solid var(--gris-suave);
  padding: calc(12px * var(--densidad)) 14px;
}
.matriz .celda:nth-child(2n) { border-right: none; }
.matriz .celda .titulo { font-size: calc(var(--base) * .8); letter-spacing: .15em; text-transform: uppercase; color: var(--azul-marino); }
.matriz .celda .resumen { font-size: calc(var(--base) * .8); color: var(--tinta-suave); }
.matriz .celda .cifra { font-size: calc(var(--base) * 1.75); color: var(--gris-encabezado); }
.matriz .celda.c2 { background: #F2F7F7; }

/* Barra de medida, sobria, sin gamificación */
.barra-medida { height: 7px; background: var(--gris-suave); border-radius: 4px; overflow: hidden; }
.barra-medida i { display: block; height: 100%; background: var(--verde-azulado); }
.barra-medida.partida { display: flex; }
.barra-medida.partida i { height: 100%; }

/* Los dos servicios que se pagan, uno al lado del otro */
.servicio-costo { text-align: center; }
.servicio-rotulo {
  font-family: var(--sans);
  font-size: calc(var(--base) * .68);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.servicio-costo .tabla { text-align: left; }
.servicio-costo .tabla td { font-size: calc(var(--base) * .8); }
.tabla.apretada td { padding-top: 5px; padding-bottom: 5px; }
td.derecha, th.derecha { text-align: right; }


/* Cifra grande de un informe */
.cifra-grande { font-size: calc(var(--base) * 2.2); line-height: 1.1; color: var(--azul-marino); }
.cifra-rotulo { font-size: calc(var(--base) * .76); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------------------------------------------------------------
   Navegación inferior, para el teléfono
   --------------------------------------------------------------- */

.navegacion-inferior {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--azul-fuerte);
  border-top: 2px solid #22375C;
  z-index: 20;
}
.navegacion-inferior a {
  flex: 1;
  text-align: center;
  padding: calc(11px + var(--toque)) 2px calc(12px + var(--toque));
  color: #D3DBEC;
  font-size: calc(var(--base) * .68);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.navegacion-inferior a.activo { color: #fff; border-top: 2px solid #fff; margin-top: -2px; }

/* ---------------------------------------------------------------
   Adaptación a tableta
   --------------------------------------------------------------- */

@media (max-width: 1100px) {
  .pestanas { grid-template-columns: repeat(3, 1fr); }
  .rejilla-tres { grid-template-columns: 1fr 1fr; }
  .calendarios .mini-calendario:not(.grande) { display: none; }
}

/* En tableta elegida a mano, aunque la ventana sea ancha */
body.modo-tableta .pestanas { grid-template-columns: repeat(3, 1fr); }
body.modo-tableta .calendarios .mini-calendario:not(.grande) { display: none; }

/* ---------------------------------------------------------------
   Adaptación a teléfono
   --------------------------------------------------------------- */

@media (max-width: 820px) {
  .cuerpo-dia, .rejilla-dos, .rejilla-tres { grid-template-columns: 1fr; }
  .columna-tareas { border-right: none; border-bottom: 1px solid var(--gris-suave); }
  .pestanas { grid-template-columns: repeat(2, 1fr); }
  .encabezado-dia { grid-template-columns: auto 1fr; }
  .calendarios { display: none; }
  .navegacion { display: none; }
  .pagina { padding: 0; margin: 10px 0 84px; }
  .hoja { border-left: none; border-right: none; border-radius: 0; }
  .navegacion-inferior { display: flex; }
  .identidad { margin-left: auto; }
  .identidad .nombre-largo { display: none; }
  .vista-panel { right: -8px; }
}

/* Modo teléfono elegido a mano en una pantalla grande:
   un solo panel y todo al alcance del pulgar. */
body.modo-movil .cuerpo-dia,
body.modo-movil .rejilla-dos,
body.modo-movil .rejilla-tres { grid-template-columns: 1fr; }
body.modo-movil .columna-tareas { border-right: none; border-bottom: 1px solid var(--gris-suave); }
body.modo-movil .pestanas { grid-template-columns: repeat(2, 1fr); }
body.modo-movil .calendarios { display: none; }
body.modo-movil .navegacion { display: none; }
body.modo-movil .navegacion-inferior { display: flex; }
body.modo-movil .pagina { max-width: 620px; margin-bottom: 84px; }
body.modo-movil .identidad .nombre-largo { display: none; }

/* ---------------------------------------------------------------
   Dictado y redacción asistida
   --------------------------------------------------------------- */

.asis-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.asis-boton {
  font-family: var(--serif);
  font-size: calc(var(--base) * .74);
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: calc(5px + var(--toque)) calc(12px + var(--toque));
  border: 1px solid var(--gris-suave);
  background: var(--papel);
  color: var(--tinta-suave);
  border-radius: 3px;
  cursor: pointer;
}
.asis-boton:hover { border-color: var(--azul-marino); color: var(--azul-marino); }
.asis-boton:disabled { opacity: .55; cursor: default; }

.asis-boton.voz::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gris-encabezado);
  margin-right: 7px;
  vertical-align: 1px;
}
.asis-boton.voz.activo {
  border-color: var(--rojo-discreto);
  color: var(--rojo-discreto);
}
.asis-boton.voz.activo::before {
  background: var(--rojo-discreto);
  animation: latido 1.3s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.asis-boton.redactar { border-color: var(--verde-azulado); color: var(--verde-azulado); }
.asis-boton.redactar:hover { background: #F2F7F7; }
.asis-boton.sutil { border-style: dashed; }

.asis-aviso { font-size: calc(var(--base) * .76); color: var(--tinta-suave); }
.asis-aviso.bien { color: var(--verde); }
.asis-aviso.malo { color: var(--rojo-discreto); }

textarea.escuchando, input.escuchando {
  border-color: var(--rojo-discreto);
  box-shadow: 0 0 0 3px rgba(156,70,70,.11);
}

textarea.recien-colocado {
  border-color: var(--verde-azulado);
  background: #F5FAFA;
  transition: background .8s, border-color .8s;
}

/* El bloque de dictado corrido */
.dictado-general {
  background: var(--fondo-bloque);
  border-left: 3px solid var(--verde-azulado);
  padding: calc(12px * var(--densidad)) 15px;
}
.dictado-general h3 {
  margin: 0 0 3px;
  font-size: calc(var(--base) * .82);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde-azulado);
  font-weight: 400;
}
.dictado-general textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: calc(var(--base) * .92);
  padding: calc(9px + var(--toque)) 11px;
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  min-height: 76px;
  line-height: 1.55;
  resize: vertical;
  margin-top: 7px;
}
.dictado-general textarea:focus {
  outline: none;
  border-color: var(--verde-azulado);
  box-shadow: 0 0 0 3px rgba(58,117,124,.13);
}

/* En impresión, nada de esto existe */
@media print {
  .asis-barra, .dictado-general { display: none !important; }
}

/* ---------------------------------------------------------------
   Modo laptop elegido a mano: manda sobre el ancho de la ventana.
   Si usted pidió dos columnas, dos columnas se le dan, aunque la
   ventana esté a medio abrir.
   --------------------------------------------------------------- */

body.modo-laptop .cuerpo-dia { grid-template-columns: 1.15fr 1fr; }
body.modo-laptop .rejilla-dos { grid-template-columns: 1fr 1fr; }
body.modo-laptop .rejilla-tres { grid-template-columns: repeat(3, 1fr); }
body.modo-laptop .columna-tareas { border-right: 1px solid var(--gris-suave); border-bottom: none; }
body.modo-laptop .pestanas { grid-template-columns: repeat(4, 1fr); }
body.modo-laptop .calendarios { display: flex; }
body.modo-laptop .calendarios .mini-calendario { display: block; }
body.modo-laptop .navegacion { display: flex; flex-wrap: nowrap; }
body.modo-laptop .navegacion-inferior { display: none; }
body.modo-laptop .encabezado-dia { grid-template-columns: auto 1fr auto; }
body.modo-laptop .pagina { padding: 0 18px; margin: calc(20px * var(--densidad)) auto calc(60px * var(--densidad)); }
body.modo-laptop .hoja { border-left: 1px solid var(--gris-suave); border-right: 1px solid var(--gris-suave); border-radius: 3px; }
body.modo-laptop .identidad .nombre-largo { display: inline; }

/* Y en tableta elegida a mano, la navegación de arriba se conserva. */
body.modo-tableta .navegacion { display: flex; flex-wrap: nowrap; }
body.modo-tableta .navegacion-inferior { display: none; }
body.modo-tableta .cuerpo-dia { grid-template-columns: 1.05fr 1fr; }
body.modo-tableta .rejilla-dos { grid-template-columns: 1fr 1fr; }
body.modo-tableta .columna-tareas { border-right: 1px solid var(--gris-suave); border-bottom: none; }

/* Un modo elegido a mano se maqueta al ancho de ese aparato.
   Si la ventana es más estrecha, la página se desplaza a lo ancho:
   eso es lo que la persona pidió al elegir el modo. */
body.modo-laptop  .barra-superior .contenido,
body.modo-laptop  .pagina  { min-width: 1020px; }
body.modo-tableta .barra-superior .contenido,
body.modo-tableta .pagina  { min-width: 760px; }
body.modo-laptop, body.modo-tableta { overflow-x: auto; }

/* ---------------------------------------------------------------
   Escritura con formato
   --------------------------------------------------------------- */

.fmt-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 7px;
  background: var(--fondo-bloque);
  border: 1px solid var(--gris-suave);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

.fmt-boton {
  font-family: var(--serif);
  font-size: calc(var(--base) * .86);
  min-width: calc(30px + var(--toque));
  padding: calc(4px + var(--toque) / 2) 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tinta-suave);
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.2;
}
.fmt-boton:hover { background: var(--papel); border-color: var(--gris-suave); color: var(--azul-marino); }

.fmt-boton.negrita   { font-weight: 700; }
.fmt-boton.cursiva   { font-style: italic; }
.fmt-boton.subrayado { text-decoration: underline; }
.fmt-boton.tachado   { text-decoration: line-through; }

.fmt-boton.fmt-texto {
  font-size: calc(var(--base) * .72);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fmt-boton.fmt-sutil { color: var(--gris-encabezado); }

.fmt-boton.fmt-abre {
  font-size: calc(var(--base) * .72);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fmt-menu { position: relative; display: inline-block; }

.fmt-panel {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  background: var(--papel);
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  box-shadow: 0 5px 18px rgba(44,69,116,.18);
  padding: 7px;
  z-index: 30;
  white-space: nowrap;
}
.fmt-panel.abierto { display: block; }

.fmt-color {
  width: calc(24px + var(--toque));
  height: calc(24px + var(--toque));
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  cursor: pointer;
  margin: 2px;
  padding: 0;
  vertical-align: middle;
}
.fmt-color:hover { border-color: var(--azul-marino); }
.fmt-color.fmt-ninguno {
  background: var(--papel);
  color: var(--tinta-suave);
  font-size: calc(var(--base) * .9);
  line-height: 1;
}

.fmt-selector {
  font-family: var(--sans);
  font-size: calc(var(--base) * .74);
  padding: calc(4px + var(--toque) / 2) 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tinta-suave);
  border-radius: 3px;
  cursor: pointer;
}
.fmt-selector:hover { background: var(--papel); border-color: var(--gris-suave); }

/* La zona de escritura */
.zona-escritura {
  min-height: calc(84px * var(--densidad));
  padding: calc(10px + var(--toque)) 12px;
  border: 1px solid var(--gris-suave);
  border-radius: 0 0 3px 3px;
  background: var(--papel);
  font-family: var(--serif);
  font-size: calc(var(--base) * .96);
  line-height: 1.6;
  outline: none;
  overflow-wrap: break-word;
}
.zona-escritura:focus {
  border-color: var(--azul-marino);
  box-shadow: 0 0 0 3px rgba(58,84,136,.11);
}
.zona-escritura:empty::before {
  content: attr(data-vacio);
  color: var(--gris-encabezado);
  font-style: italic;
}
.zona-escritura.escuchando { border-color: var(--rojo-discreto); box-shadow: 0 0 0 3px rgba(156,70,70,.11); }
.zona-escritura.recien-colocado { border-color: var(--verde-azulado); background: #F5FAFA; }
.zona-escritura ul, .zona-escritura ol { margin: 4px 0; padding-left: 22px; }
.zona-escritura mark { background: #FBF3D0; padding: 0 2px; }

/* El texto con formato, ya guardado, cuando solo se lee */
.texto-rico { line-height: 1.6; }
.texto-rico ul, .texto-rico ol { margin: 4px 0; padding-left: 22px; }
.texto-rico mark { background: #FBF3D0; padding: 0 2px; }
.texto-rico:empty::before { content: "Sin escribir"; color: var(--gris-encabezado); font-style: italic; }

@media print {
  .fmt-barra { display: none !important; }
  .zona-escritura { border: none; padding: 0; min-height: 0; }
  .zona-escritura mark, .texto-rico mark {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ---------------------------------------------------------------
   La hoja operativa: símbolos que se pulsan y cajones que se abren
   --------------------------------------------------------------- */

.boton-simbolo {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: calc(3px + var(--toque) / 2) calc(5px + var(--toque) / 2);
  cursor: pointer;
  color: inherit;
  line-height: 1;
  vertical-align: middle;
}
.boton-simbolo:hover { background: var(--fondo-bloque); border-color: var(--gris-suave); }
.boton-simbolo.abierto { background: var(--fondo-bloque); border-color: var(--azul-marino); }

.lista-tareas tr.completada .boton-simbolo:hover { border-color: var(--verde); }

.cajon td { padding: 0 !important; height: auto !important; }
.hoja-pestana { border-top: 1px solid var(--gris-suave); }

.asis-boton.abierto {
  border-color: var(--azul-marino);
  color: var(--azul-marino);
  background: var(--papel);
}

/* En el papel, ni cajones ni botones */
@media print {
  .boton-simbolo { border: none; padding: 0; }
  .cajon, .hoja-pestana { display: none !important; }
}

/* ---------------------------------------------------------------
   El aviso de una acción hecha sin recargar
   --------------------------------------------------------------- */

.aviso-vivo {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  background: var(--azul-fuerte);
  color: #fff;
  padding: calc(11px + var(--toque)) 20px;
  border-radius: 3px;
  font-family: var(--serif);
  font-size: calc(var(--base) * .9);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  z-index: 60;
  max-width: 88vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.aviso-vivo.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso-vivo.malo { background: var(--rojo-discreto); }

@media print { .aviso-vivo { display: none !important; } }

/* ---------------------------------------------------------------
   La marca: logotipo, nombre y firma de la casa
   --------------------------------------------------------------- */

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.marca:hover { text-decoration: none; }

.marca-logo { display: flex; color: #fff; opacity: .95; flex: none; }
.marca-logo .logotipo { display: block; }

.marca-texto { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }

.marca-nombre {
  font-family: var(--serif);
  font-size: calc(var(--base) * .95);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.marca-nombre .fina { opacity: .58; }

/* El lema en el cintillo: para quién está hecho esto.
   Va al lado del nombre y no debajo: como tercera línea estiraba la barra
   y la hacía pesada. Aquí se lee y no ocupa. */
.marca-lema {
  display: none;
  font-family: var(--sans);
  font-size: calc(var(--base) * .55);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
  opacity: .42;
  white-space: nowrap;
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, .2);
  align-self: center;
}
@media (min-width: 1320px) { .marca-lema { display: block; } }

/* =====================================================================
   El cintillo, a la medida de cada quien

   Tres alturas. Se eligen en el conmutador de la propia barra —el botón
   que dice el modo de pantalla— y se guardan en la persona, así que valen
   igual en modo institucional y en modo general, y con el menú corto o
   con el completo.

   No es capricho: en un portátil de trece pulgadas los siete píxeles que
   se le quitan a la barra son una fila más de trabajo a la vista, y en un
   monitor grande una barra demasiado fina se pierde.
   ===================================================================== */

/* --- Discreto: lo mínimo -------------------------------------------- */
body.cintillo-discreto .barra-superior .contenido { min-height: calc(36px * var(--densidad)); }
body.cintillo-discreto .marca-nombre { font-size: calc(var(--base) * .80); letter-spacing: .13em; }
body.cintillo-discreto .marca-firma  { display: none; }
body.cintillo-discreto .marca-lema   { display: none !important; }
body.cintillo-discreto .marca-logo   { transform: scale(.86); transform-origin: left center; }
body.cintillo-discreto .navegacion a,
body.cintillo-discreto .nav-mas-boton {
  font-size: calc(var(--base) * .70);
  padding: calc(6px + var(--toque)) calc(9px + var(--toque));
}
body.cintillo-discreto .identidad { font-size: calc(var(--base) * .70); gap: 9px; }
body.cintillo-discreto .vista-boton { padding: 3px 9px; font-size: calc(var(--base) * .70); }

/* --- Amplio: con aire ----------------------------------------------- */
body.cintillo-amplio .barra-superior .contenido { min-height: calc(60px * var(--densidad)); }
body.cintillo-amplio .marca-nombre { font-size: calc(var(--base) * .98); letter-spacing: .17em; }
body.cintillo-amplio .marca-firma  { opacity: .66; }
body.cintillo-amplio .navegacion a,
body.cintillo-amplio .nav-mas-boton {
  font-size: calc(var(--base) * .78);
  padding: calc(10px + var(--toque)) calc(12px + var(--toque));
}
/* En amplio el lema aparece antes: es parte de lo que se quiso al pedirlo */
@media (min-width: 1080px) { body.cintillo-amplio .marca-lema { display: block; } }

/* La firma va en letras separadas: es una firma, no un renglón */
.marca-firma {
  font-family: var(--serif);
  font-size: calc(var(--base) * .58);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: #fff;
  opacity: .62;
  white-space: nowrap;
  padding-left: 1px;
}

/* En el teléfono cabe el logotipo y la firma, no el nombre entero */
@media (max-width: 820px) {
  .marca-nombre { font-size: calc(var(--base) * .82); letter-spacing: .12em; }
  .marca-firma { font-size: calc(var(--base) * .54); letter-spacing: .38em; }
}

/* En el papel, el logotipo va en tinta */
@media print {
  .marca-logo { color: var(--azul-marino); }
}

/* El logotipo grande, en la puerta de entrada */
.puerta-logo {
  display: flex;
  justify-content: center;
  color: var(--azul-marino);
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------
   El cartel de la conexión
   --------------------------------------------------------------- */

.cartel-conexion {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-100%);
  background: var(--ambar);
  color: #fff;
  padding: calc(8px + var(--toque) / 2) 22px;
  border-radius: 0 0 4px 4px;
  font-family: var(--serif);
  font-size: calc(var(--base) * .84);
  letter-spacing: .04em;
  box-shadow: 0 3px 12px rgba(0,0,0,.20);
  z-index: 70;
  max-width: 92vw;
  text-align: center;
  transition: transform .25s;
}
.cartel-conexion.visible { transform: translateX(-50%) translateY(0); }
.cartel-conexion.mandando { background: var(--azul-marino); }
.cartel-conexion.bien { background: var(--verde); }
.cartel-conexion.malo { background: var(--rojo-discreto); }

@media print { .cartel-conexion { display: none !important; } }

/* ---------------------------------------------------------------
   El punto de la firma: separador, no final de frase.
   Va centrado entre las dos palabras y algo más grueso que un punto
   tipográfico, que a este tamaño y con tanto espaciado desaparece.
   --------------------------------------------------------------- */

.marca-firma { display: inline-flex; align-items: center; }

.firma-parte { display: inline-block; }

.firma-punto {
  display: inline-block;
  width: .40em;
  height: .40em;
  border-radius: 50%;
  background: currentColor;
  /* Se come parte del espaciado de la letra anterior para quedar centrado */
  margin: 0 .30em 0 -.16em;
  vertical-align: middle;
  flex: none;
}

/* El texto entero, para quien lee con lector de pantalla */
.firma-lectura {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* En la puerta de entrada, el mismo punto pero a su tamaño */
.puerta-firma { display: flex; align-items: center; justify-content: center; }
.puerta-firma .firma-punto { width: .36em; height: .36em; margin: 0 .26em 0 -.14em; }

/* ---------------------------------------------------------------
   Elegir letra y número con el dedo
   --------------------------------------------------------------- */

.elegir-letra, .elegir-numero { display: flex; gap: 4px; }
.elegir-numero { flex-wrap: wrap; }

.tecla-letra, .tecla-numero {
  position: relative;
  flex: 1;
  min-width: calc(26px + var(--toque));
  cursor: pointer;
}
.tecla-letra input, .tecla-numero input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}

.tecla-letra span, .tecla-numero span {
  display: block;
  text-align: center;
  padding: calc(6px + var(--toque)) 2px;
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  background: var(--papel);
  color: var(--tinta-suave);
  font-family: var(--serif);
  font-size: calc(var(--base) * .88);
  line-height: 1;
}
.tecla-letra span { letter-spacing: .06em; }
.tecla-numero span { font-size: calc(var(--base) * .82); }

.tecla-letra input:hover + span,
.tecla-numero input:hover + span { border-color: var(--azul-marino); color: var(--azul-marino); }

.tecla-letra input:checked + span {
  background: var(--azul-marino);
  border-color: var(--azul-marino);
  color: #fff;
}
.tecla-numero input:checked + span {
  background: var(--verde-azulado);
  border-color: var(--verde-azulado);
  color: #fff;
}

.tecla-letra input:focus-visible + span,
.tecla-numero input:focus-visible + span { box-shadow: 0 0 0 3px rgba(58,84,136,.20); }

.sin-letra-aun { display: block; padding: 8px 2px; }

/* ---------------------------------------------------------------
   La grabadora de notas de voz
   --------------------------------------------------------------- */

.grabadora { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.grabadora .boton.grabando {
  border-color: var(--rojo-discreto);
  color: var(--rojo-discreto);
  background: transparent;
}
.grabadora .boton.grabando::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rojo-discreto);
  margin-right: 8px;
  vertical-align: 1px;
  animation: latido 1.3s ease-in-out infinite;
}

.grabadora-tiempo {
  font-family: var(--sans);
  font-size: calc(var(--base) * .88);
  color: var(--tinta-suave);
  min-width: 46px;
}
.grabadora-tiempo.encendido { color: var(--rojo-discreto); }

.grabadora-oir { height: 36px; max-width: 260px; }

@media print { .grabadora { display: none !important; } }

/* ---------------------------------------------------------------
   El catálogo de paletas
   --------------------------------------------------------------- */

.catalogo-paletas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 11px;
}

.carta-paleta { position: relative; cursor: pointer; display: block; }
.carta-paleta input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}

.carta-cuerpo {
  display: block;
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  padding: 12px 13px 13px;
  background: var(--papel);
  transition: border-color .15s, box-shadow .15s;
}
.carta-paleta input:hover + .carta-cuerpo { border-color: var(--azul-marino); }
.carta-paleta input:focus-visible + .carta-cuerpo { box-shadow: 0 0 0 3px rgba(58,84,136,.18); }

.carta-paleta.elegida .carta-cuerpo,
.carta-paleta input:checked + .carta-cuerpo {
  border-color: var(--azul-marino);
  border-width: 2px;
  padding: 11px 12px 12px;
  box-shadow: 0 2px 8px rgba(44,69,116,.11);
}

.muestra-paleta { display: flex; gap: 0; margin-bottom: 9px; border-radius: 3px; overflow: hidden; }
.muestra-paleta i { display: block; height: 30px; flex: 1; }

.carta-nombre {
  display: block;
  font-family: var(--serif);
  font-size: calc(var(--base) * .96);
  color: var(--tinta);
  margin-bottom: 3px;
}
.carta-idea {
  display: block;
  font-size: calc(var(--base) * .8);
  color: var(--tinta-suave);
  line-height: 1.5;
}

@media print { .catalogo-paletas { display: none !important; } }

/* La firma en el pie de impresión, al tamaño que le toca */
.firma-pie { display: inline-flex; align-items: center; }
.firma-pie .firma-punto { width: .42em; height: .42em; margin: 0 .22em 0 -.10em; }

/* El propósito del sistema, donde haga falta decirlo */
.proposito {
  font-size: calc(var(--base) * .74);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--verde-azulado);
}

/* El botón que encoge y agranda el menú */
.menu-altura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(26px + var(--toque));
  padding: calc(7px + var(--toque)) 6px;
  margin-left: 4px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 3px;
  color: #D3DBEC !important;
  font-size: calc(var(--base) * 1.05);
  line-height: 1;
  text-decoration: none;
}
.menu-altura:hover {
  background: rgba(255,255,255,.14);
  color: #fff !important;
  text-decoration: none;
}

/* --- Apuntes sueltos: la libreta del margen ------------------------- */
.apunte {
  border-left: 3px solid var(--gris-suave);
  padding: 9px 0 9px 12px;
  margin: 0 0 4px 0;
}
.apunte.fijado { border-left-color: var(--verde-azulado); background: var(--fondo-bloque); }
.apunte-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.apunte-acciones { display: flex; gap: 5px; flex-wrap: wrap; }
.apunte-texto {
  font-family: var(--serif);
  font-size: calc(var(--base) * .95);
  line-height: calc(1.55 * var(--densidad));
  color: var(--tinta);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Las tres miradas: panorama, tabla y tablero -------------------- */
.selector-vista {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
}
.selector-vista a { color: var(--tinta-suave); }
.selector-vista a.elegida { color: var(--azul-marino); font-weight: 600; }
.separador-vista {
  width: 1px;
  height: 14px;
  background: var(--gris-suave);
  display: inline-block;
}

.tabla-ancha { overflow-x: auto; }
.tabla-vista td { vertical-align: top; }
.tabla-vista tr.con-retraso td:first-child { border-left: 3px solid var(--rojo-discreto); }

.marca-prioridad {
  font-family: var(--serif);
  font-size: calc(var(--base) * .92);
  color: var(--azul-marino);
  letter-spacing: .04em;
}
.marca-prioridad.letra-A { color: var(--rojo-discreto); font-weight: 600; }
.marca-prioridad.letra-B { color: var(--azul-marino); }
.marca-prioridad.letra-C { color: var(--tinta-suave); }

/* El tablero: columnas por estado */
.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  align-items: start;
}
.tablero-columna {
  background: var(--fondo-bloque);
  border: 1px solid var(--gris-suave);
  border-radius: 4px;
  padding: 10px;
  min-height: 90px;
}
.tablero-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: calc(var(--base) * .7);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gris-suave);
}
.tablero-cuenta {
  background: var(--papel);
  border: 1px solid var(--gris-suave);
  border-radius: 10px;
  padding: 1px 8px;
  letter-spacing: 0;
}
.ficha {
  background: var(--papel);
  border: 1px solid var(--gris-suave);
  border-left: 3px solid var(--gris-linea);
  border-radius: 3px;
  padding: 9px 10px;
  margin-bottom: 8px;
}
.ficha:last-child { margin-bottom: 0; }
.ficha.con-retraso { border-left-color: var(--rojo-discreto); }
.ficha-texto {
  font-family: var(--serif);
  font-size: calc(var(--base) * .9);
  line-height: calc(1.4 * var(--densidad));
  color: var(--tinta);
  margin-bottom: 5px;
  word-break: break-word;
}
.ficha-pie {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--sans);
  font-size: calc(var(--base) * .68);
  color: var(--tinta-suave);
}
.ficha-acciones { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }

/* El panorama: una tarjeta por pestaña */
.panorama-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.panorama-carta {
  border: 1px solid var(--gris-suave);
  border-top: 3px solid var(--azul-marino);
  border-radius: 3px;
  padding: 11px 12px;
  background: var(--papel);
}
.panorama-carta .titulo {
  font-family: var(--serif);
  font-size: calc(var(--base) * .98);
  color: var(--tinta);
  margin-bottom: 6px;
  display: block;
}
.panorama-cifras {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: calc(var(--base) * .72);
  color: var(--tinta-suave);
}
.panorama-cifras b { color: var(--tinta); font-weight: 600; }

@media print {
  .tablero { grid-template-columns: repeat(3, 1fr); }
  .panorama-rejilla { grid-template-columns: repeat(2, 1fr); }
  .selector-vista { display: none; }
}

/* El renglón del vuela pluma: se escribe encima sin que parezca un formulario */
.renglon-editable {
  width: 100%;
  font-family: var(--serif);
  font-size: calc(var(--base) * .95);
  color: var(--tinta);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: calc(3px + var(--toque)) 5px;
}
.renglon-editable:hover { border-color: var(--gris-suave); }
.renglon-editable:focus {
  border-color: var(--azul-claro);
  background: var(--papel);
  outline: none;
}

/* La portada de una hoja para imprimir o pasar a PDF */
.portada-hoja {
  text-align: center;
  padding: 26px 20px 18px;
  border-bottom: 1px solid var(--gris-suave);
}
.portada-hoja .logotipo { color: var(--azul-marino); margin-bottom: 10px; }
.portada-hoja h1 {
  font-family: var(--serif);
  font-size: calc(var(--base) * 1.6);
  letter-spacing: .06em;
  color: var(--tinta);
  margin: 0 0 6px;
}
.portada-hoja p { margin: 2px 0; }

/* --- El catálogo de paletas, plegado por familias ------------------- */
.familia-paleta {
  border: 1px solid var(--gris-suave);
  border-radius: 3px;
  margin-bottom: 7px;
  background: var(--papel);
}
.familia-paleta > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: calc(9px + var(--toque)) 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.familia-paleta > summary::-webkit-details-marker { display: none; }
.familia-paleta > summary::before {
  content: "›";
  color: var(--gris-encabezado);
  font-size: calc(var(--base) * .95);
  transition: transform .15s;
  display: inline-block;
  width: 10px;
}
.familia-paleta[open] > summary::before { transform: rotate(90deg); }
.familia-paleta > summary:hover { background: var(--fondo-bloque); }
.familia-nombre {
  font-family: var(--sans);
  font-size: calc(var(--base) * .82);
  font-weight: 600;
  color: var(--tinta);
}
.familia-idea {
  font-family: var(--sans);
  font-size: calc(var(--base) * .74);
  color: var(--tinta-suave);
  flex: 1;
}
.familia-cuenta {
  font-family: var(--sans);
  font-size: calc(var(--base) * .72);
  color: var(--tinta-suave);
  background: var(--fondo-bloque);
  border: 1px solid var(--gris-suave);
  border-radius: 10px;
  padding: 1px 8px;
}
.familia-paleta[open] > summary { border-bottom: 1px solid var(--gris-suave); }
.familia-paleta .catalogo-paletas { padding: 12px; margin: 0; }

@media (max-width: 620px) {
  .familia-idea { display: none; }
}

/* Una pestaña a medias se ve a medias: rayada y en ámbar, para que
   incomode un poco. Que incomode es el punto. */
.pestana.borrador {
  border-top-style: dashed;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 9px, rgba(176, 128, 51, .05) 9px 18px);
}
.pestana.borrador .numero { color: var(--ambar); }

/* El cintillo que avisa de que se está mirando desde fuera. Va en ámbar y
   no se quita hasta que se sale: mirar en otro modo sin saberlo llevaría
   a decidir cosas sobre una casa que no es la que uno cree. */
.cintillo-mirando {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 22px;
  background: var(--ambar);
  color: #fff;
  font-family: var(--sans);
  font-size: calc(var(--base) * .78);
}
.cintillo-mirando span { flex: 1; }
.cintillo-mirando .boton { background: #fff; color: var(--ambar); border: none; }

/* --- El ojo para ver la clave --------------------------------------- */
.campo-con-ojo {
  position: relative;
  display: block;
}
.campo-con-ojo input {
  width: 100%;
  padding-right: 42px;
}
.ojo-clave {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--gris-encabezado);
  cursor: pointer;
  transition: color .12s;
}
.ojo-clave:hover { color: var(--azul-marino); }
.ojo-clave.abierto { color: var(--verde-azulado); }
.ojo-clave:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 1px;
}
@media print { .ojo-clave { display: none; } }

/* --- El cronograma por etapas --------------------------------------- */
.tabla-cronograma .celda-etapa {
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid var(--gris-suave);
}
.tabla-cronograma .celda-etapa.le-toca { background: var(--fondo-bloque); }
.marca-etapa {
  color: var(--azul-marino);
  font-size: calc(var(--base) * .9);
  line-height: 1;
}
/* El cuadrado dice «solo esta etapa»; el punto, «es de toda la casa».
   Dos formas distintas y no dos colores: en blanco y negro se sigue
   distinguiendo, y esto se imprime. */
.marca-etapa.solo { color: var(--verde-azulado); font-size: calc(var(--base) * .68); }

@media print {
  .tabla-cronograma .celda-etapa.le-toca {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- La marca de agua de la casa ------------------------------------
   Detrás de todo, sin capturar el ratón, y fija: al desplazar la página
   no se arrastra, que es lo que la haría parecer un dibujo suelto.
   La opacidad la pone el servidor, acotada para que no estorbe. */
.marca-de-agua {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-de-agua img {
  /* Grande y hacia la derecha, no centrada. Centrada queda justo debajo de
     las tarjetas, que son blancas y opacas, y no se ve ni asomo. Corrida al
     margen derecho asoma por el costado, que es donde una marca de agua se
     lee sin estorbar una sola línea.

     Alto Y ancho van puestos, con object-fit: contain. Con `height: auto`
     un SVG que no traiga sus propias medidas —solo viewBox, que es lo
     normal— se queda en cero de alto y no se ve nada. Así da igual lo que
     suba cada casa: PNG, JPG o SVG, con medidas o sin ellas. */
  width: min(52vw, 78vh);
  height: min(52vw, 78vh);
  max-width: 760px;
  max-height: 760px;
  object-fit: contain;
  margin-left: auto;
  margin-right: max(-6vw, -90px);
}

/* --- El emblema en el propio cintillo --------------------------------
   Aquí sí se ve: sobre el azul marino, en blanco y a un quince por ciento.
   Va pegado al canto derecho, detrás del menú, sin capturar el ratón. */
.emblema-cintillo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5%;
  width: 150px;
  pointer-events: none;
  display: flex;
  align-items: center;
  /* El recorte va AQUÍ, en el propio emblema, y no en la barra.
     Ponerlo en .barra-superior parecía más simple y rompió el botón de
     vista: el panel de «Automático / Laptop / Tableta» cuelga de la
     barra, y una barra con overflow oculto se lo comía entero. Un
     elemento no debe recortar a sus hermanos para recortarse a sí mismo. */
  overflow: hidden;
}
.emblema-cintillo img {
  width: 100%;
  /* Más alto que su caja: se sale por arriba y por abajo, el recorte de la
     línea de encima lo convierte en marca de agua, y nada de eso alcanza
     al resto del cintillo. */
  height: 150%;
  object-fit: contain;
  opacity: .13;
  /* El escudo viene en el color que venga. Aquí se quiere blanco: se pasa a
     blanco puro con un filtro, que funciona igual con un PNG o con un SVG. */
  filter: brightness(0) invert(1);
}
.barra-superior { position: relative; }
/* Todo lo que se lee va por encima.

   OJO: aquí NO se toca `position`. La primera versión de esta regla ponía
   `position: relative` a la lista entera, y .cartel-conexion, .aviso-vivo
   y .navegacion-inferior son `fixed`. Al volverlos relativos, el cartel de
   conexión —que es ámbar y ocupa todo el ancho— se caía al final del
   documento y aparecía como una franja dorada gruesa cruzando la pantalla.
   Un z-index basta: los que ya están posicionados lo obedecen tal cual, y
   a los que no, se les da lo justo. */
.barra-superior, .cintillo-mirando,
.navegacion-inferior, .aviso-vivo, .cartel-conexion {
  z-index: 21;
}
.pagina {
  position: relative;   /* este sí es estático de nacimiento */
  z-index: 1;
}

@media print {
  /* En papel va en cada hoja, y más tenue todavía: la tinta de una
     impresora carga más que la luz de una pantalla. */
  .marca-de-agua {
    position: fixed;
    opacity: .4;   /* se multiplica con la que ya trae del servidor */
  }
  .marca-de-agua img { width: 4.6in; max-width: none; }
  .marca-de-agua {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}