/* 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.
 *
 * SIN TOPE DE ANCHO. Probe capar el contenedor para que lo que sobra quedara
 * como margen de pagina, y Hernan lo rechazo en el acto: *"seguis sin usar el
 * 100% del ancho en pantallas grandes, no se aprovecha nada"*. Es la misma
 * respuesta que da Amura, que no capa nada: `col-md-8` + `col-md-4` y los
 * campos se estiran. El ancho no se administra recortando la pagina sino
 * poniendo campos EN FILA adentro (ver `.escribir__fila`), que es lo que
 * convierte el sobrante en algo util en vez de en aire. */
.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); }

/* EL TONO SE TIENE QUE VER SIN LEER.
 *
 * Acá los tres tonos se distinguian solo por 3px de borde izquierdo sobre el
 * mismo fondo oscuro: "Guardado" y "No se pudo guardar" eran, de reojo, la misma
 * caja verde. Lo marco Hernan y tiene razon — un aviso que hay que LEER para
 * saber si algo salio bien no esta avisando nada.
 *
 * Ahora cambia el fondo entero, y ademas hay un simbolo: el color solo no alcanza
 * para quien no lo distingue, y es la mitad de los hombres con daltonismo rojo-
 * verde justo en el par que mas se usa. El simbolo va por CSS y no en el HTML
 * porque es decoracion: quien usa un lector de pantalla ya recibe `role="alert"`
 * en los errores y `role="status"` en el resto, que es la señal de verdad. */
.aviso::before {
  content: "✓";
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1.35;
}

.aviso--error {
  background: #4a1f1c;
  border-left-color: #ff8a80;
  color: #ffe3e0;
}
.aviso--error::before { content: "!"; color: #ff8a80; }
.aviso--error .aviso__cerrar { color: #e8b4af; }

.aviso--atencion {
  background: #4a3a10;
  border-left-color: #ffcf4d;
  color: #fdf0cf;
}
.aviso--atencion::before { content: "•"; color: #ffcf4d; }
.aviso--atencion .aviso__cerrar { color: #ddc68a; }

/* 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 UNA columna --------------------------------
 * La columna del medio (seccion, firma, foto, contador) se fue: en un monitor
 * normal se llevaba 17rem que le hacian falta al texto — ver el comentario de
 * `pestañaNota` en `ficha.ts` para la cuenta. Lo que tenia se repartio en el
 * flujo, en el orden en que se usa. */
.escribir { padding: 1.6rem 1.6rem 2.2rem; }

/* Sin `max-width`: titulo, bajada y cuerpo toman TODO el ancho de la columna,
   como el `col-md-8` de Amura. Es lo que pidio Hernan y es lo que hace que en un
   monitor grande no sobre nada. */
.escribir__hoja { min-width: 0; }

/* LA FILA DE ARRIBA es lo que aprovecha el ancho de verdad: seccion, firma y
   temas son tres controles chicos, y uno abajo del otro desperdician una
   pantalla ancha dos veces (dejan aire a la derecha Y empujan el texto para
   abajo). En fila, el monitor grande los muestra los tres de una y el chico los
   apila solo — `auto-fit` decide sin media query. Es la fila de Amura
   (`Sección | Tema`, `Autor | Fecha | Hora`) con nuestros campos. */
.escribir__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 1.6rem;
  align-items: start;
}

/* --- un slot de multimedia ------------------------------------------------
 * Tira ancha y baja, no tarjeta: la solapa es una LISTA de slots (principal,
 * y mañana portada y video), asi que cada uno tiene que costar poco alto para
 * que se vean todos juntos. */
.slot {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--linea); border-radius: 3px;
  background: #fbfdfc;
  padding: .8rem 1rem;
  margin-bottom: .8rem;
}
.slot__img, .slot__sin {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: 2px; background: #e3eae8;
}
.slot__sin { border: 1px dashed var(--linea); background: none; }
.slot__que { min-width: 0; }
.slot__rol {
  margin: 0 0 .15rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--apagado);
}
.slot__nombre {
  margin: 0; font-size: .92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot__ayuda { margin: .25rem 0 0; font-size: .8rem; color: var(--apagado); }
.slot__ayuda strong { color: #8d1e1a; }
.slot__acciones { display: flex; gap: .4rem; align-items: center; }
/* Un slot que reemplaza a la principal esta apagado hasta que haya principal.
 * El boton se emite igual y se esconde acá: destrabarlo es sacar el atributo. */
.slot[data-bloqueado] { opacity: .55; }
.slot[data-bloqueado] .slot__accion { display: none; }

.medida__aviso {
  font-size: .82rem; font-weight: 600;
  color: var(--verde-hondo); cursor: pointer;
  border-bottom: 1px solid var(--verde-claro);
}
.medida__aviso:hover { color: var(--verde-medio); }

/* --- la medida del texto, pegada abajo del editor -------------------------- */
.medida {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  margin: .35rem 0 0;
  font-size: .78rem; color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.medida__aviso[hidden] { display: none; }

/* --- 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); }

/* LA BARRA, acercada a `ideas/tiptap/interface`.
   Lo que la separaba de un editor de verdad no era el color: eran los dos
   `<select>` nativos —cajas con borde que leen como formulario— y unos botones
   apretados. Ahora es fondo blanco, area de click cuadrada y holgada, iconos
   parejos y grupos separados por una linea fina. */
.editor__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  padding: .3rem .45rem;
  border-bottom: 1px solid var(--linea);
  background: #fff;
  position: sticky; top: 3.4rem; z-index: 2;
}
.editor__boton {
  font: inherit; font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
  min-width: 2.1rem; height: 2.1rem;
  border: 1px solid transparent; border-radius: .375rem;
  background: none; color: #4a5a57; cursor: pointer;
}
/* Los iconos de la barra son los mismos del menu, un punto mas chicos. */
.editor__boton .ico { width: 1.1rem; height: 1.1rem; }
/* Gris neutro y no verdoso: el hover de una barra de herramientas no tiene que
   opinar, solo decir "esto se puede apretar". */
.editor__boton:hover { background: #f0f2f1; color: var(--tinta); }
/* ACTIVO SUAVE, no invertido. Antes era fondo `--tinta` con el icono en blanco:
   con cuatro marcas puestas la barra quedaba con cuatro manchas negras. Un fondo
   tenue con el icono oscuro dice lo mismo sin gritar — es lo que hace la
   referencia. */
.editor__boton--activo,
.editor__boton--abierto { background: #e3ebe9; color: var(--tinta); }
.editor__boton--activo:hover, .editor__boton--abierto:hover { background: #d8e3e0; }
.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: #4a5a57; }

/* El caret de un desplegable acompaña al icono: mas chico y mas apagado, si no
   compite con el dibujo que dice de que se trata. */
.editor__boton--desp { padding: 0 .3rem; }
.editor__boton--desp .ico:last-child { width: .8rem; height: .8rem; opacity: .55; }

/* --- el menu de un desplegable (`imagen2.png` de la referencia) --------------
   Icono + etiqueta por fila. La etiqueta es lo que un `<select>` daba gratis y
   un boton con dibujo solo no da: sin ella, "viñetas" y "numerada" son dos
   dibujos parecidos y hay que adivinar. */
.editor__desp { position: relative; display: inline-flex; }
.editor__desp-menu {
  position: absolute; top: calc(100% + .3rem); left: 0; z-index: 5;
  min-width: 11rem; padding: .3rem;
  background: #fff; border: 1px solid var(--linea); border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(4, 33, 28, .14);
  display: grid; gap: .1rem;
}
.editor__desp-menu[hidden] { display: none; }
.editor__desp-item {
  font: inherit; font-size: .86rem; text-align: left;
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem; border: 0; border-radius: .375rem;
  background: none; color: var(--tinta); cursor: pointer; width: 100%;
}
.editor__desp-item .ico { width: 1.05rem; height: 1.05rem; flex: none; opacity: .75; }
.editor__desp-item:hover { background: #f0f2f1; }
.editor__desp-item:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.editor__desp-item--puesta { background: #e3ebe9; font-weight: 600; }
.editor__desp-item--puesta .ico { opacity: 1; }

.editor__sep { width: 1px; height: 1.3rem; margin: 0 .35rem; 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; }
/* Los colores del resaltado. LA FUENTE ES `compartido/resaltados.ts` y hay un
   test que compara esta hoja con la del sitio y con la de AMP: si el editor
   mostrara un verde y el sitio otro, el periodista elegiria a ciegas. */
.editor mark { background: #fdf3c4; padding: 0 .1em; border-radius: 2px; }
.editor mark.res-verde { background: #d9f2e3; }
.editor mark.res-celeste { background: #d8ecfb; }
.editor mark.res-rosa { background: #fbdde3; }
.editor mark.res-lila { background: #e8ddf7; }

/* Las pastillas del desplegable de resaltado (`imagen3.png` de la referencia). */
.editor__desp-menu--fila { display: flex; gap: .15rem; min-width: 0; }
.editor__desp-menu--fila .editor__desp-item { padding: .35rem; width: auto; }
.editor__color {
  display: block; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid rgba(4, 33, 28, .18);
}
.editor__color--amarillo { background: #fdf3c4; }
.editor__color--verde { background: #d9f2e3; }
.editor__color--celeste { background: #d8ecfb; }
.editor__color--rosa { background: #fbdde3; }
.editor__color--lila { background: #e8ddf7; }

/* El area de escritura: se lee como texto de nota, no como un formulario. */
/* El `padding-left` es un CANAL, no una sangría estética: el `+` de la línea
   vacía vive ahí. Con 1.3rem el botón (que arranca en .35rem y mide 1.6rem)
   quedaba MONTADO sobre la primera letra — lo marcó Hernán como "molesta y no
   hace nada", y la mitad de eso era esto: no se leía como un botón sino como
   basura encima del texto. El canal deja también el lugar donde va a ir la
   manija de arrastre. */
.editor .ProseMirror {
  min-height: 22rem;
  padding: 1.2rem 1.3rem 2rem 2.5rem;
  outline: 0;
  font-size: 1.02rem;
  line-height: 1.65;
}
.editor .ProseMirror > * + * { margin-top: .9rem; }
.editor .ProseMirror p { margin: 0; }
/* LOS TRES NIVELES SE TIENEN QUE DISTINGUIR ESCRIBIENDO, no al publicar.
   Si en el editor los tres se ven igual, elegir entre "Subtítulo 1" y
   "Subtítulo 2" es un acto de fe — y la jerarquía la arma quien escribe. */
.editor .ProseMirror h2,
.editor .ProseMirror h3,
.editor .ProseMirror h4 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  margin: 1.6rem 0 0;
}
.editor .ProseMirror h2 { font-size: 1.25rem; }
.editor .ProseMirror h3 { font-size: 1.08rem; }
.editor .ProseMirror h4 { font-size: .97rem; color: #33534d; }
.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. */
/* CONTENIDA, y el ALTO es el que importa. A ancho completo una foto apaisada ya
   ocupa media pantalla, y una vertical de 2560px no entra ni de lejos: hay que
   hacer scroll para ver dónde se está poniendo el foco, que es justo lo que esta
   pantalla existe para poder mirar de una.
   `fit-content` en el contenedor NO es cosmético: el punto se posiciona en
   porcentaje contra él, y el clic se mide con su `getBoundingClientRect()`. Si el
   contenedor fuera más ancho que la imagen —que es lo que pasa apenas la imagen
   deja de ocupar el 100%—, el punto quedaría corrido y el clic guardaría un foco
   que no es donde se hizo clic. Así el contenedor calca a la imagen. */
.foco {
  position: relative; display: block; width: fit-content; max-width: 100%;
  margin: 0 auto; cursor: crosshair; line-height: 0;
}
.foco__img {
  display: block;
  max-width: 100%; max-height: min(70vh, 40rem); width: auto; 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: "Guardar y seguir", los atajos de fecha,
   la × de un dialogo, salir, plegar el menu.

   ESTABA ESCRITO PARA FONDO OSCURO Y SE USA MAYORMENTE SOBRE CLARO, que es el
   bug que reporto Hernan: el hover ponia el texto en `#fff` sobre papel, o sea
   invisible. De los siete usos, CUATRO son sobre fondo claro —"Guardar y seguir"
   entre ellos, que es el que mas se aprieta— y tres sobre oscuro. La base tiene
   que ser la del fondo por defecto del gestor, que es el claro; lo oscuro se
   pide, no se hereda. */
.btn--texto {
  height: auto; padding: 0 0 1px; background: none; border: 0;
  border-bottom: 1px solid var(--linea); color: var(--apagado); font-size: .84rem;
}
.btn--texto:hover { border-bottom-color: var(--verde); color: var(--tinta); }

/* LAS SUPERFICIES OSCURAS, TODAS JUNTAS Y EXPLICITAS.
   Antes vivian de que la base estuviera pensada para ellas. Y el detalle que casi
   se escapa al invertir la base: `.aviso__cerrar:hover` esta MUCHO mas arriba en
   esta hoja y tiene la misma especificidad que `.btn--texto:hover`, asi que la
   regla nueva le ganaba por orden y dejaba la × del aviso oscura sobre oscuro —
   el mismo bug, mudado. Por eso van con el contenedor adelante: gana el contexto,
   no el orden. */
.lateral .btn--texto,
.aviso .btn--texto { border-bottom-color: #3a5450; color: #9fb5b0; }
.lateral .btn--texto:hover { border-bottom-color: var(--verde-claro); color: #fff; }
/* La × del aviso no lleva subrayado: es un cierre, no un enlace de accion. */
.aviso .btn--texto { border-bottom-color: transparent; }
.aviso .btn--texto:hover { border-bottom-color: transparent; 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; }
/* UN CHIP PUESTO INVIERTE LOS COLORES, asi que el hover de `.btn--chip` —que
   oscurece el TEXTO hasta `--tinta`— lo dejaba del mismo color que el fondo:
   el filtro activo desaparecia justo cuando el mouse estaba encima. Reportado
   por Hernan. El hover de un chip puesto se queda en blanco y mueve el borde,
   que es lo unico que puede cambiar sin perder el contraste. */
.btn--chip-puesto:hover { background: var(--tinta); border-color: var(--verde); 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; }

/* --- La dirección pública de la nota (riel de Publicación) -------------------
   Se muestra, no se edita: `url_at` se congela en la primera publicación y ése
   es justamente el motivo por el que existe. La fecha de la URL se lee adentro
   del enlace, que es lo que faltaba para poder explicar una nota cuya URL no
   coincide con las dos fechas de arriba. */
.urlpub { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.urlpub li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.urlpub__cab { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
/* `break-all` y no `ellipsis`: un slug largo cortado con puntos suspensivos deja
   de servir para lo único que se usa, que es leer la fecha y copiar el enlace. */
.urlpub__enlace { font-size: .8rem; line-height: 1.35; word-break: break-all; }
.urlpub--provisoria .urlpub__enlace { opacity: .7; font-style: italic; }
.urlpub--sin { font-size: .8rem; opacity: .7; margin: 0; }

/* --- La pantalla de guardado (`ui/guardada.ts`) ------------------------------
   Reemplaza al "volver al listado". Lo que se viene a buscar acá es LA URL: para
   pasarsela a quien prepara la publicidad. Por eso la direccion es lo unico que
   pesa visualmente y todo lo demas está apagado. */
.guardada { max-width: 46rem; }
.guardada__ok { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--verde-hondo); font-weight: 700; margin: 0 0 .3rem; }
.guardada__titulo { font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .3rem; }
.guardada__estado { font-size: .86rem; color: var(--apagado); margin: 0 0 1.4rem; }

.guardada__sitios { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.guardada__sitio { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem;
  align-items: center; padding: .8rem 1rem; border: 1px solid var(--linea);
  border-radius: .5rem; background: var(--papel); }
.guardada__cab { grid-column: 1; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--apagado); }
.guardada__principal { grid-column: 2; grid-row: 1; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--verde-hondo); font-weight: 700; }
/* `break-all`: una URL cortada con puntos suspensivos no se puede copiar a ojo,
   que es justo para lo que se muestra. */
.guardada__url { grid-column: 1; grid-row: 2; font-size: .92rem; word-break: break-all;
  color: var(--tinta); font-weight: 600; }
.guardada__copiar { grid-column: 2; grid-row: 2; }
.guardada__falta { grid-column: 1; grid-row: 2; font-size: .86rem; color: var(--apagado); }
.guardada__sitio--sin { border-style: dashed; }

.guardada__sale { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: .5rem;
  background: #eef7f4; font-size: .88rem; line-height: 1.5; }
.guardada__sale--borrador { background: var(--papel); border: 1px solid var(--linea); }

.guardada__seguir { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); }
.guardada__seguir .rotulo { margin-bottom: .7rem; }
.guardada__seguir .btn { margin: 0 .4rem .4rem 0; }