/* ──────────────────────────────────────────────────────────────────────────
   ANUNCIOS · lo propio de esta pantalla

   Casi todo viene ya hecho: las cajas y las píldoras de `tecnologia-nueva.css`
   (`.tg-*`) y el cartel de los diálogos de la casa (`.dlg-*`). Aquí está solo
   lo que no existía: la lista con su interruptor, el editor a dos columnas y
   la vista previa.
   ────────────────────────────────────────────────────────────────────────── */

#anuncios-wrap .an { display: flex; flex-direction: column; gap: 16px; }

.an-resumen {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--text-2);
}
.an-resumen b { color: var(--text); font-weight: 600; }

.an-nuevo { margin-inline-start: auto; }
.an-guardar { margin-inline-start: auto; }
/* Apagado tiene que PARECER apagado: en rojo y a plena luz, un botón que no
   hace nada al pulsarlo se lee como una pantalla rota. */
.an-guardar:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* ── La lista ───────────────────────────────────────────────────────────── */
.an-lista { list-style: none; margin: 0; padding: 0; }

.an-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.an-fila:first-child { border-top: 0; }
/* El que se está escribiendo, señalado con la raya roja del sistema. */
.an-fila-abierta {
  box-shadow: inset 2px 0 0 var(--blue);
  padding-inline-start: 10px;
}

.an-fila-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.an-fila-txt b { font-size: 13.5px; font-weight: 600; }
.an-fila-txt i {
  font-style: normal;
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-fila-txt:hover b { color: var(--blue); }

/* El interruptor. Es lo único redondo de la pantalla y es a propósito: un
   interruptor cuadrado no se lee como un interruptor, se lee como una casilla
   a medio pintar. Por eso el radio lleva `!important`: el sistema de diseño
   cuadra TODO con `border-radius: 0 !important` —y hace bien— pero esta es la
   excepción que justifica la regla. */
.an-interruptor {
  flex: 0 0 auto;
  width: 38px; height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px !important;
  background: var(--surface-2);
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.an-interruptor i {
  display: block;
  width: 16px; height: 16px;
  margin: 2px;
  border-radius: 50% !important;
  background: var(--text-soft);
  transition: transform .16s, background .16s;
}
.an-interruptor.on { background: var(--blue); border-color: var(--blue); }
.an-interruptor.on i { transform: translateX(16px); background: #fff; }
.an-interruptor:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── El editor ──────────────────────────────────────────────────────────── */
.an-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 980px) { .an-editor { grid-template-columns: minmax(0, 1fr); } }

.an-campos { display: flex; flex-direction: column; gap: 12px; }
.an-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .an-rejilla { grid-template-columns: minmax(0, 1fr); } }
/* Día y hora, día y hora. Cuatro columnas estrechas en vez de dos anchas: así
   se lee «el 23 a las 22:00» de un vistazo en vez de tener que emparejarlos. */
.an-rejilla-4 { grid-template-columns: 1.3fr .9fr 1.3fr .9fr; }
@media (max-width: 820px) { .an-rejilla-4 { grid-template-columns: 1.3fr .9fr; } }

.an-pista {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-soft);
}
.an-pista b { color: var(--text-2); font-weight: 600; }

/* ── La vista previa ────────────────────────────────────────────────────────
   El cartel de verdad, encogido y sobre el velo oscuro que tendrá detrás. Se
   enseña así y no sobre blanco porque un cartel claro sobre fondo claro
   engaña: en la pantalla real va sobre todo lo demás, atenuado. */
.an-previa-caja { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.an-previa-rotulo {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.an-previa-lienzo {
  display: grid;
  /* `minmax(0, 1fr)` y no una columna automática: con la columna al tamaño de
     su contenido, la franja —que es ancha por naturaleza— no podía encoger y
     se salía del recuadro por la derecha. Con esto la columna manda y el
     texto de dentro hace lo que haría de verdad, cortarse con puntos. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 26px 18px;
  min-height: 230px;
  background: rgba(20, 22, 31, .55);
  border: 1px solid var(--border);
}

/* Dentro del lienzo el cartel no es un diálogo: no flota, no se puede tocar y
   no debe robar el foco. */
.an-cartel.an-previa {
  max-width: 100%;
  position: static;
  transform: none;
  margin: 0;
  max-width: 340px;
  width: 100%;
  pointer-events: none;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5);
}

/* El tono. Lo lleva el rótulo de arriba, no el fondo entero: un cartel rojo
   de lado a lado se lee como un error del sistema, y esto es un aviso. */
.an-cartel.an-mantenimiento .dlg-eyebrow i { background: var(--amber, #b26b00); }
.an-cartel.an-urgente .dlg-eyebrow i { background: var(--blue); }
.an-cartel.an-urgente { box-shadow: inset 3px 0 0 var(--blue), var(--shadow, 0 18px 40px -14px rgba(0, 0, 0, .4)); }

/* ══════════════════════════════════════════════════════════════════════════
   SEGUNDA VUELTA · «más gracia, más opciones, que no sea tan plano»
   La franja, el selector de formato, los iconos y las plantillas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La franja ─────────────────────────────────────────────────────────────
   Una banda bajo las pestañas que no corta el paso. Vive fuera del trozo que
   hace scroll, igual que la de respuestas de cliente, para que no se vaya
   hacia arriba al bajar por una tabla larga. */
.an-franja {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--text);
  font-size: 13.5px;
}
.an-franja-ico { display: flex; flex: 0 0 auto; color: var(--text-2); }
.an-franja-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-franja-txt b { font-weight: 600; }
.an-franja-txt span { color: var(--text-2); }

.an-franja-acc,
.an-franja-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-2);
}
.an-franja-acc {
  padding: 4px 12px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.an-franja-acc:hover { background: var(--surface-2); }
.an-franja-x { font-size: 20px; line-height: 1; padding: 0 4px; }
.an-franja-x:hover { color: var(--text); }

/* El tono, en el filete de la izquierda. No en el fondo entero: una banda roja
   de lado a lado se lee como que la web se ha roto, y esto es un aviso. */
.an-franja.an-mantenimiento { box-shadow: inset 3px 0 0 var(--amber, #b26b00); }
.an-franja.an-urgente       { box-shadow: inset 3px 0 0 var(--blue); }
.an-franja.an-urgente .an-franja-ico { color: var(--blue); }

/* ── El cartel, con su icono ───────────────────────────────────────────── */
.an-cartel-cab { display: flex; align-items: flex-start; gap: 11px; }
.an-cartel-ico { flex: 0 0 auto; margin-top: 2px; color: var(--text-2); }
.an-cartel.an-urgente .an-cartel-ico { color: var(--blue); }
.an-cartel.an-mantenimiento .an-cartel-ico { color: var(--amber, #b26b00); }
.an-cartel-cab .dlg-tit { margin: 0; }

/* ── Elegir cómo aparece ───────────────────────────────────────────────────
   Dos botones con un dibujito de dónde sale cada uno. Explicarlo con palabras
   y sin dibujo obliga a imaginárselo, que es justo lo que no hay que pedirle
   a quien va a escribir el aviso. */
/* Tres formatos desde que existe la presentación. `auto-fit` con un mínimo
   en vez de `1fr 1fr 1fr`: en el editor estrecho caben dos y bajan a dos
   filas solos, y con `minmax(0, …)` un texto largo no ensancha la columna. */
.an-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); gap: 10px; }
.an-seg-op {
  display: grid;
  gap: 3px;
  padding: 12px;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.an-seg-op:hover { background: var(--surface-2); }
.an-seg-op.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.an-seg-op b { font-size: 13px; font-weight: 600; }
.an-seg-op i { font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }

.an-seg-dib {
  display: block;
  width: 100%;
  height: 34px;
  margin-bottom: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  position: relative;
}
.an-seg-dib i { position: absolute; background: var(--text-soft); display: block; }
.an-dib-cartel i { inset: 9px 24%; }                    /* un bloque en medio */
.an-dib-franja i { inset: 4px 6px auto 6px; height: 6px; }  /* una banda arriba */
.an-seg-op.on .an-seg-dib i { background: var(--text); }

/* ── Los iconos ────────────────────────────────────────────────────────── */
.an-iconos { display: flex; flex-wrap: wrap; gap: 6px; }
.an-ico-op {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
}
.an-ico-op:hover { background: var(--surface-2); color: var(--text); }
.an-ico-op.on { border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

/* ── Insistente ────────────────────────────────────────────────────────── */
.an-casilla { display: flex; align-items: flex-start; gap: 11px; }
.an-casilla span { display: grid; gap: 1px; }
.an-casilla b { font-size: 13px; font-weight: 600; }
.an-casilla i { font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }

/* ── Las plantillas ────────────────────────────────────────────────────── */
.an-plantillas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 760px) { .an-plantillas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-plantilla {
  display: grid; gap: 2px;
  padding: 14px 12px;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer; font: inherit; color: inherit;
}
.an-plantilla:hover { background: var(--surface-2); border-color: var(--text-soft); }
.an-plantilla-ico { color: var(--text-2); margin-bottom: 4px; }
.an-plantilla b { font-size: 13px; font-weight: 600; }
.an-plantilla i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }

/* ── La lista ──────────────────────────────────────────────────────────── */
.an-fila-ico { flex: 0 0 auto; display: flex; color: var(--text-soft); }
.an-fila-ico.an-urgente { color: var(--blue); }
.an-fila-ico.an-mantenimiento { color: var(--amber, #b26b00); }
.an-vistos {
  flex: 0 0 auto;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  color: var(--text-soft);
}
.an-como { color: var(--text-soft); font-weight: 400; }

/* ── La vista previa ───────────────────────────────────────────────────── */
.an-previa-cab { display: flex; align-items: center; gap: 10px; }
.an-previa-tema {
  margin-inline-start: auto;
  background: none; border: 1px solid var(--border);
  padding: 3px 10px; font: inherit; font-size: 11.5px;
  color: var(--text-2); cursor: pointer;
}
.an-previa-tema:hover { background: var(--surface-2); color: var(--text); }
.an-previa-real { width: 100%; }

/* En oscuro se pinta el lienzo oscuro Y se le dan a lo de dentro los colores
   del tema oscuro: sin esto, «verlo en oscuro» enseñaba el cartel claro sobre
   fondo negro, que no es lo que verá nadie. */
.an-previa-lienzo.oscuro {
  background: #000;
  --surface: #17171D; --surface-2: #1E1E26; --border: #2B2B31;
  --text: #E9EAF0; --text-2: #B4B5BE; --text-soft: #8B90A3;
}
.an-previa-lienzo.oscuro .an-cartel,
.an-previa-lienzo.oscuro .an-franja { background: var(--surface); color: var(--text); }
.an-previa-lienzo.oscuro .dlg-tit { color: var(--text); }
.an-previa-lienzo.oscuro .dlg-txt { color: var(--text-2); }

/* La franja en la vista previa se enseña a lo ancho del lienzo, que es como
   sale de verdad: encogida al tamaño de un cartel engañaría. */
.an-previa-lienzo .an-franja.an-previa { justify-self: stretch; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
   TERCERA VUELTA · con el aspecto de Bulx

   Un detalle que vale para toda la hoja: los radios van como
   `var(--bx-r-l, 0px)`. En Bulx esas variables existen y todo sale redondo;
   en la copia de Bulx NO existen, cae el 0 y todo sigue cuadrado, que es su
   sistema de diseño. Un fichero, dos caras, sin un solo `if`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── El héroe: lo que se está viendo ──────────────────────────────────────
   Una lista de anuncios no contesta la pregunta con la que uno entra aquí,
   que siempre es la misma: «¿qué está viendo la gente ahora mismo?». Así que
   eso va primero, en grande, y con el dibujo de verdad al lado. */
.an-heroe {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 26px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--bx-r-xl, 0px) !important;
  background: var(--text);
}
@media (max-width: 900px) { .an-heroe { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

.an-panal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* El panal va con el acento de CADA casa, no con el amarillo escrito a fuego:
   este mismo fichero vive también en la copia de Bulx, donde el acento es
   rojo. `--acento-rgb` existe en las dos. */
.an-panal polygon { fill: rgba(251, 251, 251, .02); stroke: rgba(var(--acento-rgb, 254, 200, 51), .08); stroke-width: 1; }
.an-panal polygon.lleno { fill: rgba(var(--acento-rgb, 254, 200, 51), .2); stroke: none; }

.an-heroe-txt, .an-heroe-muestra { position: relative; min-width: 0; }
.an-heroe-eyebrow {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 11px;
  font-size: 12.5px; font-weight: 700;
  color: rgba(251, 251, 251, .6);
}
.an-hexito {
  width: 13px; height: 11px;
  background: var(--blue);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.an-heroe h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
  color: #FBFBFB;
  text-wrap: balance;
}
.an-heroe-sub {
  margin: 11px 0 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(251, 251, 251, .62);
}

/* Las muestras: los dibujos de verdad, encogidos y sin poder tocarse. */
.an-heroe-muestra { display: grid; gap: 9px; }
/* `max-width: 100%` y no solo `width: 100%`: el cartel hereda de `.modal.dlg`
   un ancho calculado con `100vw`, que no sabe nada de la columna en la que
   está y lo sacaba del héroe por la derecha. Acotarlo es lo único que no
   depende de adivinar qué regla gana. */
.an-heroe-muestra .an-cartel.an-previa,
.an-heroe-muestra .an-franja.an-previa {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
  margin: 0;
  pointer-events: none;
}
.an-heroe-nada {
  margin: 0;
  padding: 22px;
  text-align: center;
  border: 1px dashed rgba(251, 251, 251, .18);
  border-radius: var(--bx-r-m, 0px) !important;
  font-size: 13px;
  color: rgba(251, 251, 251, .45);
}

/* El héroe pinta en blanco sobre tinta, y las muestras heredaban ese blanco:
   el título del cartel salía blanco sobre el papel blanco del propio cartel.
   Dentro de la muestra mandan los colores de siempre, que es lo que verá la
   gente. */
.an-heroe-muestra .an-cartel,
.an-heroe-muestra .an-franja { color: var(--text); }
.an-heroe-muestra .dlg-tit { color: var(--text); }
.an-heroe-muestra .dlg-txt { color: var(--text-2); }
.an-heroe-muestra .dlg-eyebrow { color: var(--text-soft); }
.an-heroe-muestra .an-franja-txt span { color: var(--text-2); }

/* ── Lo redondo, donde Bulx lo pide ─────────────────────────────────────── */
.an-interruptor,
.an-interruptor i { /* ya eran redondos: aquí solo se dejan en paz */ }

.an-fila { border-radius: var(--bx-r-m, 0px) !important; }
.an-fila-abierta { background: var(--surface-2); padding-inline: 12px; }

.an-seg-op,
.an-ico-op,
.an-plantilla,
.an-previa-lienzo,
.an-previa-tema,
.an-franja-acc { border-radius: var(--bx-r-m, 0px) !important; }

.an-seg-dib { border-radius: var(--bx-r-s, 0px) !important; }
.an-seg-dib i { border-radius: calc(var(--bx-r-s, 0px) / 2) !important; }

.an-vistos {
  padding: 3px 10px;
  background: var(--surface-2);
  border-radius: 999px !important;
}

/* El icono elegido y el formato elegido, con el acento de la casa en vez del
   recuadro negro: en Bulx el negro es el fondo de los activos, no el borde. */
.an-ico-op.on,
.an-seg-op.on {
  border-color: transparent;
  background: var(--text);
  color: var(--blue);
  box-shadow: none;
}
/* El texto va con `var(--surface)`, NO con un blanco fijo. El fondo del
   elegido es `var(--text)`, que se da la vuelta con el tema: en claro es casi
   negro y el blanco encima se lee, pero en OSCURO es casi blanco y el blanco
   fijo dejaba la opción elegida en blanco sobre blanco, ilegible. `--surface`
   se da la vuelta con él y queda bien en los dos. */
.an-seg-op.on b { color: var(--surface); }
.an-seg-op.on i { color: var(--surface); opacity: .68; }
.an-seg-op.on .an-seg-dib { background: rgba(127, 127, 127, .22); border-color: transparent; }
.an-seg-op.on .an-seg-dib i { background: var(--surface); }

.an-plantilla:hover { border-color: var(--border-med, var(--text-soft)); }

/* ══════════════════════════════════════════════════════════════════════════
   PRESENTACIONES · el formato de varias pantallas

   Los radios van con `var(--bx-r-*, 0px)`: redondeado donde Bulx define sus
   variables y cuadrado donde no, que es lo que manda el sistema de diseño de
   siempre. Una sola hoja para los dos sitios.
   ══════════════════════════════════════════════════════════════════════ */

/* El dibujito del tercer botón: tres pantallas en fila, la primera encendida.
   En el mismo idioma que los otros dos —`.an-seg-dib i` es ABSOLUTO—, que con
   `flex` los tres se apilaban unos encima de otros. */
.an-dib-pres i:nth-child(1) { inset: 8px auto 8px 14%; width: 20%; }
.an-dib-pres i:nth-child(2) { inset: 8px auto 8px 40%; width: 20%; opacity: .45; }
.an-dib-pres i:nth-child(3) { inset: 8px auto 8px 66%; width: 20%; opacity: .45; }

/* ── El listado de pantallas ─────────────────────────────────────────── */
.an-hojas { display: flex; flex-direction: column; gap: 10px; }
.an-hojas-cab { display: flex; align-items: baseline; justify-content: space-between; }
.an-hojas-cab label { font-weight: 600; font-size: 13px; }
.an-hojas-n { font-size: 12px; color: var(--text-soft); }

.an-hoja-ed {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--bx-r-m, 0px);
  background: var(--surface-2);
}
.an-hoja-cab { display: flex; align-items: center; gap: 7px; }
.an-hoja-num {
  flex: 0 0 auto; width: 21px; height: 19px; display: grid; place-items: center;
  font: 700 11px/1 inherit; color: var(--surface); background: var(--text);
  /* Hexágono donde Bulx lo define; cuadradito donde no. */
  clip-path: var(--bx-hex, none);
}
.an-hoja-eyebrow { flex: 1 1 auto; min-width: 0; }
.an-hoja-mv, .an-hoja-x {
  flex: 0 0 auto; width: 26px; height: 26px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--bx-r-s, 0px);
  background: var(--surface); color: var(--text-2); font-size: 13px; line-height: 1;
}
.an-hoja-mv:hover:not(:disabled), .an-hoja-x:hover { background: var(--surface-sunk); color: var(--text); }
.an-hoja-mv:disabled { opacity: .35; cursor: default; }
.an-hoja-x:hover { color: var(--red); border-color: var(--red); }

.an-hoja-ed input, .an-hoja-ed textarea, .an-hoja-ed select {
  width: 100%; min-width: 0; font: inherit; font-size: 13.5px;
  padding: 7px 9px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--bx-r-s, 0px);
}
.an-hoja-ed textarea { resize: vertical; }
.an-hoja-titulo { font-weight: 600; }

/* Un punto: dibujo, negrita y explicación, en una fila que no desborda.
   `minmax(0, …)` en las dos columnas de texto: sin eso, un texto largo
   ensancha la fila y se sale de la tarjeta. */
.an-punto-ed {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.6fr) 26px;
}
@media (max-width: 720px) {
  .an-punto-ed { grid-template-columns: minmax(0, 1fr) 26px; }
  .an-punto-ed select, .an-punto-ed input:first-of-type { grid-column: 1 / -1; }
}

.an-hoja-mas {
  align-self: flex-start; cursor: pointer; font: 600 12.5px/1 inherit;
  padding: 6px 10px; color: var(--text-2);
  background: none; border: 1px dashed var(--border-med); border-radius: var(--bx-r-s, 0px);
}
.an-hoja-mas:hover { color: var(--text); border-color: var(--border-strong); }
.an-hoja-nueva { align-self: flex-start; }

.an-pista-min { margin: 2px 0 0; font-size: 12px; color: var(--text-soft); }

/* ── El resumen en «así lo verán» ─────────────────────────────────────── */
.an-pres-mini {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--bx-r-m, 0px);
  background: var(--surface);
}
.an-pres-mini b { font-size: 14.5px; font-weight: 700; }
.an-pres-mini i { font-style: normal; font-size: 12.5px; color: var(--text-soft); }
.an-pres-celdas { display: inline-flex; gap: 4px; margin-bottom: 3px; }
.an-pres-celdas i {
  width: 13px; height: 11px; display: block;
  background: var(--bx-amarillo, var(--blue));
  clip-path: var(--bx-hex, none);
}

/* El interruptor del logotipo, dentro de cada hoja. */
.an-hoja-marca { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.an-hoja-marca input { width: auto !important; margin: 0; cursor: pointer; }
.an-hoja-marca span { font-size: 12.5px; color: var(--text-soft); }
.an-hoja-marca:hover span { color: var(--text-2); }