/* =================================================================
   Cloud · Sistema de diseño
   Paleta basada en el color institucional Hablame: #0099ff
   ================================================================= */

:root {
    /* --- Escala de marca (basada en #0099ff) --- */
    --brand-50:  #e6f5ff;
    --brand-100: #cceaff;
    --brand-200: #99d5ff;
    --brand-300: #66c0ff;
    --brand-400: #33aaff;
    --brand-500: #0099ff;   /* INSTITUCIONAL */
    --brand-600: #0080dd;
    --brand-700: #0066b3;
    --brand-800: #004d8a;
    --brand-900: #003866;
    --brand-950: #001f33;

    /* --- Roles semánticos --- */
    --cloud-primary:        var(--brand-500);
    --cloud-primary-hover:  var(--brand-600);
    --cloud-primary-active: var(--brand-700);
    --cloud-primary-dark:   var(--brand-700);
    --cloud-primary-soft:   var(--brand-50);

    --cloud-success: #10b981;
    --cloud-warning: #f59e0b;
    --cloud-danger:  #ef4444;
    --cloud-info:    var(--brand-400);

    /* --- Neutrales ---
       Área de trabajo levemente tintada para que las widgets blancas
       (cards, paneles) se diferencien claramente del canvas. */
    --cloud-bg:           #f1f5f9;  /* gris-azul muy sutil */
    --cloud-surface:      #ffffff;  /* widgets, sidebar, topbar */
    --cloud-surface-elev: #ffffff;
    --cloud-text:         #0f172a;
    --cloud-muted:        #64748b;
    --cloud-border:       #e2e8f0;
    --cloud-input-bg:     #ffffff;
    --cloud-divider:      #e2e8f0;
    --cloud-hover:        rgba(0, 153, 255, 0.06);

    /* --- Gradientes de marca --- */
    --gradient-brand:      linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%);
    --gradient-brand-deep: linear-gradient(135deg, #001f33 0%, #003866 35%, var(--brand-700) 70%, var(--brand-500) 100%);

    /* --- Sombras --- */
    --shadow-brand:    0 10px 25px -8px rgba(0, 153, 255, .45);
    --shadow-brand-sm: 0 4px 14px -4px rgba(0, 153, 255, .35);
    --shadow-elev:     0 4px 12px -4px rgba(15, 23, 42, .08);
}

/* --- Tema oscuro --- */
[data-bs-theme="dark"] {
    --cloud-bg:           #051427;
    --cloud-surface:      #0a1f33;
    --cloud-surface-elev: #0f2a47;
    --cloud-text:         #e2e8f0;
    --cloud-muted:        #94a3b8;
    --cloud-border:       #1a3553;
    --cloud-input-bg:     #0f2a47;
    --cloud-divider:      #1a3553;
    --cloud-hover:        rgba(0, 153, 255, 0.12);

    --bs-body-bg:           var(--cloud-bg);
    --bs-body-color:        var(--cloud-text);
    --bs-secondary-color:   var(--cloud-muted);
    --bs-border-color:      var(--cloud-border);
    --bs-card-bg:           var(--cloud-surface-elev);
    --bs-card-border-color: var(--cloud-border);
    --bs-tertiary-bg:       var(--cloud-surface);
}

/* =================================================================
   Reset y base
   ================================================================= */

/* Accesibilidad: skip-to-content link.
   Totalmente invisible hasta que recibe focus por teclado (Tab desde la
   barra de dirección). Permite a usuarios con lector de pantalla y power
   users saltarse topbar/sidebar e ir directo al contenido principal.
   Recomendación WCAG 2.1 (Bypass Blocks).

   Truco: lo movemos fuera del viewport con translateY en lugar de top
   negativo, así no depende de la altura del botón ni del padding. */
.skip-to-content {
    position: fixed;
    top: 0;
    left: 1rem;
    padding: .65rem 1.2rem;
    background: var(--cloud-primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    z-index: 10000;
    transform: translateY(-110%);
    transition: transform .18s ease;
    box-shadow: 0 4px 12px -4px rgba(0, 153, 255, .35);
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    color: #fff;
    outline: 3px solid rgba(0, 153, 255, .4);
    outline-offset: -1px;
}

/* Permite focus programático en <main> sin outline visible */
main[tabindex="-1"]:focus {
    outline: none;
}

html, body {
    height: 100%;
}

/* El atributo `hidden` debe ganar siempre, incluso sobre utilidades de
   Bootstrap con !important (ej. d-flex). */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--cloud-bg);
    color: var(--cloud-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

button,
a,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

@supports (height: 100dvh) {
    .min-vh-100 {
        min-height: 100dvh !important;
    }
}

/* =================================================================
   App shell (post-login): topbar sticky + sidebar contextual + main
   =================================================================
   Variables clave:
     --topbar-h      : alto de la barra superior
     --sidebar-w-on  : ancho cuando está expandido (icono + label)
     --sidebar-w-off : ancho cuando está contraído (solo iconos)
     --sidebar-w     : ancho actual del rail (controla el layout flex)
   Estados (en <html>): data-sidebar-state = "expanded" | "collapsed".
   En "collapsed" el rail mide --sidebar-w-off pero al hacer hover el
   panel interior crece a --sidebar-w-on superpuesto, SIN empujar
   el contenido principal.
*/
:root {
    --topbar-h: 60px;
    --sidebar-w-on: 248px;
    --sidebar-w-off: 64px;
    --sidebar-w: var(--sidebar-w-on);
}

/* Estado: contraído (solo iconos) */
html[data-sidebar-state="collapsed"] {
    --sidebar-w: var(--sidebar-w-off);
}

/* Si la página NO tiene sidebar (ej. Dashboard) el ancho siempre es 0 */
body.no-sidebar {
    --sidebar-w: 0px !important;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--cloud-bg);
}

/* Contenedor de contenido de cada página. */
.app-content {
    padding: 1.5rem;
}

@media (max-width: 575.98px) {
    .app-content {
        padding: 1rem;
    }
}

/* -----------------------------------------------------------------
   Topbar
   ----------------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 .75rem;
    background-color: var(--cloud-surface);
    border-bottom: 1px solid var(--cloud-border);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.topbar-right {
    gap: .65rem;
}

/* (El antiguo botón .sidebar-toggle del topbar fue reemplazado por
   .app-sidebar-pin dentro del header del sidebar — ver más abajo) */

/* Brand: logo Hablame + “Cloud” */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: var(--cloud-text);
    padding: .25rem .5rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.topbar-brand-logo {
    /* El logo nuevo (`logo_cloud_blue.svg`) ya integra la nube + el
       wordmark "Hablame Cloud", por eso prescindimos del ícono
       separado `.topbar-brand-cloud` que antes vivía a su izquierda. */
    height: 40px;
    width: auto;
    display: block;
}

.topbar-brand-sep {
    width: 1px;
    height: 22px;
    background: var(--cloud-border);
    display: inline-block;
}

/* Indicador del servicio actual: chip-ícono coloreado + nombre limpio.
   Mismo lenguaje visual que el header del sidebar para mantener
   coherencia de marca del servicio en todo el portal. */
.topbar-service {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-left: .85rem;
    padding-left: .85rem;
    border-left: 1px solid var(--cloud-border);
    height: 38px;
    /* Es un <a> al hub raíz del menú: anulamos estilos default del enlace
       (subrayado, color azul) para conservar el look de chip. */
    text-decoration: none;
    color: inherit;
    border-radius: 0;
    transition: background-color .15s ease;
}

.topbar-service:hover,
.topbar-service:focus-visible {
    background: color-mix(in srgb, var(--svc-color, var(--cloud-primary)) 6%, transparent);
    outline: none;
    color: inherit;
}

.topbar-service-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--svc-color, var(--cloud-primary)) 14%, transparent);
    color: var(--svc-color, var(--cloud-primary));
    font-size: 1rem;
    flex-shrink: 0;
}

.topbar-service-name {
    font-weight: 600;
    font-size: .95rem;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .topbar-service {
        margin-left: .5rem;
        padding-left: .5rem;
    }
    .topbar-service-name {
        display: none; /* en móvil solo el chip de color basta como indicador */
    }
}

/* Chip de la organización en gestión: ícono + bloque de 3 líneas
   (etiqueta "Gestionando", nombre de la organización y Organización ID
   copiable, una debajo de la otra). */
.topbar-org {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-left: .85rem;
    padding-left: .85rem;
    border-left: 1px solid var(--cloud-border);
    min-width: 0;
}
.topbar-org-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary);
    font-size: 1rem;
    flex-shrink: 0;
}
.topbar-org-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    line-height: 1.05;
    min-width: 0;
}
.topbar-org-eyebrow {
    font-size: .52rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cloud-muted);
    line-height: 1.25;
}
/* El nombre es un botón: al hacer clic abre el modal de cambio de
   organización. */
.topbar-org-name {
    display: inline-flex; align-items: center; gap: .25rem;
    max-width: 210px;
    padding: 0; border: 0; background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: .82rem;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color .15s ease;
}
.topbar-org-name:hover { color: var(--cloud-primary); }
.topbar-org-name:focus-visible {
    outline: none;
    color: var(--cloud-primary);
    text-decoration: underline;
}
.topbar-org-name-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-org-name-caret {
    flex-shrink: 0;
    font-size: .58rem;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease;
}
.topbar-org-name:hover .topbar-org-name-caret { opacity: 1; color: var(--cloud-primary); }
/* "Organización ID" copiable — texto plano (sin recuadro), compacto.
   Usa el handler global [data-copy] que añade .is-copied y rellena
   [data-copy-toast]. */
.topbar-org-id {
    position: relative;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .24rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: .6rem;
    line-height: 1.25;
    color: var(--cloud-muted);
    transition: color .15s ease;
}
.topbar-org-id-label { font-weight: 500; }
.topbar-org-id-value {
    font-weight: 400;
    color: var(--cloud-text);
    font-variant-numeric: tabular-nums;
    transition: color .15s ease;
}
.topbar-org-id-icon { font-size: .64rem; opacity: .55; transition: color .15s ease, opacity .15s ease; }
.topbar-org-id:hover,
.topbar-org-id:hover .topbar-org-id-value,
.topbar-org-id:hover .topbar-org-id-icon { color: var(--cloud-primary); opacity: 1; }
.topbar-org-id.is-copied,
.topbar-org-id.is-copied .topbar-org-id-label,
.topbar-org-id.is-copied .topbar-org-id-value,
.topbar-org-id.is-copied .topbar-org-id-icon { color: #10b981; opacity: 1; }
/* Toast flotante "¡Copiado!" — a la derecha del pill para no salir del
   borde inferior del topbar. */
.topbar-org-id-toast {
    position: absolute;
    top: 50%;
    left: calc(100% + .35rem);
    transform: translateY(-50%);
    background: var(--cloud-success, #10b981);
    color: #fff;
    padding: .22rem .5rem;
    border-radius: .35rem;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}
.topbar-org-id.is-copied .topbar-org-id-toast { opacity: 1; }

/* En anchos intermedios el topbar se congestiona — ocultamos el chip de
   organización por debajo de 1100px (la info sigue en el menú del avatar). */
@media (max-width: 1100px) {
    .topbar-org { display: none; }
}

/* -----------------------------------------------------------------
   Sidebar contextual (rail fijo + panel interior expansible al hover)
   ----------------------------------------------------------------- */

/* Rail: ocupa --sidebar-w en el flujo flex; sticky bajo el topbar.
   IMPORTANTE: NO clipea overflow para que el panel interior pueda
   crecer visualmente sin afectar el ancho del main. */
.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    z-index: 5;
}

/* Panel interior: lo que realmente se ve. Su ancho controla labels visibles. */
.app-sidebar-inner {
    width: var(--sidebar-w);   /* por defecto sigue al rail */
    height: 100%;
    background-color: var(--cloud-surface);
    border-right: 1px solid var(--cloud-border);
    overflow: hidden;          /* clipea labels cuando el panel está angosto */
    display: flex;
    flex-direction: column;
    transition: width .2s ease, box-shadow .2s ease;
}

/* === Estado: COLAPSADO ===
   Rail = 64px. Panel interior = 64px (solo iconos). */
[data-sidebar-state="collapsed"] .app-sidebar-inner {
    width: var(--sidebar-w-off);
}

/* === Expansión temporal en colapsado: controlada por JS ===
   El JS añade .is-hover-expanded al hacer mouseenter, y la quita al
   mouseleave. Así, al desfijar con la chincheta, el panel se contrae
   inmediatamente y NO se re-expande hasta que el usuario mueva
   activamente el mouse fuera y de vuelta al rail.

   :focus-within mantiene la accesibilidad por teclado (tab → expand). */
[data-sidebar-state="collapsed"] .app-sidebar.is-hover-expanded .app-sidebar-inner,
[data-sidebar-state="collapsed"] .app-sidebar:focus-within .app-sidebar-inner {
    width: var(--sidebar-w-on);
    box-shadow: 6px 0 18px -6px rgba(15, 23, 42, .18);
}

/* Header del sidebar: icono dentro de un "slot" de --sidebar-w-off (64px)
   para que quede perfectamente centrado cuando el rail está colapsado.
   El título arranca exactamente en el borde derecho de ese slot, así que
   queda totalmente clipeado por overflow:hidden cuando el panel está angosto. */
.app-sidebar-header {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cloud-border);
    min-width: var(--sidebar-w-on);
    flex-shrink: 0;
}

/* Wrapper clickeable que abarca icono + título y lleva al hub raíz del
   menú. Anulamos estilos default de <a>. La chincheta queda fuera porque
   tiene su propia acción (fijar/desfijar). */
.app-sidebar-header-link {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease;
}

.app-sidebar-header-link:hover,
.app-sidebar-header-link:focus-visible {
    color: inherit;
    outline: none;
    background: color-mix(in srgb, var(--svc-color, var(--cloud-primary)) 6%, transparent);
}

.app-sidebar-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--svc-color, var(--cloud-primary)) 14%, transparent);
    color: var(--svc-color, var(--cloud-primary));
    font-size: 1.15rem;
    flex-shrink: 0;
    /* Centrado dentro del slot de 64px → (64-36)/2 = 14px a cada lado */
    margin-left: calc((var(--sidebar-w-off) - 36px) / 2);
    margin-right: calc((var(--sidebar-w-off) - 36px) / 2);
}

.app-sidebar-icon svg {
    width: 1em;
    height: 1em;
}

.app-sidebar-title {
    /* Peso 400 (regular). La jerarquía de la cabecera del sidebar se
       comunica con el icono coloreado del servicio + el tamaño 1rem,
       no con peso tipográfico. Mantenemos el título legible sin que
       compita con el contenido del panel. */
    font-weight: 400;
    font-size: 1rem;
    color: var(--cloud-text);
    white-space: nowrap;
    letter-spacing: -0.005em;
    flex: 1 1 auto;       /* empuja el botón pin hacia la derecha */
    min-width: 0;
}

/* Botón chincheta: fija o desfija el sidebar.
   Vive dentro del header. Cuando el panel está colapsado (64px), está
   fuera del área visible (clipeado). Aparece al hacer hover o cuando
   el sidebar está fijado en expandido. */
.app-sidebar-pin {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-right: .5rem;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--cloud-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.app-sidebar-pin:hover,
.app-sidebar-pin:focus-visible {
    background-color: var(--cloud-hover);
    color: var(--svc-color, var(--cloud-primary));
    outline: none;
}

.app-sidebar-pin:active {
    transform: scale(.92);
}

/* Cuando el sidebar está fijado (expanded), la chincheta queda en color
   institucional + ligera rotación para reforzar la idea de "clavada". */
.app-sidebar-pin.is-pinned {
    color: var(--svc-color, var(--cloud-primary));
}

.app-sidebar-pin.is-pinned i {
    transform: rotate(-20deg);
    transition: transform .2s ease;
}

.app-sidebar-pin:not(.is-pinned) i {
    transform: rotate(0);
    transition: transform .2s ease;
}

/* Nav scroll */
.app-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .65rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: var(--sidebar-w-on);
}

/* Cada link ocupa el ancho completo del nav, sin margin horizontal.
   El fondo redondeado del hover/active se dibuja con un ::before
   inset por los lados — así el icon-slot mide exactamente el ancho
   del rail colapsado (64px) y el label arranca justo en ese borde,
   garantizando que ni una letra quede asomando. */
.app-sidebar-link {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0;
    color: var(--cloud-muted);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    isolation: isolate; /* contiene el ::before sin filtrarse */
    transition: color .15s ease;
}

/* Capa de fondo (hover / activo) – inset por los lados para look "pill" */
.app-sidebar-link::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: .5rem;
    right: .5rem;
    border-radius: 10px;
    background: transparent;
    transition: background-color .15s ease;
    z-index: -1;
}

.app-sidebar-link:hover,
.app-sidebar-link:focus-visible {
    color: var(--cloud-text);
    outline: none;
}

.app-sidebar-link:hover::before,
.app-sidebar-link:focus-visible::before {
    background: var(--cloud-hover);
}

.app-sidebar-link.is-active {
    color: var(--svc-color, var(--cloud-primary));
    font-weight: 600;
}

.app-sidebar-link.is-active::before {
    background: color-mix(in srgb, var(--svc-color, var(--cloud-primary)) 12%, transparent);
}

/* Barra indicadora vertical para la página activa (a la izquierda del rail) */
.app-sidebar-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--svc-color, var(--cloud-primary));
    border-radius: 0 3px 3px 0;
}

/* icon-slot mide exactamente el ancho del rail colapsado → el ícono
   queda perfectamente centrado en el rail y el label arranca al borde. */
.app-sidebar-link-icon {
    width: var(--sidebar-w-off);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.app-sidebar-link-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1rem;
}

/* Mobile: el rail se mantiene siempre angosto para no consumir espacio
   del contenido. El estado "expanded" se convierte en un overlay
   accionado por el botón del topbar (no hay :hover en touch). */
@media (max-width: 767.98px) {
    html[data-sidebar-state="expanded"],
    html[data-sidebar-state="collapsed"] {
        --sidebar-w: var(--sidebar-w-off);
    }
    /* En "expanded" el panel interior se vuelve overlay completo */
    html[data-sidebar-state="expanded"] .app-sidebar-inner {
        width: var(--sidebar-w-on);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 20;
        box-shadow: 6px 0 18px -6px rgba(15, 23, 42, .25);
    }
    /* En móvil colapsado el panel queda 64px (sin hover-expand: la regla
       global está dentro de @media (hover: hover) y no aplica en touch). */
}

/* =================================================================
   Login - layout split-screen
   ================================================================= */

/* --- Panel de marca (izquierda en desktop) --- */
.brand-panel {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3rem 2.5rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(102, 192, 255, .4), transparent 45%),
        radial-gradient(circle at 100% 80%, rgba(0, 153, 255, .35), transparent 45%),
        var(--gradient-brand-deep);
}

.brand-panel::before,
.brand-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
}

.brand-panel::before {
    width: 320px;
    height: 320px;
    top: -80px;
    right: -80px;
    background: var(--brand-400);
}

.brand-panel::after {
    width: 280px;
    height: 280px;
    bottom: -60px;
    left: -60px;
    background: var(--brand-300);
}

.brand-panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}

/* Logo Hablame en el panel - se invierte a blanco para contrastar con el gradiente */
.brand-logo-img {
    /* El SVG `logo_cloud_white.svg` ya viene en blanco, así que no hace
       falta filtrarlo. Si en el futuro se cambia el archivo de origen,
       conviene volver a forzar el blanco con
       `filter: brightness(0) invert(1)`. */
    height: 44px;
    width: auto;
    align-self: flex-start;
}

.brand-product-label {
    margin-top: .75rem;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
    font-weight: 500;
}

.brand-product-label::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, .5);
    vertical-align: middle;
    margin-right: .5rem;
}

.brand-copy {
    margin: 3rem 0;
}

.brand-headline {
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.brand-sub {
    color: rgba(255, 255, 255, .85);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.brand-features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 0;
    color: rgba(255, 255, 255, .92);
    font-size: 1rem;
}

.brand-features li i {
    color: #4ade80;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.brand-footer {
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
}

/* --- Panel del formulario --- */
.login-form-panel {
    background: var(--cloud-surface);
    min-height: 100vh;
}

.login-form-wrapper {
    width: 100%;
    max-width: 420px;
}

.login-form-wrapper.is-wide {
    max-width: 540px;
}

/* =================================================================
   Selector de canal 2FA (/two-factor/channel)
   Cards-radio agrupadas verticalmente. Cada opción muestra ícono,
   etiqueta del canal, destino enmascarado y descripción.
   ================================================================= */
.channel-picker {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.channel-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--cloud-border, #e3e8ef);
    border-radius: .75rem;
    background: var(--cloud-surface, #fff);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
    margin-bottom: 0;
}

.channel-option:hover {
    border-color: var(--cloud-primary);
    background: var(--cloud-primary-50, rgba(0, 153, 255, .04));
}

.channel-option:active {
    transform: scale(.99);
}

.channel-option input[type="radio"] {
    /* El input es invisible — el "tick" lo dibuja .channel-option-check */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.channel-option.is-active {
    border-color: var(--cloud-primary);
    background: var(--cloud-primary-50, rgba(0, 153, 255, .06));
}

.channel-option-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--cloud-primary-50, rgba(0, 153, 255, .08));
    color: var(--cloud-primary);
    font-size: 1.15rem;
}

.channel-option-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.channel-option-label {
    font-weight: 600;
    color: var(--cloud-text, #1f2937);
    font-size: .95rem;
}

.channel-option-target {
    font-size: .85rem;
    color: var(--cloud-muted, #6b7280);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.channel-option-desc {
    font-size: .75rem;
    color: var(--cloud-muted, #6b7280);
}

.channel-option-check {
    color: var(--cloud-primary);
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.channel-option.is-active .channel-option-check {
    opacity: 1;
}

[data-bs-theme="dark"] .channel-option {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .12);
}

[data-bs-theme="dark"] .channel-option:hover,
[data-bs-theme="dark"] .channel-option.is-active {
    background: rgba(0, 153, 255, .12);
    border-color: var(--cloud-primary);
}

[data-bs-theme="dark"] .channel-option-label {
    color: #f3f4f6;
}

/* =================================================================
   Secciones del formulario (encabezados pequeños)
   ================================================================= */
.auth-section {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.auth-section-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .075em;
    color: var(--cloud-muted);
    white-space: nowrap;
}

.auth-section-rule {
    flex: 1;
    height: 1px;
    background: var(--cloud-border);
}

/* =================================================================
   Checklist de contraseña compacto (2 columnas)
   ================================================================= */
.password-checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .25rem .75rem;
    font-size: .78rem;
    margin-top: .25rem !important;
    margin-bottom: 1rem !important;
    padding-left: .25rem;
}

.password-checklist li {
    display: flex;
    align-items: center;
    line-height: 1.3;
}

.password-checklist li i {
    flex-shrink: 0;
    font-size: .85rem;
}

.login-title {
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    font-weight: 700;
    margin-bottom: .25rem;
    letter-spacing: -0.02em;
}

.login-subtitle {
    color: var(--cloud-muted);
    margin-bottom: 0;
}

/* =================================================================
   Email-pill del paso 2 del login
   Muestra el correo confirmado en paso 1 con un botón "Cambiar"
   inline (POST a /login/back). Es solo display, no editable.
   ================================================================= */
.login-email-pill {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .75rem;
    background: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 25%, transparent);
    border-radius: .75rem;
    font-size: .9rem;
}

.login-email-pill-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
    font-size: .9rem;
}

.login-email-pill-value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--cloud-text, #1f2937);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-email-pill-change {
    background: transparent;
    border: 0;
    color: var(--cloud-primary);
    font-size: .8rem;
    font-weight: 500;
    padding: .15rem .35rem;
    border-radius: .35rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease;
}

.login-email-pill-change:hover,
.login-email-pill-change:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    outline: none;
}

[data-bs-theme="dark"] .login-email-pill {
    background: rgba(0, 153, 255, .1);
    border-color: rgba(0, 153, 255, .35);
}

[data-bs-theme="dark"] .login-email-pill-value {
    color: #f3f4f6;
}

/* Logo en el header móvil del formulario */
.mobile-brand-logo {
    height: 38px;
    width: auto;
}

/* En modo oscuro el logo azul de marca queda apagado contra el fondo;
   lo invertimos con un filtro para que se vea blanco (mismo truco que
   usa `.topbar-brand-logo`). */
[data-bs-theme="dark"] .mobile-brand-logo {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* =================================================================
   Formulario
   ================================================================= */

.form-floating > .form-control {
    height: calc(3.5rem + 2px);
    padding: 1rem 0.85rem;
    border-radius: .75rem;
    border-color: var(--cloud-border);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-floating > .form-control:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .2);
}

.form-floating > label {
    padding: 1rem 0.85rem;
    color: var(--cloud-muted);
}

.password-field {
    position: relative;
}

/* =================================================================
   intl-tel-input integrado en form-floating
   La librería envuelve el <input> en un .iti, así que replicamos
   manualmente los estilos floating para esa estructura.
   ================================================================= */
.form-floating > .iti {
    width: 100%;
}

.form-floating > .iti > .form-control {
    height: calc(3.5rem + 2px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 0.85rem;
    border-radius: .75rem;
    border-color: var(--cloud-border);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-floating > .iti > .form-control:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .2);
}

/* Cuando el input tiene focus o valor, dejar espacio arriba para la label */
.form-floating > .iti > .form-control:focus,
.form-floating > .iti > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* La etiqueta inicia después del selector de bandera (≈3.25rem)
   La librería ya inyecta padding-left en el input al inicializar. */
.form-floating > .iti ~ label {
    padding-left: 3.25rem;
    padding-right: 0.85rem;
    color: var(--cloud-muted);
    pointer-events: none;
    /* transform-origin desplazado a la altura del padding-left para que el
       scale() del estado floating NO arrastre la etiqueta hacia la bandera. */
    transform-origin: 3.25rem 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

/* Floating: la etiqueta se reduce y sube, pero conserva su padding-left
   para no sobreponerse al selector de país. */
.form-floating:has(> .iti > .form-control:focus) > label,
.form-floating:has(> .iti > .form-control:not(:placeholder-shown)) > label {
    transform: scale(.85) translateY(-0.5rem);
    opacity: .85;
}

/* Dropdown del selector de país: por encima de cualquier campo siguiente.
   Bootstrap modals usan z-index 1055; nos posicionamos por encima. */
.iti--container,
.iti__dropdown-content {
    z-index: 1060 !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--cloud-muted);
    padding: .5rem .65rem;
    border-radius: .5rem;
    z-index: 5;
    transition: color .15s ease, background-color .15s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--cloud-text);
    background-color: var(--cloud-hover);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--cloud-primary);
    border-color: var(--cloud-primary);
}

.form-check-input:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .25);
}

.link-primary {
    color: var(--cloud-primary) !important;
}

.link-primary:hover {
    color: var(--cloud-primary-hover) !important;
}

/* =================================================================
   App launcher (botón de 9 puntos en topbar)
   ================================================================= */
.apps-btn,
.help-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--cloud-border);
    background: var(--cloud-surface);
    color: var(--cloud-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.apps-btn:hover,
.apps-btn:focus-visible,
.apps-btn[aria-expanded="true"],
.help-btn:hover,
.help-btn:focus-visible,
.help-btn[aria-expanded="true"] {
    background-color: var(--cloud-hover);
    color: var(--cloud-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .25);
    outline: none;
}

.apps-btn:active,
.help-btn:active {
    transform: scale(.96);
}

/* Dropdown del menú de ayuda - mismo patrón que .user-menu */
.help-menu {
    width: 240px;
    padding: .85rem;
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, .25),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    margin-top: .85rem !important;
    overflow: visible;
}

/* Flecha apuntando al botón de ayuda */
.help-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 14px;
    height: 14px;
    background: var(--cloud-surface);
    border-top: 1px solid var(--cloud-border);
    border-left: 1px solid var(--cloud-border);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

.apps-menu {
    width: 320px;
    border: 1px solid var(--cloud-border);
    border-radius: .85rem;
    /* Sombra más prominente para que destaque al abrir */
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, .25),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    /* Misma separación que .help-menu y .user-menu para que los 3 dropdowns
       del topbar se alineen verticalmente al desplegarse. */
    margin-top: .85rem !important;
    overflow: visible; /* la flecha sale del contenedor */
}

/* Flecha que apunta al botón de 9 puntos */
.apps-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 14px;
    height: 14px;
    background: var(--cloud-surface);
    border-top: 1px solid var(--cloud-border);
    border-left: 1px solid var(--cloud-border);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
}

.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .9rem .35rem;
    border-radius: .65rem;
    text-decoration: none;
    color: var(--cloud-text);
    transition: background-color .15s ease, transform .15s ease;
}

.app-card:hover,
.app-card:focus-visible {
    background-color: var(--cloud-hover);
    color: var(--cloud-text);
    transform: translateY(-1px);
    outline: none;
}

.app-icon {
    width: 48px;
    height: 48px;
    border-radius: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: var(--cloud-primary);
    font-size: 1.4rem;
    margin-bottom: .5rem;
    box-shadow: 0 2px 6px -2px rgba(0, 153, 255, .35);
}

.app-label {
    font-size: .78rem;
    text-align: center;
    line-height: 1.2;
    color: var(--cloud-text);
}

/* =================================================================
   Avatar de usuario en topbar
   ================================================================= */
.user-avatar-btn {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
    line-height: 0;
    transition: box-shadow .15s ease, transform .15s ease;
}

.user-avatar-btn:hover,
.user-avatar-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .25);
    outline: none;
}

.user-avatar-btn:active {
    transform: scale(.96);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    user-select: none;
    border: 2px solid var(--cloud-border);
    background-color: var(--cloud-surface);
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-avatar-initials {
    color: #ffffff;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    /* background-color se setea inline desde el partial */
}

/* =================================================================
   Menú dropdown del usuario (al hacer clic en el avatar del topbar)
   ================================================================= */
.user-menu {
    width: 340px;
    padding: .85rem;
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, .25),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    margin-top: .85rem !important;
    overflow: visible;
}

/* Flecha apuntando al avatar */
.user-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 14px;
    height: 14px;
    background: var(--cloud-surface);
    border-top: 1px solid var(--cloud-border);
    border-left: 1px solid var(--cloud-border);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

/* ----- Cabecera: avatar + identidad ----- */
.user-menu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .15rem .15rem .65rem;
}

.user-menu-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cloud-border);
    background-color: var(--cloud-surface);
    user-select: none;
}

.user-menu-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-menu-avatar-initials {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.user-menu-identity {
    min-width: 0;
    flex: 1 1 auto;
}

.user-menu-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--cloud-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: .15rem;
}

.user-menu-email {
    font-size: .78rem;
    color: var(--cloud-muted);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =================================================================
   Sección 2 del dropdown — Información de la organización.
   Icono + nombre de la empresa + Organización ID copiable.
   Replica la composición del header (avatar + identidad) pero con
   un icono institucional en lugar de avatar, para diferenciar
   visualmente "yo (usuario)" de "mi empresa (organización)".
   ================================================================= */
.user-menu-org {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .15rem .15rem .35rem;
}

.user-menu-org-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1.05rem;
}

.user-menu-org-info {
    min-width: 0;
    flex: 1 1 auto;
}

.user-menu-org-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--cloud-text);
    line-height: 1.2;
    /* Antes .3rem — se veía un gap raro entre el nombre y el pill del
       Organización ID. .05rem deja ambos pegados como un bloque compacto
       (mismo patrón que la sección 1 con nombre/email del usuario). */
    margin-bottom: .05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* =================================================================
   Acciones rápidas de la organización activa: dos botones tipo split
   (Cambiar / Gestionar) debajo del bloque org. Compacto, profesional,
   patrón usado en Slack/Linear/Notion para "workspace switcher + manage".
   ================================================================= */
.user-menu-org-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    padding: .15rem .15rem .35rem;
    margin-top: .35rem;
}

.user-menu-org-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .4rem .55rem;
    border: 1px solid var(--cloud-border);
    border-radius: 8px;
    background: transparent;
    color: var(--cloud-text);
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.user-menu-org-action:hover,
.user-menu-org-action:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 30%, var(--cloud-border));
    color: var(--cloud-primary);
    outline: none;
}

.user-menu-org-action i {
    font-size: .9rem;
}

[data-bs-theme="dark"] .user-menu-org-action {
    border-color: rgba(255, 255, 255, .12);
    color: var(--cloud-text);
}

/* =================================================================
   Selector de idioma en el dropdown del avatar.
   Dos "tiles" lado a lado tipo segmented control. Cada tile muestra
   el código del locale como label pequeño arriba (estilo eyebrow) y
   el nombre nativo bold debajo, de modo que ambos tiles renderizan
   con jerarquía visual idéntica sin importar el largo del nombre.
   El estado activo se distingue con fondo tintado de marca, borde
   de marca y un mini check en la esquina superior derecha — el
   check va absolutamente posicionado para que el layout interno no
   se desplace al cambiar de selección.
   ================================================================= */
.user-menu-locale-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    /* Alineado con el padding lateral de .user-menu-section-label
       (".55rem .85rem .25rem") para que las tiles no toquen el borde
       del dropdown. */
    padding: .15rem .85rem .5rem;
}

.user-menu-locale-switcher .d-inline {
    /* El <form> que envuelve cada botón debe estirarse para que el
       botón llene su celda del grid; si no, los hover/focus rings se
       ven recortados y los dos botones quedan de anchos distintos. */
    display: block !important;
    width: 100%;
}

.user-menu-locale-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    width: 100%;
    padding: .55rem .5rem;
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
    background: var(--cloud-surface);
    color: var(--cloud-text);
    cursor: pointer;
    overflow: hidden;
    transition: background-color .18s ease,
                border-color .18s ease,
                color .18s ease,
                transform .18s ease,
                box-shadow .18s ease;
}

.user-menu-locale-btn:hover {
    background: color-mix(in srgb, var(--cloud-primary) 6%, var(--cloud-surface));
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
    color: var(--cloud-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -8px rgba(0, 153, 255, .35);
}

.user-menu-locale-btn:focus-visible {
    outline: none;
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cloud-primary) 25%, transparent);
}

.user-menu-locale-btn.is-active {
    background: color-mix(in srgb, var(--cloud-primary) 10%, var(--cloud-surface));
    border-color: var(--cloud-primary);
    color: var(--cloud-primary);
    cursor: default;
    /* Anulamos el lift en hover sobre el activo: ya está "seleccionado". */
    transform: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cloud-primary) 25%, transparent);
}
.user-menu-locale-btn.is-active:hover {
    transform: none;
    background: color-mix(in srgb, var(--cloud-primary) 10%, var(--cloud-surface));
}

.user-menu-locale-code {
    font-weight: 700;
    font-size: .65rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    opacity: .55;
    transition: opacity .18s ease;
}
.user-menu-locale-btn:hover .user-menu-locale-code,
.user-menu-locale-btn.is-active .user-menu-locale-code {
    opacity: .85;
}

.user-menu-locale-name {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

/* Check en la esquina superior derecha del tile activo. Va absoluto
   para que el contenido (code + name) permanezca perfectamente
   centrado sin desplazarse al activar/desactivar. */
.user-menu-locale-check {
    position: absolute;
    top: .35rem;
    right: .4rem;
    font-size: .85rem;
    line-height: 1;
    color: var(--cloud-primary);
    opacity: .9;
    pointer-events: none;
}

/* Dark mode */
[data-bs-theme="dark"] .user-menu-locale-btn {
    background: var(--cloud-surface-elev, rgba(255, 255, 255, .03));
    border-color: rgba(255, 255, 255, .12);
    color: var(--cloud-text);
}
[data-bs-theme="dark"] .user-menu-locale-btn:hover {
    background: rgba(0, 153, 255, .12);
    border-color: rgba(0, 153, 255, .45);
}
[data-bs-theme="dark"] .user-menu-locale-btn.is-active {
    background: rgba(0, 153, 255, .16);
    border-color: var(--cloud-primary);
    box-shadow: inset 0 0 0 1px rgba(0, 153, 255, .35);
}
[data-bs-theme="dark"] .user-menu-locale-btn.is-active:hover {
    background: rgba(0, 153, 255, .16);
}

@media (prefers-reduced-motion: reduce) {
    .user-menu-locale-btn,
    .user-menu-locale-code { transition: none; }
    .user-menu-locale-btn:hover { transform: none; }
}

[data-bs-theme="dark"] .user-menu-org-action:hover,
[data-bs-theme="dark"] .user-menu-org-action:focus-visible {
    background: rgba(0, 153, 255, .14);
    border-color: rgba(0, 153, 255, .4);
}

/* =================================================================
   Identificadores copiables en el dropdown del avatar (Usuario ID y
   Organización ID). Diseño minimalista: texto plano, sin fondo ni
   borde — solo label en mayúsculas pequeño + valor monoespacio +
   icono portapapeles. El bloque entero es clickeable y muestra un
   toast flotante "¡Copiado!" al copiar al portapapeles.
   ================================================================= */
.user-menu-id-pill {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    margin-top: .25rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cloud-muted);
    font-size: .72rem;
    line-height: 1.2;
    cursor: pointer;
    transition: color .15s ease;
    max-width: 100%;
    text-align: left;
}

.user-menu-id-pill:hover,
.user-menu-id-pill:focus-visible {
    color: var(--cloud-primary);
    background: transparent;
    outline: none;
}

.user-menu-id-pill:focus-visible {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.user-menu-id-label {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    font-size: .72rem;
    color: var(--cloud-muted);
}

.user-menu-id-pill:hover .user-menu-id-label,
.user-menu-id-pill:focus-visible .user-menu-id-label {
    color: var(--cloud-primary);
}

.user-menu-id-value {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--cloud-text);
    font-size: .76rem;
    letter-spacing: .02em;
}

.user-menu-id-pill:hover .user-menu-id-value,
.user-menu-id-pill:focus-visible .user-menu-id-value {
    color: var(--cloud-primary);
}

.user-menu-id-icon {
    font-size: .8rem;
    opacity: .55;
    transition: opacity .15s ease, color .15s ease;
}

.user-menu-id-pill:hover .user-menu-id-icon,
.user-menu-id-pill:focus-visible .user-menu-id-icon {
    opacity: 1;
    color: var(--cloud-primary);
}

/* Toast flotante (¡Copiado!) encima del texto al copiar */
.user-menu-id-toast {
    position: absolute;
    bottom: calc(100% + .25rem);
    left: 0;
    transform: translateY(.25rem);
    background: var(--cloud-success, #10b981);
    color: #fff;
    padding: .25rem .55rem;
    border-radius: .35rem;
    font-size: .7rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

.user-menu-id-toast::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    border: 4px solid transparent;
    border-top-color: var(--cloud-success, #10b981);
}

.user-menu-id-pill.is-copied {
    color: var(--cloud-success, #10b981);
}

.user-menu-id-pill.is-copied .user-menu-id-label,
.user-menu-id-pill.is-copied .user-menu-id-value,
.user-menu-id-pill.is-copied .user-menu-id-icon {
    color: var(--cloud-success, #10b981);
    opacity: 1;
}

.user-menu-id-pill.is-copied .user-menu-id-toast {
    opacity: 1;
    transform: translateY(0);
}

.user-menu-id-pill.is-copy-error {
    color: var(--cloud-danger, #ef4444);
}

/* ----- Pill de número de cuenta (legado: clickeable, copia al portapapeles).
        Se conserva por compatibilidad con otros componentes (info de cuenta)
        pero el dropdown del avatar ya no lo usa — ahora usa .user-menu-id-pill. */
.user-menu-account {
    padding: 0 .15rem;
    margin-bottom: .35rem;
}

.account-pill {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    background: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    border-radius: 10px;
    color: var(--cloud-text);
    font-size: .82rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
    overflow: hidden;
}

.account-pill:hover,
.account-pill:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 40%, transparent);
    outline: none;
}

.account-pill:active {
    transform: scale(.98);
}

.account-pill-tag {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cloud-primary);
    padding: .12rem .4rem;
    background: rgba(255, 255, 255, .55);
    border-radius: 4px;
    flex-shrink: 0;
}

.account-pill-value {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    color: var(--cloud-text);
    font-size: .88rem;
    letter-spacing: .02em;
    flex: 1 1 auto;
    text-align: left;
}

.account-pill-icon {
    font-size: .95rem;
    color: var(--cloud-muted);
    transition: color .15s ease;
    flex-shrink: 0;
}

.account-pill:hover .account-pill-icon {
    color: var(--cloud-primary);
}

/* Toast pequeño al copiar: cubre el contenido con un mensaje breve */
.account-pill-toast {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cloud-success);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease;
}

.account-pill.is-copied .account-pill-toast {
    opacity: 1;
    transform: translateY(0);
}

.account-pill.is-copied .account-pill-icon {
    color: var(--cloud-success);
}

.account-pill.is-copy-error {
    background: color-mix(in srgb, var(--cloud-danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--cloud-danger) 40%, transparent);
}

/* ----- Divider ----- */
.user-menu-divider {
    border: 0;
    border-top: 1px solid var(--cloud-border);
    margin: .25rem 0 .35rem;
    opacity: 1;
}

/* ----- Items del menú (Configuración / Cerrar sesión / Ayuda) ----- */
.user-menu-item,
.help-menu-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 9px;
    color: var(--cloud-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
    /* Reset para <button> que use la clase */
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

.user-menu-item:hover,
.user-menu-item:focus-visible,
.help-menu-item:hover,
.help-menu-item:focus-visible {
    background-color: var(--cloud-hover);
    color: var(--cloud-text);
    outline: none;
}

.user-menu-item i,
.help-menu-item i {
    font-size: 1rem;
    color: var(--cloud-muted);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: color .15s ease;
}

.user-menu-item:hover i,
.help-menu-item:hover i {
    color: var(--cloud-primary);
}

/* Ícono "external link" — pegado a la derecha del item, discreto.
   Indica al usuario que el destino abre fuera del portal. */
.help-menu-item > span {
    flex: 1 1 auto;
}

.help-menu-item-external {
    font-size: .72rem !important;
    color: var(--cloud-muted) !important;
    width: auto !important;
    opacity: .7;
    transition: opacity .15s ease;
}

.help-menu-item:hover .help-menu-item-external {
    opacity: 1;
}

/* Divisor entre grupos de items en el menú de ayuda. */
.help-menu-divider {
    border: 0;
    border-top: 1px solid var(--cloud-border);
    margin: .35rem .25rem;
    opacity: 1;
}

[data-bs-theme="dark"] .help-menu-divider {
    border-top-color: var(--cloud-border);
}

.user-menu-item-danger {
    color: var(--cloud-text);
}

.user-menu-item-danger:hover,
.user-menu-item-danger:focus-visible {
    background-color: color-mix(in srgb, var(--cloud-danger) 8%, transparent);
    color: var(--cloud-danger);
}

.user-menu-item-danger:hover i {
    color: var(--cloud-danger);
}

/* =================================================================
   Botones
   ================================================================= */

/* Botón principal con gradiente de marca */
.btn-cloud-primary {
    background: var(--gradient-brand);
    border: 0;
    color: #fff;
    height: 3rem;
    /* inline-flex + align/justify-center: centra el contenido vertical Y
       horizontalmente regardless del tag. Necesario porque también lo
       usamos en <a class="btn ..."> (ej. en /invitations/accept), donde
       la combinación height fijo + padding default de Bootstrap no
       centra verticalmente el texto. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    border-radius: .75rem;
    box-shadow: var(--shadow-brand-sm);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-cloud-primary:hover,
.btn-cloud-primary:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand);
    filter: brightness(1.05);
}

.btn-cloud-primary:active {
    transform: translateY(0);
    filter: brightness(.95);
}

/* Variante sólida (cuando no queremos gradiente) */
.btn-brand {
    background-color: var(--cloud-primary);
    border: 1px solid var(--cloud-primary);
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.btn-brand:hover {
    background-color: var(--cloud-primary-hover);
    border-color: var(--cloud-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}

.btn-brand:active {
    background-color: var(--cloud-primary-active);
    border-color: var(--cloud-primary-active);
    transform: translateY(0);
}

/* Variante outline */
.btn-outline-brand {
    background-color: transparent;
    border: 1px solid var(--cloud-primary);
    color: var(--cloud-primary);
    transition: background-color .15s ease, color .15s ease;
}

.btn-outline-brand:hover {
    background-color: var(--cloud-primary);
    color: #fff;
}

/* OAuth */
.btn-oauth {
    height: 3rem;
    font-weight: 500;
    border-radius: .75rem;
    border: 1px solid var(--cloud-border);
    color: var(--cloud-text);
    background: var(--cloud-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.btn-oauth:hover,
.btn-oauth:focus {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: var(--cloud-text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-elev);
}

.btn-oauth i {
    font-size: 1.15rem;
}

.btn-oauth-google i {
    color: #ea4335;
}

.btn-oauth-microsoft i {
    color: #00a4ef;
}

/* =================================================================
   Divisor con texto centrado
   ================================================================= */

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--cloud-muted);
    margin: 1.5rem 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--cloud-divider);
}

.divider:not(:empty)::before { margin-right: .85rem; }
.divider:not(:empty)::after  { margin-left:  .85rem; }

/* =================================================================
   Footer login
   ================================================================= */

.login-footer {
    text-align: center;
    color: var(--cloud-muted);
    font-size: .9rem;
}

/* =================================================================
   Soporte · Lista de tickets
   ================================================================= */
.tickets-page {
    width: 100%;
}

/* --- Header --- */
.tickets-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tickets-header-text {
    flex: 1 1 320px;
    min-width: 0;
}

.tickets-title {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 700;
    color: var(--cloud-text);
    margin: 0 0 .25rem;
    display: flex;
    align-items: center;
    letter-spacing: -0.01em;
}

.tickets-subtitle {
    color: var(--cloud-muted);
    margin: 0;
    font-size: .92rem;
}

.tickets-header-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* --- Filtros (tabs) --- */
.tickets-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    border-bottom: 1px solid var(--cloud-border);
    margin-bottom: 1.25rem;
}

.tickets-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    color: var(--cloud-muted);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
}

.tickets-filter:hover {
    color: var(--cloud-text);
}

.tickets-filter.is-active {
    color: var(--cloud-text);
    border-bottom-color: var(--cloud-primary);
}

.tickets-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .4rem;
    border-radius: 11px;
    background: var(--cloud-border);
    color: var(--cloud-muted);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

.tickets-filter.is-active .tickets-filter-count {
    background: color-mix(in srgb, var(--cloud-primary) 18%, transparent);
    color: var(--cloud-primary-active);
}

/* Punto ámbar pulsante en la pestaña "Cerrados" cuando hay sin calificar. */
.tickets-filter-dot {
    position: absolute;
    top: .55rem;
    right: .4rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 0 1px rgba(180, 83, 9, .25);
    animation: badgePop .25s ease-out;
}

.tickets-filter-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #fbbf24;
    opacity: .85;
    animation: helpBtnDotPulse 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tickets-filter-dot,
    .tickets-filter-dot::after {
        animation: none;
    }
}

/* --- Alert: tickets cerrados sin calificar --- */
.tickets-rating-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, #fbbf24 14%, var(--cloud-surface)) 0%,
        color-mix(in srgb, #fbbf24 6%, var(--cloud-surface)) 100%);
    border: 1px solid color-mix(in srgb, #fbbf24 38%, transparent);
    border-radius: 12px;
    color: var(--cloud-text);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease;
}

.tickets-rating-alert:hover,
.tickets-rating-alert:focus-visible {
    color: var(--cloud-text);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -8px rgba(251, 191, 36, .35);
    outline: none;
}

/* Variante estática (no es un enlace): se usa en la pestaña "Cerrados"
   donde el usuario ya está donde tiene que estar. */
.tickets-rating-alert-static {
    cursor: default;
}

.tickets-rating-alert-static:hover {
    transform: none;
    box-shadow: none;
}

.tickets-rating-alert-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, #fbbf24 25%, transparent);
    color: #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.tickets-rating-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tickets-rating-alert-body strong {
    display: block;
    font-size: .98rem;
    color: var(--cloud-text);
    margin-bottom: .15rem;
}

.tickets-rating-alert-body p {
    color: var(--cloud-muted);
    font-size: .85rem;
    line-height: 1.4;
}

.tickets-rating-alert-cta {
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 600;
    color: #b45309;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

[data-bs-theme="dark"] .tickets-rating-alert {
    background: linear-gradient(135deg,
        color-mix(in srgb, #fbbf24 18%, var(--cloud-surface-elev)) 0%,
        color-mix(in srgb, #fbbf24 10%, var(--cloud-surface-elev)) 100%);
    border-color: color-mix(in srgb, #fbbf24 55%, var(--cloud-border));
}

[data-bs-theme="dark"] .tickets-rating-alert-icon {
    color: #fbbf24;
}

[data-bs-theme="dark"] .tickets-rating-alert-cta {
    color: #fbbf24;
}

@media (max-width: 575.98px) {
    .tickets-rating-alert {
        flex-wrap: wrap;
        padding: .85rem 1rem;
    }
    .tickets-rating-alert-cta {
        margin-left: auto;
    }
}

/* --- Indicador de fila: ticket cerrado pendiente de calificar --- */
.ticket-row.is-unrated {
    background-color: color-mix(in srgb, #fbbf24 5%, var(--cloud-surface));
    box-shadow: inset 3px 0 0 #fbbf24;
}

.ticket-row.is-unrated:hover {
    background-color: color-mix(in srgb, #fbbf24 10%, var(--cloud-surface));
}

.ticket-rating-pending-icon {
    color: #fbbf24;
    font-size: 1rem;
    filter: drop-shadow(0 0 4px color-mix(in srgb, #fbbf24 45%, transparent));
}

.ticket-rating-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: color-mix(in srgb, #fbbf24 18%, transparent);
    color: #b45309;
}

.ticket-rating-pending-badge i {
    font-size: .75em;
}

[data-bs-theme="dark"] .ticket-row.is-unrated {
    background-color: color-mix(in srgb, #fbbf24 8%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .ticket-row.is-unrated:hover {
    background-color: color-mix(in srgb, #fbbf24 14%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .ticket-rating-pending-badge {
    background: color-mix(in srgb, #fbbf24 25%, transparent);
    color: #fde68a;
}

@media (max-width: 767.98px) {
    .ticket-rating-pending-badge {
        font-size: .6rem;
        padding: .1rem .35rem;
    }
}

/* --- Lista de tickets en formato de filas compactas (estilo tabla) --- */
.tickets-list {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    overflow: hidden;
}

/* Cada fila — anchor clickeable con grid de columnas */
.ticket-row {
    display: grid;
    grid-template-columns:
        20px           /* indicador unseen */
        90px           /* número de ticket */
        minmax(0, 1fr) /* asunto (flexible, se trunca) */
        110px          /* prioridad */
        150px          /* estado (cabe pill "Cerrado" + badge "Calificar") */
        110px          /* tiempo */
        20px;          /* chevron */
    gap: .85rem;
    align-items: center;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--cloud-border);
    color: var(--cloud-text);
    text-decoration: none;
    transition: background-color .12s ease;
}

.ticket-row:last-child {
    border-bottom: 0;
}

.ticket-row:hover,
.ticket-row:focus-visible {
    background-color: color-mix(in srgb, var(--cloud-primary) 5%, var(--cloud-surface));
    color: var(--cloud-text);
    outline: none;
}

/* Header (etiquetas de columna) */
.ticket-row-header {
    background: color-mix(in srgb, var(--cloud-border) 35%, var(--cloud-surface));
    pointer-events: none;
    padding-top: .55rem;
    padding-bottom: .55rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cloud-muted);
    border-bottom: 1px solid var(--cloud-border);
}

.ticket-row-header .ticket-cell {
    overflow: visible;
}

/* Estado "no leído" — borde lateral coloreado + ligero énfasis */
.ticket-row.is-unseen {
    background-color: color-mix(in srgb, var(--cloud-primary) 4%, var(--cloud-surface));
    box-shadow: inset 3px 0 0 var(--cloud-primary);
}

.ticket-row.is-unseen:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 8%, var(--cloud-surface));
}

/* Celdas — control de overflow */
.ticket-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
}

/* Indicador unseen (punto rojo) */
.ticket-cell-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ticket-unseen-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 25%, transparent);
}

/* Número de ticket */
.ticket-cell-number {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cloud-muted);
    font-variant-numeric: tabular-nums;
}

/* Asunto */
.ticket-cell-subject {
    font-weight: 600;
    color: var(--cloud-text);
}

.ticket-row.is-unseen .ticket-cell-subject {
    font-weight: 700;
}

/* Prioridad — color según urgencia */
.ticket-cell-priority {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    color: var(--cloud-muted);
}

.ticket-cell-priority i {
    font-size: .9em;
}

.ticket-cell-priority.is-low,
.ticket-cell-priority.is-medium {
    color: var(--cloud-muted);
}

.ticket-cell-priority.is-high {
    color: #f59e0b;
}

.ticket-cell-priority.is-urgent {
    color: #ef4444;
    font-weight: 600;
}

.ticket-priority-label {
    font-weight: inherit;
}

/* Estado (pill) + badge "Calificar" cuando aplica */
.ticket-cell-status {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    /* Necesario: el padre .ticket-cell tiene overflow:hidden y nowrap,
       lo cual recorta la insignia "Calificar". Aquí lo destapamos. */
    overflow: visible;
    white-space: normal;
}

.ticket-status {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ticket-status.is-open {
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary-active);
}

.ticket-status.is-closed {
    background: color-mix(in srgb, #64748b 14%, transparent);
    color: #475569;
}

/* Tiempo */
.ticket-cell-time {
    font-size: .78rem;
    color: var(--cloud-muted);
    font-variant-numeric: tabular-nums;
}

.ticket-cell-time time {
    font-style: normal;
}

/* Chevron */
.ticket-cell-chevron {
    color: var(--cloud-border);
    font-size: 1rem;
    text-align: right;
    transition: color .12s ease, transform .12s ease;
}

.ticket-row:hover .ticket-cell-chevron {
    color: var(--cloud-primary);
    transform: translateX(2px);
}

/* Keyframes compartidos para indicadores visuales (badge campana,
   tickets-filter-dot, etc.). Mantenidos aunque el "badge unread" del
   help-btn ya no se use — siguen siendo referencia para otras animaciones. */
@keyframes badgePop {
    0%   { transform: scale(.6); opacity: 0; }
    65%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes helpBtnDotPulse {
    0%   { transform: scale(.85); opacity: .85; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* =================================================================
   Topbar · Campana de notificaciones
   ================================================================= */

/* Botón redondo: hereda el look del .help-btn pero con sus propias clases. */
.notifications-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--cloud-border);
    background: var(--cloud-surface);
    color: var(--cloud-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.notifications-btn:hover,
.notifications-btn:focus-visible,
.notifications-btn[aria-expanded="true"] {
    background-color: var(--cloud-hover);
    color: var(--cloud-primary);
    outline: none;
}

.notifications-btn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cloud-surface);
    pointer-events: none;
    box-shadow: 0 2px 6px -1px rgba(239, 68, 68, .35);
    animation: badgePop .25s ease-out;
}

[data-bs-theme="dark"] .notifications-btn {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .notifications-btn-badge {
    border-color: var(--cloud-surface-elev);
}

/* Dropdown del menú de notificaciones — comparte estilo con .help-menu
   y .apps-menu (mismo border, radius, shadow, margin-top, flecha superior). */
.notifications-menu {
    width: 360px;
    max-width: calc(100vw - 1.5rem);
    padding: 0;
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, .25),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    margin-top: .85rem !important;
    overflow: visible;     /* deja salir la flecha */
    background: var(--cloud-surface);
    position: relative;
}

/* Flecha que apunta al botón de la campana (misma forma que en help/apps). */
.notifications-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 14px;
    width: 14px;
    height: 14px;
    background: var(--cloud-surface);
    border-top: 1px solid var(--cloud-border);
    border-left: 1px solid var(--cloud-border);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

.notifications-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--cloud-border);
}

.notifications-menu-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.notifications-menu-clear {
    background: transparent;
    border: 0;
    color: var(--cloud-primary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: background-color .15s ease;
}

.notifications-menu-clear:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
}

.notifications-menu-body {
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    /* Recorta los items que llegan al borde inferior del menú con el mismo
       radio que la tarjeta, sin romper el scroll vertical. */
    border-radius: 0 0 13px 13px;
}

/* Estados intermedios */
.notifications-loading,
.notifications-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .35rem;
    padding: 1.5rem 1rem;
    color: var(--cloud-muted);
    text-align: center;
}

.notifications-loading {
    flex-direction: row;
}

.notifications-empty i {
    font-size: 1.75rem;
    color: var(--cloud-muted);
    opacity: .5;
}

.notifications-empty p {
    font-size: .85rem;
}

/* Lista de items */
.notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notifications-list-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cloud-border);
    cursor: pointer;
    transition: background-color .15s ease;
    position: relative;
}

.notifications-list-item:last-child {
    border-bottom: 0;
}

.notifications-list-item:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 5%, transparent);
}

.notifications-list-item.is-unread {
    background-color: color-mix(in srgb, var(--cloud-primary) 4%, transparent);
}

.notifications-list-item.is-unread::before {
    content: "";
    position: absolute;
    top: 50%;
    right: .75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cloud-primary);
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cloud-primary) 25%, transparent);
}

.notifications-list-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.notifications-list-item-icon.is-security {
    background: color-mix(in srgb, #f59e0b 18%, transparent);
    color: #b45309;
}

.notifications-list-item-icon.is-success {
    background: color-mix(in srgb, var(--cloud-success) 14%, transparent);
    color: var(--cloud-success);
}

.notifications-list-item-body {
    min-width: 0;
    padding-right: 1rem;  /* Espacio para el punto unread */
}

.notifications-list-item-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--cloud-text);
    margin: 0 0 .15rem 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.notifications-list-item-message {
    font-size: .78rem;
    color: var(--cloud-muted);
    margin: 0;
    line-height: 1.3;
    white-space: pre-line;
    /* Limita a 2 líneas con elipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notifications-list-item-time {
    font-size: .72rem;
    color: var(--cloud-muted);
    opacity: .8;
    margin-top: .25rem;
}

/* Modo oscuro: el menú y la flecha usan var(--cloud-surface) (igual que
   help-menu y apps-menu). No hace falta override de fondo. Solo afinamos
   las variantes con tinte azul para que tengan más contraste en dark. */
[data-bs-theme="dark"] .notifications-list-item:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
}

[data-bs-theme="dark"] .notifications-list-item.is-unread {
    background-color: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
}

@media (max-width: 575.98px) {
    .notifications-menu {
        width: calc(100vw - 1rem);
    }
}

/* =================================================================
   Soporte · Calificación CSAT del ticket cerrado
   ================================================================= */
.ticket-rating-wrapper {
    margin-top: 1.5rem;
}

.ticket-rating {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.ticket-rating-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cloud-text);
    margin: 0 0 .35rem;
}

.ticket-rating-subtitle {
    color: var(--cloud-muted);
    font-size: .9rem;
    margin: 0 0 1.25rem;
}

.ticket-rating .feedback-stars {
    margin-bottom: .5rem;
}

.ticket-rating-label {
    color: var(--cloud-muted);
    font-size: .9rem;
    font-weight: 500;
    margin: .25rem 0 0;
    transition: color .15s ease;
    min-height: 1.3em;
}

.ticket-rating-label.is-set {
    color: var(--cloud-text);
}

.ticket-rating-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

/* --- Estado: ya calificado --- */
.ticket-rating-display {
    text-align: center;
}

.ticket-rating-display-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: .85rem;
}

.ticket-rating-display-header i {
    font-size: 1.4rem;
}

.ticket-rating-display-stars {
    display: inline-flex;
    gap: .25rem;
    font-size: 1.75rem;
    margin: .35rem 0 .85rem;
}

.ticket-rating-display-stars .is-filled {
    color: #fbbf24;
    filter: drop-shadow(0 1px 4px rgba(251, 191, 36, .35));
}

.ticket-rating-display-stars .is-empty {
    color: var(--cloud-border);
}

.ticket-rating-display-comment {
    color: var(--cloud-text);
    font-style: italic;
    background: var(--cloud-bg);
    border-left: 3px solid var(--cloud-primary);
    padding: .65rem 1rem;
    margin: .65rem auto 1rem;
    max-width: 540px;
    text-align: left;
    border-radius: 4px;
}

/* --- Dark mode rating --- */
[data-bs-theme="dark"] .ticket-rating {
    background: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .ticket-rating-comment {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .ticket-rating-comment:focus {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .25);
}

[data-bs-theme="dark"] .ticket-rating-display-comment {
    background: var(--cloud-surface);
}

@media (max-width: 575.98px) {
    .ticket-rating {
        padding: 1.25rem 1rem;
    }
    .ticket-rating-display-stars {
        font-size: 1.5rem;
    }
}

/* =================================================================
   Soporte · Detalle de ticket + hilo de conversación
   ================================================================= */
.ticket-detail .tickets-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    line-height: 1.3;
}

.ticket-number-large {
    color: var(--cloud-muted);
    font-weight: 600;
    font-size: .85em;
    font-variant-numeric: tabular-nums;
}

.ticket-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    color: var(--cloud-muted);
    font-size: .85rem;
    margin-top: .4rem;
}

.ticket-meta-row .ticket-status,
.ticket-meta-row .ticket-priority,
.ticket-meta-row .ticket-channel,
.ticket-meta-row .ticket-time {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.ticket-meta-row .ticket-priority i,
.ticket-meta-row .ticket-channel i,
.ticket-meta-row .ticket-time i {
    font-size: .9em;
}

.ticket-detail-body {
    margin-top: 1rem;
}

/* --- Hilo de conversación --- */
.thread-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.thread {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
}

.thread-customer {
    background: color-mix(in srgb, var(--cloud-primary) 4%, var(--cloud-surface));
    border-color: color-mix(in srgb, var(--cloud-primary) 25%, var(--cloud-border));
}

.thread-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--cloud-border);
}

.thread-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cloud-bg);
    border: 1px solid var(--cloud-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cloud-muted);
    font-size: 1.1rem;
}

.thread-customer .thread-avatar {
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 30%, var(--cloud-border));
    color: var(--cloud-primary);
}

.thread-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.thread-author {
    font-weight: 600;
    font-size: .95rem;
    color: var(--cloud-text);
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
}

.thread-author-email {
    font-weight: 400;
    font-size: .8rem;
    color: var(--cloud-muted);
}

.thread-time {
    font-size: .75rem;
    color: var(--cloud-muted);
}

.thread-body {
    color: var(--cloud-text);
    font-size: .92rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.thread-body p { margin: 0 0 .65rem; }
.thread-body p:last-child { margin-bottom: 0; }
.thread-body img { max-width: 100%; height: auto; border-radius: 6px; }
.thread-body blockquote {
    border-left: 3px solid var(--cloud-border);
    margin: .65rem 0;
    padding: .2rem .85rem;
    color: var(--cloud-muted);
    font-size: .88rem;
}
.thread-body pre {
    background: var(--cloud-bg);
    border: 1px solid var(--cloud-border);
    border-radius: 6px;
    padding: .65rem .85rem;
    overflow-x: auto;
    font-size: .82rem;
}
.thread-body code {
    background: var(--cloud-bg);
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .88em;
}
.thread-body table {
    border-collapse: collapse;
    margin: .65rem 0;
    max-width: 100%;
}
.thread-body td, .thread-body th {
    border: 1px solid var(--cloud-border);
    padding: .35rem .55rem;
}
.thread-body a {
    color: var(--cloud-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.thread-attachments {
    list-style: none;
    padding: 0;
    margin: .85rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.thread-attachment {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    background: var(--cloud-bg);
    border: 1px solid var(--cloud-border);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--cloud-text);
}

.thread-attachment-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-attachment-size {
    color: var(--cloud-muted);
    font-variant-numeric: tabular-nums;
}

.thread-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--cloud-muted);
}

.thread-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
}

/* --- Formulario de reply --- */
.ticket-reply-wrapper {
    margin-top: 1.5rem;
}

.ticket-reply {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1.25rem;
}

.ticket-reply-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    color: var(--cloud-text);
    margin-bottom: .85rem;
}

.ticket-reply-textarea {
    resize: vertical;
    min-height: 100px;
    border-radius: 10px;
    border-color: var(--cloud-border);
}

.ticket-reply-textarea:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .15);
}

.ticket-reply-files {
    margin-top: .85rem !important;
}

.ticket-reply-footer {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

[data-reply-attach-btn] {
    cursor: pointer;
    margin: 0;
}

/* Modal de cierre */
.close-ticket-modal {
    border-radius: 14px;
    overflow: hidden;
}

/* --- Dark mode --- */
[data-bs-theme="dark"] .thread {
    background: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .thread-customer {
    background: color-mix(in srgb, var(--cloud-primary) 8%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .thread-avatar {
    background: var(--cloud-surface);
}

[data-bs-theme="dark"] .thread-body pre,
[data-bs-theme="dark"] .thread-body code,
[data-bs-theme="dark"] .thread-attachment {
    background: var(--cloud-surface);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .ticket-reply {
    background: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .ticket-reply-textarea {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .ticket-reply-textarea:focus {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .25);
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
    .thread {
        padding: .9rem 1rem;
    }
    .thread-header {
        flex-wrap: wrap;
    }
    .ticket-reply {
        padding: 1rem;
    }
    .ticket-reply-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .ticket-reply-footer .btn,
    .ticket-reply-footer label {
        width: 100%;
    }
}

/* --- Aviso informativo: canal alterno por correo --- */
.ticket-info-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    max-width: 760px;
    background: color-mix(in srgb, var(--cloud-primary) 6%, var(--cloud-surface));
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    border-radius: 12px;
    color: var(--cloud-text);
}

.ticket-info-alert-icon {
    color: var(--cloud-primary);
    font-size: 1.4rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.ticket-info-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ticket-info-alert-title {
    display: block;
    color: var(--cloud-text);
    font-size: .95rem;
    margin-bottom: .15rem;
}

.ticket-info-alert-text {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--cloud-text);
    margin: 0;
}

.ticket-info-alert-text a {
    color: var(--cloud-primary);
    text-decoration: none;
    word-break: break-word;
}

.ticket-info-alert-text a:hover,
.ticket-info-alert-text a:focus-visible {
    text-decoration: underline;
}

[data-bs-theme="dark"] .ticket-info-alert {
    background: color-mix(in srgb, var(--cloud-primary) 10%, var(--cloud-surface-elev));
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
}

@media (max-width: 575.98px) {
    .ticket-info-alert {
        padding: .85rem 1rem;
        gap: .75rem;
    }
    .ticket-info-alert-icon {
        font-size: 1.25rem;
    }
}

/* --- Formulario de creación de ticket --- */
.ticket-form {
    max-width: 760px;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    padding: 1.75rem;
}

.ticket-form .form-floating > .form-control {
    border-radius: 10px;
    border-color: var(--cloud-border);
}

.ticket-form .form-floating > .form-control:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .15);
}

.ticket-form .form-select {
    border-radius: 10px;
    border-color: var(--cloud-border);
    padding: .65rem .9rem;
}

.ticket-form .form-select:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .15);
}

.ticket-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cloud-border);
}

/* --- Dropzone --- */
.dropzone {
    display: block;
    width: 100%;
    padding: 2rem 1.25rem;
    background: var(--cloud-bg);
    border: 2px dashed var(--cloud-border);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.dropzone:hover {
    border-color: var(--cloud-primary);
    background-color: color-mix(in srgb, var(--cloud-primary) 4%, var(--cloud-bg));
}

.dropzone.is-dragging {
    border-color: var(--cloud-primary);
    background-color: color-mix(in srgb, var(--cloud-primary) 10%, var(--cloud-bg));
    transform: scale(1.01);
}

.dropzone.is-full {
    opacity: .55;
    pointer-events: none;
}

.dropzone-icon {
    font-size: 2.5rem;
    color: var(--cloud-primary);
    display: block;
    margin-bottom: .5rem;
}

.dropzone-text {
    color: var(--cloud-text);
    font-size: .95rem;
}

/* --- Lista de archivos seleccionados --- */
.files-list {
    list-style: none;
    padding: 0;
    margin: .85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.files-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    background: var(--cloud-surface-elev);
    border: 1px solid var(--cloud-border);
    border-radius: 9px;
}

.files-list-icon {
    font-size: 1.35rem;
    color: var(--cloud-primary);
    flex-shrink: 0;
}

.files-list-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.files-list-name {
    font-size: .88rem;
    font-weight: 500;
    color: var(--cloud-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-list-size {
    font-size: .75rem;
    color: var(--cloud-muted);
    font-variant-numeric: tabular-nums;
}

.files-list-remove {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--cloud-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.files-list-remove:hover,
.files-list-remove:focus-visible {
    background-color: color-mix(in srgb, var(--cloud-danger) 12%, transparent);
    color: var(--cloud-danger);
    outline: none;
}

/* --- Dark mode form --- */
[data-bs-theme="dark"] .ticket-form {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .ticket-form .form-floating > .form-control,
[data-bs-theme="dark"] .ticket-form .form-select {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .ticket-form .form-floating > .form-control:focus,
[data-bs-theme="dark"] .ticket-form .form-select:focus {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .25);
}

[data-bs-theme="dark"] .dropzone {
    background: var(--cloud-bg);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .dropzone:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 8%, var(--cloud-bg));
}

[data-bs-theme="dark"] .files-list-item {
    background: var(--cloud-surface);
    border-color: var(--cloud-border);
}

/* --- Responsive form --- */
@media (max-width: 575.98px) {
    .ticket-form {
        padding: 1.25rem;
    }
    .ticket-form-actions {
        flex-direction: column-reverse;
    }
    .ticket-form-actions .btn {
        width: 100%;
    }
    .dropzone {
        padding: 1.5rem 1rem;
    }
}

/* --- Spinner mientras carga la lista --- */
.tickets-loading {
    text-align: center;
    padding: 3rem 1.5rem;
}

.tickets-loading .spinner-border {
    width: 2.25rem;
    height: 2.25rem;
    border-width: .22em;
}

/* Animación del icono del botón "Actualizar" cuando está en proceso */
.tickets-refresh-spinning {
    animation: ticketsRefreshSpin .8s linear infinite;
    transform-origin: center;
    display: inline-block;
}

@keyframes ticketsRefreshSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- Dark mode: lista de filas --- */
[data-bs-theme="dark"] .tickets-list {
    background: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .ticket-row-header {
    background: color-mix(in srgb, var(--cloud-border) 50%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .ticket-row:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 10%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .ticket-row.is-unseen {
    background-color: color-mix(in srgb, var(--cloud-primary) 8%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .ticket-row.is-unseen:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 14%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .ticket-status.is-closed {
    background: color-mix(in srgb, #64748b 22%, transparent);
    color: #cbd5e1;
}

[data-bs-theme="dark"] .ticket-status.is-open {
    background: color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    color: var(--brand-300);
}

/* --- Responsive: en pantallas estrechas colapsamos a 2 líneas --- */
@media (max-width: 767.98px) {
    .ticket-row-header {
        display: none;
    }
    .ticket-row {
        grid-template-columns: 18px 1fr auto;
        grid-template-areas:
            "dot   subject    status"
            "dot   meta       time";
        gap: .35rem .65rem;
        padding: .7rem .85rem;
    }
    .ticket-cell-dot     { grid-area: dot; }
    .ticket-cell-subject { grid-area: subject; }
    .ticket-cell-status  {
        grid-area: status;
        justify-self: end;
        justify-content: flex-end;
    }
    .ticket-cell-time    { grid-area: time; justify-self: end; }
    .ticket-cell-number,
    .ticket-cell-priority {
        grid-area: meta;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .75rem;
    }
    .ticket-cell-priority {
        margin-left: auto;
    }
    .ticket-cell-chevron {
        display: none;
    }
    .ticket-cell-number::after {
        content: "·";
        margin-left: .5rem;
        color: var(--cloud-border);
    }
}

/* --- Empty state --- */
.tickets-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--cloud-surface);
    border: 1px dashed var(--cloud-border);
    border-radius: 14px;
}

.tickets-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1.75rem;
}

/* --- Dark mode --- */
[data-bs-theme="dark"] .ticket-card {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .ticket-card:hover {
    border-color: color-mix(in srgb, var(--cloud-primary) 60%, var(--cloud-border));
}

[data-bs-theme="dark"] .ticket-status.is-closed {
    background: color-mix(in srgb, #64748b 22%, transparent);
    color: #cbd5e1;
}

[data-bs-theme="dark"] .ticket-status.is-open {
    background: color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    color: var(--brand-300);
}

[data-bs-theme="dark"] .tickets-filter.is-active .tickets-filter-count {
    background: color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    color: var(--brand-300);
}

[data-bs-theme="dark"] .tickets-empty {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
    .tickets-header {
        flex-direction: column;
        align-items: stretch;
    }
    .tickets-header-actions {
        width: 100%;
    }
    .tickets-header-actions .btn {
        flex: 1 1 auto;
    }
    .ticket-card {
        padding: .85rem .95rem;
    }
    .ticket-subject {
        font-size: .95rem;
    }
}

/* Override del color de la subsección activa del sidebar para que combine
   con el color amber de "Soporte" (cuando estás dentro de /support/*) */

/* =================================================================
   Modal "Déjanos tu opinión"
   ================================================================= */
.feedback-modal-dialog {
    max-width: 520px;
}

.feedback-modal {
    border-radius: 16px;
    border: 1px solid var(--cloud-border);
    overflow: hidden;
    box-shadow: 0 20px 50px -15px rgba(15, 23, 42, .35);
}

.feedback-modal .modal-header {
    border-bottom-color: var(--cloud-border);
    padding: 1.1rem 1.4rem;
}

.feedback-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cloud-text);
    display: flex;
    align-items: center;
}

.feedback-modal .modal-body {
    padding: 1.4rem;
}

.feedback-modal .modal-footer {
    border-top-color: var(--cloud-border);
    padding: 1rem 1.4rem;
    background: color-mix(in srgb, var(--cloud-border) 18%, transparent);
}

/* --- Estrellas --- */
.feedback-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
    padding: 0;
    border: 0;
}

.feedback-star {
    background: transparent;
    border: 0;
    padding: .25rem;
    color: var(--cloud-border);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: color .15s ease, transform .12s ease, background-color .15s ease;
}

.feedback-star:hover,
.feedback-star:focus-visible {
    transform: scale(1.1);
    outline: none;
}

.feedback-star.is-active {
    color: #fbbf24;
    filter: drop-shadow(0 2px 6px rgba(251, 191, 36, .45));
}

.feedback-rating-label {
    text-align: center;
    color: var(--cloud-muted);
    font-size: .85rem;
    font-weight: 500;
    min-height: 1.3em;
    margin: .25rem 0 1.25rem;
    transition: color .15s ease;
}

.feedback-rating-label.is-set {
    color: var(--cloud-text);
}

/* --- Textarea --- */
.feedback-modal .form-floating > .form-control {
    border-radius: 10px;
    resize: vertical;
    min-height: 110px;
}

.feedback-modal .form-floating > label {
    padding: 1rem 0.85rem;
}

.feedback-char-count {
    font-variant-numeric: tabular-nums;
}

.feedback-required-msg {
    font-weight: 500;
}

/* --- Estado de éxito --- */
.feedback-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cloud-success) 12%, transparent);
    color: var(--cloud-success);
    font-size: 2.75rem;
    animation: feedbackSuccessIn .35s ease-out;
}

@keyframes feedbackSuccessIn {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Dark mode --- */
[data-bs-theme="dark"] .feedback-modal {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .feedback-modal .modal-header,
[data-bs-theme="dark"] .feedback-modal .modal-footer {
    background: var(--cloud-surface);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .feedback-star {
    color: var(--cloud-border);
}

[data-bs-theme="dark"] .feedback-star.is-active {
    color: #fbbf24;
}

[data-bs-theme="dark"] .feedback-modal .form-control {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .feedback-modal .form-control:focus {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .3);
}

@media (max-width: 575.98px) {
    .feedback-star {
        font-size: 2.15rem;
    }
}

/* =================================================================
   Tooltip CSS-only (sin JS para evitar conflicto con Bootstrap Dropdown,
   que no permite dos componentes en el mismo elemento)

   Marcado: <button data-tooltip="Texto del tooltip">...</button>
   ================================================================= */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease .25s, transform .15s ease .25s;
    z-index: 1080;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -4px);
    padding: .35rem .7rem;
    background: #1e293b;
    color: #fff;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .25);
}

[data-tooltip]::before {
    content: '';
    top: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, -4px);
    border: 6px solid transparent;
    border-bottom-color: #1e293b;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Si el botón está abierto (dropdown desplegado), ocultar el tooltip */
[data-tooltip][aria-expanded="true"]::after,
[data-tooltip][aria-expanded="true"]::before {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::after,
    [data-tooltip]::before {
        transition: none;
    }
}

/* =================================================================
   Theme toggle
   ================================================================= */

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--cloud-border);
    background: var(--cloud-surface);
    color: var(--cloud-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background-color: var(--cloud-hover);
    color: var(--cloud-text);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .25);
    outline: none;
}

.theme-toggle:active {
    transform: scale(.96);
}

.brand-panel .theme-toggle {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.brand-panel .theme-toggle:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* =================================================================
   Breakpoints
   ================================================================= */

@media (max-width: 991.98px) {
    .login-form-panel {
        background: var(--cloud-surface);
        min-height: 100vh;
    }
}

@media (max-width: 575.98px) {
    .login-title {
        font-size: 1.5rem;
    }
    .form-floating > .form-control {
        height: calc(3.25rem + 2px);
    }
    .btn-cloud-primary,
    .btn-oauth {
        height: 2.85rem;
    }
}

@media (max-height: 720px) and (min-width: 992px) {
    .brand-panel {
        padding: 2rem 2.5rem;
    }
    .brand-copy {
        margin: 2rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================================================
   Sesiones y dispositivos (/settings/sessions)
   Dashboard layout: full-width, 2 columnas, hero compacto.
   ================================================================= */

.sessions-page {
    /* full bleed: usa todo el ancho del área de trabajo */
    width: 100%;
}

/* ---------- Hero compacto (una sola fila: título a la izq + stats a la der) ---------- */
.sessions-hero-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.sessions-hero-info {
    min-width: 0;
}

.sessions-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .15rem 0;
    color: var(--cloud-text);
}

.sessions-hero-sub {
    color: var(--cloud-muted);
    font-size: .85rem;
    margin: 0;
}

.sessions-hero-stats {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.hstat {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .85rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    min-width: 130px;
    /* Cada stat es un <a> ancla que lleva a su sección detallada. */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.hstat:hover,
.hstat:focus-visible {
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .12);
    outline: none;
}

/* Margen superior al saltar con #anchor para que el contenido no quede
   pegado al borde superior del viewport. */
#section-current,
#section-remembers,
#section-trusted {
    scroll-margin-top: 1rem;
}

.hstat > i {
    font-size: 1.25rem;
    color: var(--cloud-primary);
    flex-shrink: 0;
}

.hstat > div {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hstat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cloud-text);
}

.hstat-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cloud-muted);
    margin-top: .1rem;
}

/* ---------- Tarjeta-sección (cada bloque del dashboard) ---------- */
.sessions-card {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.sessions-card-tall {
    /* La actividad ocupa toda la altura disponible y scrollea internamente */
    height: 100%;
}

.sessions-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.sessions-card-head-left {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.sessions-card-icon-tag {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sessions-card-icon-tag-trust {
    background: color-mix(in srgb, var(--cloud-success) 12%, transparent);
    color: var(--cloud-success);
}

.sessions-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;
}

.sessions-card-sub {
    font-size: .78rem;
    color: var(--cloud-muted);
    margin: .1rem 0 0 0;
    line-height: 1.25;
}

.sessions-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
}

/* Estado vacío plano (sin caja anidada). Se ubica dentro de la tarjeta
   de sección y se extiende hasta los bordes inferiores con margin negativo. */
.sessions-empty {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1rem 1.15rem 1.15rem;
    margin: 0 -1.15rem -1.15rem;
    border-top: 1px solid var(--cloud-border);
    color: var(--cloud-muted);
    font-size: .82rem;
    border-radius: 0 0 14px 14px;
}
.sessions-empty i {
    font-size: 1.1rem;
    color: var(--cloud-success);
    flex-shrink: 0;
}

/* ---------- Lista de tarjetas de sesión (más compactas que antes) ---------- */
/* Lista de items: filas planas (NO tarjetas anidadas). Cada item se separa
   con una línea horizontal sutil. Se extiende con margin negativo para que
   el separador llegue hasta los bordes de la tarjeta-sección contenedora,
   compensando el padding del padre con el padding propio del item. */
.session-list {
    display: flex;
    flex-direction: column;
    margin: 0 -1.15rem -1.15rem;
    border-top: 1px solid var(--cloud-border);
}

.session-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .75rem 1.15rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--cloud-border);
    transition: background-color .15s ease;
}

.session-card:last-child {
    border-bottom: 0;
    /* Redondea las esquinas inferiores para alinearse con el contenedor */
    border-radius: 0 0 14px 14px;
}

.session-card:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 5%, transparent);
}

.session-card-current {
    background-color: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
    box-shadow: inset 3px 0 0 var(--cloud-primary);
}

.session-card-current:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 9%, transparent);
}

.session-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    position: relative;
}

.session-card-icon-trust {
    background: color-mix(in srgb, var(--cloud-success) 12%, transparent);
    color: var(--cloud-success);
}

.session-card-icon-trust .trust-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cloud-success);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    border: 2px solid var(--cloud-surface);
}

.session-card-body {
    min-width: 0;
}

.session-card-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.session-card-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--cloud-text);
    margin: 0 0 .2rem 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.badge-current {
    display: inline-flex;
    align-items: center;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--cloud-primary);
    color: #fff;
    margin-left: .25rem;
    vertical-align: middle;
    line-height: 1;
}

.session-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .65rem;
    color: var(--cloud-muted);
    font-size: .76rem;
}

.session-card-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.session-card-meta .meta-item i {
    font-size: .82rem;
    color: var(--cloud-muted);
    opacity: .85;
}

.session-card-meta code {
    background: transparent;
    color: var(--cloud-text);
    font-size: .76rem;
}

.session-card-meta .meta-faint {
    opacity: .7;
}

.session-card-meta .meta-pulse {
    color: var(--cloud-success);
    font-weight: 600;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cloud-success);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
    animation: sessionPulse 1.8s ease-out infinite;
    flex-shrink: 0;
}

@keyframes sessionPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.session-card-actions {
    flex-shrink: 0;
}

/* Botón revocar: solo ícono, compacto */
.btn-revoke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--cloud-border);
    color: var(--cloud-muted);
    border-radius: 8px;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.btn-revoke:hover,
.btn-revoke:focus-visible {
    background: var(--cloud-danger);
    color: #fff;
    border-color: var(--cloud-danger);
    outline: none;
}

.btn-revoke:active {
    transform: scale(.92);
}

/* ---------- Actividad reciente ---------- */
.activity-list {
    display: flex;
    flex-direction: column;
}

/* Con scroll interno cuando vive en una columna tall del dashboard */
.activity-list-scroll {
    max-height: 70vh;
    overflow-y: auto;
    /* margen negativo para que el scroll quede pegado al borde de la card */
    margin: 0 -.4rem;
    padding-right: .4rem;
    padding-left: .4rem;
}

/* Scrollbar discreta */
.activity-list-scroll::-webkit-scrollbar { width: 8px; }
.activity-list-scroll::-webkit-scrollbar-track { background: transparent; }
.activity-list-scroll::-webkit-scrollbar-thumb {
    background: var(--cloud-border);
    border-radius: 8px;
}
.activity-list-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--cloud-muted);
}

.activity-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    align-items: center;
    padding: .55rem .15rem;
    border-bottom: 1px solid var(--cloud-border);
    font-size: .82rem;
}

.activity-row:last-child {
    border-bottom: 0;
}

.activity-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-success) 14%, transparent);
    color: var(--cloud-success);
    font-size: .8rem;
    flex-shrink: 0;
}

.activity-row.is-failed .activity-icon {
    background: color-mix(in srgb, var(--cloud-danger) 14%, transparent);
    color: var(--cloud-danger);
}

.activity-body {
    min-width: 0;
}

.activity-line-1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
    color: var(--cloud-text);
    font-size: .82rem;
    line-height: 1.2;
}

.activity-line-1 strong {
    font-weight: 600;
    color: var(--cloud-text);
}

.activity-row.is-failed .activity-line-1 strong {
    color: var(--cloud-danger);
}

.activity-reason {
    color: var(--cloud-muted);
    font-size: .76rem;
}

.activity-line-2 {
    color: var(--cloud-muted);
    font-size: .72rem;
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-line-2 code {
    background: transparent;
    color: var(--cloud-text);
    font-size: .72rem;
}

.activity-when {
    color: var(--cloud-muted);
    font-size: .72rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- Acción prominente arriba: cerrar todas las sesiones ---------- */
.sessions-quick-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.15rem;
    background: color-mix(in srgb, var(--cloud-danger) 5%, var(--cloud-surface));
    border: 1px solid color-mix(in srgb, var(--cloud-danger) 30%, var(--cloud-border));
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    flex-wrap: wrap;
}

.quick-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cloud-danger) 14%, transparent);
    color: var(--cloud-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.quick-action-body {
    flex: 1 1 auto;
    min-width: 200px;
}

.quick-action-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    margin: 0 0 .15rem 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.quick-action-sub {
    font-size: .82rem;
    color: var(--cloud-muted);
    margin: 0;
    line-height: 1.35;
}

.btn-quick-action {
    border-radius: 10px;
    font-weight: 600;
    padding: .55rem 1.15rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    /* Por debajo de xl, las dos columnas se apilan: la actividad ya no tiene
       altura completa porque ya no compite con la columna de la izquierda. */
    .activity-list-scroll {
        max-height: 420px;
    }
}

@media (max-width: 575.98px) {
    .sessions-hero-compact {
        padding: .85rem 1rem;
    }
    .sessions-hero-stats { width: 100%; }
    .hstat { flex: 1 1 0; min-width: 0; }
    .hstat > div { min-width: 0; }
    .activity-row { grid-template-columns: auto 1fr; }
    .activity-when {
        grid-column: 2;
        margin-top: .1rem;
    }

    /* En móvil reducimos el padding del card y el icono del item para
       ganar espacio real para la info textual. */
    .sessions-card {
        padding: .85rem 1rem 1rem;
    }
    .session-list,
    .sessions-empty {
        margin: 0 -1rem -1rem;
    }
    .session-card {
        padding: .7rem 1rem;
        gap: .65rem;
    }
    .session-card:last-child,
    .sessions-empty {
        border-radius: 0 0 14px 14px;
    }
    .session-card-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ---------- Modo oscuro ---------- */
[data-bs-theme="dark"] .sessions-hero-compact,
[data-bs-theme="dark"] .sessions-card,
[data-bs-theme="dark"] .hstat {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

/* En dark, los items individuales NO llevan fondo propio (heredan del card
   contenedor). Solo el separador y el hover se ajustan. */
[data-bs-theme="dark"] .session-card {
    background: transparent;
    border-bottom-color: var(--cloud-border);
}

[data-bs-theme="dark"] .session-card:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
}

[data-bs-theme="dark"] .session-card-current {
    background-color: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
}

[data-bs-theme="dark"] .session-card-current:hover {
    background-color: color-mix(in srgb, var(--cloud-primary) 18%, transparent);
}

[data-bs-theme="dark"] .session-card-icon-trust .trust-badge {
    border-color: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .activity-row {
    border-bottom-color: var(--cloud-border);
}

[data-bs-theme="dark"] .sessions-quick-action {
    background: color-mix(in srgb, var(--cloud-danger) 10%, var(--cloud-surface-elev));
    border-color: color-mix(in srgb, var(--cloud-danger) 40%, var(--cloud-border));
}

/* User menu en modo oscuro */
[data-bs-theme="dark"] .user-menu {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .user-menu::before {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .account-pill {
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 30%, transparent);
}

[data-bs-theme="dark"] .account-pill-tag {
    background: rgba(255, 255, 255, .08);
    color: var(--brand-300);
}

[data-bs-theme="dark"] .account-pill-value {
    color: var(--cloud-text);
}

/* Sección de organización + pill copiable en dark mode */
[data-bs-theme="dark"] .user-menu-org-icon {
    background: rgba(0, 153, 255, .18);
    color: var(--brand-300, #66c2ff);
}

[data-bs-theme="dark"] .user-menu-id-pill {
    color: var(--cloud-muted);
}

[data-bs-theme="dark"] .user-menu-id-pill:hover,
[data-bs-theme="dark"] .user-menu-id-pill:focus-visible,
[data-bs-theme="dark"] .user-menu-id-pill:hover .user-menu-id-label,
[data-bs-theme="dark"] .user-menu-id-pill:focus-visible .user-menu-id-label,
[data-bs-theme="dark"] .user-menu-id-pill:hover .user-menu-id-value,
[data-bs-theme="dark"] .user-menu-id-pill:focus-visible .user-menu-id-value,
[data-bs-theme="dark"] .user-menu-id-pill:hover .user-menu-id-icon,
[data-bs-theme="dark"] .user-menu-id-pill:focus-visible .user-menu-id-icon {
    color: var(--brand-300, #66c2ff);
}

[data-bs-theme="dark"] .user-menu-divider {
    border-top-color: var(--cloud-border);
}

[data-bs-theme="dark"] .sessions-empty {
    background: transparent;
    border-top-color: var(--cloud-border);
}

/* =================================================================
   Configuración → Seguridad (/settings/security)
   ================================================================= */
.security-page {
    width: 100%;
}

/* ---------- Hero ---------- */
.security-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.security-hero-info { min-width: 0; }

.security-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .15rem 0;
    color: var(--cloud-text);
}

.security-hero-sub {
    color: var(--cloud-muted);
    font-size: .85rem;
    margin: 0;
}

.security-hero-shield {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
}

/* ---------- Card genérica de Seguridad (reutilizable) ---------- */
.sec-card {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    padding: 1rem 1.15rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    display: flex;
    flex-direction: column;
}

.sec-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.sec-card-head-left {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    flex: 1 1 auto;
}

.sec-card-head-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* ---------- Header de sec-card en móvil ----------
   En desktop el header es: [icono + título + descripción] | [contador + botón]
   en una sola fila. En pantallas <576px no caben — el botón se aplasta contra
   el texto. Cambiamos a layout vertical: el bloque izquierdo ocupa toda la
   fila, y debajo el contador + botón con el botón full-width para mejor tap. */
@media (max-width: 575.98px) {
    .sec-card {
        padding: .85rem .85rem 1rem;
    }

    .sec-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .sec-card-head-right {
        justify-content: space-between;
        gap: .65rem;
        width: 100%;
    }

    /* Botón "Agregar contacto" → full-width para target táctil más cómodo,
       y empuja el contador a la izquierda con justify-content: space-between. */
    .sec-card-head-right .btn {
        flex: 1 1 auto;
        min-height: 38px;
    }

    /* Descripción más compacta para no abrumar verticalmente. */
    .sec-card-sub {
        font-size: .75rem;
        line-height: 1.35;
    }
}

/* =================================================================
   Libreta de contactos (settings/profile)
   Lista vertical de contactos informativos + estado vacío.
   ================================================================= */
.contacts-empty {
    text-align: center;
    padding: 2rem 1rem;
    border: 1.5px dashed var(--cloud-border, #e3e8ef);
    border-radius: .85rem;
    background: color-mix(in srgb, var(--cloud-muted, #6b7280) 4%, transparent);
}

.contacts-empty > i {
    font-size: 2.25rem;
    color: var(--cloud-primary);
    display: block;
    margin-bottom: .5rem;
}

.contacts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.contacts-list-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .75rem .9rem;
    border: 1px solid var(--cloud-border, #e3e8ef);
    border-radius: .75rem;
    background: var(--cloud-surface, #fff);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.contacts-list-item:hover {
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, transparent);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.contacts-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
    text-transform: uppercase;
    flex-shrink: 0;
}

.contacts-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.contacts-name {
    font-weight: 600;
    color: var(--cloud-text, #1f2937);
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.contacts-type-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* =================================================================
   Variante editable del pill: se convierte en disparador de un
   dropdown Bootstrap para reasignar el rol del miembro. Visualmente
   conserva el mismo look del pill pero gana un caret y feedback hover
   para indicar interactividad. Solo se usa cuando el usuario actual
   puede gestionar roles (users.manage_all) y el target no es owner
   ni el propio usuario.
   ================================================================= */
.contacts-role-dropdown {
    display: inline-block;
    vertical-align: middle;
}

.contacts-type-pill-editable {
    border: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}

.contacts-type-pill-editable:hover,
.contacts-type-pill-editable:focus-visible,
.contacts-type-pill-editable[aria-expanded="true"] {
    background: color-mix(in srgb, var(--cloud-primary) 22%, transparent);
    color: var(--cloud-primary);
    outline: none;
}

.contacts-type-pill-editable:active {
    transform: scale(.97);
}

.contacts-type-pill-editable .bi-caret-down-fill {
    font-size: .55rem;
    opacity: .7;
    transition: transform .15s ease;
}

.contacts-type-pill-editable[aria-expanded="true"] .bi-caret-down-fill {
    transform: rotate(180deg);
    opacity: 1;
}

/* Menú con los roles asignables (sin owner) */
.contacts-role-menu {
    min-width: 200px;
    padding: .4rem;
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, .25),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    background: var(--cloud-surface);
}

.contacts-role-menu-head {
    padding: .25rem .55rem .4rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cloud-muted);
    border-bottom: 1px solid var(--cloud-border);
    margin-bottom: .25rem;
    list-style: none;
}

.contacts-role-menu form {
    width: 100%;
}

.contacts-role-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cloud-text);
    font-size: .85rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.contacts-role-menu-item:hover,
.contacts-role-menu-item:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    color: var(--cloud-primary);
    outline: none;
}

.contacts-role-menu-item.is-current {
    background: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
    color: var(--cloud-primary);
    cursor: default;
    font-weight: 600;
}

.contacts-role-menu-item.is-current:hover {
    /* No reaccionar al hover cuando es el rol vigente */
    background: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
}

.contacts-role-menu-check {
    font-size: .9rem;
    flex-shrink: 0;
    opacity: .55;
}

.contacts-role-menu-item.is-current .contacts-role-menu-check {
    opacity: 1;
}

.contacts-role-menu-item:hover .contacts-role-menu-check {
    opacity: 1;
}

[data-bs-theme="dark"] .contacts-role-menu {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .contacts-type-pill-editable:hover,
[data-bs-theme="dark"] .contacts-type-pill-editable:focus-visible,
[data-bs-theme="dark"] .contacts-type-pill-editable[aria-expanded="true"] {
    background: rgba(0, 153, 255, .22);
}

/* =================================================================
   Multi-rol: trigger del bloque "chips de rol" cuando el usuario tiene
   permiso para editar. El bloque entero (varios chips + ícono de lápiz)
   es un único <button> que abre el modal #edit-roles-modal. Visualmente
   conserva la línea de chips, solo agrega un hint hover y el ícono al
   final. No usamos el caret de dropdown porque ya no es un dropdown.
   ================================================================= */
.contacts-role-edit-trigger {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .12s ease;
}

.contacts-role-edit-trigger:hover,
.contacts-role-edit-trigger:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
}

.contacts-role-edit-trigger:hover .contacts-role-edit-icon,
.contacts-role-edit-trigger:focus-visible .contacts-role-edit-icon {
    opacity: 1;
    color: var(--cloud-primary);
}

.contacts-role-edit-icon {
    font-size: .85rem;
    opacity: .45;
    color: var(--cloud-muted);
    transition: opacity .12s ease, color .12s ease;
    margin-left: .15rem;
}

/* Bloque agrupador de pills en la lista de deshabilitados (cosmetico). */
.contacts-roles-muted {
    display: inline-flex;
    gap: .3rem;
    flex-wrap: wrap;
}

/* =================================================================
   Checklist de roles (modales Invitar / Editar). Vertical, con hover
   sutil y check personalizado. Cada item es un <label> que envuelve
   un checkbox real para mantener la accesibilidad nativa.
   ================================================================= */
.roles-checklist {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .25rem;
}

.roles-checklist-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
    cursor: pointer;
    background: var(--cloud-surface);
    transition: background-color .12s ease, border-color .12s ease;
    margin: 0;
}

.roles-checklist-item:hover {
    background: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 30%, var(--cloud-border));
}

.roles-checklist-item:has(input:checked) {
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 50%, var(--cloud-border));
}

.roles-checklist-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
    margin: 0;
}

.roles-checklist-label {
    font-size: .9rem;
    color: var(--cloud-text);
    font-weight: 500;
}

[data-bs-theme="dark"] .roles-checklist-item {
    background: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .roles-checklist-item:hover {
    background: rgba(0, 153, 255, .1);
}

[data-bs-theme="dark"] .roles-checklist-item:has(input:checked) {
    background: rgba(0, 153, 255, .15);
}

.contacts-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: .15rem;
    font-size: .8rem;
    color: var(--cloud-muted, #6b7280);
}

.contacts-meta span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.contacts-meta i {
    color: var(--cloud-muted, #9ca3af);
    flex-shrink: 0;
}

.contacts-delete-form {
    margin: 0;
}

@media (max-width: 575.98px) {
    .contacts-list-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
    }
    .contacts-delete-form {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

[data-bs-theme="dark"] .contacts-list-item {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .contacts-list-item:hover {
    background: rgba(255, 255, 255, .05);
}

[data-bs-theme="dark"] .contacts-name {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .contacts-empty {
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .03);
}

.sec-card-icon-tag {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sec-card-icon-tag-success {
    background: color-mix(in srgb, var(--cloud-success) 12%, transparent);
    color: var(--cloud-success);
}

.sec-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;
}

.sec-card-sub {
    font-size: .78rem;
    color: var(--cloud-muted);
    margin: .1rem 0 0 0;
    line-height: 1.3;
}

/* ---------- Formulario interno (contraseña) ---------- */
.sec-form {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.sec-form-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.sec-form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cloud-text);
    margin: 0;
}

.sec-form-input {
    width: 100%;
    height: 42px;
    padding: .55rem .75rem;
    padding-right: 2.5rem;
    border-radius: 10px;
    border: 1px solid var(--cloud-border);
    background: var(--cloud-input-bg);
    color: var(--cloud-text);
    font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sec-form-input:focus {
    outline: none;
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .18);
}

.sec-form-field.has-error .sec-form-input {
    border-color: var(--cloud-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}

.sec-form-hint {
    font-size: .72rem;
    color: var(--cloud-muted);
    margin: 0;
    line-height: 1.3;
}

.sec-form-error {
    font-size: .76rem;
    color: var(--cloud-danger);
    margin: 0;
    font-weight: 500;
}

/* El password-field y password-toggle ya están definidos arriba (login).
   Reutilizamos su posicionamiento absoluto del botón ojo. */
.sec-form .password-field .password-toggle {
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- Status pill (Verificado / Pendiente / Activo) ---------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.status-pill i { font-size: .82rem; }

.status-pill-success {
    background: color-mix(in srgb, var(--cloud-success) 14%, transparent);
    color: var(--cloud-success);
}

.status-pill-warn {
    background: color-mix(in srgb, var(--cloud-warning) 14%, transparent);
    color: var(--cloud-warning);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cloud-border);
    flex-shrink: 0;
}

.status-dot-success {
    background: var(--cloud-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cloud-success) 22%, transparent);
}

/* ---------- Canales 2FA (email / phone rows) ---------- */
.channels-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.channel-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .65rem .8rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
}

.channel-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.channel-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cloud-text);
    line-height: 1.15;
}

.channel-value {
    font-size: .82rem;
    color: var(--cloud-muted);
    margin-top: .12rem;
    word-break: break-all;
}

.channel-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    justify-content: flex-end;
}

/* ---------- Provider row (OAuth) ---------- */
.provider-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .85rem;
    align-items: center;
    padding: .65rem .8rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
    transition: border-color .15s ease;
}

.provider-row.is-connected {
    border-color: color-mix(in srgb, var(--cloud-success) 35%, var(--cloud-border));
    background: color-mix(in srgb, var(--cloud-success) 3%, var(--cloud-surface));
}

.provider-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.provider-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--cloud-text);
    line-height: 1.15;
}

.provider-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .15rem;
    font-size: .76rem;
    color: var(--cloud-muted);
}

.provider-actions {
    flex-shrink: 0;
}

/* ---------- Callouts (info boxes dentro de cards) ---------- */
.sec-callout {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .65rem .85rem;
    background: color-mix(in srgb, var(--cloud-primary) 6%, var(--cloud-surface));
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 20%, var(--cloud-border));
    border-radius: 10px;
    font-size: .82rem;
    color: var(--cloud-text);
    line-height: 1.4;
}

.sec-callout > i {
    color: var(--cloud-primary);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .15rem;
}

.sec-callout a {
    font-weight: 600;
    margin-left: .15rem;
}

.sec-callout-warn {
    background: color-mix(in srgb, var(--cloud-warning) 8%, var(--cloud-surface));
    border-color: color-mix(in srgb, var(--cloud-warning) 30%, var(--cloud-border));
}

.sec-callout-warn > i {
    color: var(--cloud-warning);
}

/* ---------- Resumen de actividad ---------- */
.activity-summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    background: color-mix(in srgb, var(--cloud-success) 5%, var(--cloud-surface));
    border: 1px solid color-mix(in srgb, var(--cloud-success) 22%, var(--cloud-border));
    border-radius: 10px;
    margin-bottom: .85rem;
}

.activity-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.activity-summary-icon-ok {
    background: color-mix(in srgb, var(--cloud-success) 14%, transparent);
    color: var(--cloud-success);
}

.activity-summary-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--cloud-text);
    line-height: 1.15;
}

.activity-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-top: .15rem;
    color: var(--cloud-muted);
    font-size: .76rem;
}

.activity-summary-meta i { font-size: .82rem; }

.activity-summary-meta code {
    background: transparent;
    color: var(--cloud-text);
    font-size: .76rem;
}

.activity-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

.activity-stat {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
    padding: .7rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.activity-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cloud-text);
}

.activity-stat-label {
    font-size: .72rem;
    color: var(--cloud-text);
    line-height: 1.25;
}

@media (max-width: 575.98px) {
    .activity-stats {
        grid-template-columns: 1fr;
    }
    .channel-row,
    .provider-row {
        grid-template-columns: auto 1fr;
    }
    .channel-actions,
    .provider-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* ---------- Modo oscuro ---------- */
[data-bs-theme="dark"] .security-hero,
[data-bs-theme="dark"] .sec-card,
[data-bs-theme="dark"] .channel-row,
[data-bs-theme="dark"] .provider-row,
[data-bs-theme="dark"] .activity-stat {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .provider-row.is-connected {
    background: color-mix(in srgb, var(--cloud-success) 8%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .activity-summary {
    background: color-mix(in srgb, var(--cloud-success) 10%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .sec-callout {
    background: color-mix(in srgb, var(--cloud-primary) 10%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .sec-callout-warn {
    background: color-mix(in srgb, var(--cloud-warning) 12%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .sec-form-input {
    background: var(--cloud-input-bg);
    color: var(--cloud-text);
}

/* =================================================================
   Configuración → Perfil (/settings/profile)
   Reutiliza .sec-card y .sec-form-* definidos arriba (Seguridad).
   ================================================================= */
.profile-page { width: 100%; }

/* Hero (idéntico patrón de security-hero, alias para claridad) */
.profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.profile-hero-info { min-width: 0; }

.profile-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .15rem 0;
    color: var(--cloud-text);
}

.profile-hero-sub {
    color: var(--cloud-muted);
    font-size: .85rem;
    margin: 0;
}

.profile-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
}

/* ---------- Foto de perfil: preview + controles ---------- */
.avatar-block {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
}

.avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--cloud-border);
    background: var(--cloud-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
    box-shadow: 0 4px 14px -6px rgba(0, 153, 255, .15);
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-preview-initials {
    color: #ffffff;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.avatar-controls {
    flex: 1 1 240px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.avatar-source-label {
    font-size: .82rem;
    color: var(--cloud-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.avatar-source-label i { font-size: .95rem; }

.avatar-upload-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.avatar-hint {
    font-size: .72rem;
    color: var(--cloud-muted);
    margin: 0;
    line-height: 1.35;
}

/* ---------- Info row (email/teléfono con valor + estado + acción) ---------- */
.info-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .65rem .8rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
}

.info-row-icon {
    color: var(--cloud-primary);
    font-size: 1.1rem;
}

.info-row-body {
    min-width: 0;
}

.info-row-value {
    font-size: .9rem;
    font-weight: 600;
    color: var(--cloud-text);
    word-break: break-all;
}

.info-row-meta {
    margin-top: .2rem;
}

/* ---------- Información de la cuenta: grid compacto ---------- */
.account-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.account-info-item {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
    padding: .65rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.account-info-item-full {
    grid-column: 1 / -1;
}

.account-info-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cloud-muted);
    font-weight: 700;
}

.account-info-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--cloud-text);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.account-info-value code {
    background: transparent;
    color: var(--cloud-text);
    font-size: .9rem;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.account-info-value > i {
    color: var(--cloud-muted);
    font-size: .9rem;
}

/* =================================================================
   Pill de ID copiable usada en las hub cards del /settings.
   - Sale debajo del nombre con icono de portapapeles.
   - Click copia el ID al clipboard usando el handler global
     `[data-copy]` definido en topbar.php (que ya hace
     preventDefault + stopPropagation para que NO dispare la
     navegación del <a class="hub-card"> que lo envuelve).
   ================================================================= */
.hub-id-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .05rem .4rem;
    margin-left: .35rem;
    border-radius: .4rem;
    background: color-mix(in srgb, var(--cloud-muted, #6b7280) 8%, transparent);
    color: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.hub-id-pill code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: .85em;
    font-weight: 600;
}

.hub-id-pill i {
    font-size: .75rem;
    opacity: .75;
}

.hub-id-pill:hover,
.hub-id-pill:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    outline: none;
}

.hub-id-pill.is-copied {
    background: color-mix(in srgb, var(--cloud-success, #10b981) 14%, transparent);
    color: var(--cloud-success, #10b981);
}

.hub-id-pill.is-copy-error {
    background: color-mix(in srgb, var(--cloud-danger, #ef4444) 14%, transparent);
    color: var(--cloud-danger, #ef4444);
}

.hub-id-pill-toast {
    /* Tooltip flotante encima del pill cuando se copia. position:absolute
       respecto al pill (que es position:relative). z-index alto para salir
       por encima de tarjetas adyacentes. font-family explícito para que NO
       herede la fuente monospace del `.hub-identity-meta` padre. */
    position: absolute;
    bottom: calc(100% + .35rem);
    left: 50%;
    transform: translate(-50%, .25rem);
    background: var(--cloud-success, #10b981);
    color: #fff;
    padding: .25rem .6rem;
    border-radius: .35rem;
    font-size: .75rem;
    font-weight: 600;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: .01em;
    white-space: nowrap;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
}

/* Triangulo / flecha apuntando hacia el pill */
.hub-id-pill-toast::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--cloud-success, #10b981);
}

.hub-id-pill.is-copied .hub-id-pill-toast {
    opacity: 1;
    transform: translate(-50%, 0);
}

[data-bs-theme="dark"] .hub-id-pill {
    background: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .hub-id-pill:hover,
[data-bs-theme="dark"] .hub-id-pill:focus-visible {
    background: rgba(0, 153, 255, .18);
}

/* Botón de copiar dentro del grid de cuenta (variante de account-pill) */
.account-info-value-copy {
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    overflow: hidden;
    transition: color .15s ease;
}

.account-info-value-copy:hover,
.account-info-value-copy:focus-visible {
    color: var(--cloud-primary);
    outline: none;
}

.account-info-value-copy:hover code {
    color: var(--cloud-primary);
}

.account-info-value-copy.is-copied .account-pill-toast {
    opacity: 1;
    transform: translateY(0);
}

/* Method chip (mostrar password / google / microsoft conectados) */
.method-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
    color: var(--cloud-text);
    font-size: .76rem;
    font-weight: 500;
    text-decoration: none;
}

.method-chip i { font-size: .85rem; }

.method-chip-link {
    background: transparent;
    border: 1px dashed var(--cloud-border);
    color: var(--cloud-muted);
}

.method-chip-link:hover {
    background: var(--cloud-hover);
    color: var(--cloud-primary);
    border-color: var(--cloud-primary);
}

/* =================================================================
   Lista de métodos de inicio de sesión (/settings/profile)
   Muestra los 4 métodos (Contraseña, Google, Microsoft, OTP) con
   estado activo/inactivo. Activo: tinte verde, ícono check.
   Inactivo: muted, X. El OTP siempre va activo.
   ================================================================= */
.login-methods-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.login-method-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .65rem .9rem;
    border: 1px solid var(--cloud-border, #e3e8ef);
    border-radius: .75rem;
    background: var(--cloud-surface, #fff);
    transition: border-color .15s ease, background-color .15s ease;
}

.login-method-item.is-enabled {
    border-color: color-mix(in srgb, var(--cloud-success, #10b981) 30%, transparent);
    background: color-mix(in srgb, var(--cloud-success, #10b981) 6%, transparent);
}

.login-method-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-muted, #6b7280) 8%, transparent);
    color: var(--cloud-text, #1f2937);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.login-method-item.is-enabled .login-method-icon {
    background: color-mix(in srgb, var(--cloud-success, #10b981) 12%, transparent);
}

.login-method-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.login-method-name {
    font-weight: 600;
    color: var(--cloud-text, #1f2937);
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.login-method-sub {
    font-size: .8rem;
    color: var(--cloud-muted, #6b7280);
}

.login-method-pill {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: help;
}

.login-method-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cloud-muted, #6b7280);
    flex-shrink: 0;
}

.login-method-status i {
    font-size: 1.15rem;
}

.login-method-item.is-enabled .login-method-status {
    color: var(--cloud-success, #10b981);
}

.login-method-status-label {
    display: none; /* visible solo en pantallas amplias para no apretar */
}

@media (min-width: 576px) {
    .login-method-status-label {
        display: inline;
    }
}

[data-bs-theme="dark"] .login-method-item {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .login-method-item.is-enabled {
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .35);
}

[data-bs-theme="dark"] .login-method-name {
    color: #f3f4f6;
}

/* ---------- Theme picker (3 opciones visuales) ---------- */
.theme-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .85rem .5rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 10px;
    color: var(--cloud-muted);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.theme-option i {
    font-size: 1.5rem;
}

.theme-option:hover {
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
    color: var(--cloud-text);
}

.theme-option:active {
    transform: scale(.97);
}

.theme-option.is-active {
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    border-color: var(--cloud-primary);
    color: var(--cloud-primary);
}

/* Select estilizado para preferencias */
.sec-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%2364748b'><path d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/></svg>");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 575.98px) {
    .account-info-grid {
        grid-template-columns: 1fr;
    }
    .info-row {
        grid-template-columns: auto 1fr;
    }
    .info-row > .btn {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
    .avatar-block {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Modo oscuro */
[data-bs-theme="dark"] .profile-hero,
[data-bs-theme="dark"] .info-row,
[data-bs-theme="dark"] .account-info-item,
[data-bs-theme="dark"] .theme-option,
[data-bs-theme="dark"] .avatar-preview {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .theme-option.is-active {
    background: color-mix(in srgb, var(--cloud-primary) 18%, var(--cloud-surface-elev));
    border-color: var(--cloud-primary);
}

[data-bs-theme="dark"] .method-chip {
    background: color-mix(in srgb, var(--cloud-primary) 14%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .method-chip-link {
    background: transparent;
}

/* =================================================================
   Facturación (/billing) — placeholder en construcción
   ================================================================= */
.billing-page { width: 100%; }

.billing-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.15rem;
    /* 1.25rem para mantener el mismo ritmo vertical que el resto de
       bloques del dashboard (banner, row de cards, tarjeta de
       retenciones). Antes era 1rem y rompía la consistencia. */
    margin-bottom: 1.25rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.billing-hero-info { min-width: 0; }

.billing-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .15rem 0;
    color: var(--cloud-text);
}

.billing-hero-sub {
    color: var(--cloud-muted);
    font-size: .85rem;
    margin: 0;
}

.billing-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .billing-hero {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

/* =================================================================
 * Billing → Tarjetas pareadas "Gestionando organización" + "Modalidad
 * de la cuenta" (rediseño 2026-05: antes era un solo panel apilado).
 *
 *   ┌─ .billing-org ───────────┐ ┌─ .billing-mode ──────────┐
 *   │ [HC] GESTIONANDO ORG.    │ │ [💳] MODALIDAD           │
 *   │      Hablame Colombia    │ │      [ Postpago ]        │
 *   │ [# O-100003] [💱 COP]    │ │ Tienes un cupo mensual…  │
 *   │ [⇄ Cambiar de org.]      │ │ ┌─ Cupo mensual ──────┐  │
 *   │ ── ⓘ hint legal ──────   │ │ │ $ 500.000  COP      │  │
 *   └──────────────────────────┘ │ └─────────────────────┘  │
 *                                 └──────────────────────────┘
 *
 * El avatar usa color determinístico de Avatar::backgroundColor().
 * La card de modalidad lleva un acento (--mode-accent: verde prepago,
 * azul postpago) que tiñe icono, badge y el panel del cupo — la card
 * en sí es de superficie neutra, como las demás.
 * ================================================================= */

.billing-acct-row { margin-bottom: 1.25rem; }

/* Base común de las dos cards (mismo lenguaje que .billing-erp). */
.billing-org,
.billing-mode {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1rem 1.15rem .95rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

/* ───────────── Tarjeta 1 · Organización ───────────── */
.billing-org-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.billing-org-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    /* background-color viene inline desde Avatar::backgroundColor() */
    box-shadow: 0 4px 14px -5px rgba(15, 23, 42, .35);
}

.billing-org-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.billing-org-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cloud-muted);
    line-height: 1;
}

.billing-org-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-org-pills {
    margin-top: .8rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.billing-org-switch {
    align-self: flex-start;
    margin-bottom: 1rem;
    white-space: nowrap;
}

/* Hint legal — empujado al fondo de la card para que las dos cards
   pareadas se vean alineadas aunque difieran de alto. */
.billing-org-hint {
    margin: auto 0 0;
    padding-top: .8rem;
    border-top: 1px dashed var(--cloud-border);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--cloud-muted);
}
.billing-org-hint i {
    color: var(--cloud-primary);
    font-size: .85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ───────────── Tarjeta 2 · Modalidad ───────────── */
.billing-mode--prepaid  { --mode-accent: #10b981; }
.billing-mode--postpaid { --mode-accent: #0099ff; }

.billing-mode-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.billing-mode-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--mode-accent);
    color: #fff;
    box-shadow: 0 4px 14px -5px color-mix(in srgb, var(--mode-accent) 65%, transparent);
}
.billing-mode-headtext {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.billing-mode-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cloud-muted);
    line-height: 1;
}
.billing-mode-badge {
    align-self: flex-start;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--mode-accent);
    color: #fff;
}
.billing-mode-desc {
    margin: .85rem 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--cloud-text);
}

/* Panel del cupo mensual — solo postpago. */
.billing-mode-quota {
    margin-top: .85rem;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mode-accent) 7%, var(--cloud-surface));
    border: 1px solid color-mix(in srgb, var(--mode-accent) 32%, var(--cloud-border));
}
.billing-mode-quota-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cloud-muted);
}
.billing-mode-quota-value {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cloud-text);
    line-height: 1.15;
}
.billing-mode-quota-value code {
    font-size: .7rem;
    font-weight: 700;
    color: var(--mode-accent);
    background: color-mix(in srgb, var(--mode-accent) 14%, transparent);
    padding: .1rem .4rem;
    border-radius: 5px;
}
.billing-mode-quota-note {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    margin-top: .25rem;
    font-size: .7rem;
    line-height: 1.4;
    color: var(--cloud-muted);
}
.billing-mode-quota-note i {
    color: var(--mode-accent);
    margin-top: 1px;
    flex-shrink: 0;
}

/* ───────────── Pills (ID + moneda) — compartidas ───────────── */
.billing-acct-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border: 1px solid var(--cloud-border);
    border-radius: 8px;
    background: var(--cloud-bg);
    font-family: inherit;
}
.billing-acct-pill code {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cloud-text);
    background: transparent;
    padding: 0;
}
.billing-acct-pill i {
    font-size: .8rem;
    color: var(--cloud-muted);
}
.billing-acct-pill-text {
    font-size: .76rem;
    color: var(--cloud-muted);
    font-weight: 500;
}

/* Pill ID — copiable, con feedback is-copied (lo setea el handler global). */
.billing-acct-pill--id {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.billing-acct-pill--id:hover {
    background: color-mix(in srgb, var(--cloud-primary) 8%, var(--cloud-bg));
    border-color: color-mix(in srgb, var(--cloud-primary) 40%, var(--cloud-border));
}
.billing-acct-pill-copy { transition: color .15s ease; }
.billing-acct-pill--id:hover .billing-acct-pill-copy { color: var(--cloud-primary); }
.billing-acct-pill--id.is-copied {
    background: color-mix(in srgb, #10b981 12%, transparent);
    border-color: color-mix(in srgb, #10b981 40%, var(--cloud-border));
}

/* Pill moneda — read-only, icono brand. */
.billing-acct-pill--currency { cursor: help; }
.billing-acct-pill--currency i { color: var(--cloud-primary); }

/* ───────────── Responsive ───────────── */
@media (max-width: 640px) {
    .billing-org-avatar,
    .billing-mode-icon {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        border-radius: 12px;
    }
    .billing-org-name { font-size: 1.12rem; white-space: normal; }
    .billing-org-switch { width: 100%; }
    .billing-mode-quota-value { font-size: 1.35rem; }
}

/* ───────────── Dark mode ───────────── */
[data-bs-theme="dark"] .billing-org,
[data-bs-theme="dark"] .billing-mode {
    background: var(--cloud-surface-elev);
}
[data-bs-theme="dark"] .billing-acct-pill {
    background: var(--cloud-surface);
}
[data-bs-theme="dark"] .billing-mode-quota {
    background: color-mix(in srgb, var(--mode-accent) 12%, var(--cloud-surface-elev));
}

/* =================================================================
 * Billing → Tarjeta "Datos fiscales y de facturación" (read-only).
 *
 * Diseño compacto: header en una sola línea (icono + título + chip
 * read-only) y body con filas auto-fill que aprovechan el ancho
 * disponible. Cada celda usa el patrón eyebrow (label diminuto en
 * uppercase) sobre el valor en peso medio.
 *
 * Las filas son separadas con hairlines discretos en lugar de boxes
 * o cards anidadas — mantiene la densidad visual de un "data sheet"
 * sin la sensación de información dispersa.
 * ================================================================= */

.billing-erp {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1rem 1.15rem .9rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

/* =================================================================
 * Grid lateral: cuando .billing-erp y .billing-emails conviven en la
 * misma `.billing-data-row`, las cards no necesitan margin-bottom
 * propio (el espacio bajo el bloque lo da el `margin-bottom` del
 * row) y deben igualar altura para que el fondo de ambas se alinee.
 * Sin esto, la columna corta deja un "diente" visual feo.
 * ================================================================= */

/* El row es un bloque más del dashboard: mantiene el mismo ritmo
   vertical (1.25rem) que el hero, el banner y la tarjeta de
   retenciones. Sin esto la `.billing-wh-card` quedaba pegada a la
   fila de cards. */
.billing-data-row {
    margin-bottom: 1.25rem;
}

.billing-data-row > [class*="col-"] > .billing-erp,
.billing-data-row > [class*="col-"] > .billing-emails {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
/* Permite que el body de cada card se estire y el footer quede pegado
   al fondo (visual consistencia entre las dos columnas). */
.billing-data-row .billing-erp > .billing-erp-foot,
.billing-data-row .billing-emails > .billing-emails-foot {
    margin-top: auto;
}

/* ---- Header en una línea ---- */
.billing-erp-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid var(--cloud-border);
}

.billing-erp-head-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1rem;
}

.billing-erp-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip "Solo lectura" — pequeño, discreto, junto al título */
.billing-erp-lock {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem .2rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cloud-muted) 10%, transparent);
    color: var(--cloud-muted);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.billing-erp-lock i { font-size: .75rem; }

/* ---- Filas de celdas ---- */

/* Cada fila usa auto-fill para que las celdas fluyan según el ancho.
   Min 200px por celda → en desktop entran 3-4 columnas, en tablet 2,
   en mobile 1. Sin sub-grids por sección, sin bordes alrededor. */
.billing-erp-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .6rem 1.5rem;
    padding: .55rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--cloud-border) 70%, transparent);
}
.billing-erp-row:last-of-type {
    border-bottom: none;
}

/* Fila marcada como "ancha": una sola columna (típico para el nombre
   / razón social, que suele ser largo y queda raro partido). */
.billing-erp-row--wide {
    grid-template-columns: 1fr;
}

/* ---- Celda individual (etiqueta diminuta arriba, valor abajo) ---- */
.billing-erp-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.billing-erp-cell-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cloud-muted);
    line-height: 1.2;
}

.billing-erp-cell-value {
    font-size: .88rem;
    font-weight: 500;
    color: var(--cloud-text);
    line-height: 1.35;
    word-break: break-word;
}

/* Celda sin valor: misma altura pero valor itálico tenue para no
   romper la grilla y dejar claro que el ERP no entregó ese dato. */
.billing-erp-cell--empty .billing-erp-cell-value {
    color: var(--cloud-muted);
    font-style: italic;
    font-weight: 400;
}

/* =================================================================
 * Billing → Tarjeta compacta de Retenciones.
 *
 * Vive como card aparte (no dentro de "Datos fiscales") para mantener
 * el dashboard limpio. Solo muestra los 3 estados; el detalle completo
 * (tarifas, descripciones, nota de Chía) está en el modal que abre el
 * botón "Ver detalle".
 * ================================================================= */
.billing-wh-card {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.billing-wh-card-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
}

.billing-wh-card-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1rem;
}

.billing-wh-card-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.005em;
}

/* Botón "ampliar / ver detalle" — abre el modal. */
.billing-wh-card-expand {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 30%, var(--cloud-border));
    border-radius: 8px;
    background: transparent;
    color: var(--cloud-primary);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.billing-wh-card-expand:hover {
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 45%, var(--cloud-border));
}
.billing-wh-card-expand i { font-size: .8rem; }

/* ---- Grid de los 3 mini-items ---- */
.billing-wh-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .55rem;
}

.billing-wh-mini {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: 9px;
    border: 1px solid var(--cloud-border);
    background: var(--cloud-surface);
}

.billing-wh-mini-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

.billing-wh-mini-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.billing-wh-mini-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cloud-text);
    line-height: 1.25;
}
.billing-wh-mini-status {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Variante "Aplica" — verde. */
.billing-wh-mini--applies {
    border-color: color-mix(in srgb, #10b981 30%, var(--cloud-border));
    background: color-mix(in srgb, #10b981 5%, var(--cloud-surface));
}
.billing-wh-mini--applies .billing-wh-mini-icon {
    background: #10b981;
    color: #fff;
}
.billing-wh-mini--applies .billing-wh-mini-status {
    color: #047857;
}

/* Variante "No aplica" — neutro. */
.billing-wh-mini--none .billing-wh-mini-icon {
    background: color-mix(in srgb, var(--cloud-muted) 18%, transparent);
    color: var(--cloud-muted);
}
.billing-wh-mini--none .billing-wh-mini-status {
    color: var(--cloud-muted);
}

/* Píldora de tarifa (%) — anclada a la derecha del mini-item. */
.billing-wh-mini-rate {
    flex-shrink: 0;
    margin-left: auto;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.billing-wh-mini--applies .billing-wh-mini-rate {
    background: color-mix(in srgb, #10b981 14%, transparent);
    color: #047857;
}
.billing-wh-mini--none .billing-wh-mini-rate {
    background: color-mix(in srgb, var(--cloud-muted) 14%, transparent);
    color: var(--cloud-muted);
}

/* Lead del modal de detalle de retenciones. */
.billing-wh-modal-lead {
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--cloud-muted);
}

/* Dark mode de la tarjeta compacta. */
[data-bs-theme="dark"] .billing-wh-card {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
    box-shadow: none;
}
[data-bs-theme="dark"] .billing-wh-card-icon {
    background: rgba(0, 153, 255, .18);
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-wh-card-expand {
    border-color: rgba(0, 153, 255, .35);
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-wh-card-expand:hover {
    background: rgba(0, 153, 255, .15);
    border-color: rgba(0, 153, 255, .5);
}
[data-bs-theme="dark"] .billing-wh-mini {
    background: var(--cloud-surface-elev);
}
[data-bs-theme="dark"] .billing-wh-mini--applies {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .3);
}
[data-bs-theme="dark"] .billing-wh-mini--applies .billing-wh-mini-status {
    color: #6ee7b7;
}
[data-bs-theme="dark"] .billing-wh-mini--none .billing-wh-mini-icon {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
}
[data-bs-theme="dark"] .billing-wh-mini--applies .billing-wh-mini-rate {
    background: rgba(16, 185, 129, .16);
    color: #6ee7b7;
}
[data-bs-theme="dark"] .billing-wh-mini--none .billing-wh-mini-rate {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
}

/* ---- Grid de tiles de retenciones (modal de detalle) ----
   auto-fit con min 180px → 3 tiles en el modal-lg desktop, menos al
   angostar. Reusado tal cual desde el diseño previo. */
.billing-erp-withholdings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .65rem;
}

.billing-erp-withholding-tile {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem .95rem;
    border-radius: 10px;
    border: 1px solid var(--cloud-border);
    background: var(--cloud-surface);
    transition: border-color .15s ease, transform .15s ease;
}

.billing-erp-withholding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.billing-erp-withholding-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-muted) 12%, transparent);
    color: var(--cloud-muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.billing-erp-withholding-status {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
    white-space: nowrap;
}
.billing-erp-withholding-status i {
    font-size: .72rem;
}

.billing-erp-withholding-name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--cloud-text);
    line-height: 1.3;
}

/* Tarifa (%) — label tiny + valor prominente. Siempre visible para que
   el cliente sepa qué porcentaje se le retiene en cada concepto. */
.billing-erp-withholding-rate {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
}
.billing-erp-withholding-rate-label {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cloud-muted);
}
.billing-erp-withholding-rate-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
}
/* En el tile "Aplica" el % se tiñe de verde para reforzar que ese
   porcentaje SÍ se está reteniendo. */
.billing-erp-withholding-tile--applies .billing-erp-withholding-rate-value {
    color: #047857;
}

.billing-erp-withholding-desc {
    margin: 0;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--cloud-muted);
}

/* ---- Nota legal de ICA / domicilio en Chía ---- */
/* Callout informativo debajo de los tiles. Tinte azul de marca para
   que se lea como "información importante" sin alarmar (no es error). */
.billing-erp-withholding-note {
    display: flex;
    gap: .65rem;
    margin-top: .9rem;
    padding: .8rem .9rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 22%, var(--cloud-border));
}
.billing-erp-withholding-note > i {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--cloud-primary);
    margin-top: 1px;
}
.billing-erp-withholding-note-body {
    min-width: 0;
}
.billing-erp-withholding-note-title {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--cloud-text);
    margin-bottom: .15rem;
}
.billing-erp-withholding-note-text {
    margin: 0;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--cloud-muted);
}

/* Variante "Aplica" — borde y status pill verdes. */
.billing-erp-withholding-tile--applies {
    border-color: color-mix(in srgb, #10b981 35%, var(--cloud-border));
    background: color-mix(in srgb, #10b981 5%, var(--cloud-surface));
}
.billing-erp-withholding-tile--applies .billing-erp-withholding-icon {
    background: color-mix(in srgb, #10b981 14%, transparent);
    color: #047857;
}
.billing-erp-withholding-tile--applies .billing-erp-withholding-status {
    background: #10b981;
    color: #fff;
}

/* Variante "No aplica" — neutra (default) con chip gris. */
.billing-erp-withholding-tile--none .billing-erp-withholding-status {
    background: color-mix(in srgb, var(--cloud-muted) 18%, var(--cloud-surface));
    color: var(--cloud-muted);
}

/* Dark mode */
[data-bs-theme="dark"] .billing-erp-withholding-tile {
    background: var(--cloud-surface-elev);
}
[data-bs-theme="dark"] .billing-erp-withholding-tile--applies {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .35);
}
[data-bs-theme="dark"] .billing-erp-withholding-tile--applies .billing-erp-withholding-icon {
    background: rgba(16, 185, 129, .2);
    color: #6ee7b7;
}
[data-bs-theme="dark"] .billing-erp-withholding-tile--none .billing-erp-withholding-status {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
}
[data-bs-theme="dark"] .billing-erp-withholding-tile--applies .billing-erp-withholding-rate-value {
    color: #6ee7b7;
}
[data-bs-theme="dark"] .billing-erp-withholding-note {
    background: rgba(0, 153, 255, .1);
    border-color: rgba(0, 153, 255, .3);
}
[data-bs-theme="dark"] .billing-erp-withholding-note > i {
    color: var(--brand-400, #38bdf8);
}

/* ---- Footer: notice (izquierda) + última actualización (derecha) ---- */
.billing-erp-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cloud-border);
}

.billing-erp-foot-notice {
    font-size: .76rem;
    color: var(--cloud-muted);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 60ch;
}
.billing-erp-foot-notice i {
    color: var(--cloud-primary);
    font-size: .85rem;
}

.billing-erp-foot-meta {
    font-size: .7rem;
    color: var(--cloud-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .8;
    white-space: nowrap;
}

/* ---- Estado vacío (cuando aún no llegó la sync desde el ERP) ---- */
.billing-erp-empty {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--cloud-muted) 6%, transparent);
    border-radius: 8px;
    color: var(--cloud-muted);
    font-size: .85rem;
    line-height: 1.45;
}
.billing-erp-empty i {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--cloud-primary);
    opacity: .7;
}
.billing-erp-empty strong {
    color: var(--cloud-text);
    font-weight: 600;
}

/* ---- Responsive: en mobile el header colapsa y el chip baja ---- */
@media (max-width: 480px) {
    .billing-erp { padding: .85rem .9rem .75rem; }
    .billing-erp-head {
        flex-wrap: wrap;
        padding-bottom: .65rem;
        margin-bottom: .65rem;
    }
    .billing-erp-title { font-size: .9rem; }
    .billing-erp-row {
        grid-template-columns: 1fr;
        gap: .5rem;
        padding: .45rem 0;
    }
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .billing-erp {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
    box-shadow: none;
}
[data-bs-theme="dark"] .billing-erp-head-icon {
    background: rgba(0, 153, 255, .18);
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-erp-lock {
    background: rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] .billing-erp-foot-notice i,
[data-bs-theme="dark"] .billing-erp-empty i {
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-erp-empty {
    background: rgba(255, 255, 255, .04);
}

/* =================================================================
 * Billing → Tarjeta "Correos para facturación electrónica" (writable).
 *
 * Mismo lenguaje visual que .billing-erp pero el contenido son pills
 * compactos en lugar de filas etiqueta/valor. El botón "Editar" abre
 * un modal (#billing-emails-modal) que es la única vía de edición.
 * ================================================================= */
.billing-emails {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1rem 1.15rem .9rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.billing-emails-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid var(--cloud-border);
}

.billing-emails-head-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1rem;
}

.billing-emails-head-text { flex: 1; min-width: 0; }

.billing-emails-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.005em;
}

.billing-emails-lead {
    margin: .2rem 0 0;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--cloud-muted);
}

.billing-emails-edit {
    flex-shrink: 0;
}

/* ---- Flash inline (success / error post-submit) ---- */
.billing-emails-flash {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    font-size: .85rem;
    line-height: 1.4;
    margin-bottom: .8rem;
}
.billing-emails-flash i { font-size: .95rem; margin-top: 1px; flex-shrink: 0; }
.billing-emails-flash--success {
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #047857;
}
.billing-emails-flash--success i { color: #10b981; }
.billing-emails-flash--error {
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #b91c1c;
}
.billing-emails-flash--error i { color: #dc2626; }

/* ---- Pills ---- */
.billing-emails-pills {
    list-style: none;
    /* margin-bottom propio: el footer usa `margin-top: auto` para pegarse
       al fondo del card, lo que anula su `margin-top` cuando las pills
       llenan el alto. Sin este margen las pills tocarían el hairline del
       footer. */
    margin: 0 0 .85rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.billing-emails-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
    color: var(--cloud-text);
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 18%, var(--cloud-border));
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    word-break: break-all;
}
.billing-emails-pill i {
    color: var(--cloud-primary);
    font-size: .8rem;
    flex-shrink: 0;
}

/* ---- Footer del card (count + readonly notice) ---- */
.billing-emails-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--cloud-border);
}

.billing-emails-count {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cloud-muted);
    opacity: .8;
}

.billing-emails-readonly {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: var(--cloud-muted);
    font-style: italic;
}
.billing-emails-readonly i {
    color: var(--cloud-primary);
    font-size: .85rem;
    font-style: normal;
}

/* ---- Empty state ---- */
.billing-emails-empty {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: color-mix(in srgb, var(--cloud-muted) 6%, transparent);
    border-radius: 8px;
}
.billing-emails-empty > i {
    flex-shrink: 0;
    font-size: 1.6rem;
    color: var(--cloud-primary);
    opacity: .7;
}
.billing-emails-empty-text { flex: 1; min-width: 0; }
.billing-emails-empty-title {
    margin: 0 0 .1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--cloud-text);
}
.billing-emails-empty-sub {
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--cloud-muted);
}

/* ---- Modal: lista dinámica de inputs ---- */
.billing-emails-modal-notice {
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--cloud-primary) 25%, transparent);
    background: color-mix(in srgb, var(--cloud-primary) 7%, transparent);
    color: var(--cloud-text);
    line-height: 1.45;
}
.billing-emails-modal-notice i {
    color: var(--cloud-primary);
}

.billing-emails-modal-rows {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .75rem;
}

.billing-emails-modal-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.billing-emails-modal-row-icon {
    flex-shrink: 0;
    color: var(--cloud-muted);
    font-size: .95rem;
    width: 18px;
    text-align: center;
}

.billing-emails-modal-row input[type="email"] {
    flex: 1;
    min-width: 0;
}

.billing-emails-modal-row input.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 .15rem rgba(220, 38, 38, .15);
}

.billing-emails-modal-remove {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--cloud-border);
    background: transparent;
    color: var(--cloud-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.billing-emails-modal-remove:hover {
    background: color-mix(in srgb, #dc2626 10%, transparent);
    border-color: color-mix(in srgb, #dc2626 35%, var(--cloud-border));
    color: #dc2626;
}

.billing-emails-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .25rem;
}

.billing-emails-modal-add {
    text-decoration: none;
    padding: .25rem .45rem;
    font-weight: 600;
    font-size: .85rem;
}
.billing-emails-modal-add:disabled {
    color: var(--cloud-muted);
    cursor: not-allowed;
    opacity: .6;
}

.billing-emails-modal-counter {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cloud-muted);
}

.billing-emails-modal-hint {
    color: var(--cloud-muted);
    font-style: italic;
    opacity: .85;
}

/* Mobile */
@media (max-width: 480px) {
    .billing-emails { padding: .85rem .9rem .75rem; }
    .billing-emails-head { flex-wrap: wrap; }
    .billing-emails-edit { width: 100%; }
    .billing-emails-modal-row { gap: .35rem; }
    .billing-emails-modal-row-icon { display: none; }
    .billing-emails-modal-remove { width: 36px; height: 36px; }
}

/* Dark mode */
[data-bs-theme="dark"] .billing-emails {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
    box-shadow: none;
}
[data-bs-theme="dark"] .billing-emails-head-icon {
    background: rgba(0, 153, 255, .18);
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-emails-pill {
    background: rgba(0, 153, 255, .12);
    border-color: rgba(0, 153, 255, .3);
}
[data-bs-theme="dark"] .billing-emails-pill i {
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-emails-readonly i {
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-emails-empty {
    background: rgba(255, 255, 255, .04);
}
[data-bs-theme="dark"] .billing-emails-empty > i {
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-emails-flash--success {
    background: rgba(16, 185, 129, .14);
    color: #34d399;
}
[data-bs-theme="dark"] .billing-emails-flash--error {
    background: rgba(220, 38, 38, .14);
    color: #f87171;
}
[data-bs-theme="dark"] .billing-emails-modal-notice {
    background: rgba(0, 153, 255, .12);
    border-color: rgba(0, 153, 255, .3);
    color: var(--cloud-text);
}
[data-bs-theme="dark"] .billing-emails-modal-remove {
    border-color: rgba(255, 255, 255, .12);
}
[data-bs-theme="dark"] .billing-emails-modal-remove:hover {
    background: rgba(220, 38, 38, .15);
    border-color: rgba(220, 38, 38, .45);
    color: #f87171;
}

/* =================================================================
 * Tarjeta "Alerta de saldo bajo" (.billing-lba) — SOLO prepago.
 * Comparte el lenguaje visual del card de correos; el cliente activa
 * un aviso por correo cuando su saldo baja de un umbral. Reusa
 * `.billing-emails-flash` para los mensajes post-submit.
 * ================================================================= */
.billing-lba {
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    padding: 1rem 1.15rem .9rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.billing-lba-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-bottom: .8rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid var(--cloud-border);
}

.billing-lba-head-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1rem;
}

.billing-lba-head-text { flex: 1; min-width: 0; }

.billing-lba-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.005em;
}

.billing-lba-lead {
    margin: .2rem 0 0;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--cloud-muted);
}

.billing-lba-edit { flex-shrink: 0; }

/* ---- Estado actual: franja de estado + grupos de destinos ---- */
.billing-lba-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Franja de estado: punto de color + estado + umbral */
.billing-lba-strip {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .85rem;
    border-radius: 9px;
    font-size: .84rem;
    line-height: 1.35;
}
.billing-lba-strip-text { color: var(--cloud-text); }
.billing-lba-strip-text strong { font-weight: 700; }
.billing-lba-strip-sep {
    color: var(--cloud-muted);
    margin: 0 .15rem;
}
.billing-lba-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.billing-lba-strip--on {
    background: color-mix(in srgb, #10b981 10%, transparent);
}
.billing-lba-strip--on .billing-lba-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px color-mix(in srgb, #10b981 22%, transparent);
}
.billing-lba-strip--off {
    background: color-mix(in srgb, var(--cloud-muted) 10%, transparent);
}
.billing-lba-strip--off .billing-lba-dot {
    background: var(--cloud-muted);
}

/* Grupos de destinos (Correos / Teléfonos) */
.billing-lba-groups {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.billing-lba-group-title {
    margin: 0 0 .45rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cloud-muted);
}

/* ---- Modal ---- */
.billing-lba-switch .form-check-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--cloud-text);
}

/* Mobile */
@media (max-width: 480px) {
    .billing-lba { padding: .85rem .9rem .75rem; }
    .billing-lba-head { flex-wrap: wrap; }
    .billing-lba-edit { width: 100%; }
}

/* Dark mode */
[data-bs-theme="dark"] .billing-lba {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
    box-shadow: none;
}
[data-bs-theme="dark"] .billing-lba-head-icon {
    background: rgba(0, 153, 255, .18);
    color: var(--brand-400, #38bdf8);
}
[data-bs-theme="dark"] .billing-lba-strip--on {
    background: rgba(16, 185, 129, .14);
}
[data-bs-theme="dark"] .billing-lba-strip--on .billing-lba-dot {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}

/* =================================================================
   Configuración → hub /settings (3 cards de resumen)
   ================================================================= */
.settings-page { width: 100%; }

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.settings-hero-info { min-width: 0; }

.settings-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .15rem 0;
    color: var(--cloud-text);
}

.settings-hero-sub {
    color: var(--cloud-muted);
    font-size: .85rem;
    margin: 0;
}

.settings-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
}

/* ---------- Card del hub: clickable completa ---------- */
.hub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    padding: 1rem 1.15rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hub-card:hover,
.hub-card:focus-visible {
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
    box-shadow: 0 6px 20px -8px rgba(0, 153, 255, .18);
    transform: translateY(-1px);
    color: inherit;
    outline: none;
}

.hub-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

.hub-card-icon-tag {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.hub-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.15;
}

.hub-card-sub {
    font-size: .78rem;
    color: var(--cloud-muted);
    margin: .1rem 0 0 0;
    line-height: 1.3;
}

/* ---------- Identidad (perfil) dentro del hub ---------- */
.hub-identity {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 0 .85rem;
    border-bottom: 1px dashed var(--cloud-border);
    margin-bottom: .85rem;
    min-width: 0;
}

.hub-identity-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--cloud-border);
    background: var(--cloud-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-identity-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-identity-initials {
    color: #ffffff;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.hub-identity-info { min-width: 0; flex: 1 1 auto; }

.hub-identity-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--cloud-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.hub-identity-meta {
    font-size: .72rem;
    color: var(--cloud-muted);
    margin-top: .1rem;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Score de seguridad ---------- */
.hub-score {
    margin-bottom: .85rem;
}

.hub-score-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.hub-score-label {
    font-size: .76rem;
    color: var(--cloud-muted);
    font-weight: 500;
}

.hub-score-value {
    font-size: .85rem;
    font-weight: 700;
    color: var(--cloud-text);
}

.hub-score-value.is-full { color: var(--cloud-success); }
.hub-score-value.is-good { color: var(--cloud-primary); }
.hub-score-value.is-warn { color: var(--cloud-warning); }
.hub-score-value.is-bad  { color: var(--cloud-danger);  }

.hub-score-bar {
    height: 6px;
    background: var(--cloud-border);
    border-radius: 999px;
    overflow: hidden;
}

.hub-score-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.hub-score-fill.is-full { background: var(--cloud-success); }
.hub-score-fill.is-good { background: var(--cloud-primary); }
.hub-score-fill.is-warn { background: var(--cloud-warning); }
.hub-score-fill.is-bad  { background: var(--cloud-danger);  }

/* ---------- Checklist genérico (perfil + seguridad + sesiones) ---------- */
.hub-checklist {
    list-style: none;
    margin: 0 0 .85rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.hub-checklist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .82rem;
    color: var(--cloud-text);
    line-height: 1.25;
}

.hub-checklist-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.hub-checklist-label > i { font-size: .9rem; color: var(--cloud-muted); }

.hub-checklist-aside {
    font-size: .76rem;
    flex-shrink: 0;
}

/* ---------- Stats de sesiones ---------- */
.hub-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    margin-bottom: .85rem;
}

.hub-stat {
    background: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
    border-radius: 10px;
    padding: .65rem .75rem;
    text-align: left;
}

.hub-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cloud-text);
    line-height: 1;
}

.hub-stat-label {
    font-size: .7rem;
    color: var(--cloud-muted);
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

/* ---------- CTA al pie ---------- */
.hub-card-cta {
    margin-top: auto;
    padding-top: .65rem;
    border-top: 1px solid var(--cloud-border);
    color: var(--cloud-primary);
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: gap .15s ease;
}

.hub-card:hover .hub-card-cta {
    gap: .55rem;
}

/* ---------- Modo oscuro ---------- */
[data-bs-theme="dark"] .settings-hero,
[data-bs-theme="dark"] .hub-card,
[data-bs-theme="dark"] .hub-identity-avatar {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .hub-stat {
    background: color-mix(in srgb, var(--cloud-primary) 14%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .hub-card-cta {
    border-top-color: var(--cloud-border);
}

[data-bs-theme="dark"] .hub-score-bar {
    background: var(--cloud-border);
}

/* =================================================================
   Barra de búsqueda global del topbar (Ctrl+K)
   ================================================================= */

/* Contenedor centrado en el topbar */
.topbar-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 1rem;
    min-width: 0;
}

/* Caja del input */
.topbar-search-box {
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 38px;
    padding: 0 .65rem 0 .85rem;
    background: color-mix(in srgb, var(--cloud-border) 25%, transparent);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: text;
}

.topbar-search.is-open .topbar-search-box,
.topbar-search-box:focus-within {
    background: var(--cloud-surface);
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .15);
}

.topbar-search-icon {
    color: var(--cloud-muted);
    font-size: .95rem;
    flex-shrink: 0;
}

.topbar-search-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: .88rem;
    color: var(--cloud-text);
    min-width: 0;
}

.topbar-search-input::placeholder {
    color: var(--cloud-muted);
    opacity: .85;
}

/* Indicador de teclado */
.topbar-search-kbd {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem;
    font-weight: 600;
    color: var(--cloud-muted);
    background: color-mix(in srgb, var(--cloud-border) 60%, var(--cloud-surface));
    border: 1px solid var(--cloud-border);
    border-radius: 5px;
    padding: .15rem .4rem;
    flex-shrink: 0;
    user-select: none;
    transition: opacity .15s ease;
}

.topbar-search.is-open .topbar-search-kbd,
.topbar-search-box:focus-within .topbar-search-kbd {
    opacity: 0;
}

/* ---------- Dropdown ---------- */
.search-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 1rem;
    right: 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    box-shadow:
        0 12px 32px -10px rgba(15, 23, 42, .25),
        0 4px 12px -4px rgba(15, 23, 42, .08);
    overflow: hidden;
    z-index: 1040;
    max-height: calc(100vh - var(--topbar-h) - 2rem);
    display: flex;
    flex-direction: column;
}

.search-section {
    padding: .35rem 0;
    border-bottom: 1px solid var(--cloud-border);
}

.search-section:last-of-type { border-bottom: 0; }

.search-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .85rem;
}

.search-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cloud-muted);
}

.search-section-clear {
    background: transparent;
    border: 0;
    color: var(--cloud-muted);
    font-size: .72rem;
    cursor: pointer;
    padding: .15rem .35rem;
    border-radius: 5px;
    transition: color .15s ease, background-color .15s ease;
}

.search-section-clear:hover {
    color: var(--cloud-danger);
    background: color-mix(in srgb, var(--cloud-danger) 8%, transparent);
}

/* Lista de items */
.search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.search-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    cursor: pointer;
    transition: background-color .12s ease;
    color: var(--cloud-text);
}

.search-item:hover,
.search-item.is-selected {
    background-color: color-mix(in srgb, var(--cloud-primary) 8%, transparent);
}

.search-item.is-selected {
    background-color: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
}

.search-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

.search-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.search-item-label {
    font-size: .87rem;
    font-weight: 600;
    color: var(--cloud-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item-label mark {
    background: color-mix(in srgb, var(--cloud-warning) 30%, transparent);
    color: inherit;
    padding: 0 .12em;
    border-radius: 3px;
}

.search-item-breadcrumb {
    font-size: .72rem;
    color: var(--cloud-muted);
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item-enter {
    font-size: .85rem;
    color: var(--cloud-muted);
    opacity: 0;
    transition: opacity .12s ease;
    flex-shrink: 0;
}

.search-item.is-selected .search-item-enter {
    opacity: 1;
    color: var(--cloud-primary);
}

/* Estado vacío */
.search-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 2rem 1rem;
    color: var(--cloud-muted);
    font-size: .88rem;
    flex-direction: column;
}

.search-empty i { font-size: 1.5rem; opacity: .6; }

/* ---------- Responsive: en mobile el search se vuelve más compacto ---------- */
@media (max-width: 767.98px) {
    .topbar-search {
        max-width: none;
        padding: 0 .5rem;
    }
    .topbar-search-input::placeholder {
        font-size: .8rem;
    }
    .topbar-search-kbd {
        display: none; /* el atajo no aplica en touch */
    }
    .search-dropdown {
        left: .5rem;
        right: .5rem;
    }
}

/* En pantallas muy pequeñas el placeholder se compacta */
@media (max-width: 575.98px) {
    .topbar-search-input::placeholder {
        content: 'Buscar...';
    }
}

/* ---------- Modo oscuro ---------- */
[data-bs-theme="dark"] .topbar-search-box {
    background: color-mix(in srgb, var(--cloud-border) 35%, transparent);
}

[data-bs-theme="dark"] .topbar-search.is-open .topbar-search-box,
[data-bs-theme="dark"] .topbar-search-box:focus-within {
    background: var(--cloud-surface-elev);
}

[data-bs-theme="dark"] .topbar-search-kbd {
    background: color-mix(in srgb, var(--cloud-border) 50%, var(--cloud-surface-elev));
}

[data-bs-theme="dark"] .search-dropdown {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

/* =================================================================
   Notificaciones descartables (dashboard, anuncios, etc.)
   ================================================================= */
.dismissable-notice {
    /* JS añade .is-visible cuando NO está descartada → animación de entrada */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.dismissable-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dismissable-notice.is-dismissing {
    opacity: 0;
    transform: translateY(-4px) scale(.99);
}

.dismissable-notice-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.15rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    position: relative;
}

.dismissable-notice-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    flex-shrink: 0;
}

.dismissable-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dismissable-notice-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
    margin: 0 0 .15rem 0;
    line-height: 1.25;
}

.dismissable-notice-sub {
    color: var(--cloud-muted);
    font-size: .85rem;
    margin: 0;
    line-height: 1.4;
}

/* Link "inline" dentro del sub: hereda color del texto, con subrayado discreto.
   Solo se vuelve azul al hover/focus para indicar que es clickable. */
.dismissable-notice-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--cloud-border);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.dismissable-notice-link:hover,
.dismissable-notice-link:focus-visible {
    color: var(--cloud-primary);
    text-decoration-color: var(--cloud-primary);
    outline: none;
}

.dismissable-notice-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--cloud-muted);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
    font-size: .95rem;
}

.dismissable-notice-close:hover,
.dismissable-notice-close:focus-visible {
    background: var(--cloud-hover);
    color: var(--cloud-text);
    outline: none;
}

.dismissable-notice-close:active {
    transform: scale(.92);
}

[data-bs-theme="dark"] .dismissable-notice-card {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

/* =================================================================
   Dark mode overrides
   ================================================================= */

[data-bs-theme="dark"] body {
    background-color: var(--cloud-bg);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .login-form-panel {
    background: var(--cloud-bg);
}

[data-bs-theme="dark"] .login-title {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .login-subtitle,
[data-bs-theme="dark"] .login-footer,
[data-bs-theme="dark"] .form-check-label {
    color: var(--cloud-muted) !important;
}

[data-bs-theme="dark"] .form-floating > .form-control {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .form-floating > .form-control:focus {
    background-color: var(--cloud-input-bg);
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 153, 255, .3);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .form-floating > .form-control::placeholder {
    color: transparent;
}

[data-bs-theme="dark"] .form-floating > label {
    color: var(--cloud-muted);
}

[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-bs-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--cloud-muted);
    background-color: transparent;
}

[data-bs-theme="dark"] .password-toggle {
    color: var(--cloud-muted);
}

[data-bs-theme="dark"] .password-toggle:hover,
[data-bs-theme="dark"] .password-toggle:focus-visible {
    color: var(--cloud-text);
    background-color: var(--cloud-hover);
}

[data-bs-theme="dark"] .divider {
    color: var(--cloud-muted);
}

[data-bs-theme="dark"] .divider::before,
[data-bs-theme="dark"] .divider::after {
    border-bottom-color: var(--cloud-divider);
}

[data-bs-theme="dark"] .btn-oauth {
    background: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .btn-oauth:hover,
[data-bs-theme="dark"] .btn-oauth:focus {
    background-color: #14365a;
    border-color: #1f4775;
    color: #f1f5f9;
}

/* App shell en modo oscuro */
[data-bs-theme="dark"] .topbar {
    background-color: var(--cloud-surface-elev);
    border-bottom-color: var(--cloud-border);
}

[data-bs-theme="dark"] .app-sidebar-inner {
    background-color: var(--cloud-surface-elev);
    border-right-color: var(--cloud-border);
}

[data-bs-theme="dark"] .app-sidebar-header {
    border-bottom-color: var(--cloud-border);
}

[data-bs-theme="dark"] .app-sidebar-title {
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .topbar-brand-sep {
    background: var(--cloud-border);
}

[data-bs-theme="dark"] .topbar-service {
    border-left-color: var(--cloud-border);
}

[data-bs-theme="dark"] .topbar-service-name {
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .app-sidebar-link {
    color: var(--cloud-muted);
}

[data-bs-theme="dark"] .app-sidebar-link:hover,
[data-bs-theme="dark"] .app-sidebar-link:focus-visible {
    color: var(--cloud-text);
}

/* El logo Hablame es azul: en modo oscuro lo invertimos a blanco para
   contraste sobre la barra oscura. */
[data-bs-theme="dark"] .topbar-brand-logo {
    filter: brightness(0) invert(1);
    opacity: .92;
}

[data-bs-theme="dark"] .card {
    background-color: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .card .text-muted {
    color: var(--cloud-muted) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--cloud-surface-elev);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--cloud-hover);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--cloud-border);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--cloud-text);
    border-color: var(--cloud-border);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--cloud-hover);
    color: var(--cloud-text);
    border-color: var(--cloud-muted);
}

/* =================================================================
   RESPONSIVE MÓVIL — topbar compacto + sidebar overlay + search full-screen.
   Breakpoint principal: <768px (igual que Bootstrap md).
   =================================================================
   Estrategia general:
   - .topbar-mobile-only  → display:none por defecto, visible solo en móvil.
   - .topbar-desktop-only → visible por defecto, oculto en móvil.
   - El sidebar pasa de "rail siempre visible" a "overlay bajo demanda".
   - El search desktop (input visible) se reemplaza por una lupa que abre
     un overlay full-screen.
   ================================================================= */

/* ---------- Visibility helpers ---------- */
.topbar-mobile-only { display: none !important; }

@media (max-width: 767.98px) {
    .topbar-mobile-only { display: inline-flex !important; }
    .topbar-desktop-only { display: none !important; }
}

/* ---------- Botón hamburguesa (móvil) ---------- */
.topbar-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--cloud-text);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.topbar-hamburger:hover,
.topbar-hamburger:focus-visible {
    background-color: var(--cloud-hover);
    outline: none;
}
.topbar-hamburger:focus-visible {
    box-shadow: 0 0 0 2px var(--cloud-primary);
}

/* ---------- Lupa móvil del topbar ---------- */
.topbar-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--cloud-text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.topbar-search-trigger:hover,
.topbar-search-trigger:focus-visible {
    background-color: var(--cloud-hover);
    outline: none;
}

/* ---------- Botón "atrás" del search overlay (móvil) ---------- */
.topbar-search-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-right: .25rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--cloud-text);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-search-close:hover { background: var(--cloud-hover); }

/* ---------- Topbar móvil ---------- */
@media (max-width: 767.98px) {
    .topbar {
        padding: 0 .5rem;
    }
    .topbar-left { gap: .25rem; }
    .topbar-right { gap: .25rem; }

    /* En móvil compactamos el padding del brand. El alto del logo lo
       hereda del default (45px). */
    .topbar-brand { padding: .25rem; gap: .4rem; }

    /* Search escondido por defecto en móvil. Lo abre la lupa. */
    .topbar-search { display: none; }

    /* ---------- Search overlay full-screen ---------- */
    .topbar-search.is-mobile-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1060;
        margin: 0;
        padding: 0;
        max-width: none;
        background: var(--cloud-surface);
    }
    .topbar-search.is-mobile-open .topbar-search-box {
        margin: .65rem;
        height: 44px;
        border-color: var(--cloud-border);
    }
    .topbar-search.is-mobile-open .topbar-search-input {
        font-size: 1rem; /* >= 16px evita el zoom auto de iOS Safari */
    }
    .topbar-search.is-mobile-open .topbar-search-close {
        display: inline-flex;
    }
    /* Dropdown del search en overlay: ocupa todo el alto restante */
    .topbar-search.is-mobile-open .search-dropdown {
        position: static;
        left: 0;
        right: 0;
        margin-top: 0;
        border: 0;
        border-top: 1px solid var(--cloud-border);
        border-radius: 0;
        box-shadow: none;
        max-height: calc(100vh - 60px);
    }
    /* Cuando el search overlay está abierto, lock del scroll del body */
    html.search-overlay-open,
    html.search-overlay-open body {
        overflow: hidden;
    }
}

/* ---------- Sidebar móvil: overlay bajo demanda ---------- */
@media (max-width: 767.98px) {
    /* Pin sin función en touch — se oculta. */
    .app-sidebar-pin { display: none !important; }

    /* Rail = 0px en móvil. El sidebar no ocupa espacio en el flujo. */
    html[data-sidebar-state="expanded"],
    html[data-sidebar-state="collapsed"],
    html[data-sidebar-state="mobile-open"] {
        --sidebar-w: 0px;
    }

    /* El parent .app-sidebar crea un stacking context (sticky + z-index 5).
       En móvil debe quedar POR ENCIMA del backdrop (z 1044), si no el inner
       con z 1045 queda atrapado dentro del contexto del parent y se renderiza
       al nivel 5 — debajo del backdrop, que tapa todo y bloquea taps. */
    .app-sidebar {
        z-index: 1046;
    }

    /* El panel interior se vuelve overlay fijo a la izquierda.
       Por defecto está oculto (translate -100%); con .mobile-open se desliza. */
    .app-sidebar-inner {
        position: fixed;
        left: 0;
        top: var(--topbar-h);
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 1; /* relativo al stacking context del parent */
        transform: translateX(-100%);
        transition: transform .25s ease, box-shadow .25s ease;
    }
    html[data-sidebar-state="mobile-open"] .app-sidebar-inner {
        transform: translateX(0);
        box-shadow: 8px 0 24px rgba(15, 23, 42, .25);
    }

    /* En móvil queremos que el panel SIEMPRE muestre los labels (ancho 280px).
       Sobreescribimos la regla de "collapsed" que lo achicaba a 64px. */
    [data-sidebar-state="collapsed"] .app-sidebar-inner,
    [data-sidebar-state="mobile-open"] .app-sidebar-inner {
        width: 280px;
        max-width: 85vw;
    }

    /* Backdrop (panel oscuro detrás del overlay) */
    .sidebar-backdrop {
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        background: rgba(15, 23, 42, .5);
        z-index: 1044;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    html[data-sidebar-state="mobile-open"] .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
        display: block;
    }
    /* Cuando el sidebar móvil está abierto, lock del scroll */
    html[data-sidebar-state="mobile-open"],
    html[data-sidebar-state="mobile-open"] body {
        overflow: hidden;
    }
}

/* En desktop el backdrop nunca se ve (defensa: por si quedó hidden=false) */
@media (min-width: 768px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

/* ---------- Sección "más opciones" del avatar dropdown (móvil) ---------- */
.user-menu-mobile-extras {
    /* topbar-mobile-only ya hace display:none por defecto y display:inline-flex
       en móvil. Pero esta sección es contenedor de items, no un botón:
       le forzamos display:block en móvil. */
}
@media (max-width: 767.98px) {
    .user-menu-mobile-extras.topbar-mobile-only {
        display: block !important;
    }
}

.user-menu-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cloud-muted);
    padding: .55rem .85rem .25rem;
}

/* =================================================================
   Variantes secundarias de items del dropdown del avatar
   ================================================================= */

/* Item destacado tipo CTA (ej. "Crear nueva organización").
   Mantiene el alto de los items normales pero gana acento azul. */
.user-menu-item-cta {
    color: var(--cloud-primary);
    font-weight: 600;
}

.user-menu-item-cta i {
    color: var(--cloud-primary);
}

.user-menu-item-cta:hover,
.user-menu-item-cta:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    color: var(--cloud-primary);
}

/* Item sutil (ej. "Ver todas mis organizaciones") — más tenue que el normal */
.user-menu-item-subtle {
    color: var(--cloud-muted);
    font-size: .82rem;
}

.user-menu-item-subtle i {
    color: var(--cloud-muted);
}

.user-menu-item-subtle:hover,
.user-menu-item-subtle:focus-visible {
    color: var(--cloud-primary);
}

.user-menu-item-subtle:hover i,
.user-menu-item-subtle:focus-visible i {
    color: var(--cloud-primary);
}

/* =================================================================
   /my-organizations — Hub "Mis organizaciones"

   Rediseño visual: grid de tiles tipo dashboard. Cada tile es un
   contenedor PRIMARIO (no anidado en una caja por categoría). Cada
   categoría tiene un heading simple (sin tarjeta) seguido del grid.
   Tile click → /my-organizations/{id} (vía Bootstrap stretched-link).
   El pill del ID tiene su propio z-index para no disparar la
   navegación cuando el usuario solo quiere copiarlo.
   ================================================================= */

/* ---- Toolbar superior: stats + CTA crear ---- */
.org-tiles-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .5rem 0 1.5rem;
}

.org-tiles-toolbar-stats {
    color: var(--cloud-muted, #6b7280);
    font-size: .9rem;
}

.org-tiles-toolbar-divider {
    color: var(--cloud-muted, #9ca3af);
    opacity: .5;
    margin: 0 .25rem;
}

/* ---- Grid responsive de tiles (un solo grid, sin secciones).
       Orden de los tiles: propietario → admin → miembro (definido en
       el render de la vista). Sin headers visuales — el rol se
       comunica con un chip de color dentro de cada tile. ---- */
.org-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* ---- Tile individual ---- */
.org-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem 1.25rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    min-height: 180px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    overflow: hidden;
}

.org-tile:hover {
    border-color: color-mix(in srgb, var(--cloud-primary) 40%, var(--cloud-border));
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .18);
    transform: translateY(-1px);
}

.org-tile.is-active {
    border-color: color-mix(in srgb, var(--cloud-success, #10b981) 50%, transparent);
    border-width: 2px;
    /* Compensa el ancho de borde para que el contenido no salte */
    padding: calc(1.5rem - 1px) calc(1.25rem - 1px) calc(1.25rem - 1px);
}

.org-tile.is-active:hover {
    border-color: var(--cloud-success, #10b981);
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--cloud-success, #10b981) 40%, transparent);
}

/* Stretched link: cubre todo el tile haciendo click navegable.
   Bootstrap ya tiene `.stretched-link` pero forzamos el z-index = 1
   para que quede ENCIMA del pill de ID. Sin embargo, el pill tiene
   z-index 2 (más abajo) para "pinchar por encima". */
.org-tile-link {
    z-index: 1;
}

/* ---- Badge "Activa" en la esquina superior derecha del tile ---- */
.org-tile-badge-active {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: color-mix(in srgb, var(--cloud-success, #10b981) 16%, transparent);
    color: var(--cloud-success, #10b981);
}

/* ---- Icono grande centrado en el tile ---- */
.org-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    color: var(--cloud-primary);
    font-size: 1.65rem;
    margin-bottom: .85rem;
    transition: background-color .15s ease, color .15s ease;
}

.org-tile.is-active .org-tile-icon {
    background: color-mix(in srgb, var(--cloud-success, #10b981) 14%, transparent);
    color: var(--cloud-success, #10b981);
}

.org-tile:hover .org-tile-icon {
    background: color-mix(in srgb, var(--cloud-primary) 16%, transparent);
}

.org-tile.is-active:hover .org-tile-icon {
    background: color-mix(in srgb, var(--cloud-success, #10b981) 20%, transparent);
}

/* ---- Nombre de la org ---- */
.org-tile-name {
    margin: 0 0 .55rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cloud-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-break: break-word;
}

/* ---- Chip de rol del usuario en esa org.
       Color distinto por rol para reconocimiento rápido:
       - Propietario: ámbar (sentido de "tuya / control")
       - Administrador: azul institucional (sentido de "gestión")
       - Miembro / otros: gris neutro (sentido de "membresía estándar")

       Se diferencia del badge "Activa" (verde, esquina superior)
       para no confundir "soy dueño" con "es la activa". ---- */
.org-tile-role {
    display: inline-flex;
    align-items: center;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.4;
    margin-bottom: .85rem;
    white-space: nowrap;
}

/* Multi-rol: contenedor cuando un miembro tiene N roles en la misma org.
   Las pills siguen siendo .org-tile-role y conservan el margin-bottom
   propio; el contenedor solo agrupa con wrap suave para que en mobile
   los chips bajen de línea sin desbordar el tile. */
.org-tile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

/* Cuando viven dentro del agrupador, sacamos el margin-bottom de cada
   pill — el contenedor maneja la separación con el bloque inferior. */
.org-tile-roles .org-tile-role {
    margin-bottom: 0;
}

.org-tile-roles + .user-menu-id-pill,
.org-tile-roles + .org-tile-id {
    margin-top: .85rem;
}

/* Propietario: ámbar (única distinción visual fuerte, porque
   "propietario" implica control total). */
.org-tile-role--owner {
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 16%, transparent);
    color: #b45309; /* warning-700 */
}

/* Administrador y Miembro comparten el mismo azul institucional.
   La distinción semántica queda en el label del chip; visualmente
   solo "soy propietario" vs "no soy propietario" se diferencia con
   color. Esto evita ruido cromático en el grid. */
.org-tile-role--admin,
.org-tile-role--member {
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary);
}

[data-bs-theme="dark"] .org-tile-role--owner {
    background: rgba(245, 158, 11, .18);
    color: #fbbf24;
}

[data-bs-theme="dark"] .org-tile-role--admin,
[data-bs-theme="dark"] .org-tile-role--member {
    background: rgba(0, 153, 255, .18);
    color: #66c2ff;
}

/* ---- Pill del Organización ID dentro del tile.
       z-index: 2 para quedar por encima del stretched-link (que es 1)
       y permitir que el handler de data-copy capture el click. ---- */
.org-tile-id {
    position: relative;
    z-index: 2;
    margin-top: auto; /* empuja el pill al fondo del tile flex column */
    /* Override del margin-top heredado del componente de dropdown */
    margin-top: auto !important;
    font-size: .7rem;
    max-width: 100%;
}

/* ---- Estado vacío ---- */
.org-tiles-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cloud-muted, #6b7280);
}

.org-tiles-empty-icon {
    font-size: 2.75rem;
    color: var(--cloud-primary);
    opacity: .55;
    display: block;
    margin-bottom: .75rem;
}

.org-tiles-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cloud-text);
    margin-bottom: .5rem;
}

.org-tiles-empty-sub {
    margin-bottom: 1.25rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
    .org-tiles-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
    .org-tile {
        min-height: 160px;
        padding: 1.25rem 1rem 1rem;
    }
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .org-tile {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .org-tile:hover {
    border-color: rgba(0, 153, 255, .45);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .org-tile.is-active {
    border-color: rgba(16, 185, 129, .55);
}

[data-bs-theme="dark"] .org-tile-icon {
    background: rgba(0, 153, 255, .14);
}

[data-bs-theme="dark"] .org-tile.is-active .org-tile-icon {
    background: rgba(16, 185, 129, .18);
}

/* =================================================================
   /my-organizations/invitations — Hub del INVITEE.

   Diseño: lista vertical de "invitation-card" (no grid, porque cada
   item necesita mostrar suficiente contexto: org + invitador + fecha +
   expiración + dos acciones). Cada card es un contenedor primario sin
   anidación, alineado con el resto del módulo.
   ================================================================= */

.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invitation-card {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.invitation-card:hover {
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .15);
}

.invitation-card-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.invitation-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1.35rem;
}

.invitation-card-info {
    min-width: 0;
    flex: 1 1 auto;
}

.invitation-card-org {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cloud-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.invitation-card-sub {
    color: var(--cloud-muted, #6b7280);
    font-size: .9rem;
    line-height: 1.4;
}

.invitation-card-sub strong {
    color: var(--cloud-text);
    font-weight: 600;
}

.invitation-card-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .82rem;
    color: var(--cloud-text);
}

.invitation-card-meta li {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.invitation-card-meta i {
    color: var(--cloud-muted, #9ca3af);
    flex-shrink: 0;
}

.invitation-card-meta code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* "Expira en menos de 2 días": amarillo de alerta sutil */
.invitation-expires-soon {
    color: var(--cloud-warning, #b45309);
    font-weight: 600;
}

.invitation-card-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: .75rem;
    border-top: 1px solid var(--cloud-border);
}

/* Estado vacío */
/* =================================================================
   Transferencias de propiedad — sección dentro de /my-organizations/invitations.

   Estilo ámbar/warning distintivo: estas propuestas implican
   responsabilidad financiera (facturación, cartera) y deben destacar
   visualmente sobre las invitaciones normales de membresía.
   ================================================================= */

.transfers-section {
    margin-bottom: 2rem;
}

.transfers-section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #92400e; /* warning-800 */
    letter-spacing: -0.01em;
}

.transfers-section-title > i {
    color: var(--cloud-warning, #f59e0b);
}

.transfers-section-intro {
    margin: 0 0 1rem;
    color: var(--cloud-muted, #6b7280);
    font-size: .88rem;
    line-height: 1.5;
    max-width: 760px;
}

.transfers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transfer-card {
    padding: 1.25rem 1.25rem 1rem;
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 5%, var(--cloud-surface));
    border: 1px solid color-mix(in srgb, var(--cloud-warning, #f59e0b) 40%, transparent);
    border-left: 4px solid var(--cloud-warning, #f59e0b);
    border-radius: 14px;
    transition: box-shadow .15s ease;
}

.transfer-card:hover {
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--cloud-warning, #f59e0b) 50%, transparent);
}

.transfer-card-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.transfer-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 20%, transparent);
    color: #b45309;
    font-size: 1.35rem;
}

.transfer-card-info {
    min-width: 0;
    flex: 1 1 auto;
}

.transfer-card-org {
    margin: 0 0 .25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cloud-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.transfer-card-sub {
    color: var(--cloud-muted, #6b7280);
    font-size: .9rem;
    line-height: 1.4;
}

.transfer-card-sub strong {
    color: var(--cloud-text);
    font-weight: 600;
}

.transfer-card-warning {
    margin: 0 0 1rem;
    padding: .65rem .85rem;
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cloud-warning, #f59e0b) 35%, transparent);
    border-radius: 8px;
    color: #92400e;
    font-size: .85rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.transfer-card-warning > i {
    color: var(--cloud-warning, #f59e0b);
    margin-top: .1rem;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .transfer-card {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .35);
}

[data-bs-theme="dark"] .transfer-card-icon {
    background: rgba(245, 158, 11, .22);
    color: #fbbf24;
}

[data-bs-theme="dark"] .transfer-card-warning {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .35);
    color: #fbbf24;
}

[data-bs-theme="dark"] .transfers-section-title {
    color: #fbbf24;
}

.invitations-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cloud-muted, #6b7280);
}

.invitations-empty-icon {
    font-size: 2.75rem;
    color: var(--cloud-primary);
    opacity: .55;
    display: block;
    margin-bottom: .75rem;
}

.invitations-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cloud-text);
    margin-bottom: .5rem;
}

.invitations-empty-sub {
    margin-bottom: 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive: en móvil los botones se apilan full-width para tap fácil */
@media (max-width: 575.98px) {
    .invitation-card-actions {
        flex-direction: column-reverse;
    }
    .invitation-card-actions form,
    .invitation-card-actions button {
        width: 100%;
    }
    .invitation-card-actions .btn {
        width: 100%;
    }
}

/* Dark mode */
[data-bs-theme="dark"] .invitation-card {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .invitation-card:hover {
    border-color: rgba(0, 153, 255, .4);
}

[data-bs-theme="dark"] .invitation-card-icon {
    background: rgba(0, 153, 255, .14);
}

[data-bs-theme="dark"] .invitation-card-actions {
    border-top-color: rgba(255, 255, 255, .08);
}

/* =================================================================
   /my-organizations — Página de bienvenida (welcome.php)

   Cuatro secciones educativas: conceptos básicos, roles, acciones y
   reglas. Diseño "long-form documentation": secciones numeradas con
   un círculo grande, separadas con espacio generoso, sin cajas
   anidadas. Mantenemos coherencia con el resto del módulo.
   ================================================================= */

.welcome-section {
    margin-bottom: 2.5rem;
}

.welcome-section:last-child {
    margin-bottom: 0;
}

.welcome-section-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cloud-text);
    letter-spacing: -0.01em;
}

.welcome-section-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary);
    font-size: .9rem;
    font-weight: 700;
}

.welcome-section-intro {
    margin: -.5rem 0 1.25rem;
    color: var(--cloud-muted, #6b7280);
    font-size: .95rem;
    line-height: 1.55;
    max-width: 720px;
}

/* ---- Sección 1: tarjetas de concepto (usuario vs organización) ---- */

.welcome-concept {
    height: 100%;
    padding: 1.5rem 1.25rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 14px;
    text-align: left;
}

.welcome-concept-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.5rem;
    margin-bottom: .85rem;
}

.welcome-concept-icon--user {
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
}

.welcome-concept-icon--org {
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 16%, transparent);
    color: #b45309;
}

.welcome-concept-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cloud-text);
}

.welcome-concept-text {
    margin: 0;
    color: var(--cloud-muted, #6b7280);
    font-size: .9rem;
    line-height: 1.55;
}

.welcome-callout {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
    border-left: 3px solid var(--cloud-primary);
    border-radius: 8px;
    color: var(--cloud-text);
    font-size: .9rem;
    line-height: 1.55;
}

.welcome-callout > i {
    color: var(--cloud-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* ---- Sección 2: grid de roles ---- */

.welcome-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.welcome-role-card {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-top: 3px solid var(--cloud-primary);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.welcome-role-card:hover {
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .15);
}

/* Acento superior por rol */
.welcome-role-card--owner    { border-top-color: var(--cloud-warning, #f59e0b); }
.welcome-role-card--admin    { border-top-color: var(--cloud-primary); }
.welcome-role-card--operator { border-top-color: #8b5cf6; }
.welcome-role-card--billing  { border-top-color: #10b981; }
.welcome-role-card--developer{ border-top-color: #06b6d4; }
.welcome-role-card--viewer   { border-top-color: var(--cloud-muted, #6b7280); }

.welcome-role-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}

.welcome-role-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-text) 6%, transparent);
    color: var(--cloud-text);
    font-size: 1.15rem;
}

.welcome-role-card--owner .welcome-role-icon {
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 14%, transparent);
    color: #b45309;
}

.welcome-role-card--admin .welcome-role-icon {
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary);
}

.welcome-role-card--operator .welcome-role-icon { background: rgba(139, 92, 246, .14); color: #7c3aed; }
.welcome-role-card--billing .welcome-role-icon  { background: rgba(16, 185, 129, .14); color: #047857; }
.welcome-role-card--developer .welcome-role-icon{ background: rgba(6, 182, 212, .14);  color: #0e7490; }
.welcome-role-card--viewer .welcome-role-icon   {
    background: color-mix(in srgb, var(--cloud-muted, #6b7280) 12%, transparent);
    color: var(--cloud-muted, #6b7280);
}

.welcome-role-name {
    margin: 0 0 .15rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cloud-text);
}

.welcome-role-tagline {
    margin: 0;
    color: var(--cloud-muted, #6b7280);
    font-size: .8rem;
}

.welcome-role-can {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    color: var(--cloud-text);
    font-size: .85rem;
    line-height: 1.45;
}

.welcome-role-can li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.welcome-role-can i {
    color: var(--cloud-success, #10b981);
    margin-top: .15rem;
    flex-shrink: 0;
}

/* ---- Sección 3: acciones ---- */

.welcome-actions {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.welcome-action {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    transition: border-color .15s ease;
}

.welcome-action:hover {
    border-color: color-mix(in srgb, var(--cloud-primary) 35%, var(--cloud-border));
}

.welcome-action-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 10%, transparent);
    color: var(--cloud-primary);
    font-size: 1.15rem;
}

.welcome-action-body {
    min-width: 0;
}

.welcome-action-title {
    margin: 0 0 .25rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--cloud-text);
    letter-spacing: -0.005em;
}

.welcome-action-text {
    margin: 0;
    font-size: .85rem;
    color: var(--cloud-muted, #6b7280);
    line-height: 1.5;
}

.welcome-action-cta {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--cloud-primary);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.welcome-action-cta:hover {
    text-decoration: underline;
}

.welcome-action-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--cloud-warning, #f59e0b);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    margin-left: .35rem;
}

/* ---- Sección 4: reglas importantes ---- */

.welcome-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.welcome-rules li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.25rem;
    background: var(--cloud-surface);
    border: 1px solid var(--cloud-border);
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--cloud-text);
}

.welcome-rules li > i {
    color: var(--cloud-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: .15rem;
}

.welcome-rules li strong {
    color: var(--cloud-text);
    font-weight: 600;
}

/* ---- Responsive ---- */

@media (max-width: 575.98px) {
    .welcome-roles-grid {
        grid-template-columns: 1fr;
    }
    .welcome-action {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        row-gap: .5rem;
    }
    .welcome-action-cta {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

/* ---- Dark mode ---- */

[data-bs-theme="dark"] .welcome-concept,
[data-bs-theme="dark"] .welcome-role-card,
[data-bs-theme="dark"] .welcome-action,
[data-bs-theme="dark"] .welcome-rules li {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .welcome-role-card {
    border-top-width: 3px; /* preserva el acento superior */
}

[data-bs-theme="dark"] .welcome-action:hover {
    border-color: rgba(0, 153, 255, .4);
}

[data-bs-theme="dark"] .welcome-callout {
    background: rgba(0, 153, 255, .08);
}

[data-bs-theme="dark"] .welcome-section-number {
    background: rgba(0, 153, 255, .18);
}


/* =================================================================
   Pill variantes para razón de deshabilitación en /settings/members
   ================================================================= */

/* =================================================================
   Apps-launcher: secciones múltiples (Mi cuenta + Servicios)
   ================================================================= */

.apps-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cloud-muted);
    padding: .25rem .25rem .5rem;
    margin: 0;
}

.apps-divider {
    border: 0;
    border-top: 1px solid var(--cloud-border);
    margin: .65rem 0;
    opacity: 1;
}

/* La sección "Mi cuenta" tiene un grid más compacto que los servicios
   (es típicamente un solo card por ahora — "Mis organizaciones"). */
.apps-grid-account .app-card {
    /* Mismo look que las app-card existentes pero ancho completo cuando
       hay un solo item para no dejar espacio raro. */
}

/* =================================================================
   Switcher de organización (modal del dropdown del avatar)
   ================================================================= */

.org-switcher-search {
    position: relative;
    padding: 1rem 1.25rem 0.5rem;
    border-bottom: 1px solid var(--cloud-border);
}

.org-switcher-search-icon {
    position: absolute;
    left: 1.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cloud-muted);
    font-size: .9rem;
    pointer-events: none;
}

.org-switcher-search-input {
    width: 100%;
    padding: .55rem .85rem .55rem 2.25rem;
    border: 1px solid var(--cloud-border);
    border-radius: 8px;
    font-size: .9rem;
    color: var(--cloud-text);
    background: var(--cloud-surface);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.org-switcher-search-input:focus {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cloud-primary) 14%, transparent);
}

.org-switcher-list {
    list-style: none;
    margin: 0;
    padding: .5rem;
    max-height: 50vh;
    overflow-y: auto;
}

.org-switcher-item {
    margin: 0;
}

.org-switcher-item.is-active .org-switcher-trigger {
    background: color-mix(in srgb, var(--cloud-success, #10b981) 6%, transparent);
    cursor: default;
}

.org-switcher-trigger {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .7rem .85rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.org-switcher-trigger:hover,
.org-switcher-trigger:focus-visible {
    background: color-mix(in srgb, var(--cloud-primary) 6%, transparent);
    border-color: color-mix(in srgb, var(--cloud-primary) 18%, transparent);
    outline: none;
}

.org-switcher-item.is-active .org-switcher-trigger:hover {
    /* Cuenta activa NO reacciona al hover */
    background: color-mix(in srgb, var(--cloud-success, #10b981) 6%, transparent);
    border-color: transparent;
}

.org-switcher-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--cloud-primary) 12%, transparent);
    color: var(--cloud-primary);
    font-size: 1rem;
}

.org-switcher-item.is-active .org-switcher-icon {
    background: color-mix(in srgb, var(--cloud-success, #10b981) 14%, transparent);
    color: var(--cloud-success, #10b981);
    font-size: 1.1rem;
}

.org-switcher-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.org-switcher-name {
    font-weight: 600;
    color: var(--cloud-text);
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switcher-meta {
    font-size: .75rem;
    color: var(--cloud-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switcher-meta code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
}

.org-switcher-go {
    color: var(--cloud-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: .5;
    transition: opacity .15s ease, color .15s ease;
}

.org-switcher-trigger:hover .org-switcher-go,
.org-switcher-trigger:focus-visible .org-switcher-go {
    opacity: 1;
    color: var(--cloud-primary);
}

.org-switcher-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--cloud-muted);
    font-size: .85rem;
}

.org-switcher-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .5rem;
    opacity: .5;
}

.org-switcher-footer {
    /* Alineamos a la derecha: el footer ya solo contiene un CTA
       ("Gestionar mis organizaciones"). flex-end mantiene la
       convención de los modales Bootstrap (acción a la derecha). */
    justify-content: flex-end !important;
    gap: .5rem;
    flex-wrap: wrap;
}

[data-bs-theme="dark"] .org-switcher-search-input {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: var(--cloud-text);
}

[data-bs-theme="dark"] .org-switcher-trigger:hover,
[data-bs-theme="dark"] .org-switcher-trigger:focus-visible {
    background: rgba(0, 153, 255, .12);
    border-color: rgba(0, 153, 255, .3);
}

[data-bs-theme="dark"] .org-switcher-icon {
    background: rgba(0, 153, 255, .18);
}

[data-bs-theme="dark"] .org-switcher-item.is-active .org-switcher-icon {
    background: rgba(16, 185, 129, .18);
}

/* Naranja: el usuario abandonó voluntariamente la organización */
.contacts-type-pill-warn {
    background: color-mix(in srgb, var(--cloud-warning, #f59e0b) 16%, transparent) !important;
    color: var(--cloud-warning, #b45309) !important;
}

/* Gris neutro: deshabilitado por un admin (vs abandono voluntario) */
.contacts-type-pill-muted {
    background: rgba(0, 0, 0, .08) !important;
    color: var(--cloud-muted, #6b7280) !important;
}

[data-bs-theme="dark"] .contacts-type-pill-muted {
    background: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .6) !important;
}

/* =================================================================
 * confirm-action modal — modal genérico de confirmación de acciones.
 *
 * Diseño: header con un icono circular "halo" al lado del título que
 * cambia de color según la variante de la acción:
 *   - danger  → rojo  (default; acciones destructivas: eliminar, abandonar)
 *   - warning → ámbar (acciones reversibles pero sensibles)
 *   - primary → azul  (confirmaciones positivas: transferir, aceptar)
 *
 * El JS (`public/assets/js/confirm-action.js`) intercambia las clases
 * `.confirm-modal-icon-{variant}` para teñir el aro y `btn-{variant}`
 * para el botón de aceptar.
 * ================================================================= */
.confirm-modal-header {
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid var(--cloud-border);
}

.confirm-modal-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}

.confirm-modal-icon-danger {
    background: color-mix(in srgb, #dc2626 12%, transparent);
    color: #dc2626;
}
.confirm-modal-icon-warning {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #b45309;
}
.confirm-modal-icon-primary {
    background: color-mix(in srgb, var(--cloud-primary) 14%, transparent);
    color: var(--cloud-primary);
}

#confirm-action-modal .modal-title {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cloud-text);
}

#confirm-action-modal .modal-body p {
    color: var(--cloud-muted);
    line-height: 1.5;
}

[data-bs-theme="dark"] .confirm-modal-header {
    border-bottom-color: var(--cloud-border);
}
[data-bs-theme="dark"] .confirm-modal-icon-danger {
    background: rgba(248, 113, 113, .18);
    color: #fca5a5;
}
[data-bs-theme="dark"] .confirm-modal-icon-warning {
    background: rgba(251, 191, 36, .18);
    color: #fcd34d;
}
[data-bs-theme="dark"] .confirm-modal-icon-primary {
    background: rgba(0, 153, 255, .18);
    color: var(--brand-400, #38bdf8);
}


/* ============================================================================
 * Componente de listado de Facturación — `.blist-*`
 * Tabla con búsqueda, filtro de estado (checkboxes multi-selección),
 * paginación y exportación a Excel. Lo usan los submenús "Facturas" y
 * "Notas crédito". El JS vive en public/assets/js/billing-list.js
 * ========================================================================== */

/* ----- Toolbar: búsqueda + filtro + exportar ----- */
.blist-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin: .35rem 0 1rem;
}
.blist-search { position: relative; flex: 1 1 240px; min-width: 0; }
.blist-search > i {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--cloud-muted); font-size: .9rem; pointer-events: none;
}
.blist-search input {
    width: 100%; padding: .5rem .7rem .5rem 2.1rem;
    border: 1px solid var(--cloud-border); border-radius: 9px;
    background: var(--cloud-surface-elev, #fff); color: var(--cloud-text);
    font-size: .87rem;
}
.blist-search input:focus {
    outline: none; border-color: var(--cloud-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .15);
}

/* ----- Dropdown de estado (checkboxes) ----- */
.blist-dropdown { position: relative; flex: 0 0 auto; }
.blist-dropdown-trigger {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .8rem; min-width: 190px;
    border: 1px solid var(--cloud-border); border-radius: 9px;
    background: var(--cloud-surface-elev, #fff); color: var(--cloud-text);
    font-size: .87rem; cursor: pointer; text-align: left;
}
.blist-dropdown-trigger:hover { border-color: var(--cloud-primary); }
.blist-dropdown.is-open .blist-dropdown-trigger {
    border-color: var(--cloud-primary);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, .15);
}
.blist-dropdown-trigger > span { flex: 1; min-width: 0; }
.blist-dropdown-caret {
    flex-shrink: 0; color: var(--cloud-muted); font-size: .8rem;
    transition: transform .15s ease;
}
.blist-dropdown.is-open .blist-dropdown-caret { transform: rotate(180deg); }
.blist-dropdown-menu {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
    min-width: 100%; padding: .35rem;
    border: 1px solid var(--cloud-border); border-radius: 10px;
    background: var(--cloud-surface-elev, #fff);
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .25);
}
.blist-dropdown-opt {
    display: flex; align-items: center; gap: .5rem; margin: 0;
    padding: .4rem .5rem; border-radius: 7px;
    font-size: .85rem; color: var(--cloud-text); white-space: nowrap; cursor: pointer;
}
.blist-dropdown-opt:hover { background: var(--cloud-surface, #f5f7fa); }
.blist-dropdown-opt input { cursor: pointer; }

.blist-export { flex: 0 0 auto; white-space: nowrap; }
.blist-export i { color: #1d6f42; }

/* ----- Tabla ----- */
.blist-table-wrap { overflow-x: auto; }
.blist-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.blist-table thead th {
    text-align: left; font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .03em; color: var(--cloud-muted);
    padding: .55rem .7rem; border-bottom: 1px solid var(--cloud-border);
    white-space: nowrap;
}
.blist-table tbody td {
    padding: .6rem .7rem; color: var(--cloud-text);
    border-bottom: 1px solid color-mix(in srgb, var(--cloud-border) 55%, transparent);
    vertical-align: middle;
}
.blist-table tbody tr:hover td {
    background: color-mix(in srgb, var(--cloud-primary) 4%, transparent);
}
.blist-th-num, .blist-td-num {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.blist-td-strong { font-weight: 600; }
.blist-row-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
}

/* ----- Sin resultados ----- */
.blist-noresults { text-align: center; padding: 2rem 1rem; color: var(--cloud-muted); }
.blist-noresults i { font-size: 2rem; opacity: .4; display: block; margin-bottom: .5rem; }
.blist-noresults p { margin: 0; font-size: .88rem; }

/* ----- Paginador ----- */
.blist-pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    margin-top: 1rem; font-size: .8rem; color: var(--cloud-muted);
}
.blist-pager-size { display: flex; align-items: center; gap: .4rem; margin: 0; }
.blist-pager-size select {
    padding: .25rem 1.6rem .25rem .5rem; border-radius: 7px;
    border: 1px solid var(--cloud-border);
    background: var(--cloud-surface-elev, #fff); color: var(--cloud-text);
    font-size: .8rem;
}
.blist-pager-info { flex: 1; min-width: 0; }
.blist-pager-nav { display: flex; align-items: center; gap: .35rem; }
.blist-pager-btn {
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--cloud-border);
    background: var(--cloud-surface-elev, #fff); color: var(--cloud-text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color .14s ease, color .14s ease;
}
.blist-pager-btn:hover:not(:disabled) { border-color: var(--cloud-primary); color: var(--cloud-primary); }
.blist-pager-btn:disabled { opacity: .4; cursor: default; }
.blist-pager-page {
    font-weight: 700; color: var(--cloud-text); min-width: 1.5rem; text-align: center;
}

@media (max-width: 640px) {
    .blist-search, .blist-dropdown, .blist-export { flex: 1 1 100%; }
    .blist-dropdown-trigger { width: 100%; }
}

/* =================================================================
 * Skeleton "soft" — pulsa entre dos grises CLAROS en vez del gris
 * medio/oscuro por defecto de Bootstrap. Se usa como modifier sobre
 * `.placeholder-glow`:
 *     <div class="placeholder-glow placeholder-soft">…</div>
 * Sobreescribe `background-color` y `opacity` para que el "currentColor"
 * heredado del texto no marque la barra como gris medio, y reemplaza la
 * animación nativa por una que titila entre dos gris-200/gris-100. En
 * modo oscuro pulsa entre dos grises oscuros pero distintos para que el
 * efecto siga siendo visible sobre la superficie.
 * ================================================================= */
.placeholder-soft .placeholder {
    background-color: #e5e7eb;
    opacity: 1;
    animation: cloud-skeleton-pulse 1.8s ease-in-out infinite;
}
[data-bs-theme="dark"] .placeholder-soft .placeholder {
    background-color: #2a3441;
    animation-name: cloud-skeleton-pulse-dark;
}
@keyframes cloud-skeleton-pulse {
    0%, 100% { background-color: #e5e7eb; }
    50%      { background-color: #f3f4f6; }
}
@keyframes cloud-skeleton-pulse-dark {
    0%, 100% { background-color: #2a3441; }
    50%      { background-color: #36404e; }
}