/* ============================================================================
   Grupo Xixo — Sistema de diseño
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de Bootstrap 5.3. La estrategia es doble:

     1. Los tokens de abajo (`--xx-*`) son la única fuente de verdad del color,
        la tipografía, los radios y las sombras. Nada de hex sueltos en las
        vistas: si un color no está aquí, no existe.

     2. En vez de pelearle a Bootstrap con `!important`, se reescriben sus
        variables de componente (`--bs-btn-bg`, `--bs-card-border-color`, …).
        Bootstrap 5.3 las expone en cada componente, así que basta con
        redefinirlas para que TODO el panel cambie de aspecto —incluido el
        marcado que generan los scripts en runtime, que ninguna vista controla.

   Paleta: azul noche + ámbar. El azul carga la estructura (topbar, botones,
   encabezados) y el ámbar se reserva para señalar "estás aquí" y el foco de
   teclado. Si el ámbar se usa para todo, deja de señalar nada.
   ============================================================================ */

/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root {
    /* --- Azul noche: la estructura ---------------------------------------- */
    --xx-navy-950: #060b16;
    --xx-navy-900: #0a1222;
    --xx-navy-800: #0f1b30;
    --xx-navy-700: #16263f;
    --xx-navy-600: #1d3253;
    --xx-navy-500: #274268;
    --xx-navy-400: #3b5a86;
    --xx-navy-300: #6685ad;
    --xx-navy-200: #a3b8d2;
    --xx-navy-100: #d5e0ed;
    --xx-navy-50:  #eef3f9;

    /* --- Ámbar: el acento -------------------------------------------------- */
    --xx-amber-700: #92400e;
    --xx-amber-600: #b45309;
    --xx-amber-500: #d97706;
    --xx-amber-400: #f59e0b;
    --xx-amber-300: #fbbf24;
    --xx-amber-200: #fde68a;
    --xx-amber-100: #fef3c7;
    --xx-amber-50:  #fffbeb;

    /* --- Marca ------------------------------------------------------------- */
    --xx-brand:        var(--xx-navy-700);
    --xx-brand-hover:  var(--xx-navy-600);
    --xx-brand-active: var(--xx-navy-800);
    --xx-accent:       var(--xx-amber-400);
    --xx-accent-soft:  var(--xx-amber-100);

    /* --- Superficies y tinta ------------------------------------------------ */
    --xx-canvas:   #f1f4f9;
    --xx-surface:  #ffffff;
    --xx-surface-2:#f8fafd;
    --xx-ink:      #0f1b30;
    --xx-ink-2:    #44536b;
    --xx-ink-3:    #74829a;
    --xx-line:     #e3e9f2;
    --xx-line-2:   #eef2f8;

    /* --- Semánticos: fondo suave + texto legible + filo -------------------- */
    --xx-success-fg:   #0b7a4b;
    --xx-success-bg:   #e6f7ee;
    --xx-success-line: #b7e6cd;
    --xx-warning-fg:   #a15c07;
    --xx-warning-bg:   #fef6e7;
    --xx-warning-line: #f7dfae;
    --xx-danger-fg:    #b42318;
    --xx-danger-bg:    #fdecea;
    --xx-danger-line:  #f6c9c4;
    --xx-info-fg:      #175cd3;
    --xx-info-bg:      #eaf2ff;
    --xx-info-line:    #c3d9fb;
    --xx-neutral-fg:   #44536b;
    --xx-neutral-bg:   #eef2f8;
    --xx-neutral-line: #dbe3ee;

    /* --- Tipografía --------------------------------------------------------- */
    --xx-font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --xx-font-sans:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --xx-font-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

    /* --- Radios ------------------------------------------------------------- */
    --xx-r-sm:   7px;
    --xx-r:      11px;
    --xx-r-lg:   15px;
    --xx-r-pill: 999px;

    /* --- Sombras: bajas y frías, para que el papel no flote --------------- */
    --xx-shadow-sm: 0 1px 2px rgba(15, 27, 48, .05), 0 1px 3px rgba(15, 27, 48, .04);
    --xx-shadow:    0 2px 4px rgba(15, 27, 48, .04), 0 10px 24px rgba(15, 27, 48, .07);
    --xx-shadow-lg: 0 18px 48px rgba(10, 18, 34, .20);
    --xx-ring:      0 0 0 3px rgba(245, 158, 11, .38);

    /* --- Estructura ---------------------------------------------------------- */
    --xx-sidebar-w: 264px;
    --xx-topbar-h:  62px;

    --xx-t: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================================
   2. PUENTE CON BOOTSTRAP
   Traduce los tokens a las variables globales de Bootstrap. Todo lo que no se
   re-vista explícitamente más abajo hereda de aquí y sale coherente igual.
   ============================================================================ */

:root {
    --bs-body-bg:          var(--xx-canvas);
    --bs-body-color:       var(--xx-ink-2);
    --bs-body-font-family: var(--xx-font-sans);
    --bs-body-font-size:   .9375rem;   /* 15px: los paneles se leen mejor densos */
    --bs-body-line-height: 1.55;
    --bs-emphasis-color:   var(--xx-ink);
    --bs-secondary-color:  var(--xx-ink-3);
    --bs-border-color:     var(--xx-line);
    --bs-border-radius:    var(--xx-r-sm);
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: var(--xx-r);
    --bs-link-color:       var(--xx-navy-500);
    --bs-link-hover-color: var(--xx-navy-700);
    --bs-font-monospace:   var(--xx-font-mono);
    --bs-primary:          var(--xx-brand);
    --bs-primary-rgb:      22, 38, 63;
}

/* ============================================================================
   3. BASE Y TIPOGRAFÍA
   ============================================================================ */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background: var(--xx-canvas);
    color: var(--xx-ink-2);
    font-family: var(--xx-font-sans);
}

h1, h2, h3, h4, h5, h6, .xx-display {
    font-family: var(--xx-font-display);
    color: var(--xx-ink);
    font-weight: 700;
    letter-spacing: -.012em;
}

h1 { font-size: 1.55rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
h5 { font-size: .95rem; }
h6 { font-size: .875rem; font-weight: 600; }

a { text-decoration: none; transition: color var(--xx-t); }
a:hover { text-decoration: none; }

small, .small { font-size: .8125rem; }

hr {
    border: 0;
    border-top: 1px solid var(--xx-line);
    opacity: 1;
    margin: 1rem 0;
}

::selection { background: var(--xx-amber-200); color: var(--xx-navy-900); }

:focus-visible {
    outline: none;
    box-shadow: var(--xx-ring);
    border-radius: var(--xx-r-sm);
}

/* Barras de scroll discretas: el panel tiene varias zonas con overflow y las
   nativas de Windows rompen la sensación de superficie limpia. */
* { scrollbar-width: thin; scrollbar-color: var(--xx-navy-200) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--xx-navy-200); border-radius: var(--xx-r-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--xx-navy-300); background-clip: content-box; }

/* ============================================================================
   4. ESTRUCTURA — shell, sidebar, topbar, página
   ============================================================================ */

.xx-shell { min-height: 100vh; }

/* --- Sidebar claro ------------------------------------------------------- */

.xx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--xx-sidebar-w);
    background: var(--xx-surface);
    border-right: 1px solid var(--xx-line);
    display: flex;
    flex-direction: column;
    z-index: 1045;
    transition: transform var(--xx-t);
}

.xx-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 20px;
    height: var(--xx-topbar-h);
    flex: 0 0 var(--xx-topbar-h);
    border-bottom: 1px solid var(--xx-line-2);
}

.xx-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--xx-navy-700), var(--xx-navy-500));
    color: var(--xx-amber-300);
    font-family: var(--xx-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(15, 27, 48, .22);
}

.xx-brandmark { line-height: 1.15; min-width: 0; }

.xx-brandmark__name {
    font-family: var(--xx-font-display);
    font-weight: 700;
    font-size: .92rem;
    color: var(--xx-ink);
    letter-spacing: .01em;
}

.xx-brandmark__sub {
    font-size: .7rem;
    color: var(--xx-ink-3);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xx-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 12px 20px;
}

.xx-nav__label {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--xx-ink-3);
    padding: 0 10px;
    margin: 14px 0 7px;
}
.xx-sidebar__nav > .xx-nav__label:first-child { margin-top: 0; }

.xx-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: var(--xx-r-sm);
    color: var(--xx-ink-2);
    font-size: .875rem;
    font-weight: 500;
    transition: background var(--xx-t), color var(--xx-t);
}

.xx-nav__item:hover { background: var(--xx-navy-50); color: var(--xx-ink); }

.xx-nav__item.is-active {
    background: var(--xx-navy-50);
    color: var(--xx-navy-800);
    font-weight: 600;
}

/* La barrita ámbar es el "estás aquí". Va pegada al borde izquierdo del ítem,
   no del sidebar, para que se lea como parte de la fila. */
.xx-nav__item.is-active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--xx-accent);
}

.xx-nav__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--xx-ink-3);
    transition: color var(--xx-t);
}
.xx-nav__item:hover .xx-nav__icon { color: var(--xx-navy-500); }
.xx-nav__item.is-active .xx-nav__icon { color: var(--xx-amber-500); }

.xx-nav__badge {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 700;
    background: var(--xx-danger-bg);
    color: var(--xx-danger-fg);
    padding: .1rem .42rem;
    border-radius: var(--xx-r-pill);
}

.xx-sidebar__foot {
    border-top: 1px solid var(--xx-line-2);
    padding: 12px;
}

.xx-userbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--xx-r-sm);
    background: var(--xx-surface-2);
}

.xx-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--xx-amber-400), var(--xx-amber-500));
    color: var(--xx-navy-900);
    font-weight: 700;
    font-size: .78rem;
    font-family: var(--xx-font-display);
}

/* min-width:0 es lo que deja funcionar el ellipsis dentro de un flex. */
.xx-userbox__body { flex: 1 1 auto; min-width: 0; }

.xx-userbox__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--xx-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xx-userbox__role {
    font-size: .7rem;
    color: var(--xx-ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

/* --- Topbar con degradado ------------------------------------------------- */

.xx-main {
    margin-left: var(--xx-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.xx-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--xx-topbar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    background: linear-gradient(100deg, var(--xx-navy-900) 0%, var(--xx-navy-700) 42%, var(--xx-navy-500) 100%);
    box-shadow: 0 1px 14px rgba(10, 18, 34, .18);
}

/* Filo ámbar que se desvanece: ata el acento al degradado sin gritar. */
.xx-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--xx-amber-400), rgba(245, 158, 11, 0) 62%);
}

.xx-topbar__crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .62);
    font-size: .8rem;
    font-weight: 500;
    min-width: 0;
}

.xx-topbar__crumb strong {
    color: #fff;
    font-family: var(--xx-font-display);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xx-topbar__sep { opacity: .45; }

.xx-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.xx-topbar__user {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-weight: 500;
    padding: 5px 6px 5px 10px;
    border-radius: var(--xx-r-pill);
    background: rgba(255, 255, 255, .08);
}

.xx-topbar__user .xx-avatar { width: 27px; height: 27px; flex-basis: 27px; font-size: .7rem; }

.xx-iconbtn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--xx-r-sm);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background var(--xx-t);
}
.xx-iconbtn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.xx-iconbtn svg { width: 17px; height: 17px; }

.xx-burger { display: none; }

/* --- Página ---------------------------------------------------------------- */

.xx-page {
    flex: 1 1 auto;
    padding: 26px 28px 56px;
    width: 100%;
    max-width: 1480px;
}

.xx-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.xx-page-head__title {
    font-family: var(--xx-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--xx-ink);
    letter-spacing: -.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.xx-page-head__sub {
    margin: 5px 0 0;
    color: var(--xx-ink-3);
    font-size: .875rem;
    max-width: 74ch;
}

.xx-page-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Migas de vuelta ("← Negocios"): pequeña, sobria y clicable. */
.xx-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--xx-ink-3);
    margin-bottom: 6px;
}
.xx-back:hover { color: var(--xx-navy-600); }

/* ============================================================================
   5. COMPONENTES PROPIOS
   ============================================================================ */

/* --- Bloques de estadística ------------------------------------------------ */

.xx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.xx-stat {
    position: relative;
    background: var(--xx-surface);
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r);
    padding: 17px 18px 15px;
    box-shadow: var(--xx-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--xx-t), transform var(--xx-t);
}

.xx-stat:hover { box-shadow: var(--xx-shadow); transform: translateY(-1px); }

/* Filo superior de color: es lo que hace legible una fila de números iguales. */
.xx-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--xx-navy-300);
}
.xx-stat--accent::before  { background: var(--xx-amber-400); }
.xx-stat--success::before { background: var(--xx-success-fg); }
.xx-stat--warning::before { background: var(--xx-warning-fg); }
.xx-stat--danger::before  { background: var(--xx-danger-fg); }

.xx-stat__label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .085em;
    color: var(--xx-ink-3);
    margin-bottom: 6px;
}

.xx-stat__value {
    font-family: var(--xx-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--xx-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.xx-stat__value small {
    font-size: .9rem;
    font-weight: 600;
    color: var(--xx-ink-3);
}

.xx-stat--success .xx-stat__value { color: var(--xx-success-fg); }
.xx-stat--warning .xx-stat__value { color: var(--xx-warning-fg); }
.xx-stat--danger  .xx-stat__value { color: var(--xx-danger-fg); }

.xx-stat__hint {
    margin-top: 7px;
    font-size: .765rem;
    color: var(--xx-ink-3);
    line-height: 1.45;
}

/* --- Título de card con barrita de acento ---------------------------------- */

.xx-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--xx-font-display);
    font-size: .9rem;
    font-weight: 600;
    color: var(--xx-ink);
    margin: 0;
    letter-spacing: -.005em;
}

.xx-card-title::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--xx-accent);
    flex: 0 0 3px;
}

.xx-card-title__count {
    font-weight: 600;
    color: var(--xx-ink-3);
    font-size: .8rem;
}

/* --- Filas de lista dentro de una card ------------------------------------- */

.xx-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--xx-line-2);
}
.xx-row:first-child { padding-top: 0; }
.xx-row:last-child { border-bottom: 0; padding-bottom: 0; }

/* min-width:0 es lo que permite que un hijo de flex se ENCOJA por debajo de su contenido. Sin él, un
   correo largo o un token empujan la fila a lo ancho y se lleva la página entera —el síntoma clásico de
   "se sale de la pantalla" en el celular—. El overflow-wrap remata: parte la palabra si no hay dónde
   más. */
.xx-row__main {
    min-width: 0;
    overflow-wrap: anywhere;
}

.xx-row__title {
    font-weight: 600;
    color: var(--xx-ink);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 7px;

    /* Los títulos llevan insignias al lado ("Vencido", "3 vecinos", "Sin ubicación"). Sin envolver, en
       una pantalla angosta se salen en fila hacia la derecha en vez de bajar. */
    flex-wrap: wrap;
    flex-wrap: wrap;
}

.xx-row__meta {
    font-size: .78rem;
    color: var(--xx-ink-3);
    margin-top: 2px;
}

/* flex-wrap para que dos o tres botones bajen en vez de estirar la fila. Se conserva flex:0 0 auto
   —no deben encogerse hasta quedar ilegibles—, pero ya pueden ocupar dos renglones. */
.xx-row__actions { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }

/* --- Lista clave/valor (sustituye a los <dl class="row">) ------------------ */

.xx-kv { margin: 0; display: grid; gap: 0; }

.xx-kv__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--xx-line);
}
.xx-kv__item:last-child { border-bottom: 0; padding-bottom: 0; }
.xx-kv__item:first-child { padding-top: 0; }

.xx-kv__k {
    font-size: .8rem;
    color: var(--xx-ink-3);
    font-weight: 500;
    flex: 0 0 auto;
}

.xx-kv__v {
    font-size: .875rem;
    color: var(--xx-ink);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Bloques de código ----------------------------------------------------- */

code {
    font-family: var(--xx-font-mono);
    font-size: .84em;
    background: var(--xx-navy-50);
    color: var(--xx-navy-600);
    padding: .13em .4em;
    border-radius: 5px;
    border: 1px solid var(--xx-line-2);

    /* Un id de instancia o un slug no tienen espacios: sin esto son una sola "palabra" que el navegador
       se niega a partir, y basta uno para que toda la pantalla tenga scroll horizontal. */
    overflow-wrap: anywhere;
}

/* Sobre fondo oscuro el `code` de dentro no debe volver a pintar su cajita. */
.xx-code {
    background: var(--xx-navy-900);
    border: 1px solid var(--xx-navy-800);
    border-radius: var(--xx-r-sm);
    padding: 13px 15px;
    margin: 0 0 14px;
    overflow-x: auto;
    font-size: .805rem;
    line-height: 1.6;
}
.xx-code code {
    background: none;
    border: 0;
    padding: 0;
    color: #cdddf2;
    font-size: inherit;
}

.xx-code--light {
    background: var(--xx-surface-2);
    border-color: var(--xx-line);
}
.xx-code--light code { color: var(--xx-navy-700); }

/* --- Accesos rápidos (portada del negocio) --------------------------------- */

.xx-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 14px;
}

.xx-quick__card {
    display: block;
    background: var(--xx-surface);
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r);
    padding: 18px;
    box-shadow: var(--xx-shadow-sm);
    transition: box-shadow var(--xx-t), transform var(--xx-t), border-color var(--xx-t);
}

.xx-quick__card:hover {
    box-shadow: var(--xx-shadow);
    transform: translateY(-2px);
    border-color: var(--xx-navy-200);
}

.xx-quick__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--xx-navy-50);
    color: var(--xx-navy-500);
    margin-bottom: 12px;
}
.xx-quick__icon svg { width: 19px; height: 19px; }
.xx-quick__card:hover .xx-quick__icon { background: var(--xx-amber-100); color: var(--xx-amber-600); }

.xx-quick__title {
    font-family: var(--xx-font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--xx-ink);
    margin-bottom: 4px;
}

.xx-quick__text { font-size: .81rem; color: var(--xx-ink-3); line-height: 1.5; margin: 0; }

/* --- Estado vacío ---------------------------------------------------------- */

.xx-empty {
    text-align: center;
    padding: 46px 24px;
    color: var(--xx-ink-3);
}

.xx-empty__icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--xx-navy-50);
    color: var(--xx-navy-300);
}
.xx-empty__icon svg { width: 22px; height: 22px; }
.xx-empty__icon--success { background: var(--xx-success-bg); color: var(--xx-success-fg); font-size: 1.35rem; }
.xx-empty__icon--danger  { background: var(--xx-danger-bg);  color: var(--xx-danger-fg); }

.xx-empty__title { font-weight: 600; color: var(--xx-ink-2); font-size: .92rem; }
.xx-empty__text { font-size: .82rem; margin: 4px 0 0; }

/* --- Píldora de estado con punto ------------------------------------------- */

.xx-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
}
.xx-dot--on  { background: var(--xx-success-fg); box-shadow: 0 0 0 3px var(--xx-success-bg); }
.xx-dot--off { background: var(--xx-ink-3); box-shadow: 0 0 0 3px var(--xx-neutral-bg); }

/* --- Burbujas de conversación ---------------------------------------------- */

.xx-chat { display: flex; flex-direction: column; gap: 9px; }

.xx-bubble-row { display: flex; }
.xx-bubble-row--out { justify-content: flex-end; }

.xx-bubble {
    max-width: 76%;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--xx-ink);
    background: var(--xx-neutral-bg);
    border: 1px solid var(--xx-neutral-line);
}
.xx-bubble--ai    { background: var(--xx-navy-50);   border-color: var(--xx-navy-100); }
.xx-bubble--human { background: var(--xx-amber-50);  border-color: var(--xx-amber-200); }

.xx-bubble__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.xx-bubble__meta {
    display: block;
    margin-top: 2px;
    font-size: .68rem;
    color: var(--xx-ink-3);
    text-align: right;
}
.xx-bubble--failed { border-color: var(--xx-danger-fg); }

.xx-bubble__who {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--xx-ink-3);
    margin-bottom: 2px;
}

/* --- Código QR de vinculación ---------------------------------------------- */

.xx-qr {
    max-width: 272px;
    width: 100%;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r);
}

/* --- Panel con scroll (lista de conversaciones, historial) ----------------- */

.xx-scroll { overflow-y: auto; }
.xx-scroll--list { max-height: 68vh; }
.xx-scroll--chat { max-height: 63vh; }

/* --- Detalles plegables (Evidencia del incidente) -------------------------- */

details.xx-details summary {
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--xx-ink-3);
    list-style: none;
}
details.xx-details summary::-webkit-details-marker { display: none; }
details.xx-details summary::before { content: "▸ "; }
details.xx-details[open] summary::before { content: "▾ "; }
details.xx-details > code {
    display: block;
    margin-top: 6px;
    word-break: break-all;
    white-space: pre-wrap;
}

/* ============================================================================
   6. COMPONENTES DE BOOTSTRAP RE-VESTIDOS
   ============================================================================ */

/* --- Cards ------------------------------------------------------------------ */

.card {
    --bs-card-bg: var(--xx-surface);
    --bs-card-border-color: var(--xx-line);
    --bs-card-border-radius: var(--xx-r);
    --bs-card-inner-border-radius: calc(var(--xx-r) - 1px);
    --bs-card-spacer-y: 1.15rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-bg: var(--xx-surface);
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.25rem;
    box-shadow: var(--xx-shadow-sm);
}

.card-header {
    border-bottom: 1px solid var(--xx-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Card con filo de color a la izquierda (avisos, incidentes graves). */
.xx-card--flag { border-left: 3px solid var(--xx-navy-300); }
.xx-card--flag-danger  { border-left-color: var(--xx-danger-fg); }
.xx-card--flag-warning { border-left-color: var(--xx-warning-fg); }
.xx-card--flag-accent  { border-left-color: var(--xx-accent); }

/* --- Tablas ------------------------------------------------------------------ */

.table {
    --bs-table-color: var(--xx-ink-2);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--xx-line-2);
    --bs-table-hover-color: var(--xx-ink);
    --bs-table-hover-bg: var(--xx-navy-50);
    margin-bottom: 0;
    font-size: .875rem;
}

.table > :not(caption) > * > * { padding: .78rem 1rem; }

.table > thead > tr > th {
    background: var(--xx-surface-2);
    color: var(--xx-ink-3);
    font-size: .705rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .085em;
    border-bottom: 1px solid var(--xx-line);
    white-space: nowrap;
    vertical-align: middle;
}

.table > tbody > tr > td { vertical-align: middle; border-bottom-color: var(--xx-line-2); }
.table > tbody > tr:last-child > td { border-bottom: 0; }

.table-sm > :not(caption) > * > * { padding: .5rem .7rem; }

/* Una tabla pegada al borde de la card necesita respirar como el resto. */
.card > .table-responsive > .table > :not(caption) > * > *:first-child,
.card > .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
.card > .table-responsive > .table > :not(caption) > * > *:last-child,
.card > .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }

.card > .table-responsive:first-child > .table > thead > tr:first-child > th:first-child { border-top-left-radius: calc(var(--xx-r) - 1px); }
.card > .table-responsive:first-child > .table > thead > tr:first-child > th:last-child { border-top-right-radius: calc(var(--xx-r) - 1px); }

/* --- Badges: píldoras suaves con filo, no bloques saturados --------------- */

.badge {
    --bs-badge-padding-x: .62em;
    --bs-badge-padding-y: .38em;
    --bs-badge-font-size: .715rem;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--xx-r-pill);
    letter-spacing: .01em;
    vertical-align: middle;
}

.badge.bg-success   { background: var(--xx-success-bg) !important; color: var(--xx-success-fg) !important; box-shadow: inset 0 0 0 1px var(--xx-success-line); }
.badge.bg-danger    { background: var(--xx-danger-bg) !important;  color: var(--xx-danger-fg) !important;  box-shadow: inset 0 0 0 1px var(--xx-danger-line); }
.badge.bg-warning   { background: var(--xx-warning-bg) !important; color: var(--xx-warning-fg) !important; box-shadow: inset 0 0 0 1px var(--xx-warning-line); }
.badge.bg-info      { background: var(--xx-info-bg) !important;    color: var(--xx-info-fg) !important;    box-shadow: inset 0 0 0 1px var(--xx-info-line); }
.badge.bg-secondary,
.badge.bg-light     { background: var(--xx-neutral-bg) !important; color: var(--xx-neutral-fg) !important; box-shadow: inset 0 0 0 1px var(--xx-neutral-line); }
.badge.bg-dark      { background: var(--xx-navy-800) !important;   color: #fff !important; }
.badge.bg-primary   { background: var(--xx-navy-100) !important;   color: var(--xx-navy-700) !important;   box-shadow: inset 0 0 0 1px var(--xx-navy-200); }
.badge.bg-accent    { background: var(--xx-amber-100) !important;  color: var(--xx-amber-700) !important;  box-shadow: inset 0 0 0 1px var(--xx-amber-200); }

/* Badge grande, para el estado principal de una pantalla de detalle. */
.badge.xx-badge-lg { --bs-badge-font-size: .8rem; --bs-badge-padding-x: .85em; --bs-badge-padding-y: .45em; }

/* --- Botones ----------------------------------------------------------------- */

.btn {
    --bs-btn-padding-y: .48rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-font-size: .855rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--xx-r-sm);
    --bs-btn-focus-shadow-rgb: 245, 158, 11;
    letter-spacing: .005em;
    transition: background-color var(--xx-t), border-color var(--xx-t), color var(--xx-t), box-shadow var(--xx-t);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-sm { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .68rem; --bs-btn-font-size: .79rem; }
.btn-lg { --bs-btn-padding-y: .62rem; --bs-btn-padding-x: 1.15rem; --bs-btn-font-size: .95rem; }

.btn:focus-visible { box-shadow: var(--xx-ring); }

.btn-primary {
    --bs-btn-bg: var(--xx-brand);
    --bs-btn-border-color: var(--xx-brand);
    --bs-btn-hover-bg: var(--xx-brand-hover);
    --bs-btn-hover-border-color: var(--xx-brand-hover);
    --bs-btn-active-bg: var(--xx-brand-active);
    --bs-btn-active-border-color: var(--xx-brand-active);
    --bs-btn-disabled-bg: var(--xx-navy-300);
    --bs-btn-disabled-border-color: var(--xx-navy-300);
}

/* El ámbar es la llamada principal: se usa una sola vez por pantalla. */
.btn-accent {
    --bs-btn-color: var(--xx-navy-900);
    --bs-btn-bg: var(--xx-amber-400);
    --bs-btn-border-color: var(--xx-amber-400);
    --bs-btn-hover-color: var(--xx-navy-900);
    --bs-btn-hover-bg: var(--xx-amber-300);
    --bs-btn-hover-border-color: var(--xx-amber-300);
    --bs-btn-active-color: var(--xx-navy-900);
    --bs-btn-active-bg: var(--xx-amber-500);
    --bs-btn-active-border-color: var(--xx-amber-500);
}

.btn-dark {
    --bs-btn-bg: var(--xx-navy-800);
    --bs-btn-border-color: var(--xx-navy-800);
    --bs-btn-hover-bg: var(--xx-navy-700);
    --bs-btn-hover-border-color: var(--xx-navy-700);
    --bs-btn-active-bg: var(--xx-navy-900);
}

.btn-danger {
    --bs-btn-bg: var(--xx-danger-fg);
    --bs-btn-border-color: var(--xx-danger-fg);
    --bs-btn-hover-bg: #9a1e14;
    --bs-btn-hover-border-color: #9a1e14;
    --bs-btn-active-bg: #85180f;
}

.btn-success {
    --bs-btn-bg: var(--xx-success-fg);
    --bs-btn-border-color: var(--xx-success-fg);
    --bs-btn-hover-bg: #09663e;
    --bs-btn-hover-border-color: #09663e;
    --bs-btn-active-bg: #075433;
}

.btn-secondary {
    --bs-btn-color: var(--xx-ink-2);
    --bs-btn-bg: var(--xx-neutral-bg);
    --bs-btn-border-color: var(--xx-neutral-line);
    --bs-btn-hover-color: var(--xx-ink);
    --bs-btn-hover-bg: var(--xx-navy-100);
    --bs-btn-hover-border-color: var(--xx-navy-200);
    --bs-btn-active-color: var(--xx-ink);
    --bs-btn-active-bg: var(--xx-navy-100);
    --bs-btn-active-border-color: var(--xx-navy-200);
}

/* Los outline de Bootstrap salen demasiado tenues sobre canvas gris: se les
   da fondo blanco para que se lean como botones y no como texto con borde. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-danger,
.btn-outline-success {
    --bs-btn-bg: var(--xx-surface);
}

.btn-outline-primary {
    --bs-btn-color: var(--xx-navy-600);
    --bs-btn-border-color: var(--xx-navy-200);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--xx-brand);
    --bs-btn-hover-border-color: var(--xx-brand);
    --bs-btn-active-bg: var(--xx-brand-active);
    --bs-btn-active-border-color: var(--xx-brand-active);
}

.btn-outline-secondary {
    --bs-btn-color: var(--xx-ink-2);
    --bs-btn-border-color: var(--xx-line);
    --bs-btn-hover-color: var(--xx-ink);
    --bs-btn-hover-bg: var(--xx-navy-50);
    --bs-btn-hover-border-color: var(--xx-navy-200);
    --bs-btn-active-color: var(--xx-ink);
    --bs-btn-active-bg: var(--xx-navy-100);
    --bs-btn-active-border-color: var(--xx-navy-200);
}

.btn-outline-dark {
    --bs-btn-color: var(--xx-navy-800);
    --bs-btn-border-color: var(--xx-navy-200);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--xx-navy-800);
    --bs-btn-hover-border-color: var(--xx-navy-800);
    --bs-btn-active-bg: var(--xx-navy-900);
}

.btn-outline-danger {
    --bs-btn-color: var(--xx-danger-fg);
    --bs-btn-border-color: var(--xx-danger-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--xx-danger-fg);
    --bs-btn-hover-border-color: var(--xx-danger-fg);
    --bs-btn-active-bg: #9a1e14;
}

.btn-outline-success {
    --bs-btn-color: var(--xx-success-fg);
    --bs-btn-border-color: var(--xx-success-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--xx-success-fg);
    --bs-btn-hover-border-color: var(--xx-success-fg);
    --bs-btn-active-bg: #09663e;
}

.btn-link {
    --bs-btn-color: var(--xx-navy-500);
    --bs-btn-hover-color: var(--xx-navy-700);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

/* Grupo de botones tipo segmentado (filtros "Abiertos / Todos"). */
.btn-group > .btn { --bs-btn-border-radius: var(--xx-r-sm); }

/* --- Formularios --------------------------------------------------------------- */

.form-label {
    font-size: .795rem;
    font-weight: 600;
    color: var(--xx-ink-2);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-color: var(--xx-line);
    border-radius: var(--xx-r-sm);
    /* El hueco de la derecha es donde Bootstrap pinta la flecha: una imagen de fondo anclada en
       `right .75rem center`. Este padding iba en atajo (`.52rem .72rem`) y borraba el
       `padding-right: 2.25rem` de Bootstrap, así que la flecha quedaba ENCIMA del texto. En un
       select ancho no se notaba —sobra sitio a la derecha—, pero con `w-auto` la caja se encoge
       hasta la palabra y la flecha se le monta. */
    padding: .52rem 2.25rem .52rem .72rem;
    font-size: .875rem;
    color: var(--xx-ink);
    background-color: var(--xx-surface);
    transition: border-color var(--xx-t), box-shadow var(--xx-t);
}

.form-control::placeholder { color: var(--xx-navy-200); }

.form-control:focus,
.form-select:focus {
    border-color: var(--xx-amber-300);
    box-shadow: var(--xx-ring);
}

.form-control:disabled,
.form-control[readonly] { background-color: var(--xx-surface-2); color: var(--xx-ink-2); }

.form-control-sm { padding: .34rem .55rem; font-size: .8rem; }

/* Separado del de arriba a propósito: el select chico necesita el mismo hueco para la flecha.
   Bootstrap no recorre la imagen de fondo cuando el control encoge. */
.form-select-sm { padding: .34rem 2.25rem .34rem .55rem; font-size: .8rem; }

.form-text { font-size: .775rem; color: var(--xx-ink-3); margin-top: .3rem; }

textarea.form-control { line-height: 1.55; }

.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 5; }

/* Solo los de contorno se "pegan" al campo con el fondo del input. Antes era `.input-group .btn`, que por ser
   más específica que `.btn-dark` / `.btn-accent` les quitaba el fondo a los botones sólidos: el «Copiar» de la
   API key quedaba con letra blanca sobre fondo claro, invisible. */
.input-group .btn[class*="btn-outline-"] { --bs-btn-bg: var(--xx-surface-2); }

/* --- Alertas: filo de color a la izquierda + fondo suave ------------------- */

.alert {
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--xx-r-sm);
    padding: .85rem 1rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}

.alert h6, .alert .alert-heading {
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.alert ul { padding-left: 1.1rem; margin-bottom: 0; }

.alert-success { background: var(--xx-success-bg); border-color: var(--xx-success-line); border-left-color: var(--xx-success-fg); color: #0a5c39; }
.alert-danger  { background: var(--xx-danger-bg);  border-color: var(--xx-danger-line);  border-left-color: var(--xx-danger-fg);  color: #8f1d13; }
.alert-warning { background: var(--xx-warning-bg); border-color: var(--xx-warning-line); border-left-color: var(--xx-warning-fg); color: #7c4708; }
.alert-info    { background: var(--xx-info-bg);    border-color: var(--xx-info-line);    border-left-color: var(--xx-info-fg);    color: #14459e; }
.alert-light   { background: var(--xx-surface-2);  border-color: var(--xx-line);         border-left-color: var(--xx-navy-300);   color: var(--xx-ink-2); }

.alert code { background: rgba(255, 255, 255, .65); border-color: rgba(15, 27, 48, .08); }

/* --- Modales ----------------------------------------------------------------- */

.modal-content {
    border: 0;
    border-radius: var(--xx-r-lg);
    box-shadow: var(--xx-shadow-lg);
    overflow: hidden;
}

.modal-header {
    background: var(--xx-surface);
    border-bottom: 1px solid var(--xx-line-2);
    padding: 1.05rem 1.35rem;
}

.modal-title {
    font-family: var(--xx-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--xx-ink);
}

.modal-body { padding: 1.35rem; }

.modal-footer {
    background: var(--xx-surface-2);
    border-top: 1px solid var(--xx-line-2);
    padding: .9rem 1.35rem;
}

.modal-backdrop.show { opacity: .55; background: var(--xx-navy-950); }

/* --- Barras de progreso -------------------------------------------------------- */

.progress {
    --bs-progress-bg: var(--xx-navy-100);
    --bs-progress-border-radius: var(--xx-r-pill);
    --bs-progress-bar-bg: var(--xx-navy-500);
    height: 7px;
}

.progress-bar.bg-warning { background: var(--xx-warning-fg) !important; }
.progress-bar.bg-danger  { background: var(--xx-danger-fg) !important; }
.progress-bar.bg-success { background: var(--xx-success-fg) !important; }

/* --- Lista de grupo (conversaciones) ------------------------------------------ */

.list-group-item {
    --bs-list-group-border-color: var(--xx-line-2);
    --bs-list-group-action-hover-bg: var(--xx-navy-50);
    --bs-list-group-action-active-bg: var(--xx-navy-50);
    padding: .8rem 1rem;
    color: var(--xx-ink-2);
}

.list-group-item.active {
    --bs-list-group-active-bg: var(--xx-navy-50);
    --bs-list-group-active-border-color: var(--xx-line-2);
    --bs-list-group-active-color: var(--xx-ink);
    box-shadow: inset 3px 0 0 var(--xx-accent);
}

/* --- Utilidades de texto de Bootstrap alineadas a la paleta ------------------ */

.text-muted    { color: var(--xx-ink-3) !important; }
.text-success  { color: var(--xx-success-fg) !important; }
.text-danger   { color: var(--xx-danger-fg) !important; }
.text-warning  { color: var(--xx-warning-fg) !important; }
.text-primary  { color: var(--xx-navy-600) !important; }
.border-bottom { border-bottom-color: var(--xx-line-2) !important; }
.border-top    { border-top-color: var(--xx-line-2) !important; }

/* ============================================================================
   7. UTILIDADES PROPIAS
   ============================================================================ */

.xx-num     { font-variant-numeric: tabular-nums; }
.xx-mono    { font-family: var(--xx-font-mono); font-size: .82rem; }
.xx-tight   { letter-spacing: -.015em; }
.xx-note    { font-size: .8rem; color: var(--xx-ink-3); line-height: 1.5; }
.xx-divider { height: 1px; background: var(--xx-line); margin: 1.1rem 0; }

/* ============================================================================
   8. ACCESO (login)
   Pantalla partida: a la izquierda quién eres, a la derecha el formulario.
   El panel oscuro es lo único de todo el sistema que puede permitirse ser
   decorativo — es la primera impresión y no compite con ningún dato.
   ============================================================================ */

.xx-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--xx-surface);
}

.xx-auth__aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 46px 54px;
    color: #fff;
    background: linear-gradient(150deg, var(--xx-navy-950) 0%, var(--xx-navy-700) 52%, var(--xx-navy-500) 100%);
}

/* Halo ámbar en diagonal: da profundidad sin meter una imagen. */
.xx-auth__aside::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -230px;
    bottom: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .22) 0%, rgba(245, 158, 11, 0) 68%);
}

/* Retícula tenue, del mismo idioma que una consola. */
.xx-auth__aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 72%);
}

.xx-auth__aside > * { position: relative; z-index: 1; }

.xx-auth__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--xx-font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: .01em;
}

.xx-auth__brand .xx-logo {
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.xx-auth__body { margin: auto 0; max-width: 30rem; }

.xx-auth__headline {
    font-family: var(--xx-font-display);
    font-size: 2.15rem;
    line-height: 1.16;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.028em;
    margin: 0 0 14px;
}
.xx-auth__headline em { font-style: normal; color: var(--xx-amber-300); }

.xx-auth__lead {
    color: rgba(255, 255, 255, .62);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 30px;
}

.xx-auth__lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }

.xx-auth__lines li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
}

.xx-auth__lines b {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
}

.xx-auth__lines span { color: rgba(255, 255, 255, .55); font-size: .82rem; }

.xx-auth__lines i {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--xx-amber-400);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .16);
}

.xx-auth__foot {
    font-size: .765rem;
    color: rgba(255, 255, 255, .38);
    letter-spacing: .02em;
}

.xx-auth__main {
    display: grid;
    place-items: center;
    padding: 44px 26px;
}

.xx-auth__form { width: 100%; max-width: 380px; }

.xx-auth__title {
    font-family: var(--xx-font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--xx-ink);
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.xx-auth__sub { color: var(--xx-ink-3); font-size: .875rem; margin: 0 0 26px; }

.xx-auth__form .form-control { padding: .62rem .8rem; }

.xx-auth__hint {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--xx-line-2);
    font-size: .78rem;
    color: var(--xx-ink-3);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .xx-auth { grid-template-columns: 1fr; }
    /* En pantalla chica el panel se reduce a una banda: sigue dando identidad
       sin empujar el formulario abajo del pliegue. */
    .xx-auth__aside { padding: 22px 24px; }
    .xx-auth__body, .xx-auth__foot { display: none; }
    .xx-auth__main { padding: 34px 22px 56px; align-items: start; }
}

/* ============================================================================
   9. RESPONSIVE
   Por debajo de lg el sidebar se vuelve un cajón que entra por la izquierda.
   ============================================================================ */

.xx-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 34, .5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--xx-t), visibility var(--xx-t);
}

@media (max-width: 991.98px) {
    .xx-sidebar { transform: translateX(-100%); box-shadow: var(--xx-shadow-lg); }
    body.xx-nav-open .xx-sidebar { transform: none; }
    body.xx-nav-open .xx-backdrop { opacity: 1; visibility: visible; }
    body.xx-nav-open { overflow: hidden; }

    .xx-main { margin-left: 0; }
    .xx-burger { display: grid; }
    .xx-topbar { padding: 0 16px; }
    .xx-page { padding: 20px 16px 44px; }
    .xx-topbar__user span { display: none; }
}

@media (max-width: 575.98px) {
    .xx-page-head { flex-direction: column; align-items: stretch; }
    .xx-page-head__actions { justify-content: flex-start; }
    .xx-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
    .xx-stat__value { font-size: 1.45rem; }
    .modal-body { padding: 1.1rem; }
}

@media (max-width: 575.98px) {
    /* En una pantalla angosta la fila deja de ser "contenido a la izquierda, botones a la derecha" y pasa
       a ser dos renglones. Repartir 320px entre las dos columnas dejaba los botones tan estrechos que se
       leían cortados. */
    .xx-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .xx-row__actions { justify-content: flex-start; }

    /* El encabezado de una tarjeta con su acción al lado: lo mismo. */
    .xx-card-head { flex-direction: column; align-items: stretch; gap: 10px; }

    /* Los recuadros de enlace y de API key llevan un campo largo y un botón "Copiar" pegado. Al
       encogerse, el botón se comía el campo y no se alcanzaba a ver lo que se iba a copiar. */
    .input-group > .form-control.xx-mono { font-size: .72rem; }

    /* Un correo largo en el pie del menú lateral no debe ensanchar el cajón. */
    .xx-userbox__name, .xx-userbox__role { overflow-wrap: anywhere; }
}

/* ── Trampa anti-bot ─────────────────────────────────────────────────────────
   Esconde el campo señuelo de los formularios públicos. Va aquí y no en un
   style= en línea por dos razones: los bots que valen algo revisan el atributo
   style para saltarse señuelos, y la CSP prefiere no permitir estilos sueltos.
   No se usa display:none a secas porque algunos bots lo detectan igual; esto
   lo saca de la pantalla sin declararlo invisible. */
.xx-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   UTILIDADES — lo que antes eran atributos `style=` en las vistas

   No están aquí por gusto de ordenar: desde el 2026-08-21 la CSP de los paneles
   ya no permite estilos en línea, así que un `style="..."` escrito en el HTML
   **no se aplica**. El elemento sale sin ese estilo y nada avisa: no hay error
   en el servidor ni en la consola del navegador salvo el reporte de la CSP.

   Cada una reemplaza una declaración que ya existía, con los mismos valores.
   Si algo se ve distinto de como se veía, es aquí donde hay que mirar.
   ════════════════════════════════════════════════════════════════════════════ */

/* Sin !important a propósito: varias pantallas se muestran después poniéndoles
   `style.display` desde JavaScript —que la CSP sí permite, porque no es un
   atributo del HTML— y el estilo en línea tiene que poder ganarle a la clase. */
.xx-oculto { display: none; }

/* La variante para un elemento que además trae una clase de Bootstrap con su
   propio display (`d-flex`), que lleva !important y le ganaría. Quien lo muestra
   usa setProperty(..., 'important'). */
.xx-oculto--forzado { display: none !important; }

/* Páginas sueltas (gracias, avisos) que no usan el layout del panel. */
.xx-hoja { max-width: 620px; margin: 0 auto; padding: 48px 20px; }
.xx-marca { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 28px; }
.xx-marca--legal { margin-bottom: 24px; }

/* Miniaturas de evidencia fotográfica. Tres tamaños según dónde se listan. */
.xx-miniatura { object-fit: cover; border: 1px solid #d7dbe3; }
.xx-miniatura--lg { width: 72px; height: 72px; border-radius: 8px; }
.xx-miniatura--md { width: 48px; height: 48px; border-radius: 6px; }
.xx-miniatura--sm { width: 40px; height: 40px; border-radius: 5px; }

/* Anchos puntuales. Los truncados van con `text-truncate` de Bootstrap, que
   necesita un ancho máximo para tener de dónde cortar. */
.xx-campo-cupo { width: 72px; }
.xx-truncado-180 { max-width: 180px; }
.xx-truncado-200 { max-width: 200px; }
.xx-ancho-560 { max-width: 560px; }
.xx-ancho-auto { width: auto; }

/* Recuadro azul de nota informativa. */
.xx-nota-info { background: #f0f7ff; border-left: 3px solid #2b6cb0; padding: 10px 14px; }

/* El documento del alta que no es obligatorio pero conviene traer. */
.xx-doc--alerta { border-color: #dd6b20; }

/* === Logo Charl.IA (reemplaza el placeholder cuadrado .xx-logo) ============ */
.xx-brand-img { height: 30px; width: auto; max-width: 100%; display: block; }
.xx-brand-img--sidebar { height: 26px; }
/* En el panel oscuro del login el logo lleva navy (#16263f): se monta sobre un
   chip claro para que las letras oscuras se lean. */
.xx-auth__brand .xx-brand-chip {
    display: inline-flex;
    background: #fff;
    padding: 8px 13px;
    border-radius: 11px;
    box-shadow: 0 2px 10px rgba(6, 11, 22, .28);
}
.xx-auth__brand .xx-brand-chip .xx-brand-img { height: 28px; }
@media (max-width: 480px) {
    .xx-brand-img { height: 26px; }
    .xx-auth__brand .xx-brand-chip .xx-brand-img { height: 24px; }
}

/* === Campanita de avisos (copiado del panel Municipios; mismo sistema xx-*) ========= */
.xx-campana { position: relative; }

.xx-campana__num {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--xx-r-pill);
    background: var(--xx-amber-400);
    color: var(--xx-navy-900);
    font-size: .68rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;

    /* El aro del color de la barra despega el número del icono. */
    box-shadow: 0 0 0 2px var(--xx-navy-800);
}

.xx-campana__panel {
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid var(--xx-line);
    border-radius: var(--xx-r);
    box-shadow: var(--xx-shadow-lg);
    overflow: hidden;
}

.xx-campana__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--xx-line);
    background: var(--xx-surface-2);
    font-size: .875rem;
    color: var(--xx-ink);
}

.xx-campana__todo {
    border: 0;
    background: none;
    padding: 0;
    font-size: .78rem;
    color: var(--xx-navy-500);
    cursor: pointer;
}

.xx-campana__todo:hover { color: var(--xx-navy-700); text-decoration: underline; }

.xx-campana__vacio {
    padding: 26px 14px;
    text-align: center;
    font-size: .82rem;
    color: var(--xx-ink-3);
}

/* La lista se corta a la altura de la pantalla: con veinte avisos, el panel llegaba
   hasta abajo y tapaba el contenido. */
[data-campana-lista] { max-height: min(420px, 60vh); overflow-y: auto; }

.xx-aviso {
    display: block;
    padding: 11px 14px;
    border-bottom: 1px solid var(--xx-line-2);
    color: inherit;
}

.xx-aviso:last-child { border-bottom: 0; }
.xx-aviso:hover { background: var(--xx-navy-50); }

/* Lo no leído se marca con una barrita ámbar y fondo tenue, no con negritas: en una
   lista donde casi todo está en negritas, las negritas dejan de decir nada. */
.xx-aviso--nuevo {
    background: var(--xx-amber-50);
    box-shadow: inset 3px 0 0 var(--xx-amber-400);
}

.xx-aviso--nuevo:hover { background: var(--xx-amber-100); }

.xx-aviso__que {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--xx-ink-3);
}

.xx-aviso__titulo {
    font-size: .875rem;
    color: var(--xx-ink);
    margin: 2px 0 3px;

    /* Lo escribe un ciudadano por WhatsApp: puede venir larguísimo y sin espacios. */
    overflow-wrap: anywhere;
}

.xx-aviso__pie { font-size: .74rem; color: var(--xx-ink-3); }