/* La interfaz del gestor.
 *
 * ===========================================================================
 * DE DONDE SALE ESTO (`docs/19`)
 *
 * La identidad de Amura ya existia y el gestor de hoy no la usaba: corre sobre
 * un theme de Bootstrap comprado, con el verde pegado encima como acento. Acá se
 * hace al reves — la marca manda y la estructura sale de ella.
 *
 * Dos cosas que dice el logo (`assets/marca/`):
 *   1. La marca son DOS PLANOS DIAGONALES que se cruzan. "Amura" es la parte del
 *      velero donde el viento entra en la vela. **La diagonal es la forma de la
 *      marca**, no un adorno: acá es el borde entre la herramienta y los datos.
 *   2. El color no es un verde, son CUATRO, y el logo los usa juntos para dar
 *      profundidad. Se usan como familia, no como un acento sobre grises.
 *
 * Es una HERRAMIENTA DE TRABAJO: densa, precisa, con la informacion cerca. Quien
 * la usa entra todos los dias, apurado, y muchas veces en una maquina vieja.
 * Por eso el gesto fuerte va en UN solo lugar —el plano diagonal— y todo lo
 * demas se calla.
 *
 * TIPOGRAFIAS (`docs/19`, corregido por Hernan: **el logo esta hecho en Futura
 * Round**). Eso fija la voz de la marca: geometrica, circular, de trazo parejo.
 * Con esa pista el sistema son tres papeles y no uno:
 *
 *   DISPLAY  la voz de la marca. Geometrica como el logo. Se usa POCO y grande:
 *            el nombre del diario, las cifras, los titulos de pantalla. Una
 *            geometrica tiene la x chica — a 13px en una tabla se lee peor que
 *            una humanista, asi que no baja de ahi.
 *   TEXTO    la letra de trabajo: formularios, listados, botones. Tiene que
 *            aguantar densidad y pantallas viejas de redaccion.
 *   DATO     lo que se alinea en columna: fechas, dominios, permisos, numeros.
 *
 * Futura Round es de PAGO y no tenemos licencia web, asi que el papel de display
 * lo cubre **Nunito** (SIL OFL), elegida por Hernan sobre Jost y Quicksand. Es la
 * que tiene las terminaciones REDONDEADAS del logo —lo que le da el "Round"— a
 * cambio de proporciones mas humanistas que geometricas: se lee mejor y se
 * parece un poco menos a la construccion de la marca. El dia que haya licencia
 * se cambia UNA linea —la familia de `--display`— y no se toca nada mas.
 * Ver `assets/tipografias/README.md`.
 * =========================================================================== */

/* Las fuentes se sirven desde `assets/tipografias/`. El token `FUENTE:` lo
 * resuelve el servidor a la URL con el hash del ARCHIVO adentro, igual que hace
 * con esta hoja: si cambia la fuente, cambia la URL, y no hay que purgar nada.
 * Un nombre mal escrito revienta al arrancar en vez de caer al font del sistema
 * sin que nadie lo note. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 300 800;   /* variable: un solo archivo para toda la escala */
  font-display: swap;
  src: url("/tipografias/nunito-variable.ba344451.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/tipografias/plex-sans-400.3b646991.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/tipografias/plex-sans-600.8960851d.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/tipografias/plex-mono-400.08949f72.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/tipografias/plex-mono-600.0d1f0b8d.woff2") format("woff2");
}

:root {
  /* la familia Amura, del logo */
  --verde-claro: #0fcea9;
  --verde: #00a78a;
  --verde-medio: #0c7762;
  --verde-hondo: #075b4b;

  /* la tinta no es negra: es la familia llevada al fondo */
  --tinta: #04211c;
  --tinta-suave: #0d3b32;
  --apagado: #5d6b68;
  --linea: #dbe3e0;
  --papel: #ffffff;
  --fondo: #eef2f1;

  /* La linea de abajo es el punto de cambio: con licencia de Futura Round, entra
     primera y el resto queda de respaldo. */
  --display: "Futura Round", "Nunito", "Futura", "Century Gothic", system-ui, sans-serif;
  --texto: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dato: "Plex Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* --- la marca ------------------------------------------------------------- */
.logo { display: block; width: 2.2rem; height: auto; }
.logo .plano-claro { fill: var(--verde-claro); }
.logo .plano-base  { fill: var(--verde); }
.logo .plano-medio { fill: var(--verde-medio); }
.logo .plano-hondo { fill: var(--verde-hondo); }

/* --- rotulo: la etiqueta chica que ordena cada bloque ---------------------
 * Va en la GEOMETRICA aunque sea chica, y es el unico lugar donde eso funciona:
 * el problema de una geometrica en tamano chico es la x baja, y en versalita no
 * hay minusculas. Las mayusculas anchas con tracking abierto son ademas lo que
 * mejor hace una Futura. La marca aparece dos veces por pantalla —el nombre del
 * diario y estas etiquetas— y en el medio no molesta. */
.rotulo {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--apagado);
}

/* =========================================================================
   ENTRADA
   ========================================================================= */
.entrada {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  background: var(--papel);
}

.entrada__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 6vw, 5rem);
}

.entrada__caja { width: 100%; max-width: 23rem; margin-inline: auto; }

.entrada__marca { display: flex; align-items: center; gap: .7rem; margin-bottom: 2.2rem; }
.entrada__marca .rotulo { margin: 0; }

/* El nombre del diario, en la voz de la marca. El tracking es el del logo: muy
   cerrado. Una geometrica lo aguanta —las letras son circulos y rectas— donde
   una humanista se empastaria. */
.sitio {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
}

.regla {
  height: 4px;
  width: 3.5rem;
  margin: 1rem 0 1.7rem;
  /* los cuatro verdes, en el orden del logo */
  background: linear-gradient(90deg,
    var(--verde-claro) 0 25%, var(--verde) 25% 50%,
    var(--verde-medio) 50% 75%, var(--verde-hondo) 75% 100%);
}

h2.titulo-form {
  font-size: .95rem;
  font-weight: 600;
  margin: 0 0 1.4rem;
  color: var(--apagado);
}

/* --- campos ---------------------------------------------------------------
 * OTRA VEZ EL `>`, y ya son tres veces la misma historia (ver `docs/22`):
 * `.campo label` (sin `>`) alcanzaba TODOS los labels de adentro, así que los de la lista
 * de autores —que son `<label>` con su casillero— heredaban `display: block` y
 * el nombre se iba al renglón siguiente, pegado a la derecha. Se veía roto y lo
 * marcó Hernán.
 *
 * La regla habla de **la etiqueta de este campo**, no de cualquier `<label>` que
 * cuelgue abajo. Lo mismo pasó con `select` (la barra del editor) y con el
 * `background` de la caja de recuperar. */
.campo { margin-bottom: 1rem; }
.campo > label {
  display: block;
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .3rem;
}
.campo > input {
  width: 100%;
  font: inherit;
  padding: .64rem .75rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  background: #fbfdfc;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.campo > input:focus-visible {
  outline: 0;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
  background: #fff;
}

/* El error no se disculpa y no dice cual de los dos campos fallo. */
.error {
  border-left: 3px solid #a3231f;
  background: #fdf4f3;
  color: #8d1e1a;
  padding: .55rem .75rem;
  margin-bottom: 1.1rem;
  font-size: .88rem;
}

.pie-form {
  margin-top: 1.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-size: .8rem;
  color: var(--apagado);
}

/* =========================================================================
   EL PULSO — el plano diagonal, y lo que hace distinta a esta pantalla
   Un editor abre el gestor a la manana y lo primero que quiere saber es hace
   cuanto publico el sitio. Son datos que ya son publicos: no aparece nada que
   no se vea entrando al diario.
   ========================================================================= */
.pulso {
  position: relative;
  background:
    linear-gradient(157deg, var(--tinta-suave) 0%, var(--tinta) 55%, #021512 100%);
  color: #dfeae7;
  padding: 3rem 2rem 2.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  /* LA DIAGONAL: el borde izquierdo no es recto. Es la forma del logo. */
  clip-path: polygon(3.2rem 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -3.2rem;
}

/**
 * Los bloques ESCALONAN con la pendiente, como los planos de la marca.
 *
 * El filo se corre a la izquierda al bajar, asi que un margen fijo dejaria el
 * hueco creciendo de arriba hacia abajo. Y hacer que el texto siga la diagonal
 * linea por linea (`shape-outside`) seria peor: un borde izquierdo irregular es
 * mas dificil de escanear, y estos son bloques sueltos, no parrafos que fluyen —
 * quedaria accidental en vez de deliberado.
 *
 * Escalonando, cada bloque queda alineado adentro (legible) y el conjunto sigue
 * la pendiente (deliberado). Los valores bajan al ritmo de la diagonal.
 */
.pulso > :nth-child(1) { padding-left: 5.2rem; }
.pulso > :nth-child(2) { padding-left: 4.3rem; }
.pulso > :nth-child(3) { padding-left: 3.1rem; }
.pulso .rotulo { color: #6f8b84; }

/* el filo de la diagonal, en el verde vivo */
.pulso::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(3.2rem 0, 3.4rem 0, .2rem 100%, 0 100%);
  background: var(--verde);
}

.pulso__dominio { font-family: var(--dato); font-size: .75rem; color: #6f8b84; }

.estado { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.punto {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: 0 0 0 0 rgba(15, 206, 169, .5);
  animation: latir 2.8s ease-out infinite;
}
.estado span { font-size: .82rem; color: #b6cbc6; }

@keyframes latir {
  0%   { box-shadow: 0 0 0 0 rgba(15, 206, 169, .45); }
  70%  { box-shadow: 0 0 0 .55rem rgba(15, 206, 169, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 206, 169, 0); }
}
@media (prefers-reduced-motion: reduce) { .punto { animation: none; } }

.ultima { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.2rem; }
.pulso > .ultima { padding-left: 4.3rem; }
.ultima__hace {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin: .4rem 0 .5rem;
  color: #fff;
}
.ultima__titulo { font-size: .87rem; color: #b6cbc6; }
.ultima__vacio { font-size: .87rem; color: #6f8b84; }

.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: auto; }
.cifra__n {
  font-family: var(--dato);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--verde-claro);
  display: block;
}

/* =========================================================================
   PANEL (despues de entrar)
   ========================================================================= */
/* --- el menu, al costado -------------------------------------------------
 * La primera version fue una barra arriba y la corrigio Hernan con lo que ya le
 * paso en Amura: arriba se llena. Un menu horizontal tiene el ancho de la
 * pantalla y nada mas; uno vertical crece hacia abajo. Y el submenu, que arriba
 * obliga a un desplegable —estado oculto, hover, JavaScript—, acá se abre EN
 * LINEA y lo abre la ruta. El razonamiento completo esta en `ui/paginas.ts`. */
.tablero {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-height: 100vh;
  /* Corta, porque es respuesta a un click y no un efecto: si tarda, molesta. */
  transition: grid-template-columns .16s ease;
}
@media (prefers-reduced-motion: reduce) { .tablero { transition: none; } }

/* EL LATERAL ES UNA COLUMNA FIJA, DE LA ALTURA DE LA PANTALLA.
 * Lo marco Hernan: antes crecia con la pagina, asi que en un listado largo el
 * nombre, Salir y Minimizar quedaban a tres pantallas de scroll — o sea que las
 * acciones que estan SIEMPRE disponibles dejaban de estarlo justo donde mas se
 * navega. Ahora se queda pegado arriba (`sticky`) y mide `100dvh`: el pie
 * apoya en el borde de abajo de la pantalla, no en el del documento.
 * `align-self: start` es lo que lo hace posible — sin eso la grilla lo estira a
 * lo alto de la pagina y no queda nada contra que pegarse.
 * El que se desborda es el MENU, no el lateral, asi que el filo y el pie no se
 * van con el scroll. */
.lateral {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  background: var(--tinta);
  color: #dfeae7;
  padding: 1.4rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
/* El filo: los cuatro verdes del logo, de pie. Es la misma regla de la entrada
   puesta a lo largo del borde — la marca firma el borde, no el fondo. */
.lateral::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--verde-claro) 0 25%, var(--verde) 25% 50%,
    var(--verde-medio) 50% 75%, var(--verde-hondo) 75% 100%);
}

.lateral__marca {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit;
}
.lateral .logo { width: 1.6rem; }
.lateral .sitio { font-size: 1.15rem; color: #fff; }
.lateral__marca:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 3px; }

/* El menu se queda con el hueco del medio y es EL UNICO que se desborda: si el
 * dia de mañana hay quince destinos, scrollea el menu y el pie no se mueve.
 * `min-height: 0` porque un item flex no achica por debajo de su contenido y sin
 * eso el desborde se lo comeria la pagina entera. */
.menu { display: flex; flex-direction: column; gap: 1.3rem;
  flex: 1; min-height: 0; overflow-y: auto; }
.menu__grupo { display: flex; flex-direction: column; gap: .1rem; }
.menu__titulo { color: #55706b; margin: 0 0 .35rem .55rem; }

.menu__item {
  position: relative;
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: #b6cbc6;
  text-decoration: none;
  padding: .38rem .55rem;
  border-radius: 2px;
}
.menu__item:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.menu__item:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: -2px; }

/* El activo lleva el filo a la izquierda: el mismo gesto del borde, en chico. */
.menu__item[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .06); }
.menu__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1rem; top: 0; bottom: 0;
  width: 3px;
  background: var(--verde-claro);
}

/* El submenu no se despliega: esta abierto cuando estas adentro. Sin estado que
   recordar, sin hover, sin una linea de JavaScript. */
.menu__hijos {
  display: flex; flex-direction: column;
  margin: .1rem 0 .3rem .55rem;
  padding-left: .7rem;
  border-left: 1px solid #23433d;
}
.menu__item--hijo { font-size: .84rem; font-weight: 400; padding: .28rem .55rem; }

/* Lo que todavia no existe se muestra apagado en vez de mentir con un link roto.
   Va desapareciendo solo a medida que entra cada pantalla. */
.menu__item--pronto { color: #55706b; cursor: default; }
.menu__item--pronto:hover { background: none; color: #55706b; }

/* Lo unico verde del lateral. Si hubiera tres acciones destacadas no habria
   ninguna: "nueva nota" es lo que mas se hace en el dia. */
.accion {
  display: block;
  text-align: center;
  font-size: .87rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--verde-hondo);
  border: 1px solid var(--verde-medio);
  border-radius: 2px;
  padding: .45rem .8rem;
}
.accion:hover { background: var(--verde-medio); border-color: var(--verde); }
.accion:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

.lateral__pie {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #23433d;
  display: flex; flex-direction: column; gap: .15rem;
}
.lateral__pie .quien { font-size: .87rem; font-weight: 600; color: #fff; margin: 0; }
.lateral__pie .rotulo { margin: 0 0 .4rem; }
/* Sin subrayado (lo pidio Hernan): un subrayado permanente los hacia parecer dos
 * links sueltos abajo de todo. El aviso de "esto se puede tocar" lo da el fondo
 * al pasar por encima, que es lo mismo que hacen los destinos del menu. */
.lateral__pie button { display: flex; align-items: center; gap: .5rem;
  font: inherit;
  font-size: .84rem;
  align-self: flex-start;
  background: none;
  border: 0;
  border-radius: 2px;
  color: #9fb5b0;
  padding: .25rem .4rem;
  margin-left: -.4rem;
  cursor: pointer;
}
.lateral__pie button:hover { background: #23433d; color: #fff; }

/* --- que algo esta pasando -------------------------------------------------
 * Con la navegacion por fetch, un pedido lento se veria como "el click no hizo
 * nada", que es la peor forma de fallar. Esta barra aparece recien a los 150ms:
 * lo que tarda poco no tiene que parpadear. */
.cargando::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--verde-claro);
  transform-origin: 0 50%;
  animation: avanzar 8s cubic-bezier(.1, .8, .2, 1) 150ms both;
  z-index: 99;
}
@keyframes avanzar {
  0% { transform: scaleX(0); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cargando::before { animation: none; } }

/* --- los iconos ------------------------------------------------------------ */
.ico { width: 1.15rem; height: 1.15rem; flex: none; }
.menu__item, .accion, .plegar button { display: flex; align-items: center; gap: .6rem; }
.menu__item--hijo .ico { display: none; }

/* =========================================================================
   MINIMIZADO
   Amura lo tiene y hace falta: es la valvula del ancho. El estado vive en una
   galleta, asi que el servidor ya manda la pagina plegada y no hay parpadeo.
   El texto no se borra del HTML —se esconde de la VISTA— para que el menu siga
   sirviendo con lector de pantalla.
   ========================================================================= */
.lateral--min { padding: 1.4rem .6rem 1.2rem; align-items: center; }
.tablero:has(.lateral--min) { grid-template-columns: 3.6rem minmax(0, 1fr); }

/* Fuera de la vista, dentro del arbol de accesibilidad. */
.lateral--min .menu__texto,
.lateral--min .lateral__pie .quien,
.lateral--min .lateral__pie .rotulo,
.lateral--min .menu__titulo,
.lateral--min .sitio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}
.lateral--min .menu__item, .lateral--min .accion, .lateral--min .plegar button {
  justify-content: center;
  gap: 0;
  padding: .5rem 0;
  width: 2.4rem;
}
.lateral--min .menu { gap: .9rem; }
.lateral--min .menu__grupo { gap: .15rem; }
/* Los grupos siguen separandose, pero con una linea en vez de un rotulo. */
.lateral--min .menu__grupo + .menu__grupo { border-top: 1px solid #23433d; padding-top: .9rem; }
.lateral--min .menu__item[aria-current="page"]::before { left: -.6rem; }
.lateral--min .lateral__pie { align-items: center; gap: .5rem; }
.lateral--min .lateral__pie button { border: 0; }
.lateral--min .logo { width: 1.5rem; }

/* Los dos iconos viven en el HTML y los intercambia el CSS. Asi el script puede
   plegar con una sola clase, sin tocar el contenido del boton. */
.ico-desplegar { display: none; }
.lateral--min .ico-plegar { display: none; }
.lateral--min .ico-desplegar { display: inline-flex; }

.plegar { margin-top: .2rem; }
.plegar button {
  font: inherit;
  font-size: .8rem;
  background: none;
  border: 0;
  color: #55706b;
  padding: .3rem 0;
  cursor: pointer;
}
.plegar button:hover { color: var(--verde-claro); }
.plegar button:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 2px; }

/* --- el encabezado de cada pantalla --------------------------------------- */
.encabezado { margin-bottom: 1.6rem; }
.encabezado h1 {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: .2rem 0 0;
}

/* SIN TOPE: la pantalla de trabajo usa todo el ancho que hay (decision de
 * Hernan). Una herramienta no es un texto — el monitor grande de la redaccion
 * esta para que entren mas notas y mas columnas, no para dejar la mitad en
 * blanco. Lo que si va a llevar un ancho propio, mas angosto, es el formulario
 * de nota: ahi se ESCRIBE, y una linea de 1900px no se lee. */
.panel { padding: 2rem clamp(1rem, 3vw, 2.2rem) 4rem; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 1.15rem 1.25rem;
}
.tarjeta h3 { margin: .45rem 0 .8rem; font-size: 1.05rem; letter-spacing: -.015em; }

.permisos { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: 0; }
.permisos li {
  font-family: var(--dato);
  font-size: .71rem;
  padding: .14rem .42rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  color: var(--apagado);
}

.actividad { list-style: none; padding: 0; margin: .6rem 0 0; }
.actividad li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .8rem;
  padding: .5rem 0;
  border-top: 1px solid var(--linea);
  font-size: .87rem;
}
.actividad time { font-family: var(--dato); font-size: .77rem; color: var(--apagado); }

.pendiente {
  margin-top: 2rem;
  border-left: 3px solid var(--verde);
  background: var(--papel);
  padding: .85rem 1.1rem;
  font-size: .87rem;
  color: var(--apagado);
}
.pendiente strong { color: var(--tinta); }

/* --- responsive ------------------------------------------------------------
 * Abajo de 60rem el lateral pasa a ser una banda arriba. Es la unica pantalla
 * donde el menu vuelve a ser horizontal, y ahi se justifica: no hay ancho para
 * las dos columnas. Los submenus siguen abriendose en linea. */
@media (max-width: 60rem) {
  .tablero { grid-template-columns: 1fr; }
  /* Acá el lateral es una banda ARRIBA, asi que la altura de pantalla y el
     pegado no van: no hay columna que acompañe al scroll. */
  .lateral { padding: 1rem 1.2rem; position: static; height: auto; }
  .menu { flex: initial; overflow: visible; }
  .lateral::after { top: auto; height: 3px; width: auto; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg,
      var(--verde-claro) 0 25%, var(--verde) 25% 50%,
      var(--verde-medio) 50% 75%, var(--verde-hondo) 75% 100%); }
  .menu { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.4rem; }
  .menu__grupo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .1rem .2rem; }
  .menu__titulo { margin: 0 .4rem 0 0; }
  .menu__hijos { flex-direction: row; margin: 0; padding-left: .5rem; }
  .menu__item[aria-current="page"]::before { left: 0; top: auto; bottom: 0; width: auto;
    right: 0; height: 2px; }
  .lateral__pie { margin-top: .6rem; flex-direction: row; align-items: baseline; gap: .8rem; }
  .accion { max-width: 12rem; }
}

/* --- responsive: el plano pasa arriba, en banda ---------------------------- */
@media (max-width: 54rem) {
  .entrada { grid-template-columns: 1fr; }
  .pulso {
    order: -1;
    margin-left: 0;
    clip-path: none;
    padding: 1.4rem 1.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .9rem 2rem;
    border-bottom: 3px solid var(--verde);
  }
  .pulso::before { display: none; }
  .pulso > :nth-child(1),
  .pulso > :nth-child(2),
  .pulso > :nth-child(3) { padding-left: 0; }
  .pulso .cifras { margin-top: 0; }
  .ultima { border-top: 0; padding-top: 0; }
  .ultima__hace { font-size: 1.4rem; }
  .entrada__form { padding: 2.5rem 1.5rem 3.5rem; }
}

/* =========================================================================
   LISTADO DE NOTAS
   Se escanea, no se lee: una fila por nota, densa. Que entren doce en pantalla
   o cuatro cambia el trabajo de todos los dias.
   ========================================================================= */

.oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.vacio { color: var(--apagado); font-style: italic; }

/* --- filtros: viven en la URL, no en la memoria del navegador ------------- */
.filtros {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem 1.5rem;
  margin-bottom: 1.2rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  display: flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600;
  color: var(--apagado);
  text-decoration: none;
  padding: .3rem .7rem;
  border: 1px solid var(--linea);
  border-radius: 2rem;
  background: var(--papel);
}
.chip:hover { border-color: var(--verde); color: var(--tinta); }
.chip:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.chip--puesto { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip__n { font-family: var(--dato); font-size: .75rem; opacity: .75; }

.buscar { display: flex; gap: .4rem; }
.buscar input, .buscar select {
  font: inherit; font-size: .87rem;
  padding: .35rem .6rem;
  border: 1px solid var(--linea);
  border-radius: 2px;
  background: var(--papel);
  color: inherit;
}
.buscar input { min-width: 12rem; }
.buscar input:focus-visible, .buscar select:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}

/* --- las filas ------------------------------------------------------------ */
.listado {
  list-style: none; margin: 0; padding: 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
}
.fila {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 16rem 9rem;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--linea);
}
.fila:last-child { border-bottom: 0; }
.fila:hover { background: #f7faf9; }

.fila__volanta {
  display: block;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--verde-medio);
  margin-bottom: .1rem;
}
.fila__titulo a {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  /* El titulo entero es el destino: es el objetivo mas grande de la fila y el
     unico link, asi que no hay donde errarle. */
  display: block;
}
.fila__titulo a:hover { color: var(--verde-hondo); text-decoration: underline; }
.fila__titulo a:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.fila__meta { display: flex; flex-direction: column; gap: .1rem; font-size: .82rem; }
.fila__seccion { font-weight: 600; }
.fila__autores { color: var(--apagado); }

.fila__fecha { display: flex; flex-direction: column; gap: .1rem; text-align: right; }
.fila__fecha .rotulo { font-size: .6rem; }
.fila__fecha time { font-family: var(--dato); font-size: .8rem; }

/* El estado se lee por forma y por color, no solo por color: a la velocidad a
   la que se mira esto, un borrador y una publicada no se pueden confundir. */
.pill {
  display: inline-block;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .18rem .5rem;
  border-radius: 2px;
  border: 1px solid;
}
.pill--1 { color: #7a6a1f; background: #fdf8e3; border-color: #e8dca5; }  /* borrador */
.pill--2 { color: #1f5a7a; background: #eaf4fa; border-color: #a9cfe3; }  /* programada */
.pill--3 { color: var(--verde-hondo); background: #e8f7f3; border-color: #a7ddd0; }
.pill--4 { color: var(--apagado); background: #f1f4f3; border-color: var(--linea); }

.vacio-caja {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--apagado);
}
.vacio-caja a { color: var(--verde-hondo); }

.paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1rem;
  font-size: .87rem;
}
.pagina {
  color: var(--verde-hondo); text-decoration: none; font-weight: 600;
  padding: .35rem .7rem; border: 1px solid var(--linea); border-radius: 2px;
  background: var(--papel);
}
.pagina:hover { border-color: var(--verde); }
.pagina--no { color: var(--apagado); border-color: transparent; background: none; }
.paginacion__donde { color: var(--apagado); font-family: var(--dato); font-size: .8rem; }

@media (max-width: 60rem) {
  .fila { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: none; }
  .fila__meta, .fila__fecha { grid-column: 2; text-align: left; }
  .fila__fecha { flex-direction: row; gap: .5rem; align-items: baseline; }
}


/* =========================================================================
   LA FICHA DE NOTA
   Pestañas en el area principal + riel derecho fijo, como Amura (`docs/20`).
   El riel lleva lo que se toca en TODAS las notas; las pestañas, lo que se toca
   en algunas. Y todos los campos estan siempre en el formulario: la pestaña solo
   cambia cual se ve, asi que un solo Guardar manda todo.
   ========================================================================= */

.ficha__barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .6rem 0 .7rem;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.ficha__que { display: flex; align-items: center; gap: .9rem; }
.volver { color: var(--apagado); text-decoration: none; font-size: .85rem; }
.volver:hover { color: var(--verde-hondo); }
.ficha__acciones { display: flex; align-items: center; gap: .6rem; }
.guardado { font-size: .78rem; color: var(--apagado); font-family: var(--dato); }

/* Sin banda muerta: la principal se estira y el riel es fijo y angosto. */
.ficha__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.2rem;
  align-items: start;
  margin-top: 1.2rem;
}
.ficha__riel { display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 4.2rem; }

/* --- las solapas ----------------------------------------------------------
 * Radios + CSS: andan sin JavaScript, y los campos de todas las pestañas siguen
 * en el DOM — que es lo que permite guardar todo de una sola vez. */
.pest__radio { position: absolute; opacity: 0; pointer-events: none; }
.pest__solapas { display: flex; gap: .15rem; border-bottom: 1px solid var(--linea); }
.pest__solapa {
  position: relative;
  display: flex; align-items: center; gap: .4rem;
  font-size: .87rem; font-weight: 600;
  color: var(--apagado);
  padding: .55rem 1rem;
  cursor: pointer;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 3px 3px 0 0;
  margin-bottom: -1px;
}
.pest__solapa:hover { color: var(--tinta); }
.pest__radio:checked + .pest__solapa {
  background: var(--papel);
  border-color: var(--linea);
  color: var(--tinta);
}
.pest__radio:focus-visible + .pest__solapa { outline: 2px solid var(--verde); outline-offset: -2px; }

/* El punto es lo que responde a la objecion contra las pestañas: lo que esta
   escondido avisa cuando tiene algo pendiente. */
.pest__punto { width: .45rem; height: .45rem; border-radius: 50%; background: #c8a93a; }

.pest__panel {
  display: none;
  background: var(--papel);
  border: 1px solid var(--linea); border-top: 0;
  border-radius: 0 3px 3px 3px;
}
.ficha:has(#pest-nota:checked) [data-pest="nota"],
.ficha:has(#pest-multimedia:checked) [data-pest="multimedia"],
.ficha:has(#pest-relacionadas:checked) [data-pest="relacionadas"],
.ficha:has(#pest-seo:checked) [data-pest="seo"] { display: block; }

.pest__cuerpo { padding: 1.2rem 1.4rem 1.6rem; }
.pest__encabezado { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.pest__ayuda { font-size: .85rem; color: var(--apagado); margin: 0 0 1rem; max-width: 44rem; }
.pest__pendiente { font-size: .8rem; color: var(--apagado); font-style: italic; margin: 0 0 1rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.5rem; }


/* HIJOS DIRECTOS, no descendientes — y el `>` es la corrección de un bug real.
 *
 * Escrita como `.ficha .campo select` (sin `>`), alcanzaba TODO lo que hubiera
 * adentro de un campo, por hondo que estuviera: los desplegables de la barra del
 * editor —que viven dentro del campo Cuerpo— salían con `width: 100%` y la barra
 * se partía en cinco filas. Es la misma historia del "Recuperar en blanco sobre
 * blanco" (`docs/22`): una regla escrita para una cosa que termina pintando otra.
 *
 * Con `>` la regla dice lo que quería decir: **el control de este campo**. Lo que
 * arma su propia estructura adentro (la fecha partida, las fichas de tags, el
 * editor) se pinta solo. */
.ficha .campo > textarea, .ficha .campo > input, .ficha .campo > select {
  width: 100%; font: inherit;
  padding: .5rem .65rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: var(--papel); color: inherit;
}
.ficha .campo > textarea { resize: vertical; }
.ficha .campo > input:focus-visible, .ficha .campo > textarea:focus-visible,
.ficha .campo > select:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}
.ficha .campo small { display: block; margin-top: .25rem; font-size: .78rem; color: var(--apagado); }
.ficha .campo small strong { color: #8d1e1a; }

.campo--titulo textarea {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
  border-color: transparent; border-bottom-color: var(--linea);
  padding-left: 0; padding-right: 0;
}
.campo--bajada textarea {
  font-size: 1.02rem; line-height: 1.5;
  border-color: transparent; border-bottom-color: var(--linea);
  padding-left: 0; padding-right: 0;
}
.campo--cuerpo { margin-top: 1.2rem; }
.editor__fuente { font-family: var(--dato); font-size: .8rem; line-height: 1.5; }

/* --- el riel ---------------------------------------------------------------- */
.bloque {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 3px;
  padding: .85rem .95rem .95rem;
}
.bloque .rotulo { margin: 0 0 .7rem; }
.bloque .campo { margin-bottom: .75rem; }
.bloque .campo:last-child { margin-bottom: 0; }
.bloque .campo > label { font-size: .74rem; }
.bloque small { display: block; margin-top: .4rem; font-size: .75rem; color: var(--apagado); }

.chk { display: flex; align-items: center; gap: .45rem; font-size: .86rem; margin: .3rem 0; }
.chk input { width: auto; }
.cabecera-bloque { padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--linea); }
.cabecera-bloque:last-of-type { border-bottom: 0; margin-bottom: 0; }

/* --- la grilla de fotos ----------------------------------------------------
 * Elegir una imagen es MIRAR IMAGENES: nadie reconoce una foto por su nombre de
 * archivo. Las miniaturas salen por el mismo camino que las del sitio, asi que
 * si el recorte se ve mal acá, se va a ver mal publicado. */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.foto {
  position: relative;
  display: block; cursor: pointer;
  border: 2px solid var(--linea); border-radius: 3px;
  overflow: hidden;
  background: #f2f5f4;
  transition: border-color .12s;
}
.foto:hover { border-color: var(--verde); }
.foto input { position: absolute; opacity: 0; pointer-events: none; }
.foto__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e3eae8; }
.foto__nombre {
  display: block; font-size: .76rem; line-height: 1.3;
  padding: .4rem .5rem;
  color: var(--apagado);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foto--puesta { border-color: var(--verde-hondo); }
.foto--puesta::after {
  content: "Elegida";
  position: absolute; top: .4rem; left: .4rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--verde-hondo); color: #fff;
  padding: .1rem .4rem; border-radius: 2px;
}
.foto--ninguna {
  display: flex; align-items: center; justify-content: center;
  min-height: 8rem; border-style: dashed;
}
.foto--ninguna .foto__nombre { white-space: normal; text-align: center; }

/* El foco: el pixel que se conserva al recortar. Lo posiciona el guion, porque
   la coordenada es un DATO y no un estilo — y en la hoja no entran estilos por
   fila. Sin JavaScript queda al centro, que ademas es el valor por defecto. */
.foto__foco {
  position: absolute; top: 50%; left: 50%;
  width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem;
  border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: 0 0 0 2px rgba(4, 33, 28, .55);
  pointer-events: none;
}
.foto__falta {
  position: absolute; top: .4rem; right: .4rem;
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  background: #fdf4f3; color: #8d1e1a; border: 1px solid #e3bebc;
  padding: .05rem .3rem; border-radius: 2px;
}

/* --- relacionadas y revision ------------------------------------------------ */
.relacionadas { list-style: none; margin: 0; padding: 0; }
.relacionadas .chk span { font-size: .85rem; }

.revision { list-style: none; margin: .6rem 0 0; padding: 0; }
.revision li {
  font-size: .85rem; line-height: 1.45;
  padding: .5rem .7rem; margin-bottom: .4rem;
  border-radius: 2px; border-left: 3px solid;
}
.revision--alta { background: #fdf4f3; border-color: #a3231f; }
.revision--media { background: #fdf8e3; border-color: #c8a93a; }
.revision li strong { display: block; }
.revision--bien { font-size: .87rem; color: var(--verde-hondo); }

/* --- avisos ------------------------------------------------------------------ */
.recuperar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: #fdf8e3; border: 1px solid #e8dca5; border-left: 3px solid #c8a93a;
  border-radius: 3px; padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.recuperar p { margin: 0 0 .3rem; font-size: .9rem; }
.recuperar__ayuda { color: #7a6a1f; font-size: .82rem; }
/* Solo la DISPOSICION. Como se ven los botones lo decide `.btn`, y nada de acá
   lo pisa — es la regla de `docs/22`, y esta caja es la prueba de por que existe:
   antes habia un `.recuperar__acciones button { background: papel }` que, por ser
   mas especifico, le ganaba a `.btn--principal` y dejaba **Recuperar en blanco
   sobre blanco**. Un boton ilegible en la caja que salva el trabajo del
   periodista, escrito por una regla puesta con la mejor intencion. */
.recuperar__acciones { display: flex; gap: .5rem; }

.ocupada {
  background: #fdf4f3; border: 1px solid #e3bebc; border-left: 3px solid #a3231f;
  border-radius: 3px; padding: .8rem 1.1rem; margin-bottom: 1rem; font-size: .9rem;
}
.ocupada p { margin: 0; }
/* =========================================================================
   AVISOS — uno solo, para siempre
   Hernan: "estos mensajes que aparecen por todos lados normalicemoslos, y creo
   que lo mejor es el mensaje que aparece flotando de costado asi no roba
   pantalla; hagamos que para siempre sea el mismo".

   Eran cinco redacciones del mismo parrafo, y ademas EMPUJABAN el contenido: el
   listado se corria una linea y la nota de arriba aparecia un renglon mas abajo
   que la vez anterior. Flotando, la pantalla es la misma con aviso y sin aviso.

   DOS GRUPOS, y la diferencia no es de estilo (ver `kit.ts`):
     .aviso   RESULTADO de algo que hiciste. Flota, no ocupa lugar, se va.
     .nota    ESTADO de lo que estas mirando. Va en la pagina y se queda.
   ========================================================================= */
.avisos {
  position: fixed;
  right: 1.2rem; bottom: 1.2rem;
  z-index: 60;
  display: flex; flex-direction: column-reverse; gap: .5rem;
  /* No tapa lo que hay debajo cuando esta vacia. Cada aviso lo vuelve a
     habilitar para si mismo: sin esto, la franja se comeria los clicks de toda
     la esquina inferior derecha de la pantalla. */
  pointer-events: none;
  max-width: min(26rem, calc(100vw - 2.4rem));
}
.aviso {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--tinta); color: #eaf3f1;
  border-left: 3px solid var(--verde);
  border-radius: 3px;
  padding: .7rem .5rem .7rem .9rem;
  font-size: .88rem;
  box-shadow: 0 8px 28px rgba(4, 33, 28, .28);
  animation: aviso-entra .18s ease-out;
}
.aviso__texto { margin: 0; flex: 1; }
.aviso__texto strong { color: #fff; }
/* La × hereda de `.btn btn--texto`; acá solo se aclara sobre fondo oscuro. */
.aviso__cerrar { color: #9fb5b0; font-size: 1.1rem; line-height: 1; padding: 0 .35rem; }
.aviso__cerrar:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.aviso--error { border-left-color: #e06a63; }
.aviso--atencion { border-left-color: #d9b03a; }

/* Se va solo, salvo los errores (ver `kit.ts`: lo bueno se va, lo malo espera). */
.aviso--yendose { animation: aviso-sale .25s ease-in forwards; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: none; }
}
@keyframes aviso-sale {
  to { opacity: 0; transform: translateX(1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso--yendose { animation: none; }
}

/* Abajo de 40rem la esquina no alcanza: ocupa el ancho, pegado abajo. */
@media (max-width: 40rem) {
  .avisos { left: .8rem; right: .8rem; bottom: .8rem; max-width: none; }
}

/* --- las notas de estado, que SI van en la pagina ------------------------- */
.nota {
  background: var(--papel); border-left: 3px solid var(--verde);
  padding: .7rem 1rem; margin-bottom: 1rem; font-size: .87rem; color: var(--apagado);
}
.nota--error { border-left-color: #a3231f; background: #fdf4f3; color: #8d1e1a; }
.nota--atencion { border-left-color: #c8a93a; background: #fdf8e3; color: #7a6a1f; }

@media (max-width: 66rem) {
  .ficha__cols { grid-template-columns: minmax(0, 1fr); }
  .ficha__riel { position: static; }
}

/* --- la pestaña de escribir, en dos columnas ------------------------------
 * La primera version tenia la hoja centrada y el resto del ancho vacio, que es
 * lo mismo que no usarlo. Ahora el texto va a la izquierda con medida de
 * lectura, y la derecha lleva lo que de verdad se mira mientras se escribe: la
 * foto elegida y cuanto tiene la nota. */
.escribir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 2rem;
  padding: 1.6rem 1.6rem 2.2rem;
  align-items: start;
}
.escribir__texto { max-width: 46rem; }
.escribir__lado { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 4.5rem; }

.elegida, .cuanto {
  border: 1px solid var(--linea); border-radius: 3px;
  padding: .8rem .9rem .9rem;
  background: #fbfdfc;
}
.elegida .rotulo, .cuanto .rotulo { margin: 0 0 .6rem; }
.elegida__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: 2px; background: #e3eae8; }
.elegida__pie { font-size: .78rem; color: var(--apagado); margin: .4rem 0 0; }
.elegida__sin {
  border: 1px dashed var(--linea); border-radius: 2px;
  padding: 1.2rem .8rem; text-align: center;
}
.elegida__sin p { margin: 0; font-size: .85rem; font-weight: 600; }
.elegida__ayuda { font-weight: 400 !important; font-size: .78rem !important;
  color: var(--apagado); margin-top: .3rem !important; }

/* Es un `label` de la solapa: cambiar de pestaña sin JavaScript y sin salir del
   formulario, que es lo que permite que un solo Guardar mande todo. */
.elegida__cambiar, .cuanto__aviso label {
  display: inline-block; margin-top: .6rem;
  font-size: .82rem; font-weight: 600;
  color: var(--verde-hondo); cursor: pointer;
  border-bottom: 1px solid var(--verde-claro);
}
.elegida__cambiar:hover, .cuanto__aviso label:hover { color: var(--verde-medio); }

.cuanto__n { font-family: var(--display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.03em; margin: 0; line-height: 1; }
.cuanto__n span { font-family: var(--texto); font-size: .8rem; font-weight: 400;
  letter-spacing: 0; color: var(--apagado); }
.cuanto__d { font-size: .78rem; color: var(--apagado); margin: .35rem 0 0; }
.cuanto__aviso { margin: .6rem 0 0; font-size: .82rem; }
.cuanto__bien { margin: .6rem 0 0; font-size: .82rem; color: var(--verde-hondo); }

@media (max-width: 78rem) {
  .escribir { grid-template-columns: minmax(0, 1fr); }
  .escribir__lado { position: static; flex-direction: row; flex-wrap: wrap; }
  .elegida, .cuanto { flex: 1 1 16rem; }
}

/* --- el editor de cuerpo (TipTap) ------------------------------------------
 * El textarea con los bloques sigue existiendo debajo: es el que viaja en el
 * formulario, asi que guardar, autoguardar y el "sin JavaScript" comparten un
 * solo camino. Cuando el editor monta, se esconde. */
.editor { border: 1px solid var(--linea); border-radius: 2px; background: var(--papel); }
.editor:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18); }

.editor__barra {
  display: flex; flex-wrap: wrap; gap: .2rem;
  padding: .35rem .4rem;
  border-bottom: 1px solid var(--linea);
  background: #fbfdfc;
  position: sticky; top: 3.4rem; z-index: 2;
}
.editor__boton {
  font: inherit; font-size: .85rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.9rem;
  border: 1px solid transparent; border-radius: 2px;
  background: none; color: var(--apagado); cursor: pointer;
}
/* Los iconos de la barra son los mismos del menu, un punto mas chicos. */
.editor__boton .ico { width: 1.05rem; height: 1.05rem; }
.editor__boton:hover { background: #eef4f2; color: var(--tinta); }
.editor__boton--activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.editor__boton:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.editor__boton[disabled] { opacity: .35; cursor: default; }
.editor__boton[disabled]:hover { background: none; color: var(--apagado); }

/* Los desplegables de la barra: un grupo de opciones excluyentes ocupa UN lugar
   en vez de tres botones, y de paso dice en cuál estás parado. */
.editor__menu {
  font: inherit; font-size: .82rem;
  height: 1.9rem; padding: 0 .35rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: #fff; color: var(--tinta); cursor: pointer;
}
.editor__menu:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.editor__sep { width: 1px; align-self: stretch; margin: .2rem .25rem; background: var(--linea); }

/* Lo que se inserta y no es texto. Se ve como va a salir, no como un marcador. */
.editor__img { margin: 1rem 0; }
.editor__img img { max-width: 100%; border-radius: 2px; display: block; }
.editor__img figcaption { font-size: .82rem; color: var(--apagado); margin-top: .3rem; }
/* El embebido en el editor dice DE QUIÉN es, no sólo la URL. Es el acuse de
   recibo del catálogo: si dice "YouTube · …", el sistema lo reconoció y va a
   salir publicado. Si el link no se reconoce, no llega a insertarse. */
.editor__embed {
  margin: 1rem 0; padding: .8rem 1rem;
  border: 1px dashed var(--linea); border-left: 3px solid var(--verde); border-radius: 2px;
  background: var(--papel); color: var(--apagado);
  font-family: var(--dato); font-size: .82rem;
  overflow-wrap: anywhere;
}
.editor .ProseMirror-selectednode { outline: 2px solid var(--verde); outline-offset: 2px; }
.editor mark { background: #fdf3c4; padding: 0 .1em; border-radius: 2px; }

/* El area de escritura: se lee como texto de nota, no como un formulario. */
.editor .ProseMirror {
  min-height: 22rem;
  padding: 1.2rem 1.3rem 2rem;
  outline: 0;
  font-size: 1.02rem;
  line-height: 1.65;
}
.editor .ProseMirror > * + * { margin-top: .9rem; }
.editor .ProseMirror p { margin: 0; }
.editor .ProseMirror h2 {
  font-family: var(--display);
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em;
  margin: 1.6rem 0 0;
}
.editor .ProseMirror blockquote {
  margin: 1.2rem 0; padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--verde);
  color: var(--tinta-suave); font-style: italic;
}
.editor .ProseMirror ul, .editor .ProseMirror ol { padding-left: 1.4rem; margin: .9rem 0; }
.editor .ProseMirror li { margin: .25rem 0; }
.editor .ProseMirror hr {
  border: 0; border-top: 1px solid var(--linea); margin: 1.6rem 0;
}
.editor .ProseMirror a { color: var(--verde-hondo); }

/* El transporte, escondido cuando el editor tomo el mando. */
.editor__fuente--oculta { display: none; }

/* El aviso de la copia local se distingue del de servidor: no es lo mismo
   "quedó en el servidor" que "quedó en esta máquina y no llegó a subir". */
.recuperar--local { background: #eaf4fa; border-color: #a9cfe3; border-left-color: #1f5a7a; }
.recuperar--local .recuperar__ayuda { color: #1f5a7a; }

/* =========================================================================
   LA MEDIATECA (`docs/21`)
   La misma grilla se usa en la pantalla y —despues— adentro del selector.
   ========================================================================= */

/* --- subir: primero y visible. En una redaccion el caso normal es venir con el
   archivo en la mano, no buscar donde esta el boton. --- */
.subir {
  display: flex; align-items: stretch; gap: .8rem;
  margin-bottom: 1.2rem;
}
.subir__caja {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: .2rem;
  padding: 1rem 1.2rem;
  border: 2px dashed var(--linea);
  border-radius: 3px;
  background: var(--papel);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.subir__caja:hover, .subir__caja:focus-within { border-color: var(--verde); background: #fbfdfc; }
.subir__caja--encima { border-color: var(--verde); background: #e8f7f3; }
.subir__caja input { position: absolute; opacity: 0; pointer-events: none; }
.subir__texto { font-size: .92rem; }
.subir__ayuda { font-size: .78rem; color: var(--apagado); }
.subir__boton { align-self: stretch; }

/* --- la grilla ------------------------------------------------------------ */
.mms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .9rem;
}
.mm {
  position: relative;
  display: block;
  text-decoration: none; color: inherit;
  border: 1px solid var(--linea);
  border-radius: 3px;
  overflow: hidden;
  background: var(--papel);
  transition: border-color .12s, transform .12s;
}
.mm:hover { border-color: var(--verde); }
.mm:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.mm__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e3eae8; }
.mm__sinimg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem;
  aspect-ratio: 16 / 10;
  background: #eef2f1;
  color: var(--apagado);
}
.mm__sinimg--grande { aspect-ratio: 16 / 9; border-radius: 3px; }
.mm__marca { font-size: 1.6rem; line-height: 1; }
.mm__ext { font-family: var(--dato); font-size: .7rem; text-transform: uppercase; }
.mm__pie { display: block; padding: .45rem .6rem .55rem; }
.mm__nombre {
  display: block; font-size: .84rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm__datos { display: block; font-family: var(--dato); font-size: .72rem; color: var(--apagado); }
.mm__foco {
  position: absolute; top: 50%; left: 50%;
  width: .55rem; height: .55rem; margin: -.28rem 0 0 -.28rem;
  border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: 0 0 0 2px rgba(4, 33, 28, .55);
  pointer-events: none;
}
.mm__falta {
  position: absolute; top: .4rem; right: .4rem;
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  background: #fdf4f3; color: #8d1e1a; border: 1px solid #e3bebc;
  padding: .05rem .3rem; border-radius: 2px;
}

/* --- el detalle: la imagen manda, porque elegir el foco es la operacion --- */
.media__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.5rem;
  align-items: start;
}
.media__vista { background: var(--papel); border: 1px solid var(--linea); border-radius: 3px;
  padding: 1rem; }

/* El foco se elige haciendo click encima: no hay recorte manual (`docs/16`), y
   este punto es lo unico que decide como se recorta la foto en cada modulo. */
.foco { position: relative; display: block; cursor: crosshair; line-height: 0; }
.foco__img { display: block; width: 100%; height: auto; border-radius: 2px; background: #e3eae8; }
.foco__punto {
  position: absolute; top: 50%; left: 50%;
  width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(15, 206, 169, .85);
  box-shadow: 0 0 0 2px rgba(4, 33, 28, .5), 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: none;
  transition: top .08s, left .08s;
}
@media (prefers-reduced-motion: reduce) { .foco__punto { transition: none; } }
.foco__ayuda { font-size: .82rem; color: var(--apagado); margin: .7rem 0 0; }

.media__datos {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem;
  margin: 1rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--linea);
  font-size: .82rem;
}
.media__datos dt { color: var(--apagado); }
.media__datos dd { margin: 0; font-family: var(--dato); font-size: .78rem; }

.media__form { display: flex; flex-direction: column; gap: .2rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 3px; padding: 1rem 1.1rem; }
.media__form .campo > input, .media__form .campo > textarea {
  width: 100%; font: inherit; padding: .5rem .65rem;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--papel); color: inherit;
}
.media__form .campo > textarea { resize: vertical; }
.media__form .campo > input:focus-visible, .media__form .campo > textarea:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}
.media__form .campo small { display: block; margin-top: .25rem; font-size: .76rem; color: var(--apagado); }
.foco__campos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

@media (max-width: 66rem) {
  .media__cols { grid-template-columns: minmax(0, 1fr); }
}

/* --- la barra de progreso de la subida ------------------------------------
 * Con archivos de 20 MB en una conexion de redaccion, una barra quieta es
 * indistinguible de algo colgado. Por eso el progreso es de SUBIDA (XHR) y no un
 * spinner de adorno. */
.progreso { margin: -.6rem 0 1.2rem; }
.progreso__barra {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--linea);
}
.progreso__barra span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--verde), var(--verde-claro));
  transition: width .15s linear;
}
.progreso__texto { margin: .4rem 0 0; font-size: .84rem; color: var(--apagado); }

/* --- filtros sueltos y "cargar mas" ---------------------------------------- */
.filtros-mas { display: flex; gap: .4rem; margin: -.4rem 0 1rem; }
.chip--suelto .chip__n { display: none; }
.mas { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.mas__cuantas { font-family: var(--dato); font-size: .78rem; color: var(--apagado); }

/* --- botones del detalle: TODOS del mismo tamaño --------------------------
 * Que "Borrar" fuera mas chico que "Guardar" no era un detalle estetico: la
 * diferencia de tamaño se lee como diferencia de importancia, y ahi el ojo
 * calcula mal donde esta cada cosa. Mismo tamaño, y lo destructivo se distingue
 * por color y por estar separado. */
.acciones__borrar { margin-right: auto; }

/* =========================================================================
   MEDIATECA, SEGUNDA PASADA
   Todo lo de acá salio de usarla: seleccion multiple, el dialogo de añadir, la
   pantalla de datos despues de subir, y botones que no se parten en dos lineas.
   ========================================================================= */

/* --- que NINGUN boton se parta en dos lineas -----------------------------
 * Un boton en dos renglones se lee como descuido antes de que uno sepa por que,
 * y tiene razon: si no entra, el problema es la etiqueta o el ancho, no el
 * usuario. */

.encabezado--con-accion {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.encabezado__ayuda { margin: .5rem 0 0; font-size: .87rem; color: var(--apagado); max-width: 44rem; }

/* --- el dialogo de añadir ------------------------------------------------- */
.dlg {
  width: min(34rem, 92vw);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 20px 60px rgba(4, 33, 28, .25);
}
.dlg::backdrop { background: rgba(4, 33, 28, .45); }
.dlg__titulo { font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 1rem; }
/* La × es un boton del sistema (`.btn btn--texto`); esta clase solo lo UBICA y
   le da el tamaño del signo. Lo demas —altura, foco, cursor— ya lo trae `.btn`. */
.dlg__cerrar { position: absolute; top: .5rem; right: .6rem;
  font-size: 1.4rem; line-height: 1; padding: .2rem .4rem; }

.dlg__otras { list-style: none; margin: 1.2rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: .8rem; }
.dlg__otras li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; font-size: .87rem; }
.dlg__otras strong { grid-column: 1; }
.dlg__otras span { grid-column: 1; font-size: .8rem; color: var(--apagado); }
.dlg__otras em {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--apagado);
  border: 1px solid var(--linea); border-radius: 2rem; padding: .15rem .55rem;
}

/* La caja de arrastre ahora vive adentro del dialogo. */
.dlg .subir { display: block; margin: 0; }
.dlg .subir__caja { display: block; text-align: center; padding: 1.6rem 1.2rem; }
.dlg .subir__texto { display: block; font-size: 1rem; margin-bottom: .3rem; }

/* Soltar sobre toda la pantalla. */
.soltando { position: relative; }
.soltando::after {
  content: "Soltá los archivos para subirlos";
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.4rem; font-weight: 700; color: var(--verde-hondo);
  background: rgba(232, 247, 243, .92);
  border: 3px dashed var(--verde);
  pointer-events: none;
}

/* --- seleccion multiple --------------------------------------------------- */
.mm__elegir {
  position: absolute; top: .45rem; left: .45rem; z-index: 2;
  width: 1.15rem; height: 1.15rem;
  border: 2px solid #fff; border-radius: 3px;
  background: rgba(4, 33, 28, .35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .12s;
}
.mm:hover .mm__elegir, .mm--elegida .mm__elegir { opacity: 1; }
.mm--elegida { border-color: var(--verde-hondo); }
.mm--elegida .mm__elegir { background: var(--verde-hondo); border-color: #fff; }
.mm--elegida .mm__elegir::after {
  content: "✓"; display: block; color: #fff; font-size: .8rem; line-height: 1.1rem; text-align: center;
}

/* La barra aparece sola cuando hay algo elegido. */
.seleccion {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .8rem; margin-bottom: .8rem;
  background: var(--tinta); color: #dfeae7;
  border-radius: 3px;
}
.seleccion__n { font-size: .87rem; margin-right: .4rem; }
.seleccion__n strong { font-family: var(--dato); color: var(--verde-claro); }
.seleccion__sep { flex: 1; }

/* --- la pantalla de datos despues de subir -------------------------------- */
.reciens { list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .8rem; }
.recien {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.2rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 3px;
  padding: 1rem;
}
.recien__vista { display: flex; flex-direction: column; gap: .4rem; }
.foco--chico .foco__img { max-height: 11rem; object-fit: contain; background: #eef2f1; }
.recien__ayuda { font-size: .76rem; color: var(--apagado); margin: 0; text-align: center; }
.recien__archivo { font-family: var(--dato); font-size: .72rem; color: var(--apagado); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recien__campos { display: flex; flex-direction: column; gap: .1rem; }
.recien__campos .campo { margin-bottom: .5rem; }
.recien__campos .campo > input {
  width: 100%; font: inherit; padding: .45rem .6rem;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--papel); color: inherit;
}
.recien__campos .campo > input:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}
.recien__dos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.recien__pie { display: flex; justify-content: flex-end; margin-top: 1rem; }

@media (max-width: 60rem) {
  .recien { grid-template-columns: minmax(0, 1fr); }
  .recien__dos { grid-template-columns: 1fr; }
}

/* `display: flex` le gana a `[hidden]`, asi que la barra se veia vacia con
   "0 seleccionados". Es el clasico, y hay que escribirlo. */
.seleccion[hidden], [hidden] { display: none !important; }

/* Un link que hace de boton tiene que verse como boton: si no, el ojo lo lee
   como "otra cosa" justo al lado de la accion principal. */
.secundaria--link, a.secundaria {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.3rem; padding: 0 1.1rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: var(--papel); color: var(--tinta);
  font-size: .87rem; font-weight: 600; text-decoration: none;
}
.secundaria--link:hover, a.secundaria:hover { border-color: var(--verde); color: var(--tinta); }

/* --- los dialogos de preguntar --------------------------------------------
 * `confirm()` y `prompt()` del navegador no son una opcion: se ven de otra
 * epoca, el boton dice "Aceptar" pase lo que pase, bloquean el hilo, y en varios
 * navegadores se pueden desactivar sin que la aplicacion se entere. */
.dlg--pregunta { width: min(26rem, 92vw); }
.dlg__texto { font-size: .9rem; color: var(--apagado); margin: 0 0 1.1rem; line-height: 1.5; }
.dlg--pregunta .campo { margin-bottom: 1.1rem; }
.dlg--pregunta .campo > input {
  width: 100%; font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--linea); border-radius: 2px; background: var(--papel); color: inherit;
}
.dlg--pregunta .campo > input:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}
.dlg__acciones { display: flex; justify-content: flex-end; gap: .6rem; }

/* =========================================================================
   EL SISTEMA DE BOTONES
   Hernan: "¿no podes hacer un sistema de botones que funcione siempre y
   olvidarnos de estar validando esto?".
   Antes habia reglas de boton en SEIS lugares —el login puso `.principal` con
   width:100%, la ficha lo piso con altura fija, el dialogo con otra— y por eso
   "Borrar", "Guardar" y "Guardar y seguir" no median lo mismo. El bug no era un
   descuido: era la consecuencia de tener la misma decision escrita seis veces.
   Acá esta UNA vez. Un boton es `.btn` + su variante, y nada mas.
   ========================================================================= */
.btn {
  /* La altura es la misma SIEMPRE. Es lo unico que hay que respetar para que
     tres botones al lado se vean como tres botones y no como un descuido. */
  height: 2.3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 0 1.05rem;
  font: inherit; font-size: .87rem; font-weight: 600;
  line-height: 1;
  white-space: nowrap;            /* ninguno se parte en dos lineas */
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.btn[disabled], .btn--apagado { opacity: .5; pointer-events: none; }

.btn--principal { background: var(--verde-hondo); border-color: var(--verde-hondo); color: #fff; }
.btn--principal:hover { background: var(--verde-medio); border-color: var(--verde-medio); color: #fff; }

.btn--secundario { background: var(--papel); border-color: var(--linea); color: var(--tinta); }
.btn--secundario:hover { border-color: var(--verde); color: var(--tinta); }

.btn--peligro { background: var(--papel); border-color: #e3bebc; color: #8d1e1a; }
.btn--peligro:hover { background: #fdf4f3; border-color: #a3231f; }

/* Para lo que no es una accion de peso: salir, plegar el menu. */
.btn--texto {
  height: auto; padding: 0 0 1px; background: none; border: 0;
  border-bottom: 1px solid #3a5450; color: #9fb5b0; font-size: .84rem;
}
.btn--texto:hover { border-bottom-color: var(--verde-claro); color: #fff; }

/* Sobre fondo oscuro (la barra de seleccion, el lateral). */
.btn--oscuro { background: transparent; color: #dfeae7; border-color: #3a5450; }
.btn--oscuro:hover { border-color: var(--verde-claro); color: #fff; }
.btn--peligro.btn--oscuro { color: #ffb4b0; border-color: #6b3330; background: transparent; }
.btn--peligro.btn--oscuro:hover { background: #3a1a18; border-color: #a3231f; }

.btn--bloque { width: 100%; }
.btn--grande { height: 2.7rem; font-size: .95rem; }

/* El chip es un boton de filtro: misma familia, forma distinta porque dice otra
   cosa —"estoy filtrando por esto"— y no ejecuta una accion. */
.btn--chip {
  height: 1.9rem; padding: 0 .75rem; border-radius: 2rem;
  background: var(--papel); border-color: var(--linea); color: var(--apagado);
  font-size: .85rem;
}
.btn--chip:hover { border-color: var(--verde); color: var(--tinta); }
.btn--chip-puesto { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.chip__n { font-family: var(--dato); font-size: .75rem; opacity: .75; }

/* Lo viejo, para que no vuelva: si alguien escribe `class="principal"` no se ve
   como boton y se nota enseguida. Es a proposito. */

/* =========================================================================
   FECHA Y HORA — uno solo para todo el sistema
   Hernan: "cuando es solo fecha puede andar, pero cuando hay que poner hora es
   muy malo el default". El culpable es `datetime-local`: mete la hora adentro
   del mismo control, en un desplegable minusculo. Partido en dos, cada nativo
   hace lo que sabe hacer bien.
   ========================================================================= */
.fh { display: flex; gap: .4rem; align-items: center; }
/* El componente se pinta solo: los dos controles viven adentro de `.fh`, no
   como hijos directos del campo, asi que la regla general no los alcanza — que
   es justamente lo que se busco al poner el `>`. */
.fh input {
  font: inherit;
  padding: .5rem .65rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: var(--papel); color: inherit;
}
.fh input:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}
.fh__dia { flex: 1 1 9rem; min-width: 0; }
.fh__hora { flex: 0 0 6.2rem; }
.fh__atajos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
/* Los atajos son lo que ningun calendario trae y es lo que una redaccion hace de
   verdad con una fecha. Chicos: son ayuda, no la accion principal. */
.fh__atajo {
  font-size: .76rem; height: 1.5rem; padding: 0 .5rem;
  border: 1px solid var(--linea); border-radius: 999px; color: var(--apagado);
}
.fh__atajo:hover { border-color: var(--verde); color: var(--tinta); background: var(--papel); }

/* =========================================================================
   ELEGIR VARIOS — el reemplazo del <select multiple>
   "es muy por default, ¿podemos tener un componente mas profesional?" (Hernan).
   Lo elegido arriba y a la vista; lo que se puede agregar, abajo y plegado.
   ========================================================================= */
.campo--elegir { display: flex; flex-direction: column; gap: .4rem; }
.campo__titulo { font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--apagado); }

.elegidos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.elegidos__uno label {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 1.8rem; padding: 0 .3rem 0 .6rem;
  border: 1px solid var(--verde); border-radius: 999px;
  background: #e8f7f3; font-size: .85rem; cursor: pointer;
}
/* El casillero es lo que hace que esto ande sin JavaScript, pero no se ve: la
   ficha ES la marca de que esta elegido. */
.elegidos__uno input { position: absolute; opacity: 0; width: 0; height: 0; }
.elegidos__sacar { color: var(--apagado); font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.elegidos__uno label:hover .elegidos__sacar { color: #8d1e1a; }
.elegidos__vacio { margin: 0; font-size: .85rem; color: var(--apagado); font-style: italic; }

.sumar { font-size: .85rem; }
.sumar summary { cursor: pointer; color: var(--verde-hondo); font-weight: 600; }
/* SE PINTA SOLO, y es la contracara del `>` de arriba: al acotar `.campo input`
   al hijo directo, todo control que un componente arme adentro de su propia
   estructura pasa a ser responsabilidad del componente. Este buscador quedó sin
   estilo la primera vez justamente por eso —lo marcó Hernán— y es el precio
   correcto: mejor un campo que hay que vestir que una regla que pinta lo que no
   le corresponde. */
.sumar__buscar {
  width: 100%; margin-top: .4rem;
  font: inherit; font-size: .85rem;
  padding: .4rem .55rem;
  border: 1px solid var(--linea); border-radius: 2px;
  background: #fbfdfc; color: inherit;
}
.sumar__buscar:focus-visible {
  outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
  background: #fff;
}
.sumar__lista {
  list-style: none; margin: .4rem 0 0; padding: 0;
  max-height: 11rem; overflow-y: auto;
  border: 1px solid var(--linea); border-radius: 2px;
}
.sumar__uno label { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; cursor: pointer; }
.sumar__uno label:hover { background: var(--papel); }
.sumar__uno[hidden] { display: none; }

/* =========================================================================
   TAGS — con acuse de recibo
   "no te quedan marcados con un chip cuando separas por comas, entonces no
   sabes muy bien si funciona" (Hernan). El campo de texto sigue siendo el que
   viaja; esto es lo que confirma que el sistema entendio.
   ========================================================================= */
.campo--tags .tags__caja {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  padding: .3rem .4rem; min-height: 2.3rem;
  border: 1px solid var(--linea); border-radius: 2px; background: #fff;
}
.campo--tags .tags__caja:focus-within {
  border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 167, 138, .18);
}
.tag {
  display: inline-flex; align-items: center; gap: .2rem;
  height: 1.6rem; padding: 0 .2rem 0 .55rem;
  border-radius: 999px; background: #eef4f2; border: 1px solid var(--linea);
  font-size: .82rem;
}
.tag__sacar { min-width: 1.1rem; height: 1.1rem; font-size: .95rem; padding: 0; color: var(--apagado); }
.tag__sacar:hover { color: #8d1e1a; background: none; }
.tags__nuevo { border: 0; outline: 0; flex: 1 1 7rem; min-width: 5rem; padding: .2rem; font: inherit; }

/* Un separador dentro de una columna de formulario. */
.rotulo--sep { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.chk--grande { font-size: .95rem; font-weight: 600; }

/* =========================================================================
   EL EDITOR, SEGUNDA PASADA
   Hernán: "entré a la página de TipTap y los iconos y funcionalidades eran
   mejores que lo que tenemos puesto… pensá que esto es todo el sistema".
   Tiene razón en las dos mitades: el editor es donde la redacción pasa el día,
   y le faltaban las dos cosas que hacen que un editor se sienta moderno —la
   barra que aparece donde está la selección, y el menú que aparece donde se va
   a insertar.
   ========================================================================= */

/* La caja pasa a ser el marco de referencia de lo que flota adentro. */
.editor { position: relative; }

/* --- negrita y cursiva son LETRAS, no dibujos (ver `ui/iconos.ts`) --------- */
.letra { font-family: var(--display); font-size: 1rem; line-height: 1; }
.letra--negrita { font-weight: 800; }
.letra--cursiva { font-style: italic; font-weight: 500; padding: 0 .15rem; }

/* --- la barra flotante ---------------------------------------------------- */
.editor__flota {
  position: absolute; z-index: 5;
  display: flex; gap: .1rem;
  padding: .2rem;
  background: var(--tinta);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(4, 33, 28, .3);
  animation: flota-entra .1s ease-out;
}
.editor__flota[hidden] { display: none; }
.editor__flota .editor__boton { color: #cfe0dc; }
.editor__flota .editor__boton:hover { background: #23433d; color: #fff; }
.editor__flota .editor__boton--activo { background: var(--verde); border-color: var(--verde); color: #fff; }
/* La punta que apunta a la selección: es lo que hace que se lea como "esto es
   para lo que marcaste" y no como una barra suelta. */
.editor__flota::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--tinta);
}
@keyframes flota-entra { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .editor__flota { animation: none; } }

/* --- el `+` de la línea vacía y su menú ----------------------------------- */
.editor__mas {
  position: absolute; left: .35rem; z-index: 4;
  width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: none; color: var(--apagado); cursor: pointer;
}
.editor__mas[hidden] { display: none; }
.editor__mas:hover { background: #eef4f2; color: var(--verde-hondo); }
.editor__mas .ico { width: 1.1rem; height: 1.1rem; }

.editor__lista {
  position: absolute; z-index: 6;
  min-width: 15rem;
  padding: .3rem;
  background: #fff;
  border: 1px solid var(--linea); border-radius: 3px;
  box-shadow: 0 10px 30px rgba(4, 33, 28, .16);
}
.editor__lista[hidden] { display: none; }
.editor__opcion {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .45rem .5rem;
  border: 0; border-radius: 2px;
  background: none; color: inherit; text-align: left; cursor: pointer;
  font: inherit;
}
.editor__opcion:hover { background: var(--papel); }
.editor__opcion .ico { width: 1.15rem; height: 1.15rem; color: var(--verde-hondo); flex: none; }
.editor__opcion span { display: flex; flex-direction: column; }
.editor__opcion strong { font-size: .88rem; font-weight: 600; }
.editor__opcion small { font-size: .76rem; color: var(--apagado); }

/* --- el texto de ayuda del documento vacío -------------------------------- */
/* Con `::before` y `float`, que es lo que no empuja el cursor una línea abajo. */
.editor .ProseMirror .editor__marcador::before {
  content: attr(data-marcador);
  float: left; height: 0; pointer-events: none;
  color: var(--apagado); opacity: .7;
}

/* La barra flotante, cuando no entra arriba, va abajo — y la punta con ella. */
.editor__flota--abajo::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--tinta);
}

/* --- la imagen en el editor: como se va a ver publicada -------------------
 * Hernán: "meto una imagen y pone una imagencita ahí perdida". El editor tiene
 * que mostrar la foto al tamaño que va a salir, con su epígrafe debajo y
 * escribible. Una miniatura obliga a imaginarse el resultado. */
.editor__img { margin: 1.6rem 0; }
.editor__img img {
  display: block; width: 100%; height: auto;
  border-radius: 2px; background: var(--papel);
}
.editor__img figcaption {
  font-size: .85rem; color: var(--apagado);
  padding: .45rem .2rem 0;
  border-bottom: 1px dashed transparent;
  min-height: 1.6em;
}
/* El epígrafe vacío se ANUNCIA: es el campo que nunca se completa si no se pide. */
.editor__img figcaption:empty::before,
.editor__img figcaption.is-empty::before {
  content: attr(data-marcador);
  color: var(--apagado); opacity: .6; pointer-events: none;
}
.editor__img figcaption:focus { outline: 0; border-bottom-color: var(--verde); }

/* Los tres tamaños. Son DATO del bloque, no estilo suelto: el sitio decide qué
   significa cada uno en su layout, y una nota escrita hoy no se rompe si el
   diseño cambia. Acá se muestra la proporción, que es lo que hay que juzgar. */
.editor__img--ancha { margin-left: -2rem; margin-right: -2rem; }
.editor__img--completa { margin-left: -2rem; margin-right: -2rem; }
.editor__img--completa img { border-radius: 0; }

/* La barra del bloque: la misma forma que la flotante de texto, con etiquetas
   en vez de íconos donde el nombre dice más que un dibujo. */
.editor__flota--bloque .editor__tam {
  font-size: .76rem; font-weight: 600; letter-spacing: .01em; padding: 0 .35rem;
}
.editor__flota--bloque .editor__sep { background: #3a5450; }

/* =========================================================================
   EL SELECTOR DE MULTIMEDIA
   Hernán: "el modal que abre de multimedia parecemos un CMS de gente sin
   experiencia". Tenía razón, y no era cuestión de estilo: lo que había era una
   lista de miniaturas sacadas del DOM, sin buscador ni filtros, cuando
   `docs/21` decía "selector reusable". Ahora es LA MEDIATECA adentro de un
   diálogo — mismos filtros, misma grilla, mismo scroll.
   ========================================================================= */
.dlg--selector {
  width: min(64rem, 94vw);
  max-width: none;
  height: min(46rem, 88vh);
  padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column;
}
.selector { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.selector__cab { margin-bottom: .3rem; }
.selector__cuantos { margin: .15rem 0 0; font-size: .84rem; color: var(--apagado); }
/* Lo único que scrollea es la grilla: los filtros y el buscador se quedan
   arriba, que es donde hacen falta cuando hay doscientos archivos. */
.selector__grilla { flex: 1; min-height: 0; overflow-y: auto; padding-top: .2rem; }
.selector__cargando { color: var(--apagado); font-size: .9rem; padding: 2rem 0; }
/* En el selector la tarjeta ELIGE: no hay casillero de selección múltiple. */
.dlg--selector .mm__elegir { display: none; }
.dlg--selector .mm { cursor: pointer; }
.dlg--selector .mms { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

/* --- el cursor ENTRE bloques ----------------------------------------------
 * Hernán: "tengo dos imágenes y no tengo forma de poner texto entre medio".
 * ProseMirror ya tenía la posición —se llega con las flechas y con un click—,
 * pero TipTap es headless y **no trae este CSS**: el cursor estaba ahí y era
 * invisible. Para el que escribe, invisible es lo mismo que inexistente.
 *
 * Se dibuja como un cursor de texto ancho, que es lo que es: si escribís, ahí
 * nace un párrafo. */
.editor .ProseMirror-gapcursor { display: none; pointer-events: none; position: relative; }
.editor .ProseMirror-gapcursor::after {
  content: ""; display: block; position: absolute; top: -2px;
  width: 100%; border-top: 2px solid var(--verde);
  animation: gap-late 1.1s steps(2, start) infinite;
}
.editor .ProseMirror-gapcursor:first-child { margin-top: 0; }
.editor .ProseMirror-focused .ProseMirror-gapcursor { display: block; }
@keyframes gap-late { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .editor .ProseMirror-gapcursor::after { animation: none; }
}

/* La zona de abajo de todo: clic ahí y seguís escribiendo. Sin esto, una nota
   que termina en imagen no tiene dónde poner el cursor. */
.editor .ProseMirror { padding-bottom: 2.5rem; }