/* El Japi OS. Azul #0033C3 de la linea grafica del cuadernillo.
   Se disena para telefono y crece a computadora, porque la mayoria de las 63
   personas son gente de piso que solo tiene celular. */

:root{
  --ground:#F4F6FA; --surface:#FFFFFF; --surface-2:#EDF1F8;
  --ink:#0D1524; --ink-soft:#59637A; --ink-faint:#8B94A8;
  --line:#DCE2EE; --line-soft:#E9EDF5;
  --azul:#0033C3; --azul-ink:#0033C3; --azul-soft:#E5EAFA;
  --alerta:#B4530A; --alerta-soft:#FBEFE1;
  --ok:#12744A; --ok-soft:#E3F3EA;
  --sombra:0 1px 2px rgba(13,21,36,.06);
  --sombra-m:0 2px 4px rgba(13,21,36,.05), 0 12px 28px -18px rgba(13,21,36,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#080B12; --surface:#121926; --surface-2:#1A2231;
    --ink:#E9EDF5; --ink-soft:#A2ACC0; --ink-faint:#6C7789;
    --line:#26303F; --line-soft:#1C2432;
    --azul:#7A97FF; --azul-ink:#9AB0FF; --azul-soft:#172449;
    --alerta:#E3A659; --alerta-soft:#2A2014;
    --ok:#48D394; --ok-soft:#12291F;
    --sombra:0 1px 2px rgba(0,0,0,.5);
    --sombra-m:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#080B12; --surface:#121926; --surface-2:#1A2231;
  --ink:#E9EDF5; --ink-soft:#A2ACC0; --ink-faint:#6C7789;
  --line:#26303F; --line-soft:#1C2432;
  --azul:#7A97FF; --azul-ink:#9AB0FF; --azul-soft:#172449;
  --alerta:#E3A659; --alerta-soft:#2A2014;
  --ok:#48D394;
  --sombra:0 1px 2px rgba(0,0,0,.5);
  --sombra-m:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,Helvetica,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--azul-ink)}

/* ---- barra de arriba ---- */
.top{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--azul); color:#fff; position:sticky; top:0; z-index:5;
}
.top .logo{
  height:26px; width:auto; flex:0 0 auto; display:block;
}
.top .quien{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.top .quien b{font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top .quien span{font-size:12px; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* En la portada `.salir` es un `<button>` adentro de un `<form>` (deuda F0.16:
   cerrar la sesion no puede ser un GET) y en las demas pantallas sigue siendo un
   `<a>`. Las dos formas se pintan con ESTA regla y no con dos: dos copias son dos
   verdades y el dia que una cambie la otra queda vieja.

   Los cuatro valores que hacen falta para que un boton se vea como el enlace que
   era, y por que cada uno: `font:inherit` porque el navegador le pone al boton su
   propia tipografia y su propio tamano (sin esto el boton sale en Arial y mide
   distinto, y el alto de la cabecera se mueve en todas las pantallas);
   `background:none` y `border:0` porque de fabrica trae fondo gris y borde con
   relieve; `cursor:pointer` porque el de un boton es la flecha y el de un enlace
   la mano. Va ANTES de `font-size` y `font-weight`: `font` es una abreviatura y
   los reescribiria. En un `<a>` los cuatro no cambian nada, y `.top .salir.casa`
   pisa el fondo con el suyo. Lo mide `tests/test_salir_boton_navegador.py`
   comparando el boton contra un `<a class="salir">` inyectado en la misma
   cabecera, en los dos temas y en los dos anchos.

   EL `<form>` NO NECESITA NI UNA REGLA, y esta medido en Chromium en 375 y en
   1280: como hijo de flex queda del ancho de su contenido, asi que su caja es
   exactamente la que tenia el enlace, y el boton adentro cae en el mismo pixel.
   Se probo tambien con `display:contents` encima y no cambia NADA (misma caja,
   mismo alto de cabecera, mismo hueco), asi que la regla se saco: una linea de
   CSS que ninguna medicion puede poner en rojo es una linea que el proximo va a
   mover creyendo que sostiene algo. Lo que si hace falta es que el `<form>` no
   lleve relleno ni sea un flex con hueco, y eso lo cobra la prueba de posicion. */
.top .salir{
  margin-left:auto; color:#fff; text-decoration:none;
  font:inherit; background:none; border:0; cursor:pointer;
  font-size:13px; font-weight:600;
  opacity:.8; padding:8px; border-radius:8px; flex:0 0 auto;
}
.top .salir:hover{opacity:1; background:rgba(255,255,255,.12)}

.hoja{max-width:1080px; margin:0 auto; padding:16px 16px 48px}

/* ---- franjas ---- */
.franja + .franja{margin-top:24px}
.rot{
  margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
/* El rotulo que abre una seccion NUEVA debajo de otra lista: sin esta
   separacion se lee como un renglon mas de la lista de arriba. Lo ponia un
   atributo `style` con `margin-top:26px` a mano en seis plantillas, y se fue a
   una clase para poder sacar 'unsafe-inline' de `style-src` (F0.19). El valor es FIJO, asi que
   una clase alcanza: nada que dependa de un dato pasa por aca. */
.rot.aparte{margin-top:26px}
/* `ajustes-salud` traia 24 y no 26. Se le conserva el numero A PROPOSITO: este
   paso saca los estilos en linea y no cambia como se ve ninguna pantalla, y hay
   una prueba que mide el `margin-top` calculado de cada rotulo contra lo que el
   navegador media antes. Unificarla con las otras seis es una decision de
   aspecto y va en su propio paso. */
.rot.aparte-24{margin-top:24px}

/* Mi dia */
.midia{display:grid; gap:9px}
.tarj{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sombra);
  text-decoration:none; color:inherit;
}
.tarj:hover{border-color:var(--azul)}
.tarj .ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid;
  place-items:center; background:var(--azul-soft); color:var(--azul-ink);
}
/* Un solo grosor y un solo tamaño: es lo que hace que la cuadrícula se lea
   como una app y no como una hoja con calcomanías. */
.ico-svg{width:20px; height:20px; display:block}
.tarj .cuerpo{min-width:0; flex:1}
.tarj .cuerpo b{display:block; font-size:15px; font-weight:600; line-height:1.3}
.tarj .cuerpo span{display:block; font-size:13px; color:var(--ink-faint); margin-top:2px}
.tarj .fl{color:var(--ink-faint); font-size:19px; flex:0 0 auto}
.tarj.urge{border-color:var(--alerta); background:var(--alerta-soft)}
.tarj.urge .ico{background:color-mix(in srgb, var(--alerta) 16%, transparent); color:var(--alerta)}
.marca{
  flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 8px; border-radius:99px; color:#fff;
  background:var(--azul); border:0; font-family:inherit; cursor:pointer;
}
.marca.pendiente{background:var(--alerta)}

/* Mis aplicaciones */
.sub-rot{
  margin:18px 0 9px; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-soft);
}
.sub-rot:first-of-type{margin-top:0}
.apps + .sub-rot{margin-top:20px}
.apps{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.app{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:14px 8px 12px; display:flex; flex-direction:column; align-items:center;
  gap:8px; box-shadow:var(--sombra); text-align:center; text-decoration:none; color:inherit;
}
.app:hover{border-color:var(--azul); box-shadow:var(--sombra-m)}
.app .em{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--azul-soft); color:var(--azul-ink);
  transition:background .14s, color .14s;
}
.app .em .ico-svg{width:22px; height:22px}
.app:hover .em{background:var(--azul); color:#fff}
.app b{font-size:12px; font-weight:600; line-height:1.25}

/* La Empresa */
.indice{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  overflow:hidden; box-shadow:var(--sombra);
}
.indice .em-chico{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px; display:grid;
  place-items:center; color:var(--ink-faint);
}
.indice .em-chico .ico-svg{width:17px; height:17px}
.indice a:hover .em-chico{color:var(--azul-ink)}
.indice a{
  display:flex; align-items:center; gap:9px; padding:12px 15px;
  text-decoration:none; color:var(--ink); font-size:15px;
  border-top:1px solid var(--line-soft);
}
.indice a:first-child{border-top:0}
.indice a:hover{background:var(--surface-2)}
.indice a .fl{margin-left:auto; color:var(--ink-faint); font-size:17px}

.aviso-uso{
  margin:26px 0 0; padding:12px 14px; border-radius:10px; background:var(--surface-2);
  color:var(--ink-faint); font-size:12.5px; line-height:1.5;
}

/* ---- entrar ---- */
.entrada{
  position:relative;   /* ancla el boton de tema, que va suelto arriba a la derecha */
  min-height:100dvh; display:grid; place-items:center; padding:32px 20px;
  /* Campo azul de Japi, con la luz arriba para que el logo respire. */
  background:
    radial-gradient(120% 80% at 50% -10%, #1B4CE0 0%, rgba(27,76,224,0) 62%),
    linear-gradient(180deg, #0033C3 0%, #00259A 100%);
}
.entrada-centro{width:100%; max-width:430px; display:flex; flex-direction:column; align-items:center}

.marca-grande{
  width:150px; height:auto; margin:0 0 26px; display:block;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.22));
}

.tarjeta-entrada{
  width:100%; background:var(--surface); border-radius:20px; padding:30px 26px 24px;
  box-shadow:0 1px 2px rgba(0,20,80,.12), 0 22px 50px -24px rgba(0,15,60,.55);
}
.tarjeta-entrada h1{
  margin:0; font-size:23px; font-weight:700; letter-spacing:-.024em; text-align:center;
}
.tarjeta-entrada .sub{
  margin:6px 0 22px; text-align:center; color:var(--ink-faint); font-size:14px;
}

/* El botón de Google, primero y con su marca de verdad. */
.google{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:15.5px; font-weight:600; text-decoration:none;
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.google:hover{border-color:var(--ink-faint); box-shadow:0 2px 10px rgba(13,21,36,.09)}
.google:active{transform:translateY(1px)}
.google svg{flex:0 0 auto}

.separa{
  display:flex; align-items:center; gap:12px; margin:20px 0 16px;
  color:var(--ink-faint); font-size:12px; font-weight:500;
}
.separa::before,.separa::after{content:""; flex:1; height:1px; background:var(--line)}

/* La entrada por código: presente pero secundaria. */
/* El nombre siempre en su propia fila: con los tres en una, el campo del
   nombre queda aplastado a cuatro letras y no se ve lo que uno escribe. */
.con-codigo .par{display:grid; gap:8px; grid-template-columns:1fr auto}
.con-codigo .campo{position:relative; min-width:0}
.con-codigo .campo.busca{grid-column:1 / -1}
.con-codigo input{
  width:100%; padding:12px 13px; font:inherit; font-size:14.5px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface-2); color:var(--ink);
}
.con-codigo input::placeholder{color:var(--ink-faint)}
.con-codigo input:focus{
  outline:none; border-color:var(--azul); background:var(--surface);
  box-shadow:0 0 0 3px var(--azul-soft);
}
.con-codigo .codigo-campo{
  text-align:center; text-transform:uppercase; font-weight:700; letter-spacing:.13em;
}
.campo.busca input{padding-right:38px; cursor:pointer}
.campo.busca .chevron{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--ink-faint); pointer-events:auto; cursor:pointer;
  transition:transform .16s;
}
.campo.busca .chevron svg{width:18px; height:18px; display:block}
.campo.busca.abierto .chevron{transform:translateY(-50%) rotate(180deg)}
.campo.busca.listo input{border-color:var(--ok); background:var(--surface); cursor:text}
.campo.busca.listo .chevron{color:var(--ok)}
.con-codigo .ir{
  flex:0 0 auto; padding:12px 17px; font:inherit; font-size:14.5px; font-weight:600;
  background:var(--azul); color:#fff; border:0; border-radius:11px; cursor:pointer;
  transition:filter .14s, transform .14s;
}
.con-codigo .ir:hover{filter:brightness(1.08)}
.con-codigo .ir:active{transform:translateY(1px)}

.sugerencias{
  position:absolute; z-index:9; top:calc(100% + 6px); left:0; right:0; margin:0; padding:5px;
  list-style:none; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 30px -10px rgba(13,21,36,.3);
  max-height:260px; overflow-y:auto; overscroll-behavior:contain;
}
.sugerencias li{
  display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:8px;
  cursor:pointer; line-height:1.3;
}
.sugerencias li b{font-size:14px; font-weight:600}
.sugerencias li span{font-size:12px; color:var(--ink-faint)}
.sugerencias li:hover,.sugerencias li.sobre{background:var(--azul-soft)}

.con-codigo .pie{margin:11px 0 0; font-size:12.5px; color:var(--ink-faint); text-align:center}

.aviso{
  margin:0 0 16px; padding:11px 13px; border-radius:11px; font-size:13.5px;
  background:var(--alerta-soft); color:var(--alerta);
  border:1px solid color-mix(in srgb, var(--alerta) 35%, transparent);
}
.firma{margin:20px 0 0; font-size:12px; color:rgba(255,255,255,.62); letter-spacing:.02em}



/* La lista de gente en la entrada */
.caja input[type="search"]{
  font-size:15px; font-weight:400; letter-spacing:0; text-align:left;
  text-transform:none; margin-bottom:8px;
}
.caja select{
  width:100%; padding:6px; font:inherit; font-size:14.5px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface-2); color:var(--ink);
}
.caja select option{padding:9px 8px; border-radius:7px}
.caja select:focus{outline:2px solid var(--azul); outline-offset:1px}
.caja label.segundo{margin-top:18px}

/* ---- repartir códigos ---- */
.ojo{
  margin:0 0 14px; padding:11px 13px; border-radius:10px; font-size:13px;
  background:var(--azul-soft); color:var(--ink-soft); line-height:1.5;
}
.ojo b{color:var(--ink)}
.botonera{display:flex; gap:9px; flex-wrap:wrap; margin:14px 0 0}
.botonera.atajos{margin:0 0 12px}
.boton{
  padding:11px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  background:var(--azul); color:#fff; border:0; border-radius:10px; text-decoration:none;
  display:inline-block;
}
.boton.fantasma{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.boton:hover{filter:brightness(1.06)}

.lista-gente .fila{
  display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer;
  border-top:1px solid var(--line-soft);
}
.lista-gente .fila:first-child{border-top:0}
.lista-gente .fila:hover{background:var(--surface-2)}
.lista-gente input{width:18px; height:18px; flex:0 0 auto; accent-color:var(--azul)}
.lista-gente .nom{display:flex; flex-direction:column; font-size:14.5px; line-height:1.3; min-width:0}
.lista-gente .nom .puesto{font-size:12.5px; color:var(--ink-faint)}
.marca-estado{
  margin-left:auto; flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:99px;
  background:var(--alerta-soft); color:var(--alerta);
}
.fila.tiene .marca-estado{background:var(--surface-2); color:var(--ink-faint)}

/* Los papelitos que se recortan y se entregan */
.papelitos{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.papelito{
  background:var(--surface); border:1px dashed var(--line); border-radius:12px;
  padding:14px 15px; display:flex; flex-direction:column; gap:3px;
}
.papelito b{font-size:14.5px; font-weight:600; line-height:1.3}
.papelito .puesto{font-size:12px; color:var(--ink-faint)}
.papelito .codigo{
  margin:7px 0 3px; font-size:29px; font-weight:700; letter-spacing:.16em;
  color:var(--azul-ink); font-variant-numeric:tabular-nums;
}
.papelito .donde{font-size:11.5px; color:var(--ink-faint)}

@media print{
  .top, .botonera, .ojo{display:none}
  body{background:#fff}
  .papelito{border-color:#999; break-inside:avoid}
  .papelitos{grid-template-columns:repeat(3,1fr)}
}

/* ---- ajustes ---- */
.pestanas{
  display:flex; gap:2px; padding:0 16px; background:var(--surface);
  border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:0; z-index:4;
}
.pestanas a{
  padding:13px 14px; font-size:14px; font-weight:600; color:var(--ink-soft);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;
}
.pestanas a:hover{color:var(--ink)}
.pestanas a.aqui{color:var(--azul-ink); border-bottom-color:var(--azul)}

.cifras{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin:0 0 20px}
.cifra{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px 15px; display:flex; flex-direction:column; gap:2px;
  text-decoration:none; color:inherit; box-shadow:var(--sombra);
}
.cifra:hover{border-color:var(--azul)}
.cifra .n{font-size:29px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.cifra .t{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint)}
.cifra.ojo .n{color:var(--alerta)}

.elegir-puesto{display:flex; align-items:center; gap:10px; margin:0 0 16px; flex-wrap:wrap}
.elegir-puesto label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.elegir-puesto select{
  flex:1 1 260px; padding:11px 12px; font:inherit; font-size:14.5px;
  border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink);
}

.fila-permiso{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-top:1px solid var(--line-soft); flex-wrap:wrap;
}
.fila-permiso:first-child{border-top:0}
.fila-permiso .nom{display:flex; flex-direction:column; flex:1 1 220px; min-width:0; line-height:1.3}
.fila-permiso .nom b{font-size:14px; font-weight:600}
.fila-permiso .nom span{font-size:12px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.niveles{display:flex; gap:3px; background:var(--surface-2); padding:3px; border-radius:9px; flex:0 0 auto}
.niveles form{display:contents}
.nivel{
  appearance:none; border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:6px;
}
.nivel:hover{color:var(--ink)}
.nivel.puesto{background:var(--surface); color:var(--azul-ink); box-shadow:var(--sombra)}

.fila-uso{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-top:1px solid var(--line-soft);
}
.fila-uso:first-child{border-top:0}
.fila-uso .nom{display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.3}
.fila-uso .nom b{font-size:14px; font-weight:600}
.fila-uso .nom span{font-size:12px; color:var(--ink-faint)}
.fila-uso .veces{
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-soft);
  min-width:34px; text-align:right;
}
.fila-uso .cuando{font-size:12.5px; color:var(--ink-faint); min-width:88px; text-align:right}
.fila-uso.nunca .veces,.fila-uso.nunca .cuando{color:var(--alerta)}
.fila-uso.alerta{background:var(--alerta-soft)}
.marca-estado.bien{background:var(--ok-soft, var(--surface-2)); color:var(--ok)}

/* ---- en computadora ---- */
@media (min-width:760px){
  .hoja{padding:26px 24px 64px}
  .apps{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

  /* Mi día en dos columnas: a la par de un título corto quedaba medio renglón
     vacío y la franja se estiraba al doble de lo que necesita. */
  .midia{grid-template-columns:1fr 1fr; gap:10px}

  /* Lo pendiente ocupa el ancho completo: es lo primero que hay que ver, y
     partido a la mitad se lee como un renglón más. */
  .midia .tarj.urge{grid-column:1 / -1}

  /* La Empresa también: son diez renglones de una línea, en una sola columna
     es una tira larguísima de espacio vacío a la derecha. */
  .indice.dos-columnas{display:grid; grid-template-columns:1fr 1fr}
  .indice.dos-columnas a:nth-child(2){border-top:0}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---- mapa de dependencias ---- */
.pieza{border-top:1px solid var(--line-soft)}
.pieza:first-child{border-top:0}
.pieza summary{
  display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer;
  list-style:none;
}
.pieza summary::-webkit-details-marker{display:none}
.pieza summary:hover{background:var(--surface-2)}
.pieza summary .nom{display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.3}
.pieza summary .nom b{font-size:14px; font-weight:600}
.pieza summary .nom span{font-size:12px; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pieza summary .veces{
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--azul-ink); min-width:30px; text-align:right;
}
.pieza[open] summary{background:var(--surface-2)}
.dentro{padding:4px 14px 12px 14px}
.sub-fila{
  display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13.5px;
  color:var(--ink-soft);
}
.fuente{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-faint);
  background:var(--surface-2); padding:2px 7px; border-radius:99px;
}

/* ---- El conocimiento --------------------------------------------------- */

.buscar-conocimiento{display:flex; gap:9px; margin:0 0 18px}
.buscar-conocimiento input{
  flex:1; min-width:0; padding:11px 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--sombra);
}
.buscar-conocimiento input:focus{
  outline:0; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-soft);
}
.buscar-conocimiento .boton{white-space:nowrap; align-self:stretch; display:flex;
  align-items:center}

/* En el arbol la sangria la pone la PROFUNDIDAD de cada pagina, asi que el
   ícono no puede tener el margen fijo de un indice normal.
   Hasta F0.19 la ponia la plantilla, con un atributo `style` en linea que
   calculaba 15 + 22 por nivel. Eso es un valor que sale de un DATO, y un dato no
   entra en una clase sola; pero el dato aca es la profundidad, que `_arbol` de
   `app.py` corta en 6, o sea SIETE valores conocidos y contados, y con pocos
   valores cerrados la salida es una clase por nivel.

   POR QUE NO UNA VARIABLE DE CSS PASADA POR EL ATRIBUTO, Y QUE ES VERDAD Y QUE
   NO. Todo lo de abajo se midio en el mismo Chromium con el que corren las
   pruebas de navegador, con `style-src 'self'` puesta:

     - `style="--x:37px"` queda BLOQUEADO igual que cualquier otro atributo:
       el navegador reporta `style-src-attr :: inline` y la variable no llega.
       Un atributo es un atributo aunque solo lleve una variable.
     - un permiso POR PEDIDO tampoco alcanza: con un nonce en `style-src` y el
       mismo nonce en el atributo, sigue BLOQUEADO. Los nonce valen para
       ELEMENTOS (`<style>`, `<link>`); a un atributo no se le aplican.
     - pero con 'unsafe-hashes' en `style-src` mas el sha256 del VALOR de cada
       atributo, SI PASA. Y aca los valores son siete y fijos, asi que la via
       EXISTE. Este comentario decia antes que esa via 'no cierra nada', y eso
       es falso: cerraba. Lo que pasa es que cierra peor.

   SE ELIGIERON LAS CLASES IGUAL, y el motivo es que 'unsafe-hashes' es PEOR
   SALIDA, no que sea imposible:
     - son siete hashes en la cabecera, uno por valor;
     - los siete valores quedan duplicados, aca en el CSS y alla en la cabecera,
       y el dia que uno cambie nadie avisa que el otro se quedo viejo;
     - y 'unsafe-hashes' no es un permiso para TU atributo: vale para TODOS los
       atributos `style` de la pagina cuyo valor coincida con alguno de los
       hashes de la lista, o sea que abre mas puerta que la que se pidio.
   Una clase por nivel no cuesta ninguna de las tres.

   Y lo que hay que saber antes de mover esto: el CSSOM NO pasa por `style-src`.
   `el.style.propiedad =`, `cssText` y `setProperty` andan con la CSP cerrada, y
   es por ahi que el JavaScript de la casa mueve lo que tiene que mover. Lo que
   queda bloqueado es `setAttribute('style', ...)`, porque eso si es escribir el
   atributo.
   El nivel 0 lo pone la regla de abajo; del 1 al 6, una clase cada uno. Si
   alguien mueve el tope de `_arbol`, el nivel nuevo se queda sin regla y sin
   sangria: lo cobra `test_el_arbol_sigue_sangrando_por_su_profundidad`, que
   siembra una cadena mas honda que el tope y mide el `padding-left` calculado de
   cada nivel en el navegador. */
.indice.arbol a{padding-left:15px}
.indice.arbol a.hondo-1{padding-left:37px}
.indice.arbol a.hondo-2{padding-left:59px}
.indice.arbol a.hondo-3{padding-left:81px}
.indice.arbol a.hondo-4{padding-left:103px}
.indice.arbol a.hondo-5{padding-left:125px}
.indice.arbol a.hondo-6{padding-left:147px}

.vacio{
  padding:26px 16px; text-align:center; color:var(--ink-soft); font-size:14px;
  background:var(--surface); border:1px dashed var(--line); border-radius:12px;
}

/* La hoja de lectura es mas angosta que el resto: 65 caracteres, no 1080px. */
.lectura{max-width:760px}

/* F0.9. `overflow-wrap:break-word` es lo que separa el TEXTO QUE FLUYE de esta
   hoja de deslizar la pagina ENTERA de lado en un telefono. Medido a 375 px con
   Chromium: una pagina con un enlace de Drive pegado suelto adentro de un
   parrafo daba 965 px de documento en una ventana de 375, con la cabecera azul
   terminando a media pantalla; con la regla puesta da 375. A 1,280 daba 1,353 y
   ahora da 1,280.

   LO QUE ESTA REGLA NO CUBRE, y es lo que no hay que leerle de mas: las CELDAS
   DE UNA TABLA. El corte de palabra no frena a una tabla, porque el ancho de
   una tabla sale del ancho MINIMO de su contenido y `.documento table` no tiene
   ninguna caja que ruede alrededor: la tabla empuja la pagina desde adentro.
   Medido CON la regla puesta: el mismo enlace pegado en una CELDA de una tabla
   markdown deja el documento en 947 px en una ventana de 375, con la celda en
   850, y da lo mismo en la pantalla nueva y en la vieja; en la vieja tambien
   desborda a 1,280, donde da 1,339 contra 1,280. O sea que por el camino de una
   tabla la hoja se sigue deslizando entera, igual que antes de F0.9.
   Eso lo paga F0.18 con una caja que rueda de lado alrededor de cada tabla del
   Markdown (`.documento .tabla-rueda`, mas abajo en este mismo archivo), y NO
   con esta propiedad: subirle la fuerza a `anywhere` aplasta las tablas, que es
   justamente lo que dice el parrafo de mas abajo.

   El enlace pegado NO es un `<a>`: `bloques` no convierte una direccion suelta
   en enlace, asi que el que se pega queda como TEXTO adentro del `<p>`. Por eso
   la regla va en `.documento` y no en `.documento a`, que es donde el ojo la
   buscaria: con ella solo en `.documento a` el documento se queda en 965 px,
   medido. Del lado del `<a>` solo alcanzaria al caso de escribir la direccion
   como texto del enlace, que no es el que pasa cuando alguien pega.

   Y es `break-word` y NO `anywhere`, que es la otra mitad de la decision:
   `anywhere` cuenta los cortes al calcular el ancho minimo del contenido, y el
   ancho de una tabla sale justamente de ese minimo. Medido: con `anywhere` la
   tabla de `:::vista` adentro de `.tabla-ancha` se aplasta de 700 px a 343 y
   deja de rodar de lado, o sea que el desplazamiento que esa caja tiene a
   proposito desaparece y las columnas quedan de una letra. `break-word` no
   toca ese minimo: corta solo donde la caja ya tiene un ancho puesto, que es el
   parrafo. Y no llega al `<pre>`, porque `white-space:pre` no parte lineas:
   los bloques de codigo siguen rodando adentro de su propia caja (medido:
   693 px de rueda en 343 de caja, igual que antes). */
.documento{color:var(--ink); font-size:16px; line-height:1.68; overflow-wrap:break-word}
.documento > :first-child{margin-top:0}
.documento h1{font-size:29px; line-height:1.2; letter-spacing:-.02em; margin:0 0 14px}
.documento h2{font-size:21px; line-height:1.3; margin:30px 0 10px}
.documento h3{font-size:17px; margin:24px 0 8px}
.documento p, .documento ul, .documento ol{margin:0 0 15px}
.documento ul, .documento ol{padding-left:22px}
.documento li{margin:0 0 5px}
.documento a{color:var(--azul-ink); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px}
.documento blockquote{
  margin:0 0 15px; padding:2px 0 2px 16px; border-left:3px solid var(--azul-soft);
  color:var(--ink-soft);
}
.documento code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:var(--surface-2); padding:1.5px 5px; border-radius:5px;
}
.documento pre{
  background:var(--surface-2); padding:14px 16px; border-radius:10px;
  overflow-x:auto; margin:0 0 15px;
}
.documento pre code{background:none; padding:0}
.documento table{border-collapse:collapse; width:100%; margin:0 0 15px; font-size:14px}

/* F0.18. LA CAJA QUE RUEDA ALREDEDOR DE UNA TABLA DEL MARKDOWN, que es lo que
   le faltaba a `.documento table` y lo unico que impide que una tabla deslice
   la PAGINA ENTERA de lado en un telefono.

   El ancho de una tabla sale del ancho MINIMO de su contenido, y ese minimo no
   lo baja `overflow-wrap:break-word`, que es el arreglo de F0.9 y esta puesto
   arriba en `.documento`. Medido en Chromium a 375 px, en las dos pantallas de
   una pagina y en los dos temas: un enlace largo pegado adentro de una CELDA
   dejaba el documento en 930 px, y una tabla de OCHO columnas con palabras
   normales, sin un enlace y sin una palabra larga que cortar, en 589. La
   segunda es la que dice cual es el mecanismo: ahi no hay nada que cortar.

   NO se arregla subiendo esa propiedad a `anywhere`: esa palabra SI cuenta los
   cortes al calcular el ancho minimo, asi que APLASTA la tabla en vez de
   dejarla rodar (medido en F0.9: la tabla de un modulo pasa de rodar 700 px en
   una caja de 343 a medir 343 y dejar de rodar, con columnas de una letra por
   renglon). Una tabla aplastada tambien deja el documento del ancho de la
   ventana, asi que el numero del documento solo no separa un arreglo de otro.

   El `<div>` lo escribe el servidor en `conocimiento.envolver_tablas`, porque la
   libreria de Markdown saca `<table>` sueltas. Es el mismo trato que
   `.tabla-ancha` le da a las tablas de los modulos y de `/recursos`, y es una
   clase aparte porque aquella lleva ademas `position:relative` por los
   `solo-lector` de sus celdas editables, que aca adentro no existen. */
.documento .tabla-rueda{overflow-x:auto}
.documento th, .documento td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft);
}
.documento th{font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint)}
.documento hr{border:0; border-top:1px solid var(--line); margin:26px 0}
.documento img{max-width:100%; height:auto; border-radius:10px}

/* Un enlace [[asi]] se ve distinto de un enlace de afuera, y uno que apunta a
   una pagina sin escribir se ve distinto de los dos: es una tarea, no un error. */
.documento a.wiki{
  text-decoration:none; background:var(--azul-soft); color:var(--azul-ink);
  padding:1px 6px; border-radius:6px; font-weight:600;
}
.documento a.wiki:hover{filter:brightness(.96)}
.documento a.wiki.falta{
  background:none; color:var(--ink-faint); border-bottom:1px dashed var(--ink-faint);
  border-radius:0; padding:0 1px; font-weight:500;
}

/* Una etiqueta escrita en el texto lleva a las demas paginas con esa etiqueta.
   Se ve distinta de un enlace [[asi]]: la etiqueta es un tema, el enlace es una
   pagina. */
.documento a.etiqueta{
  text-decoration:none; font-size:.86em; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); padding:2px 9px; border-radius:99px;
  white-space:nowrap;
}
.documento a.etiqueta:hover{color:var(--azul-ink)}

.escribir{display:flex; flex-direction:column; gap:5px}
.escribir label{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:14px;
}
.escribir label:first-child{margin-top:0}
.escribir .pista{
  text-transform:none; letter-spacing:0; font-weight:500; font-size:11.5px;
  color:var(--ink-faint); margin-left:7px;
}
.escribir input, .escribir textarea{
  width:100%; padding:11px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.escribir textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px;
  line-height:1.6; resize:vertical; min-height:340px;
}
.escribir input:focus, .escribir textarea:focus{
  outline:0; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-soft);
}
.escribir select{
  width:100%; padding:11px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
.escribir select:focus{outline:0; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-soft)}

/* ---- La propuesta de permisos ------------------------------------------- */

.propuesta-asiento{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px 12px; box-shadow:var(--sombra); margin:0 0 11px;
}
.pa-cabeza{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 9px}
.pa-cabeza b{font-size:15px; font-weight:650}
.pa-cabeza .fuente{margin-left:0}
.pa-cabeza form{margin-left:auto}
.pa-quien{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:1px}
.pa-vacio{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.pa-vacio b{color:var(--ink)}

.pa-filas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.pa-filas li{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink-soft); line-height:1.4;
  padding:6px 0 0; border-top:1px solid var(--line-soft);
}
.pa-filas li:first-child{border-top:0; padding-top:0}
/* Lo ya decidido se apaga: la vista sirve para ver lo que FALTA aprobar. */
.pa-filas li.ya{opacity:.5}
.pa-nivel{
  flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 8px; border-radius:99px; min-width:74px;
  text-align:center;
}
.n-ver{background:var(--surface-2); color:var(--ink-soft)}
.n-usar{background:var(--azul-soft); color:var(--azul-ink)}
.n-admin{background:var(--alerta-soft); color:var(--alerta)}
.pa-h{font-weight:650; color:var(--ink); flex:0 0 auto}
.pa-porque{flex:1 1 260px; min-width:0; color:var(--ink-soft)}
.pa-filas .fuente{margin-left:auto}

/* ---- Volver al inicio, imposible de no ver ------------------------------- */

.logo-casa{display:flex; align-items:center; flex:0 0 auto; border-radius:8px}
.logo-casa:hover{opacity:.85}
.top .salir.casa{
  display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.14);
  padding:7px 13px 7px 11px; opacity:1;
}
.top .salir.casa:hover{background:rgba(255,255,255,.26)}
/* La tuerca de Ajustes en el inicio: el mismo boton que "Inicio", pero sin texto,
   asi que el relleno va parejo por los dos lados. Va antes del boton de tema, y el
   margen automatico que manda el grupo a la derecha lo pone ELLA (`.top .salir`);
   el de `.tema` se apaga, porque con dos margenes automaticos el flex reparte el
   hueco entre los dos y el grupo se partiria a la mitad. */
.top .salir.casa.tuerca{padding:7px 9px}
.top .tuerca + .tema{margin-left:0}

.atras{
  display:inline-block; margin:0 0 14px; font-size:13.5px; font-weight:600;
  color:var(--azul-ink); text-decoration:none;
}
.atras:hover{text-decoration:underline}

/* ---- Ajustes en tarjetas, no en pestañas -------------------------------- */

.tarjetas-ajustes{
  display:grid; gap:11px; margin:0 0 22px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.tarjetas-ajustes a{
  display:flex; flex-direction:column; gap:5px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:15px 16px 13px; box-shadow:var(--sombra);
}
.tarjetas-ajustes a:hover{border-color:var(--azul); box-shadow:var(--sombra-m)}
.tarjetas-ajustes b{font-size:16px; font-weight:650; color:var(--ink); letter-spacing:-.01em}
.tarjetas-ajustes span{font-size:13.5px; color:var(--ink-soft); line-height:1.45}
.tarjetas-ajustes em{
  font-style:normal; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:4px;
}
.tarjetas-ajustes em.ojo{color:var(--alerta); background:none; padding:0; border:0}

.pa-botones{display:flex; gap:8px; align-items:center; margin-left:auto}
/* El nivel que la propuesta sugiere, mientras nadie decida otra cosa. */
.nivel.sugerido:not(.puesto){
  border-color:var(--azul); color:var(--azul-ink); border-style:dashed;
}

/* ---- Estado de las apps, como una página de estado ---------------------- */

.titular-estado{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--ok);
  border-radius:12px; padding:15px 17px; box-shadow:var(--sombra); margin:0 0 22px;
}
.titular-estado.mal{border-left-color:var(--alerta)}
.titular-estado.gris{border-left-color:var(--ink-faint)}
.titular-estado.gris > .bolita{background:var(--ink-faint); box-shadow:0 0 0 3px var(--surface-2)}
.titular-estado > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.titular-estado b{font-size:18px; font-weight:650; letter-spacing:-.015em}
.titular-estado span:not(.bolita){font-size:13px; color:var(--ink-soft)}
.titular-estado form{margin-left:auto}
.titular-estado > .bolita{width:13px; height:13px}

.bolita{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-soft);
}
.titular-estado.mal > .bolita, li.mal > .bolita{background:var(--alerta); box-shadow:0 0 0 3px var(--alerta-soft)}
li.gris > .bolita{background:var(--ink-faint); box-shadow:0 0 0 3px var(--surface-2)}

.estado-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.estado-lista li{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:11px 14px; background:var(--surface); border:1px solid var(--line);
  border-bottom:0; font-size:14px;
}
.estado-lista li:first-child{border-radius:12px 12px 0 0}
.estado-lista li:last-child{border-radius:0 0 12px 12px; border-bottom:1px solid var(--line)}
.estado-lista li:only-child{border-radius:12px}
.estado-lista b{font-weight:650; color:var(--ink); flex:0 0 auto}
.estado-lista span:not(.bolita){flex:1 1 200px; min-width:0; color:var(--ink-soft); font-size:13px}
.estado-lista em{
  font-style:normal; margin-left:auto; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);
  background:var(--surface-2); padding:3px 8px; border-radius:99px; white-space:nowrap;
}
.estado-lista li.bien em{background:var(--ok-soft); color:var(--ok)}
.estado-lista li.mal em{background:var(--alerta-soft); color:var(--alerta)}

/* ---- Lo que viene de Notion --------------------------------------------- */

.traidas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.traidas li{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:12px; padding:13px 15px 12px; box-shadow:var(--sombra);
}
.traidas li.v-sirve{border-left-color:var(--ok)}
.traidas li.v-reescribir{border-left-color:var(--alerta)}
.traidas li.v-no-aplica{border-left-color:var(--ink-faint)}
.t-cabeza{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.t-cabeza b{font-size:15.5px; font-weight:650}
.t-botones{display:flex; gap:8px; margin-left:auto}
.t-sello{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-soft);
}
.v-sirve .t-sello{background:var(--ok-soft); color:var(--ok)}
.v-reescribir .t-sello{background:var(--alerta-soft); color:var(--alerta)}
.t-porque{margin:8px 0 0; font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.t-cambios{margin:6px 0 0; font-size:13px; color:var(--ink-faint); line-height:1.5}
.t-cambios b{color:var(--ink-soft)}
.t-veredicto{
  display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap; margin:0 0 22px;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--line);
  border-radius:12px; padding:14px 16px; box-shadow:var(--sombra);
}
.t-veredicto.v-sirve{border-left-color:var(--ok)}
.t-veredicto.v-reescribir{border-left-color:var(--alerta)}
.t-veredicto.v-no-aplica{border-left-color:var(--ink-faint)}
.t-veredicto > div{flex:1 1 260px; min-width:0}
.t-veredicto .t-porque{margin:0}
.t-veredicto form{margin-left:auto}
.documento.lectura{max-width:760px}

/* ---- Claro, oscuro y automático ----------------------------------------- */

/* Adentro del encabezado azul: blanco translucido, como el boton de Inicio. */
.tema{
  display:flex; align-items:center; gap:7px; cursor:pointer; flex:0 0 auto;
  font:inherit; font-size:12.5px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.14); border:0; border-radius:99px;
  padding:7px 13px 7px 11px; margin-left:auto;
}
.tema:hover{background:rgba(255,255,255,.26)}
/* Con el boton de tema al lado, el de la derecha ya no necesita empujar: el que
   se come el hueco libre y manda todo a la derecha es el `margin-left:auto` de
   `.tema`, y con DOS margenes automaticos el flex reparte el hueco entre los dos
   y el de tema se iria al medio. Esta regla apaga el segundo.

   En la portada `.salir` es un boton adentro de un `<form>` (F0.16) y este `+` no
   lo alcanza, y esta bien que no lo alcance: ahi el segundo margen automatico ya
   vale cero solo, porque adentro de un bloque un `margin-left:auto` sobre un
   `inline-block` no empuja nada. Medido en 375 y en 1280: el boton cae en el
   mismo pixel que el enlace de antes. */
.top .tema + .salir{margin-left:0}

/* En la pantalla de entrar no hay encabezado azul: va suelto arriba a la derecha. */
.tema-suelto{
  position:absolute; top:16px; right:16px; z-index:5; margin-left:0;
  color:#fff; background:rgba(255,255,255,.16);
}
.tema-suelto:hover{background:rgba(255,255,255,.3)}
.tema svg{width:16px; height:16px; flex:0 0 auto; display:none}
/* Solo se dibuja el ícono del estado en el que está. */
.tema[data-tema="auto"] .t-auto,
.tema[data-tema="claro"] .t-sol,
.tema[data-tema="oscuro"] .t-luna{display:block}
.tema .t-dice{white-space:nowrap}

/* En pantalla chica el botón se encoge al ícono: la palabra no cabe con el título. */
@media (max-width:620px){
  .tema{padding:8px; gap:0}
  .tema .t-dice{display:none}
}
@media print{ .tema{display:none} }

/* Tablas del Directorio y de Recursos: una sola forma para las dos. */
/* `position:relative` NO es decoracion: sin el, la pantalla se desliza de lado.
   Adentro de cada celda editable de la tabla hay un `<span class="solo-lector">`
   (el texto que solo oye un lector de pantalla), que va `position:absolute`. Su
   ancla es el ancestro posicionado mas cercano, y si no hay ninguno es el BODY:
   entonces se ubica segun donde caeria adentro de una tabla de 1,100 px o mas,
   se escapa del recorte de `overflow-x` y ensancha el DOCUMENTO ENTERO. Medido
   el 23/09/26: 852 px de documento en una pantalla de 375. La pantalla se
   deslizaba hasta quedar EN BLANCO, cabecera incluida, para cualquiera que
   tuviera una celda con "Cambiar".
   Con `relative`, el span se ancla a esta caja, que ya recorta, y no sale de
   ella. Un pixel de `relative` que no mueve nada es lo que lo arregla. */
.tabla-ancha{position:relative; overflow-x:auto}
.tabla-japi{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; font-size:15px}
.tabla-japi th{text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); padding:10px 12px; border-bottom:1px solid var(--line)}
.tabla-japi td{padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.tabla-japi tr:last-child td{border-bottom:0}
.tabla-japi a{color:var(--azul-ink)}
.buscar-directorio, .filtros-recursos select{font:inherit; padding:9px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.buscar-directorio{width:100%; max-width:420px; margin:0 0 14px}
.filtros-recursos{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start}
.recursos .abrir{font-weight:600; white-space:nowrap}
.recursos .falta{color:var(--alerta); font-size:13px}
.recursos .pegar{display:flex; gap:6px; margin-top:6px}
.recursos .pegar input{font:inherit; font-size:13px; padding:5px 8px; min-width:0; flex:1;
  border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--ink)}
.recursos .pegar button{font:inherit; font-size:13px; padding:5px 10px; border:0; border-radius:6px;
  background:var(--azul); color:#fff; cursor:pointer}

/* La grabadora de reuniones */
.aviso-gasto{padding:10px 14px; border-radius:8px; background:var(--alerta-soft); color:var(--alerta);
  border:1px solid var(--alerta); font-size:14px}
.aviso-gasto.tope{font-weight:700}
/* La ventanita de empezar a grabar, encima de la pantalla en la que ya estabas */
.telon{position:fixed; inset:0; background:rgba(13,21,36,.45); display:flex;
  align-items:center; justify-content:center; padding:18px; z-index:50}
.telon[hidden]{display:none}
.ventanita{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--sombra-m); padding:18px 20px 16px; width:min(520px,100%);
  display:flex; flex-direction:column; gap:12px}
.ventanita-cabeza{display:flex; align-items:center; gap:10px}
.ventanita-cabeza h2{margin:0; font-size:19px}
.ventanita .cerrar{margin-left:auto; background:none; border:0; font-size:24px; line-height:1;
  color:var(--ink-faint); cursor:pointer}
.ventanita input[type=text]{font:inherit; padding:11px 13px; border-radius:9px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.ventanita .con-audio{display:flex; gap:8px; align-items:flex-start; font-size:14px}
.ventanita-pie{display:flex; justify-content:flex-end}
.rot-fila{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.rot-fila .rot{margin-right:auto}

/* La pildora que dice que se esta grabando, con la onda del sonido */
.pildora{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center;
  gap:10px; padding:9px 12px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--sombra-m); font-size:15px; font-weight:700}
.pildora[hidden]{display:none}
.pildora canvas{color:var(--azul); width:80px; height:28px}
.btn-chico{font:inherit; font-size:12px; font-weight:700; padding:5px 9px; border-radius:7px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer}
/* Adentro de la ventanita flotante, la pildora ocupa todo: no se ve una tarjeta
   chiquita perdida dentro de una ventana vacia. */
.cuerpo-flotante{margin:0; height:100vh; display:flex; background:var(--surface);
  font-family:inherit}
.cuerpo-flotante .pildora{position:static; box-shadow:none; border:0; border-radius:0;
  width:100%; height:100%; justify-content:center; gap:14px; padding:0 16px; font-size:17px}
.cuerpo-flotante .agarre{display:none}
.cuerpo-flotante canvas{width:120px; height:34px}

/* El memo: casillas de verdad y la marca de tiempo a la derecha */
.pagina-md li.casilla{list-style:none; margin-left:-18px}
.pagina-md li.casilla .cuadro{display:inline-block; width:14px; height:14px; margin-right:8px;
  border:1.5px solid var(--ink-faint); border-radius:4px; vertical-align:-2px;
  position:relative}
.pagina-md .cuando{font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.acciones-memo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px}
.acciones-memo a{text-decoration:none; display:inline-block}
.btn-grabar, .btn-terminar{font:inherit; font-weight:700; padding:10px 18px; border-radius:8px;
  border:0; cursor:pointer}
.btn-grabar{background:var(--azul); color:#fff}
.btn-terminar{background:var(--surface-2); color:var(--ink); border:1px solid var(--line)}
.btn-grabar:disabled, .btn-terminar:disabled{opacity:.5; cursor:default}
#en-curso{display:flex; align-items:center; gap:10px; font-size:17px}
#en-curso[hidden]{display:none}
.punto-rojo{width:12px; height:12px; border-radius:50%; background:#D0342C;
  animation:latido 1.2s ease-in-out infinite}
@keyframes latido{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.punto-rojo{animation:none}}
.lista-reuniones{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.lista-reuniones a{color:var(--azul-ink); font-weight:600}
.chip-estado{font-size:12px; padding:2px 8px; border-radius:99px; background:var(--surface-2);
  color:var(--ink-soft); margin-left:6px}
.chip-estado.lista, .chip-estado.confirmado{background:var(--ok-soft); color:var(--ok)}
.chip-estado.error, .chip-estado.rechazado, .chip-estado.en_espera{background:var(--alerta-soft); color:var(--alerta)}
.botones-si-no{display:flex; gap:10px}
.invitar-lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:6px 14px;
  max-height:340px; overflow:auto; margin:0 0 12px; padding:8px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface)}
.invitar-lista label{display:flex; gap:6px; align-items:baseline; font-size:14px}
.invitar-lista label[hidden]{display:none}
.transcripcion{margin-top:18px}
.transcripcion pre{white-space:pre-wrap; font:inherit; font-size:14px; color:var(--ink-soft)}

/* Los botones redondos de la pildora: pausar y terminar */
.btn-redondo{display:inline-flex; align-items:center; justify-content:center; width:32px;
  height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); cursor:pointer}
.btn-redondo.parar{background:#FBE3E1; border-color:#F3C4BF; color:#C0392B}
:root:not([data-theme="light"]) .btn-redondo.parar{background:#3A1A16; border-color:#5B2A24; color:#F0A79C}
:root[data-theme="dark"] .btn-redondo.parar{background:#3A1A16; border-color:#5B2A24; color:#F0A79C}
.btn-redondo:disabled{opacity:.5; cursor:default}
.pildora .agarre{cursor:grab; color:var(--ink-faint); font-size:13px; letter-spacing:-2px;
  touch-action:none; user-select:none}
.pildora.en-pausa .punto-rojo{animation:none; opacity:.35}
.pildora.en-pausa canvas{opacity:.35}

/* La grabadora: sin punto rojo mientras se esperan los permisos ni si la grabacion
   se murio, y los renglones de aviso que se quedan a la vista (static/grabadora.js). */
.pildora.esperando .punto-rojo, .pildora.muerta .punto-rojo{display:none}
.pildora.esperando canvas, .pildora.muerta canvas{opacity:.35}
.pildora .aviso-pildora{font-size:12px; font-weight:600; color:var(--ink-soft);
  max-width:230px; line-height:1.25; white-space:normal}
.pildora .aviso-pildora[hidden], .pildora .btn-chico[hidden]{display:none}
.pildora.muerta .aviso-pildora{color:var(--alerta)}
.cuerpo-flotante .pildora{flex-wrap:wrap}

/* La reunion a la que le falta un tramo de audio, y el boton de volver a intentar
   cuando fallo la transcripcion (templates/reunion.html). */
.aviso-tramo{background:var(--alerta-soft); color:var(--alerta); font-weight:600;
  border-radius:8px; padding:10px 14px; margin:0 0 14px}
.reintentar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px}

/* ---- Los bloques de una pagina: aviso, desplegable, columnas y marcador ----
   Paso A2 de docs/PLAN.md (paso 2 de la seccion 7 de docs/NOTION.md), con las
   medidas de la seccion 6.2. Los pinta `bloques.pintar`, con clases de una lista
   blanca fija: el nombre que escribio una persona nunca llega a un `class`.

   Todo color sale de las variables de arriba, para que el modo oscuro salga solo.
   Sin emoji: el icono del aviso es un glifo de linea (seccion 6.3).

   Las reglas de adentro van con `.bloque` adelante a proposito: `.documento p` y
   `.documento pre` ya ponen margenes y fondo, y sin ese peso de mas les ganarian. */

/* `--ok-soft` falta en el bloque de tema oscuro FORZADO de arriba (lo usa tambien
   `.chip-estado.lista`): sin esto, un `:::listo` sale verde claro sobre verde claro
   para quien fijo el tema a mano. Es el mismo valor que ya usa el tema automatico. */
:root[data-theme="dark"]{ --ok-soft:#12291F; }

/* Aviso: fondo suave, sin borde, glifo de 20px en una columna de 28px. */
.bloque.aviso{
  display:flex; align-items:flex-start; border:0; border-radius:10px;
  padding:14px 16px; margin:0 0 14px; background:var(--surface-2); color:var(--ink);
}
.bloque .aviso-glifo{
  flex:0 0 auto; width:20px; height:20px; margin:1px 8px 0 0; color:var(--ink-soft);
}
.bloque .aviso-cuerpo{flex:1 1 auto; min-width:0; font-size:15px; line-height:1.55}
.bloque .aviso-titulo{
  margin:0 0 4px; font-size:15px; font-weight:700; line-height:1.35; color:var(--ink);
}
.bloque .aviso-cuerpo > :first-child{margin-top:0}
.bloque .aviso-cuerpo > :last-child{margin-bottom:0}

.bloque.aviso-azul{background:var(--azul-soft)}
.bloque.aviso-azul .aviso-glifo{color:var(--azul-ink)}
.bloque.aviso-ambar{background:var(--alerta-soft)}
.bloque.aviso-ambar .aviso-glifo{color:var(--alerta)}
.bloque.aviso-verde{background:var(--ok-soft)}
.bloque.aviso-verde .aviso-glifo{color:var(--ok)}
.bloque.aviso-gris{background:var(--surface-2)}
.bloque.aviso-gris .aviso-glifo{color:var(--ink-soft)}

/* Desplegable: `<details>` nativo, sin una linea de JavaScript. La zona de toque
   llega a 44px de alto, que es lo que se acierta con el dedo. */
.bloque.desplegable{margin:0 0 14px}
.bloque.desplegable > summary{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:9px 2px;
  font-size:16px; font-weight:600; color:var(--ink); cursor:pointer;
  list-style:none; border-radius:8px;
}
.bloque.desplegable > summary::-webkit-details-marker{display:none}
.bloque.desplegable > summary::before{
  content:""; flex:0 0 auto; width:10px; height:10px; margin-left:4px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:rotate(-45deg); transition:transform .15s ease;
}
.bloque.desplegable[open] > summary::before{transform:rotate(45deg)}
.bloque.desplegable > summary:hover{background:var(--surface-2)}
.bloque.desplegable > summary:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
.bloque .desplegable-cuerpo{padding:2px 0 4px 22px}
.bloque .desplegable-cuerpo > :first-child{margin-top:0}
.bloque .desplegable-cuerpo > :last-child{margin-bottom:0}

/* Columnas: 2 o 3 iguales, 24px de separacion. Bajo 700px se apilan en una sola,
   porque en un telefono tres columnas son tres palabras por renglon. */
.bloque.columnas{display:grid; gap:24px; align-items:start; margin:0 0 16px}
.bloque.columnas.col-1{grid-template-columns:1fr}
.bloque.columnas.col-2{grid-template-columns:1fr 1fr}
.bloque.columnas.col-3{grid-template-columns:1fr 1fr 1fr}
.bloque.columnas > .columna{min-width:0}
.bloque.columnas > .columna > :first-child{margin-top:0}
.bloque.columnas > .columna > :last-child{margin-bottom:0}
/* El corte va en 700 px y no en 620 px, que es lo que decia la seccion 6.2 de
   docs/NOTION.md. Lo cambio la instruccion del paso A2, que manda sobre el
   documento: con tres columnas de 24 px de separacion, a 620 px cada una queda en
   unos 180 px, que son dos o tres palabras por renglon. A 700 px se apilan antes y
   se leen. El unico costo es que una tablet angosta ve una sola columna.

   Las tres clases van nombradas una por una a proposito: con solo
   `.bloque.columnas` aqui, `.bloque.columnas.col-3` de arriba pesa mas y le gana
   aunque este dentro de la consulta, y en el telefono quedaban tres columnas de
   una palabra. Una consulta de medios no suma peso: hay que igualarlo. */
@media (max-width:699px){
  .bloque.columnas.col-1, .bloque.columnas.col-2, .bloque.columnas.col-3{
    grid-template-columns:1fr; gap:16px;
  }
}

/* Marcador: toda la tarjeta es el enlace. No sale a internet a buscar nada: el
   titulo es el que escribio la persona y el dominio sale de la misma direccion. */
a.bloque.marcador{
  display:flex; flex-direction:column; gap:3px; text-decoration:none;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  margin:0 0 14px; background:var(--surface); color:var(--ink);
}
a.bloque.marcador:hover{border-color:var(--azul); background:var(--surface-2)}
a.bloque.marcador:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
.bloque.marcador .marcador-titulo{font-size:14px; font-weight:600; color:var(--ink)}
.bloque.marcador .marcador-dominio{
  font-size:12px; color:var(--ink-faint); word-break:break-all;
}

/* Lo que no llego a ser bloque: un `:::` sin cerrar o un nombre que no conocemos.
   Se ve en gris, con cada letra de lo que se escribio, en vez de desaparecer. */
.bloque.crudo{margin:0 0 14px}
.bloque .crudo-aviso{
  margin:0 0 5px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.bloque .crudo-texto{
  margin:0; padding:10px 12px; background:var(--surface-2); border-radius:8px;
  border-left:3px solid var(--line); color:var(--ink-faint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  line-height:1.5; white-space:pre-wrap; word-break:break-word;
}

/* El renglon que sale arriba cuando una pagina pasa el tope de bloques de
   `bloques.TOPE_TRAMOS`: de ahi para abajo se ve como texto. Es llano a proposito,
   porque no es un error de quien escribe sino un limite de la herramienta. */
.bloque.tope-bloques{
  margin:0 0 14px; padding:9px 12px; border-radius:8px;
  background:var(--alerta-soft); border-left:3px solid var(--alerta);
}
.bloque.tope-bloques .crudo-aviso{margin:0; color:var(--alerta)}

/* El texto crudo DENTRO de una pagina del conocimiento (`conocimiento.pintar`,
   cuando una pagina o un parrafo pasa del presupuesto) se lee entero, y son
   decenas de miles de letras: con el gris tenue de un aviso de bloque se lee mal.
   Va con el color de texto normal. La caja gris y el borde se quedan, que son
   los que dicen "esto es texto, no formato". Van las DOS clases: una reunion usa
   `.pagina-md` y una pagina del conocimiento usa `.documento`. */
.pagina-md .bloque .crudo-texto,
.documento .bloque .crudo-texto{color:var(--ink)}

/* ---- El indice y las casillas de una pagina (paso A3) ----------------------
   El indice lo pinta `bloques.pintar_pagina` con `:::indice`: un `<nav>` con la
   lista anidada de los titulos h1 a h3, cada uno con su ancla `#t-...`.
   Las casillas las pone la pasada propia de `bloques.py`, con el MISMO marcado
   que `reuniones.casillas` deja en las notas de reunion: alla el contenedor es
   `.pagina-md` y aca es `.documento`, y por eso la regla del cuadro vacio se
   repite en vez de tocar la de arriba. Lo de `.hecha` NO se repite: desde F0.7
   una nota tambien distingue `- [x]` de `- [ ]`, y las dos pantallas comparten
   la misma regla, con los dos contenedores en la lista de selectores. Una
   casilla marcada no puede verse de una forma en una reunion y de otra en una
   pagina.
   Todo color sale de las variables de la hoja: el modo oscuro sale solo. */
.bloque.indice{
  margin:0 0 18px; padding:10px 14px; border-radius:10px;
  background:var(--surface-2); border-left:3px solid var(--line);
}
.bloque.indice ul{margin:0; padding:0 0 0 14px; list-style:none}
.bloque.indice > ul{padding-left:0}
.bloque.indice li{margin:0}
.bloque.indice a{
  display:inline-block; padding:4px 0; font-size:13px; font-weight:500;
  line-height:1.35; color:var(--ink-soft); text-decoration:none;
  word-break:break-word;
}
.bloque.indice a:hover{color:var(--azul); text-decoration:underline}
.bloque.indice a:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* La casilla es un cuadro dibujado, no un control: una pagina se lee, y lo que
   se marca se marca escribiendo `- [x]` en el texto. Por eso no hay `<input>`
   que tocar ni nada que deshabilitar. */
.documento li.casilla{list-style:none; margin-left:-18px}
.documento li.casilla .cuadro{
  display:inline-block; width:14px; height:14px; margin-right:8px;
  border:1.5px solid var(--ink-faint); border-radius:4px; vertical-align:-2px;
  position:relative;
}
/* Marcada se tiene que VER marcada: cuadro lleno y un cheque dibujado con dos
   bordes, sin imagen ni emoji. El cheque va del color del fondo de la pagina,
   asi sale bien en claro (azul oscuro con cheque blanco) y en oscuro (azul
   claro con cheque oscuro) sin escribir un solo color a mano. */
.documento li.casilla.hecha .cuadro,
.pagina-md li.casilla.hecha .cuadro{
  background:var(--azul); border-color:var(--azul);
}
.documento li.casilla.hecha .cuadro::after,
.pagina-md li.casilla.hecha .cuadro::after{
  content:""; position:absolute; left:3.5px; top:.5px; width:4px; height:8px;
  border:solid var(--surface); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* --- La página como se lee en Notion (paso A6) -----------------------------
   Sección 6.1 de docs/NOTION.md, medida por medida. Todo esto cuelga de
   `.hoja-pagina`, que solo existe cuando `config.PAGINAS` está prendido: ni una
   de estas reglas alcanza a la pantalla de hoy, y por eso el bloque va al final
   y no toca `.documento` ni `.lectura`, que siguen siendo las de siempre.
   Ni un color escrito a mano: todo sale de las variables de arriba, así el modo
   oscuro sale solo. */
.hoja-pagina{max-width:752px}

/* La portada llega hasta el borde de la hoja: por eso el margen negativo, que
   es exactamente el relleno de `.hoja`. */
.hoja-pagina .portada{
  height:96px; margin:-16px -16px 0; border-radius:0 0 14px 14px;
}
.hoja-pagina .portada-azul{
  background:linear-gradient(135deg, var(--azul-soft),
             color-mix(in srgb, var(--azul) 26%, transparent));
}
.hoja-pagina .portada-teal{
  background:linear-gradient(135deg, var(--ok-soft),
             color-mix(in srgb, var(--azul) 22%, transparent));
}
.hoja-pagina .portada-naranja{
  background:linear-gradient(135deg, var(--alerta-soft),
             color-mix(in srgb, var(--alerta) 34%, transparent));
}
.hoja-pagina .portada-ambar{
  background:linear-gradient(135deg, var(--surface-2),
             color-mix(in srgb, var(--alerta) 22%, transparent));
}
.hoja-pagina .portada-vino{
  background:linear-gradient(135deg, color-mix(in srgb, var(--alerta) 24%, transparent),
             color-mix(in srgb, var(--azul) 34%, transparent));
}
.hoja-pagina .portada-gris{
  background:linear-gradient(135deg, var(--surface-2), var(--line));
}

/* Migas: en pantalla grande el camino entero, en celular solo la de arriba,
   como el `.atras` de siempre. El corte es el que ya usa la hoja. */
.hoja-pagina .migas{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
  font-size:13px; font-weight:500; color:var(--ink-faint); margin:14px 0 0;
}
.hoja-pagina .migas a{color:var(--ink-faint); text-decoration:none}
.hoja-pagina .migas a:hover{color:var(--azul-ink); text-decoration:underline}
.hoja-pagina .migas .aqui{color:var(--ink-soft)}
.hoja-pagina .atras.arriba{display:none; margin:14px 0 0}
@media (max-width:620px){
  .hoja-pagina .migas{display:none}
  .hoja-pagina .atras.arriba{display:inline-block}
}

/* El icono es un glifo de iconos.py, no un emoji (decisión 6.3). */
.hoja-pagina .icono-pagina{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:var(--azul-soft); color:var(--azul-ink); margin:16px 0 10px;
}
.hoja-pagina .icono-pagina .ico-svg{width:32px; height:32px}
.hoja-pagina .icono-pagina.sobre-portada{
  margin-top:-28px; border:3px solid var(--ground);
}

.hoja-pagina .titulo-pagina{
  font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-.02em;
  color:var(--ink); margin:10px 0 12px;
}

/* Las propiedades: una fila que envuelve, con una línea debajo. */
.hoja-pagina .props{
  display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; font-weight:500;
  color:var(--ink-soft); padding-bottom:12px; margin:0 0 20px;
  border-bottom:1px solid var(--line-soft);
}
.hoja-pagina .prop{display:inline-flex; align-items:center; gap:6px}
.hoja-pagina .rot-prop{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.hoja-pagina .prop b{font-weight:600; color:var(--ink-soft)}
/* Pasó de un año sin revisar: el mismo catalogo.VEJEZ de toda la app. */
.hoja-pagina .prop.vieja b{color:var(--alerta)}
.hoja-pagina .prop.marcada{
  font-weight:700; color:var(--alerta); background:var(--alerta-soft);
  padding:2px 9px; border-radius:99px;
}
.hoja-pagina a.prop.etiqueta{
  text-decoration:none; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); padding:2px 9px; border-radius:99px;
  white-space:nowrap;
}
.hoja-pagina a.prop.etiqueta:hover{color:var(--azul-ink)}

/* El índice de la plantilla. Cerrado de entrada: abierto se come la primera
   pantalla de un teléfono, que es donde empieza a leerse la página. */
.hoja-pagina .indice-pagina{
  margin:0 0 18px; padding:0 14px; border-radius:10px;
  background:var(--surface-2);
}
.hoja-pagina .indice-pagina summary{
  display:flex; align-items:center; min-height:44px; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.hoja-pagina .indice-pagina nav{display:flex; flex-direction:column; padding:0 0 8px}
.hoja-pagina .indice-pagina a{
  font-size:13px; font-weight:500; line-height:1.35; color:var(--ink-soft);
  text-decoration:none; padding:4px 0; word-break:break-word;
}
.hoja-pagina .indice-pagina a.n3{padding-left:14px}
.hoja-pagina .indice-pagina a:hover{color:var(--azul); text-decoration:underline}
.hoja-pagina .indice-pagina a:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* El cuerpo: 16 px con interlineado 1.6 y párrafos más juntos que los de hoy. */
.hoja-pagina .documento{font-size:16px; line-height:1.6}
.hoja-pagina .documento p,
.hoja-pagina .documento ul,
.hoja-pagina .documento ol{margin:0 0 10px}
.hoja-pagina .documento ul,
.hoja-pagina .documento ol{padding-left:24px}
.hoja-pagina .documento li{margin:0 0 3px}
.hoja-pagina .documento h1{font-size:26px; line-height:1.25; margin:32px 0 8px}
.hoja-pagina .documento h2{font-size:21px; line-height:1.25; margin:28px 0 6px}
.hoja-pagina .documento h3{font-size:17px; line-height:1.25; margin:20px 0 4px}
.hoja-pagina .documento > :first-child{margin-top:0}

@media (min-width:760px){
  .hoja-pagina{max-width:768px; padding-left:24px; padding-right:24px}
  .hoja-pagina .portada{height:160px; margin:-16px -24px 0}
  .hoja-pagina .titulo-pagina{font-size:36px}
}

/* Una tabla ancha o unas columnas pueden pasarse de la columna de texto hasta
   960 px, y solo cuando hay pantalla de sobra: en un teléfono no hay a dónde
   crecer. */
@media (min-width:1100px){
  .hoja-pagina .documento table,
  .hoja-pagina .documento .bloque.columnas{width:960px; margin-left:-120px}
  /* F0.18. Con el envoltorio puesto, la que se tiene que ensanchar es LA CAJA y
     no la tabla: una tabla de 960 px adentro de una caja de 720 rueda a 1,280,
     que es un desplazamiento que nadie pidio en una pantalla grande. La tabla
     vuelve a llenar a su caja y el renglon de arriba le sigue valiendo a las
     tablas de los modulos, que traen su propio `.tabla-ancha`. */
  .hoja-pagina .documento .tabla-rueda{width:960px; margin-left:-120px}
  .hoja-pagina .documento .tabla-rueda table{width:100%; margin-left:0}
}

/* Desde 1,280 px el índice deja de ser un desplegable y queda fijo al lado de
   la columna, como en Notion. */
@media (min-width:1280px){
  .hoja-pagina .indice-pagina{
    position:fixed; top:96px; left:calc(50% + 400px); width:220px;
    margin:0; padding:0; background:none;
  }
  .hoja-pagina .indice-pagina summary{display:none}
  .hoja-pagina .indice-pagina nav{
    display:flex; content-visibility:visible;
    border-left:2px solid var(--line-soft); padding:0 0 0 12px;
  }
}

/* ---- Los modulos con datos adentro de una pagina (paso A9) ----------------
   Paso 9 de la seccion 7 de docs/NOTION.md. Los pinta `modulo`, la funcion que
   `conocimiento_pagina` le pasa a `bloques.pintar_pagina`, con las plantillas
   de `templates/modulos/`. Las tablas de adentro son las MISMAS de las
   pantallas normales (`.tabla-japi`, `.tabla-ancha`, `.recursos .abrir`) a
   proposito: un recurso no puede verse de una forma en /recursos y de otra
   adentro de una pagina, o deja de leerse como el mismo dato.

   Todo color sale de las variables de arriba, para que el modo oscuro salga
   solo. Sin emoji: el icono de una pagina es un glifo de `iconos.py`. */

.bloque.modulo{margin:0 0 16px}
.bloque.modulo .modulo-rot{
  margin:0 0 7px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
}
/* La tabla de adentro no se pega al renglon de arriba ni al de abajo. */
.bloque.modulo .tabla-ancha{margin:0}
.bloque.modulo table{margin:0}

/* Las paginas de adentro: la misma tarjeta de `.indice`, que es como se ven al
   pie de la pagina y en la portada. Una nieta va sangrada, no mas chica: en un
   telefono, dos tamanos de letra en la misma lista se leen como dos listas. */
.bloque.modulo-paginas{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  overflow:hidden;
}
.bloque.modulo-paginas a{
  display:flex; align-items:center; gap:9px; padding:12px 15px;
  text-decoration:none; color:var(--ink); font-size:15px;
  border-top:1px solid var(--line-soft);
}
.bloque.modulo-paginas a:first-child{border-top:0}
.bloque.modulo-paginas a:hover{background:var(--surface-2)}
.bloque.modulo-paginas a:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
.bloque.modulo-paginas a.n2{padding-left:37px}
.bloque.modulo-paginas .em-chico{
  flex:0 0 auto; width:26px; height:26px; border-radius:7px; display:grid;
  place-items:center; color:var(--ink-faint);
}
.bloque.modulo-paginas .em-chico .ico-svg{width:17px; height:17px}
.bloque.modulo-paginas a:hover .em-chico{color:var(--azul-ink)}
.bloque.modulo-paginas .fl{margin-left:auto; color:var(--ink-faint); font-size:17px}

/* El renglon neutro de la regla 6. Gris y chico, como el de un bloque que no
   llego a serlo (`.bloque.crudo`): es un renglon que avisa, no una alarma. Se
   ve igual diga lo que diga, que es lo que no deja contar por diferencia. */
.bloque.modulo-neutro{
  margin:0 0 14px; padding:11px 14px; border-radius:10px;
  background:var(--surface-2); color:var(--ink-soft);
  font-size:13.5px; line-height:1.5;
}

/* --- A11: el panel Compartir de una pagina --------------------------------
   Tres bloques de casillas por lista (por puesto, por equipo y por nivel), sin
   una linea de JavaScript. Las casillas van en columnas que se acomodan solas:
   con 34 puestos, una sola columna son tres pantallas de telefono, y en
   escritorio deja un rio de blanco a la derecha. */
.compartir .reparto{margin:0 0 26px}
.compartir .reparto h2{font-size:17px; margin:0 0 4px}
.compartir fieldset{
  border:1px solid var(--line); border-radius:11px; margin:12px 0 0;
  padding:10px 14px 13px; background:var(--surface);
}
.compartir legend{
  padding:0 6px; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.compartir fieldset .pista{margin:0 0 8px}
/* `column-width` y no un numero de columnas: asi el telefono queda en una sola
   sin una consulta de medios aparte. */
.compartir fieldset label{
  display:block; break-inside:avoid; padding:4px 0; font-size:14.5px;
  line-height:1.4; cursor:pointer;
}
.compartir .por-puesto, .compartir .por-equipo{column-width:230px; column-gap:22px}
.compartir input[type=checkbox]{margin-right:7px}
.compartir .fijos{
  margin:10px 0 0; padding:0 0 0 20px; color:var(--ink-soft); font-size:14.5px;
}
/* El aviso del panel: el mismo gris de los demas avisos llanos de la app, que
   no son alarmas sino una frase que explica por que no se guardo. */
.aviso-compartir{
  margin:0 0 16px; padding:11px 14px; border-radius:10px;
  background:var(--surface-2); color:var(--ink-soft);
  font-size:14px; line-height:1.5;
}

/* ---- El editor de una pagina (A12) --------------------------------------
   Seccion 5 de `docs/NOTION.md`, camino (a). Todo lo de aqui cuelga de
   `.escribir.editor`, que la plantilla pone SOLO con el interruptor `EDITOR`
   prendido: con el apagado la pantalla de editar queda exactamente como
   estaba, tambien en el tamano de la letra. */

/* 16 px, ni uno menos. Debajo de 16, iOS hace zoom solo al tocar el cuadro y
   la pantalla queda corrida hacia un lado, con la barra a medias afuera. Es la
   regla de la seccion 5 y el motivo por el que esta regla existe. */
.escribir.editor textarea{font-size:16px; line-height:1.55}

/* El alto de la cabecera azul (`.top`, mas arriba en este mismo archivo): 14 px
   de relleno arriba y abajo mas el renglon mas alto que lleva adentro, que es el
   enlace de salir (13 px por 1.5 de interlineado, mas 8 px de relleno arriba y
   abajo): 63.5 px. Vive en UNA variable y la cabecera
   queda clavada a ella, para que el dia que la cabecera cambie de alto haya un
   solo numero que mover y no dos que se separan sin que nadie se entere.

   El numero es el ALTO NATURAL MEDIDO, no uno redondeado: estas dos reglas no
   cuelgan de `.escribir.editor`, asi que valen para TODAS las pantallas de la
   app, tambien con el interruptor `EDITOR` apagado. Con 64 px redondeados, el
   navegador midio la cabecera de la portada en 64 con la regla y 63.5 sin ella,
   o sea que el interruptor apagado ya no devolvia la pantalla de antes, y la
   regla de la casa es que apagado sale igual. Con 63.5, `min-height` iguala al
   alto natural y no cambia nada en ningun lado. */
:root{--alto-cabecera:63.5px}
.top{min-height:var(--alto-cabecera)}

/* La barra va PEGADA ARRIBA del cuadro y no debajo: en el telefono el teclado
   se come la mitad de abajo de la pantalla, y una barra al pie queda tapada
   justo mientras se escribe. Se pega DEBAJO de la cabecera y no en 0: la
   cabecera tambien es pegajosa, tambien en 0 y con un `z-index` mas alto, asi
   que con las dos en 0 la barra queda tapada entera apenas se hace scroll, que
   es exactamente el caso del telefono con el teclado abierto. `hidden` la
   esconde hasta que `editor.js` la destapa: sin JavaScript no puede haber diez
   botones que no hacen nada.

   Y ENVUELVE; no se desliza de lado. Hasta la revision visual era una
   sola linea con `overflow-x:auto` y la barra de desplazamiento tapada de las
   dos formas (`scrollbar-width:none` y `::-webkit-scrollbar{display:none}`):
   en un telefono de 375 px se veian CINCO de los diez botones y de los otros
   cinco no habia ninguna pista, ni sombra, ni flecha, ni barra. Entre los que
   quedaban afuera estaba el "+", que es el que abre el panel de bloques.

   Se eligio envolver y no pintar una pista (un degradado, una flecha) porque
   una pista sigue escondiendo: avisa que hay mas, pero para llegar hay que
   deslizar algo que no se ve. Envolviendo no hay nada que descubrir. Y no se
   saco el "+" de la barra porque la barra son los diez botones de la seccion 5
   de docs/NOTION.md y hay una prueba que los cuenta; el control de imagen vive
   afuera por esa misma razon.

   Las reglas del desplazamiento se SACARON en vez de dejarlas puestas: con
   `flex-wrap:wrap` no sobra ancho que deslizar, y dejar escrito el mecanismo
   viejo al lado del nuevo le miente al que venga a mover esto. */
.barra-formato{
  position:sticky; top:var(--alto-cabecera); z-index:3; display:flex; gap:4px;
  flex-wrap:wrap;
  margin:0 0 6px; padding:6px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface);
}
.barra-formato[hidden]{display:none}
/* 40 px de alto minimo: es la zona de toque que se puede acertar con el pulgar
   sin agrandar la barra hasta comerse el cuadro de texto. */
.barra-formato button{
  flex:0 0 auto; min-height:40px; padding:0 12px; font:inherit; font-size:13px;
  font-weight:600; color:var(--ink-soft); background:transparent;
  border:0; border-radius:8px; cursor:pointer; white-space:nowrap;
}
/* En un telefono los diez botones se aprietan de costado para caer en DOS
   renglones y no en tres. Envolver no puede pagarse comiendose el cuadro de
   texto: la barra es pegajosa, asi que cada renglon de mas se queda puesto
   todo el rato que se escribe, con el teclado ya comiendose la mitad de abajo.

   Se achica el relleno LATERAL, que es lo que decide cuantos botones entran
   por renglon, y NO el alto minimo: los 40 px de arriba son la zona que hay
   que poder acertar con el pulgar, y bajarlos no haria entrar ni un boton mas.
   480 px deja adentro los dos telefonos con los que se mira esto (360 y 375) y
   afuera cualquier tableta. */
@media (max-width:480px){
  .barra-formato{gap:2px; padding:5px}
  .barra-formato button{padding:0 8px}
}
.barra-formato button:hover{background:var(--surface-2); color:var(--ink)}
.barra-formato button:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
.barra-formato .b-mas{color:var(--azul-ink); font-size:17px}

/* El panel del "+" y del "/". Es una lista de fichas, no una cuadricula: en un
   telefono una cuadricula de nueve fichas deja los rotulos cortados.

   EL ALTO NO SE ESCRIBE AQUI. Eran 320 px fijos, y al destaparse el panel
   empujaba el cuadro 328 px hacia abajo; el navegador volvia a llevar el cursor
   a la vista y el panel terminaba ARRIBA de la ventana. Medido en un telefono
   de 375x470 (el alto que queda con el teclado abierto) con el cursor al final
   de una pagina de 45 renglones, que es donde escribe una persona: el panel
   quedaba en y = -423..-103 y se veian CERO fichas. La persona escribia "/" y
   veia saltar el texto y nada mas.

   El alto lo pone `static/editor.js` con lo que queda de ventana debajo de la
   barra pegajosa, dejando ver un pedazo del cuadro, y ademas trae el panel a la
   vista. No se puede escribir aqui: la barra mide un renglon en escritorio y
   dos en un telefono, el teclado se come la mitad de la pantalla, y ningun
   numero fijo es cierto en los tres casos. Dejar los 320 px puestos al lado del
   mecanismo nuevo le mentiria al que venga a mover esto.

   Y NO se saco del flujo para colgarlo de la barra, que fue lo primero que se
   probo: flotando sobre el cuadro tapa la mitad de la pantalla, y entonces
   tocar el cuadro de texto deja de poder hacerse, porque lo que se toca es el
   panel. Medido con el guion del navegador: el flujo entero de la auditoria se
   cortaba ahi y 21 chequeos dejaban de correr, entre ellos el que comprueba que
   elegir una ficha inserta su sintaxis. Un panel que no se puede medir no es
   mejor que uno que empuja. */
.panel-bloques{
  margin:0 0 8px; padding:6px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); overflow-y:auto;
}
.panel-bloques[hidden]{display:none}
/* La pista de que el catalogo SIGUE hacia abajo. Con la barra de formato se
   eligio envolver en vez de pintar una pista, y con razon: una pista sigue
   escondiendo, porque para llegar hay que deslizar algo que no se ve. Aqui no
   se puede envolver: doce fichas son 785 px y debajo de la barra no quedan ni
   400 en ningun telefono. O sea que el panel se desplaza de verdad, y entonces
   la pista tiene que verse SIN TOCAR NADA. Antes no habia ninguna: la barra de
   desplazamiento mide 2 px en un telefono (en Android es solapada y se esconde
   al no tocar) y de la sexta ficha asomaba un filo de 7 px.

   Va con `position:sticky`, que es lo que la deja quieta contra el borde de
   abajo mientras el contenido se desplaza por debajo; un `::after` sin `sticky`
   se va con el contenido y no se ve nunca. El `margin-top` negativo es de la
   misma altura que la pista para que no agregue nada que desplazar.

   Cuelga de una clase que `editor.js` pone y saca midiendo cuanto sobra: con
   `MODULOS` apagado quedan siete fichas, entran, y una pista fija estaria
   diciendo que hay mas sobre un catalogo que ya se ve entero. */
.panel-bloques.hay-mas::after{
  content:""; display:block; position:sticky; bottom:0; height:28px;
  margin-top:-28px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--surface));
}
/* El rotulo y el boton de cerrar, en el mismo renglon: el renglon del rotulo ya
   estaba, asi que cerrar no cuesta alto de panel. */
.panel-cabeza{display:flex; align-items:center; justify-content:space-between; gap:8px}
.panel-cerrar{
  flex:0 0 auto; min-height:36px; padding:0 12px; font:inherit; font-size:13px;
  font-weight:600; color:var(--azul-ink); background:transparent;
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.panel-cerrar:hover{background:var(--surface-2)}
.panel-cerrar:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
/* `--ink-soft` y no `--ink-faint`: esto es texto de 12 px y el texto chico pide
   4.5:1. Medido por el navegador sobre el fondo del panel, `--ink-faint` daba
   3.04:1 en claro y 3.89:1 en oscuro; `--ink-soft` da 6.18:1 y 7.71:1. Se
   cambian SOLO las clases del panel: `--ink-faint` lo usan unas cincuenta
   reglas de toda la app y moverlo es una vuelta propia, no un renglon al paso.
   Que el token no llegue a 4.5:1 para texto chico sigue siendo cierto. */
.panel-rotulo{
  margin:6px 6px 4px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.panel-bloques .ficha{
  display:flex; flex-direction:column; gap:2px; width:100%; min-height:44px;
  padding:8px 10px; text-align:left; font:inherit; color:var(--ink);
  background:transparent; border:0; border-radius:8px; cursor:pointer;
}
.panel-bloques .ficha:hover{background:var(--azul-soft)}
.panel-bloques .ficha:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}
.panel-bloques .ficha-nombre{font-size:14.5px; font-weight:600}
.panel-bloques .ficha-para, .panel-bloques .ficha-sintaxis{
  font-size:12px; color:var(--ink-soft); line-height:1.35;
}
.panel-bloques .ficha-sintaxis{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* El aviso del borrador guardado en el navegador. Es una frase, no una alarma:
   lo que vale sigue siendo lo que se guardo con el boton Guardar. */
.borrador-aviso{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 8px; padding:9px 12px; border-radius:10px;
  background:var(--surface-2); color:var(--ink-soft);
  font-size:13.5px; line-height:1.45;
}
.borrador-aviso[hidden]{display:none}
.borrador-aviso button{
  min-height:36px; padding:0 12px; font:inherit; font-size:13px; font-weight:600;
  color:var(--azul-ink); background:transparent; border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
}

/* ---- La vista previa en vivo (A13) ---------------------------------------
   Parrafo de la vista previa del detalle del camino (a) de la seccion 5 de
   docs/NOTION.md: en 1,100 px o mas va AL LADO; mas angosto, dos pestanas
   "Escribir" y "Ver". Todo cuelga de `.editor-con-vista`, que la pone
   `static/vista-previa.js` al arrancar: sin JavaScript el panel y las pestanas
   siguen tapados y la pantalla es exactamente la de A12. */

/* Angosto: manda la pestana elegida y las dos cosas se turnan. */
.editor-dos{display:flex; flex-direction:column; gap:8px}
.vista-previa[hidden]{display:none}
.vista-pestanas[hidden]{display:none}
.editor-con-vista.ve-escribir .vista-previa{display:none}
.editor-con-vista.ve-ver .editor-dos textarea{display:none}

.vista-pestanas{display:flex; gap:4px; margin:0 0 6px}
.vista-pestanas button{
  flex:1 1 0; min-height:40px; padding:0 12px; font:inherit; font-size:13px;
  font-weight:600; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.vista-pestanas button[aria-pressed="true"]{
  color:var(--azul-ink); background:var(--azul-soft); border-color:var(--azul-soft);
}
.vista-pestanas button:focus-visible{outline:2px solid var(--azul); outline-offset:-2px}

/* El panel donde se pone el HTML que contesta el servidor. Lleva la misma clase
   `.documento` adentro que el cuerpo de una pagina de verdad, asi que lo que se
   ve mientras se escribe es lo que se va a ver despues, sin una segunda hoja de
   estilos que se olvida de crecer el dia que entre un bloque nuevo. */
.vista-previa{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); overflow-x:auto;
}
.vista-previa-rotulo{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-faint);
}
.vista-previa .documento{font-size:15px}

/* Desde 1,100 px las dos cosas se ven al lado y las pestanas sobran. El cuadro
   de texto y la vista previa arrancan arriba los dos (`align-items:start`) para
   que el panel no se estire a lo alto del textarea cuando hay poco escrito. */
@media (min-width:1100px){
  .editor-con-vista .editor-dos{
    display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;
  }
  .editor-con-vista .vista-pestanas{display:none}
  .editor-con-vista.ve-escribir .vista-previa{display:block}
  .editor-con-vista.ve-ver .editor-dos textarea{display:block}
  .editor-con-vista .vista-previa{max-height:70vh; overflow-y:auto}
}

/* A14: el control de subir una imagen. Va DEBAJO de la barra de formato y
   fuera de ella: la barra son los diez botones de la seccion 5 y no se estira
   cada vez que entra un paso. Nace tapado en la plantilla y lo destapa
   `static/editor-imagen.js`: sin JavaScript no puede haber un boton que no
   hace nada. La regla del ancho de una imagen ya vive arriba, en
   `.documento img`, y vale igual para las que se suban desde aqui. */
.editor-imagen{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 4px;
}
/* Los MISMOS 40 px de alto minimo que `.barra-formato button`, y no es un
   parecido: es el boton de al lado, en la misma pantalla y a 20 px de
   distancia, para el mismo dedo. Medía 30, que es lo que le daba el relleno de
   6 px con letra de 14. Lo encontro la vuelta visual de los paneles (D6) y lo
   cuida una prueba que MIDE los dos en el navegador y los compara: leyendo el
   CSS, una segunda regla mas abajo devuelve el defecto sin que nadie se
   entere. `inline-flex` porque `min-height` sobre un boton que no centra su
   contenido deja la etiqueta pegada arriba. */
.editor-imagen button{
  display:inline-flex; align-items:center; min-height:40px;
  padding:6px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); font-size:14px; cursor:pointer;
}
.editor-imagen button:hover{background:var(--azul-soft); border-color:var(--azul-soft)}
.editor-imagen button:focus-visible{outline:2px solid var(--azul); outline-offset:2px}
.editor-imagen .pista{font-size:12px; color:var(--ink-faint)}

/* El aviso de la subida. Vacio no ocupa lugar, para que la pantalla no salte
   cada vez que aparece y desaparece. Lo escribe `textContent`, nunca HTML. */
.imagen-aviso{margin:0; width:100%; font-size:13px; color:var(--ink-faint)}
.imagen-aviso:empty{display:none}