/* ============================================================================
   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. */
/* align-items: center NO es cosmetico. Sin el, el contenedor estira a sus hijos —es el valor por
   omision de un flex— y la insignia de estatus ("Recibido") crecia hasta la altura del boton "Abrir":
   una pastilla deformada, del alto de un boton y con el texto flotando a media altura. */
.xx-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 0 0 auto; }

/* El paginador vive DENTRO de la tarjeta pero FUERA del card-body —va despues de la lista—, asi que sin
   esto el "Mostrando 1-3 de 3" queda pegado al borde izquierdo y al filo de abajo, sin un respiro. */
.card > .xx-pager {
    margin-top: 0;
    padding: .9rem var(--bs-card-spacer-x, 1.25rem) 1.05rem;
    border-top: 1px solid var(--xx-line-2);
}

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

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

   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** y nada avisa.
   ════════════════════════════════════════════════════════════════════════════ */

/* El contenedor del sprite de iconos: está en el HTML para que los <use> lo
   encuentren, pero no se ve. */
.xx-oculto { display: none; }

/* Las fotos que manda el ciudadano con su reporte: miniatura en la ficha y
   tamaño completo al abrirlas. */
.xx-foto-reporte { max-width: 220px; max-height: 220px; border-radius: 8px; }
.xx-foto-ampliada { max-width: 100%; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   GRÁFICAS DEL TABLERO

   Son SVG dibujado por el servidor, sin librería y sin JavaScript. Tres razones,
   en este orden: la CSP no deja cargar un script de otro dominio y vendorar una
   librería de gráficas por tres barras es desproporcionado; un SVG del servidor
   se imprime y se pega en un informe tal como se ve; y una gráfica que no depende
   de JavaScript no se queda en blanco el día que algo más de la página truena.

   La geometría va en ATRIBUTOS (x, width, height), no en `style=`: la CSP también
   bloquea los estilos en línea, así que un ancho puesto ahí no se aplicaría. El
   color y la tipografía sí viven aquí, en clases.

   Paleta: los tres estados de un reporte son una secuencia, no categorías sueltas,
   y se pintan con los semánticos que ya usa el panel — ámbar lo que nadie ha
   tocado, azul lo que se está trabajando, verde lo resuelto—. Se validaron contra
   fondo claro para daltonismo: el par más cercano (verde/azul) queda en ΔE 23 en
   deuteranopía, muy por encima del piso de 8, y los tres pasan contraste 3:1.
   ════════════════════════════════════════════════════════════════════════════ */

.xx-chart {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
}

/* El texto NUNCA lleva el color de la serie: la identidad la carga el cuadrito de
   color que va al lado. Un ámbar legible como relleno es ilegible como letra. */
.xx-chart__label { fill: var(--xx-ink-2); font-size: 12px; font-family: var(--xx-font-sans); }
.xx-chart__value { fill: var(--xx-ink); font-size: 12px; font-weight: 600; font-family: var(--xx-font-sans); font-variant-numeric: tabular-nums; }
.xx-chart__muted { fill: var(--xx-ink-3); font-size: 11px; font-family: var(--xx-font-sans); }

/* Dentro de un relleno oscuro la letra va en blanco: es la única excepción a lo
   de arriba, y es por contraste, no por identidad. */
.xx-chart__inline { fill: #fff; font-size: 11px; font-weight: 600; font-family: var(--xx-font-sans); font-variant-numeric: tabular-nums; }

.xx-chart__rule { stroke: var(--xx-line); stroke-width: 1; }

/* La meta del área: una marca, no una barra. Va punteada para que no se confunda
   con un dato. */
.xx-chart__meta { stroke: var(--xx-ink-3); stroke-width: 2; stroke-dasharray: 3 3; }

.xx-chart__track { fill: var(--xx-line-2); }

/* Los tres estados. */
.xx-fill--pendiente { fill: var(--xx-amber-500); }
.xx-fill--proceso   { fill: var(--xx-info-fg); }
.xx-fill--resuelto  { fill: var(--xx-success-fg); }

/* Cerrado sin resolver no es un logro: gris de apoyo, nunca un color de serie. */
.xx-fill--cerrado   { fill: var(--xx-navy-200); }

/* Cumplió su meta o no la cumplió. Son dos estados, no dos series. */
.xx-fill--ok    { fill: var(--xx-success-fg); }
.xx-fill--tarde { fill: var(--xx-danger-fg); }

/* --- Leyenda ------------------------------------------------------------- */

.xx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.xx-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--xx-ink-2);
}

.xx-legend i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 11px;
}

.xx-legend .xx-legend--pendiente { background: var(--xx-amber-500); }
.xx-legend .xx-legend--proceso   { background: var(--xx-info-fg); }
.xx-legend .xx-legend--resuelto  { background: var(--xx-success-fg); }
.xx-legend .xx-legend--cerrado   { background: var(--xx-navy-200); }

/* ════════════════════════════════════════════════════════════════════════════
   IMPRESIÓN

   El tablero se imprime y se pega en el informe de la presidencia. Sin esto sale
   con el menú lateral encima, la barra superior y media hoja desperdiciada.
   ════════════════════════════════════════════════════════════════════════════ */

@media print {
    .xx-sidebar,
    .xx-topbar,
    .xx-backdrop,
    .xx-page-head__actions { display: none !important; }

    .xx-main { margin-left: 0 !important; }
    .xx-page { padding: 0 !important; max-width: none; }

    body { background: #fff; }

    /* Una tarjeta partida a la mitad entre dos hojas es lo que hace que el informe
       se vea improvisado. */
    .card {
        break-inside: avoid;
        box-shadow: none;
        border-color: #ccd4e0;
    }

    /* La tabla por área es el respaldo de las gráficas: en papel tiene que salir
       completa, no con la barra de desplazamiento cortada. */
    .table-responsive { overflow: visible !important; }
}

/* --- Gráfica de meses (líneas) ------------------------------------------- */

/* Dos líneas y no dos columnas: lo que se está mirando es una tendencia, y una
   tendencia se lee mejor en una línea que en veinticuatro barras. */
.xx-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.xx-line--entrados { stroke: var(--xx-info-fg); }
.xx-line--resueltos { stroke: var(--xx-success-fg); }

/* El anillo del color del papel es lo que deja legible un punto cuando las dos
   líneas se cruzan. */
.xx-dot { stroke: var(--xx-surface); stroke-width: 2; }
.xx-dot--entrados { fill: var(--xx-info-fg); }
.xx-dot--resueltos { fill: var(--xx-success-fg); }

.xx-chart__grid { stroke: var(--xx-line-2); stroke-width: 1; }

.xx-legend .xx-legend--entrados { background: var(--xx-info-fg); }

/* --- Mapa de calor por área y mes ---------------------------------------- */

/* Un solo tono, de claro a oscuro. Con un color por área haría falta inventar
   hues —hay municipios con doce direcciones— y a partir de la octava dejan de
   distinguirse; con la escala, el número de áreas deja de importar. */
.xx-heat--0 { fill: var(--xx-line-2); }
.xx-heat--1 { fill: var(--xx-navy-100); }
.xx-heat--2 { fill: var(--xx-navy-200); }
.xx-heat--3 { fill: var(--xx-navy-300); }
.xx-heat--4 { fill: var(--xx-navy-500); }

.xx-heat__num  { fill: var(--xx-ink); font-size: 10px; font-family: var(--xx-font-sans); font-variant-numeric: tabular-nums; }
.xx-heat__num--claro { fill: #fff; font-size: 10px; font-family: var(--xx-font-sans); font-variant-numeric: tabular-nums; }

.xx-escala { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--xx-ink-3); margin: 0 0 12px; }
.xx-escala i { width: 22px; height: 11px; border-radius: 2px; }
.xx-escala .xx-escala--0 { background: var(--xx-line-2); }
.xx-escala .xx-escala--1 { background: var(--xx-navy-100); }
.xx-escala .xx-escala--2 { background: var(--xx-navy-200); }
.xx-escala .xx-escala--3 { background: var(--xx-navy-300); }
.xx-escala .xx-escala--4 { background: var(--xx-navy-500); }

/* ════════════════════════════════════════════════════════════════════════════
   CAMPANITA

   Vive en la barra oscura, así que el icono va en blanco y el número en ámbar:
   el rojo sobre azul noche pierde contraste y además aquí no significa error,
   significa "esto todavía no lo miras".
   ════════════════════════════════════════════════════════════════════════════ */

.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); }

/* === Logo Charl.IA en el badge de marca (panel y pantallas de acceso) ======= */
/* La C de Charl.IA es azul marino, igual que el sidebar y el fondo de acceso: sin un chip claro detrás
   se perdería (navy sobre navy). El badge cuadrado pasa a fondo blanco y el logo va contenido dentro. */
.xx-sidebar__brand .xx-logo--brand,
.xx-auth__brand .xx-logo--brand {
    background: #fff;
    color: transparent;
    padding: 5px;
    overflow: hidden;
}
.xx-logo--brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}