/* Exclivia · layout.css — el armazón: barra fija, menú lateral, navegación
 * inferior de celular y el área de contenido.
 *
 * Móvil primero: el menú lateral es un cajón que se desliza, y abajo queda una
 * barra con lo que más se usa, al alcance del pulgar. En escritorio el lateral
 * se queda fijo y la barra de abajo desaparece.
 */

:root {
  --exc-topbar-h: 60px;
  --exc-sidebar-w: 260px;
  --exc-bottomnav-h: 62px;
}

/* ── Barra superior fija ────────────────────────────────────────────────── */

.exc-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1030;
  height: var(--exc-topbar-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: var(--exc-surface);
  border-bottom: 1px solid var(--exc-border);
  padding-top: env(safe-area-inset-top, 0px);
}

.exc-topbar-brand,
.exc-sidebar-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--exc-text); font-weight: 600;
  min-width: 0;
}
.exc-logo-img  { height: 30px; width: auto; display: block; }
.exc-logo-text {
  font-family: var(--exc-font-display);
  font-size: 1.25rem; letter-spacing: .01em;
  color: var(--exc-accent);
}

.exc-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

/* Envoltura de una pieza de módulo que en celular se muda al menú de la
   cuenta. Lleva clase propia porque el `display` NO puede ir en
   .exc-only-desktop: esa utilidad solo debe ocultar — imponerle `display`
   rompe botones, celdas y textos truncados en cuanto alguien la reutiliza. */
.exc-topbar-widget { display: inline-flex; align-items: center; }

.exc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 0; border-radius: var(--exc-radius);
  background: transparent; color: var(--exc-text);
  font-size: 1.05rem; cursor: pointer;
  transition: background .15s ease;
}
.exc-iconbtn:hover { background: var(--exc-surface-2); }
.exc-iconbtn { --exc-ico: var(--exc-text); }

/* La bandera del idioma. No se tiñe —una bandera es sus colores—, así que va
   con su propia clase y no hereda nada del sistema de iconos. */
.exc-flag {
  display: block;
  width: 1.5em; height: auto;
  border-radius: 2px;
  /* Sin el filo, la franja blanca de cualquiera de las dos se funde con el
     fondo claro y la bandera se ve mordida. */
  box-shadow: 0 0 0 1px var(--exc-border);
}

/* Menú de la cuenta */
.exc-usermenu { position: relative; }
.exc-usermenu-panel {
  position: absolute; top: calc(100% + .4rem); right: 0;
  min-width: 220px;
  background: var(--exc-surface);
  border: 1px solid var(--exc-border);
  border-radius: var(--exc-radius-card);
  box-shadow: var(--exc-shadow-lg);
  padding: .4rem;
  display: none;
  z-index: 1040;
}
.exc-usermenu.is-open .exc-usermenu-panel { display: block; }
.exc-usermenu-head { padding: .6rem .7rem; border-bottom: 1px solid var(--exc-border); margin-bottom: .3rem; }
.exc-usermenu-name { font-weight: 600; font-size: .92rem; }
.exc-usermenu-mail { font-size: .78rem; color: var(--exc-muted); word-break: break-all; }
.exc-usermenu-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .6rem .7rem;
  border: 0; background: transparent; color: var(--exc-text);
  font: inherit; font-size: .9rem; text-align: left;
  border-radius: var(--exc-radius-sm); cursor: pointer;
}
.exc-usermenu-item:hover { background: var(--exc-surface-2); opacity: 1; }
.exc-usermenu-item { --exc-ico: var(--exc-text); }

/* Sitio para las piezas que en celular bajan de la barra a este menú (el saldo
   de la wallet, por ejemplo). Separadas del resto con una línea: no son
   acciones, son información. */
.exc-usermenu-widget {
  --exc-ico: var(--exc-text);
  padding-bottom: .3rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--exc-border);
}

/* ── Menú lateral ───────────────────────────────────────────────────────── */

.exc-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 1050;
  width: var(--exc-sidebar-w);
  background: var(--exc-sidebar-bg);
  color: var(--exc-sidebar-text);
  border-right: 1px solid var(--exc-border);
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1.5rem;
}
.exc-sidebar.is-open { transform: translateX(0); }

.exc-sidebar-head {
  height: var(--exc-topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--exc-border);
  position: sticky; top: 0;
  background: inherit;
  z-index: 1;
}

/* El logotipo, centrado en cuanto se queda solo en la cabecera.
   El `space-between` de arriba existe para empujar el ✕ a la derecha, pero ese
   botón es `.exc-only-mobile` y desaparece a partir de 768px: de ahí para
   arriba el logo queda solo y pegado a la izquierda, como si faltara algo.
   Por debajo de 768 sigue el ✕ y el logo se queda a la izquierda, que es como
   se ve la cabecera de cualquier cajón. */
@media (min-width: 768px) {
  .exc-sidebar-head { justify-content: center; }
}

.exc-sidebar-nav { padding: .75rem .6rem; display: flex; flex-direction: column; gap: .15rem; }

.exc-nav-section {
  padding: .9rem .7rem .35rem;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--exc-muted);
}

/* Separa sin ponerle nombre al grupo. Lo usa el puente al área de negocios:
   es un solo renglón, y un título encima lo haría parecer una sección a medio
   llenar. */
.exc-nav-divider {
  margin: .8rem .7rem;
  border: 0;
  border-top: 1px solid var(--exc-border);
}

.exc-nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .68rem .7rem;
  border-radius: var(--exc-radius);
  color: inherit;
  font-size: .93rem; font-weight: 500;
  transition: background .14s ease, color .14s ease;
}
.exc-nav-item:hover { background: var(--exc-sidebar-hover); opacity: 1; }
.exc-nav-item.is-active {
  background: rgba(var(--exc-accent-rgb), .14);
  color: var(--exc-accent);
  font-weight: 600;
}
/* El icono va del color del renglón: apagado como el texto, y del acento
   cuando es la pantalla en la que está parado. */
.exc-nav-item           { --exc-ico: var(--exc-sidebar-text); }
.exc-nav-item.is-active { --exc-ico: var(--exc-accent); }
/* La ✕ de cerrar en móvil vive dentro del menú, donde el texto es otro. */
.exc-sidebar .exc-iconbtn { --exc-ico: var(--exc-sidebar-text); }
.exc-nav-icon  { width: 22px; text-align: center; font-size: 1.05rem; flex: none; }
.exc-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exc-nav-badge {
  margin-left: auto;
  background: var(--exc-accent); color: var(--exc-accent-contrast);
  border-radius: 999px; padding: .05rem .45rem;
  font-size: .7rem; font-weight: 700;
}

/* ── Un módulo con varias pantallas ─────────────────────────────────────────
 *
 * Se pliega. Antes cada pantalla era un renglón suelto etiquetado con el nombre
 * del módulo, así que uno con tres salía tres veces igual.
 *
 * Es un `<details>`: se abre y se cierra sin una línea de JS y obedece al
 * teclado solo.
 */
.exc-nav-grupo > summary {
  cursor: pointer;
  list-style: none;
}
/* El triángulo de fábrica del navegador se quita en los dos motores: Safari
   necesita el pseudo-elemento con prefijo y no entiende `list-style`. */
.exc-nav-grupo > summary::-webkit-details-marker { display: none; }
.exc-nav-grupo > summary::marker { content: ''; }

.exc-nav-flecha {
  margin-left: auto;
  display: inline-flex;
  font-size: .85rem;
  opacity: .5;
  transition: transform .16s ease;
}
.exc-nav-grupo[open] > summary .exc-nav-flecha { transform: rotate(180deg); }

/* Plegado pero con la pantalla activa dentro: el padre se marca en el acento
   SIN el fondo del renglón activo. Con fondo, el padre y el hijo activo se
   verían los dos encendidos y ninguno diría dónde está uno parado. */
.exc-nav-grupo:not([open]) > summary.is-abierto {
  color: var(--exc-accent);
  --exc-ico: var(--exc-accent);
}

.exc-nav-hijo {
  display: flex;
  align-items: center;
  /* Alineado con la ETIQUETA del padre, no con su icono: la sangría es lo que
     dice que cuelga de él. 22 px del icono + 0.7rem del hueco. */
  padding: .5rem .7rem .5rem calc(22px + .7rem + .7rem);
  border-radius: var(--exc-radius);
  color: inherit;
  font-size: .88rem;
  font-weight: 500;
  opacity: .8;
  transition: background .14s ease, color .14s ease, opacity .14s ease;
}
.exc-nav-hijo:hover { background: var(--exc-sidebar-hover); opacity: 1; }
.exc-nav-hijo.is-active {
  background: rgba(var(--exc-accent-rgb), .14);
  color: var(--exc-accent);
  font-weight: 600;
  opacity: 1;
}

/* Velo que oscurece el fondo cuando el cajón está abierto (solo móvil). */
.exc-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.exc-backdrop.is-open { opacity: 1; visibility: visible; }

/* ── Contenido ──────────────────────────────────────────────────────────── */

.exc-main {
  padding-top: calc(var(--exc-topbar-h) + 1rem);
  padding-bottom: calc(var(--exc-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
  min-height: 100dvh;
}

/* ── Navegación inferior (celular) ──────────────────────────────────────── */

.exc-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1035;
  height: calc(var(--exc-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: var(--exc-surface);
  border-top: 1px solid var(--exc-border);
}
.exc-bottomnav-item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem;
  color: var(--exc-muted);
  font-size: .68rem; font-weight: 600;
  min-width: 0;
  padding: .3rem .2rem;
}
.exc-bottomnav-item.is-active { color: var(--exc-accent); }
.exc-bottomnav-item           { --exc-ico: var(--exc-muted); }
.exc-bottomnav-item.is-active { --exc-ico: var(--exc-accent); }
.exc-bottomnav-icon  { font-size: 1.25rem; line-height: 1; }
.exc-bottomnav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── Escritorio ─────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
  .exc-app-with-sidebar .exc-sidebar { transform: translateX(0); }
  .exc-app-with-sidebar .exc-topbar  { left: var(--exc-sidebar-w); }
  .exc-app-with-sidebar .exc-main    { margin-left: var(--exc-sidebar-w); padding-bottom: 2.5rem; }

  .exc-bottomnav,
  .exc-backdrop,
  .exc-sidebar-toggle { display: none !important; }

  /* El logotipo de la barra de arriba sobra cuando la lateral está fija: los
     dos se ven a la vez y a la misma altura, uno junto al otro. Se quita el de
     arriba y no el de la lateral, que es el que ancla el menú.

     Sólo con barra lateral: en las pantallas que no la tienen, el de arriba es
     el único que hay. Y en celular tampoco, que ahí la lateral está guardada.

     Antes las dos marcas compartían la clase `.exc-topbar-brand` y esta regla
     escondía las dos: la pantalla se quedaba sin logotipo. Por eso la lateral
     tiene ahora la suya, `.exc-sidebar-brand`. */
  .exc-app-with-sidebar .exc-topbar-brand { display: none; }
}

/* ── Aviso de suplantación ──────────────────────────────────────────────── */

/* Naranja y siempre visible: si el admin olvida que está viendo como alguien
   más, va a creer que la plataforma está rota. */
.exc-impersonate {
  position: sticky; top: var(--exc-topbar-h);
  z-index: 1025;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem;
  background: #d98518;
  color: #1b1a17;
  font-size: .87rem; font-weight: 600;
}
.exc-impersonate form { margin: 0; margin-left: auto; }
.exc-impersonate .exc-btn { background: #1b1a17; color: #fff; border-color: #1b1a17; }

/* ── El sombrero de un personaje ────────────────────────────────────────── */

/* Quien lleva puesto un personaje tiene que verlo en TODAS las pantallas: sin
 * esta barra, alguien que cambió hace media hora sube una foto creyendo que la
 * sube como él, y eso ya no se deshace.
 *
 * NO es naranja. La naranja es la del admin mirando la cuenta de otro y quiere
 * decir «cuidado, esto es serio y temporal»; esto es alguien usando lo suyo,
 * todos los días. Pintarlas igual gasta la seria hasta que deja de mirarse.
 *
 * Las dos no salen a la vez —`ponerSombrero()` se niega mientras se suplanta—
 * así que comparten `top` sin pelearse.
 *
 * Ojo con `position` aquí: es `sticky`, y una regla más específica que le
 * ponga `relative` la devuelve al flujo. Es la trampa que ya cazó dos veces
 * `php scripts/css_posiciones.php`. */
.exc-sombrero {
  position: sticky; top: var(--exc-topbar-h);
  z-index: 1025;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem 1rem;
  background: var(--exc-surface-2);
  border-bottom: 1px solid var(--exc-border);
  color: var(--exc-text);
  font-size: .87rem; font-weight: 600;
}
.exc-sombrero form { margin: 0; margin-left: auto; }

/* ── Layout de acceso (login / registro) ────────────────────────────────── */

.exc-auth {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}
.exc-auth-aside { display: none; }
.exc-auth-main {
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 1rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
}
.exc-auth-box { width: 100%; max-width: 420px; margin-inline: auto; }
.exc-auth-head { text-align: center; margin-bottom: 1.75rem; }
.exc-auth-head .exc-logo-text { font-size: 1.9rem; }
.exc-auth-title { margin: 1rem 0 .25rem; font-size: 1.4rem; font-weight: 500; }
.exc-auth-sub   { margin: 0; color: var(--exc-muted); font-size: .92rem; }
.exc-auth-foot  { margin-top: 1.5rem; text-align: center; font-size: .9rem; color: var(--exc-muted); }

@media (min-width: 992px) {
  .exc-auth { grid-template-columns: 1.05fr 1fr; }

  .exc-auth-aside {
    display: flex; flex-direction: column;
    gap: 1.4rem;
    padding: 2.5rem 2.5rem 2rem;
    background: radial-gradient(120% 80% at 20% 0%,
                rgba(var(--exc-accent-rgb), .16), transparent 60%), var(--exc-bg);
    border-right: 1px solid var(--exc-border);
    overflow: hidden;
  }

  .exc-auth-marca { display: flex; align-items: center; gap: .6rem; justify-content: center; }
  .exc-auth-marca > svg { font-size: 1.9rem; color: var(--exc-accent); }
  .exc-auth-marca .exc-logo-text { font-size: 1.9rem; }
  /* El alto manda y el ancho se ajusta: un logo apaisado y uno cuadrado tienen
     que ocupar lo mismo de alto o la fila baila según qué se haya subido. */
  .exc-auth-marca .exc-logo-img { height: 2.1rem; width: auto; }

  .exc-auth-claim {
    margin: 0;
    font-family: var(--exc-font-display);
    font-size: 2.15rem;
    font-weight: 600;
    line-height: 1.18;
    text-align: center;
  }
  .exc-auth-hl { color: var(--exc-accent); }

  .exc-auth-claim-p {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--exc-muted);
    font-size: .95rem;
    line-height: 1.55;
    text-align: center;
  }

  /* Los cuatro rasgos. `auto-fit` y no cuatro columnas fijas: en una pantalla
     de portátil estrecha, cuatro fijas parten los rótulos por la mitad. */
  .exc-auth-puntos {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1rem .5rem;
  }
  .exc-auth-puntos li {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.25;
  }
  .exc-auth-punto-i { font-size: 1.6rem; color: var(--exc-accent); }

  .exc-auth-hero {
    width: 100%;
    /* Alto por proporción y no fijo: con `height` la foto se estira en unas
       pantallas y deja un hueco en otras. */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 14px;
    /* Se funde con el fondo por abajo, que es como la entregó la diseñadora.
       `mask` con su prefijo: sin él, en WebKit no se aplica y se ve el corte. */
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
  }

  .exc-auth-social {
    margin-top: auto;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--exc-border);
    border-radius: 16px;
    background-color: rgba(127, 127, 127, .07);
    display: grid;
    gap: .9rem;
  }

  @media (min-width: 1200px) {
    .exc-auth-social { grid-template-columns: 1.3fr 1fr; align-items: center; }
    .exc-auth-social-t { grid-column: 1; }
    .exc-auth-social-b { grid-column: 1; }
    .exc-auth-ideal    { grid-column: 2; grid-row: 1 / span 2; }
  }

  .exc-auth-social-t { margin: 0; font-size: .95rem; line-height: 1.4; }
  .exc-auth-social-t strong { color: var(--exc-accent); }
  .exc-auth-social-b { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
  .exc-auth-social-s { margin: 0; font-size: .8rem; color: var(--exc-muted); line-height: 1.3; }

  /* Las caritas se encabalgan; la cifra cierra la fila. El margen negativo va
     en los hijos SIGUIENTES para que la primera no se salga de la caja. */
  .exc-auth-caras { display: flex; align-items: center; }
  .exc-auth-caras img {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--exc-bg);
  }
  .exc-auth-caras img + img,
  .exc-auth-caras .exc-auth-cifra { margin-left: -10px; }

  .exc-auth-cifra {
    display: grid; place-items: center;
    min-width: 42px; height: 34px;
    padding: 0 .4rem;
    border-radius: 999px;
    border: 2px solid var(--exc-bg);
    background-color: var(--exc-accent);
    color: var(--exc-accent-contrast);
    font-size: .76rem;
    font-weight: 700;
  }

  .exc-auth-ideal-t { margin: 0 0 .5rem; font-size: .82rem; color: var(--exc-muted); }
  .exc-auth-ideal ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
  }
  .exc-auth-ideal li {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    font-size: .72rem; text-align: center; line-height: 1.2;
  }
  .exc-auth-ideal-i {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(var(--exc-accent-rgb), .35);
    border-radius: 50%;
    color: var(--exc-accent);
    font-size: 1.05rem;
  }
}

/* La caja del formulario, con marco propio en pantalla ancha: en el diseño es
   una tarjeta sobre el fondo, no una columna suelta. */
@media (min-width: 992px) {
  .exc-auth-main { padding: 2rem; }
  .exc-auth-box {
    max-width: 460px;
    padding: 2rem;
    border: 1px solid var(--exc-border);
    border-radius: 20px;
    background-color: var(--exc-surface);
  }
}

/* Que el formulario quepa SIN desplazarse.
   Un alta que obliga a bajar antes de haber escrito nada parece más larga de lo
   que es, y lo primero que se pierde de vista es el botón. Se aprieta el ritmo
   vertical solo aquí dentro: el resto del sitio no tiene por qué encogerse. */
.exc-auth-box .exc-field { margin-bottom: .7rem; }
.exc-auth-box .exc-label { margin-bottom: .25rem; font-size: .84rem; }
.exc-auth-box .exc-input,
.exc-auth-box .exc-select { min-height: 42px; padding-top: .55rem; padding-bottom: .55rem; }
.exc-auth-box .exc-check { padding: .25rem 0; }
.exc-auth-head { margin-bottom: 1.1rem; }
.exc-auth-title { margin-top: .6rem; }

.exc-auth-box .exc-input::placeholder { color: var(--exc-muted); opacity: .55; }

/* La dirección pública y el formato, en la misma línea. Se parten solas si no
   caben: con `nowrap` la más larga se saldría de la caja. */
.exc-ayuda-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
  margin: .3rem 0 0;
}
.exc-ayuda-fila .exc-hint { margin: 0; }
.exc-url { margin: 0; font-size: .8rem; color: var(--exc-muted); word-break: break-all; }
.exc-url strong { color: var(--exc-accent); font-weight: 600; }

/* En una ventana baja se aprieta más. Es `max-height` y no `max-width`: el
   problema es el ALTO, y un portátil de 1366×768 lo tiene aunque sea ancho. */
@media (max-height: 900px) {
  .exc-auth-box .exc-field { margin-bottom: .5rem; }
  .exc-auth-box .exc-input,
  .exc-auth-box .exc-select { min-height: 40px; }
  .exc-auth-head { margin-bottom: .7rem; }
  .exc-auth-head .exc-logo-text { font-size: 1.5rem; }
  .exc-auth-title { margin-top: .35rem; font-size: 1.2rem; }
  .exc-auth-sub { font-size: .85rem; }
  .exc-auth-foot { margin-top: .8rem; }
}

@media (min-width: 992px) and (max-height: 900px) {
  .exc-auth-main { padding: 1rem 2rem; }
  .exc-auth-box { padding: 1.4rem 1.6rem; }
}

/* Ventana de verdad baja —un portátil de 1366×768, que sigue siendo de lo más
   común—. Aquí ya no basta apretar: hay que quitar. Se van las dos frases que
   acompañan pero no hacen falta para rellenar el formulario; lo que explica un
   campo concreto se queda, porque eso sí evita un error. */
@media (max-height: 800px) {
  .exc-auth-box .exc-field { margin-bottom: .35rem; }
  .exc-auth-box .exc-input,
  .exc-auth-box .exc-select { min-height: 38px; }
  .exc-auth-head { margin-bottom: .5rem; }
  .exc-auth-head .exc-logo-text { font-size: 1.3rem; }
  .exc-auth-title { font-size: 1.1rem; }
  .exc-auth-sub { display: none; }
  .exc-auth-foot { margin-top: .6rem; }
}

@media (min-width: 992px) and (max-height: 800px) {
  .exc-auth-main { padding: .75rem 2rem; }
  .exc-auth-box { padding: 1.1rem 1.4rem; }
}

/* ── Barra superior pública (landing) ───────────────────────────────────── */

.exc-public { padding-top: var(--exc-topbar-h); }
.exc-public .exc-topbar { background: color-mix(in srgb, var(--exc-surface) 88%, transparent); backdrop-filter: blur(10px); }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.exc-footer {
  border-top: 1px solid var(--exc-border);
  padding: 2rem 0;
  margin-top: 3rem;
  font-size: .88rem;
  color: var(--exc-muted);
}
.exc-footer a { color: var(--exc-muted); }
.exc-footer a:hover { color: var(--exc-accent); }
.exc-footer-cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .exc-footer-cols { grid-template-columns: 2fr 1fr 1fr; } }

/* ── La campana ─────────────────────────────────────────────────────────────
 *
 * Vive en el núcleo y no en un módulo: la bandeja es UNA para todo el sitio y
 * quien la mira no sabe ni le importa qué módulo escribió cada renglón.
 *
 * El panel se abre hacia la izquierda porque el botón está pegado a la derecha
 * de la barra: anclado a la derecha del botón, en un teléfono se saldría de la
 * pantalla y la mitad de cada aviso quedaría fuera.
 */

.exc-campana { position: relative; }

.exc-campana-btn { position: relative; }

.exc-campana-globo {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--exc-danger);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  /* Un borde del color de la barra lo despega del icono: sin él, el número se
     confunde con el trazo de la campana en pantallas pequeñas. */
  box-shadow: 0 0 0 2px var(--exc-surface);
}

.exc-campana-globo[hidden] { display: none; }

.exc-campana-panel {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  width: min(360px, calc(100vw - 1.5rem));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--exc-surface);
  border: 1px solid var(--exc-border);
  border-radius: var(--exc-radius-card);
  box-shadow: var(--exc-shadow-lg);
  overflow: hidden;
  z-index: 1045;
}

.exc-campana-panel[hidden] { display: none; }

.exc-campana-top {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem .9rem .6rem;
  border-bottom: 1px solid var(--exc-border);
}

.exc-campana-top h2 { margin: 0; flex: 1; font-size: .95rem; font-weight: 600; }

.exc-campana-link {
  border: 0; background: none;
  color: var(--exc-muted);
  font: inherit; font-size: .76rem;
  cursor: pointer;
  padding: .2rem;
}

.exc-campana-link:hover { color: var(--exc-accent); text-decoration: underline; }
.exc-campana-link[hidden] { display: none; }

.exc-campana-lista { overflow-y: auto; overscroll-behavior: contain; }

.exc-campana-vacio {
  margin: 0;
  padding: 2.2rem 1.2rem;
  text-align: center;
  color: var(--exc-muted);
  font-size: .86rem;
  line-height: 1.5;
}

.exc-campana-vacio small { display: block; margin-top: .35rem; font-size: .76rem; opacity: .8; }

.exc-campana-item {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  gap: .1rem .65rem;
  width: 100%;
  padding: .7rem .9rem;
  border: 0;
  border-bottom: 1px solid var(--exc-border);
  background: none;
  color: var(--exc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.exc-campana-item:hover { background: var(--exc-surface-2); }
.exc-campana-item:last-child { border-bottom: 0; }

/* Sin leer: un punto en el canto. Poner en negrita el renglón entero hace que
   una bandeja con diez pendientes parezca un grito. */
.exc-campana-item.is-nuevo::before {
  content: '';
  position: absolute;
  left: .35rem; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--exc-accent);
}

.exc-campana-item.is-prio::before { background: var(--exc-danger); }
.exc-campana-item.is-leido { opacity: .62; }

.exc-campana-ico {
  grid-row: 1 / 3;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 999px;
  background: var(--exc-surface-2);
  color: var(--exc-muted);
  font-size: .9rem;
}

.exc-campana-item.is-prio .exc-campana-ico {
  background: rgba(214, 72, 63, .12);
  color: var(--exc-danger);
}

.exc-campana-t {
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.3;
  /* Dos renglones como mucho: un título largo no puede empujar al resto de la
     bandeja fuera de la vista. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exc-campana-x {
  grid-row: 1 / 3;
  align-self: center;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: none;
  color: var(--exc-muted);
  font-size: .8rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s;
}

.exc-campana-item:hover .exc-campana-x,
.exc-campana-x:focus-visible { opacity: 1; }
.exc-campana-x:hover { background: var(--exc-surface-2); color: var(--exc-text); }

.exc-campana-sub {
  grid-column: 2;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--exc-muted);
}

.exc-campana-pie {
  grid-column: 2;
  margin-top: .2rem;
  font-size: .7rem;
  color: var(--exc-muted);
  display: flex; align-items: center; gap: .4rem;
}

.exc-campana-chip {
  padding: 0 .35rem;
  border-radius: 3px;
  background: rgba(214, 72, 63, .14);
  color: var(--exc-danger);
  font-weight: 600;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.exc-campana-mas {
  width: 100%;
  padding: .65rem;
  border: 0; border-top: 1px solid var(--exc-border);
  background: none;
  color: var(--exc-muted);
  font: inherit; font-size: .8rem;
  cursor: pointer;
}

.exc-campana-mas:hover { color: var(--exc-accent); }

/* En un teléfono el botón está casi en la esquina: el panel se centra bajo la
   barra en vez de colgar de él, que lo dejaría medio fuera de la pantalla. */
@media (max-width: 480px) {
  .exc-campana-panel {
    position: fixed;
    top: calc(var(--exc-topbar-h) + .3rem);
    left: .5rem; right: .5rem;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exc-campana-x { transition: none; }
}

/* ── El botón redondo del medio ─────────────────────────────────────────────
 *
 * La acción de la pantalla, no un destino. Por eso sube por encima de la barra
 * y va en el acento: al ras y en gris se lee como un quinto renglón del menú,
 * y no lleva a ningún sitio.
 *
 * En el CENTRO y no en una esquina porque es donde llega el pulgar sin mover
 * la mano, y llega igual con la izquierda que con la derecha. Una esquina elige
 * mano por el usuario.
 */
.exc-bottomnav.has-accion { justify-content: space-between; }

.exc-bottomnav-fab {
  flex: 0 0 auto;
  align-self: center;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin: 0 .35rem;
  color: var(--exc-accent-contrast);
  background: var(--exc-accent);
  border: 3px solid var(--exc-surface);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  /* El icono toma el color de la etiqueta, como en cualquier botón del sitio. */
  --exc-ico: var(--exc-accent-contrast);
  --exc-ico-w: 2.4;

  /* Sube con TRANSFORM, no con un margen negativo.
     Un `margin-top` negativo con `align-self: center` no levanta lo que
     parece: flex centra la caja de MARGEN, así que restarle 22 px arriba lo
     sube solo la mitad y el botón se queda casi al ras de la barra —el efecto
     de «sobresale» se pierde—. El transform no entra en el cálculo del centro
     ni cambia el alto de la barra, así que sube los 18 px enteros y el
     contenido de debajo no se mueve. */
  transform: translateY(-18px);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* El hundido al pulsar CONSERVA la subida: con un `scale()` a secas el botón
   se caía de golpe a la barra en cada toque. */
.exc-bottomnav-fab:active { transform: translateY(-18px) scale(.92); }

.exc-bottomnav-fab-ico { display: grid; place-items: center; font-size: 1.5rem; line-height: 1; }

/* Abierto, el «+» se convierte en una «✕» girando. Es el mismo botón haciendo
   lo contrario, así que cerrar se busca donde se abrió. */
.exc-bottomnav-fab[aria-expanded="true"] .exc-bottomnav-fab-ico {
  transform: rotate(135deg);
}
.exc-bottomnav-fab-ico { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }

@media (prefers-reduced-motion: reduce) {
  .exc-bottomnav-fab,
  .exc-bottomnav-fab-ico { transition: none; }
}