/* ==========================================================================
   Agent CRM · Sistema de diseño
   Monocromo premium · Outfit (display) + Manrope (interfaz)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tipografía · Google Fonts auto-hospedadas
   Se sirven desde el propio dominio porque la CSP fija font-src 'self'
   y style-src 'self': el CDN de Google quedaría bloqueado.
   Ambas son fuentes variables (300–600) en una sola petición por subconjunto.
   Outfit sustituye a Lufga; Manrope sustituye a Aeonik.
   Licencia: SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* Escala monocroma */
    --ink-900: #010101;
    --ink-800: #1c1c1c;
    --ink-700: #434343;
    --ink-600: #5b5b5b;
    --ink-500: #767676;
    --ink-400: #9b9b9b;
    --ink-300: #c4c4c4;
    --line-strong: #dcdcdc;
    --line: #e5e5e5;
    --line-soft: #eeeeee;
    --surface: #ffffff;
    --surface-soft: #f6f6f6;
    --surface-sunken: #f1f1f1;
    --canvas: #f4f4f4;

    /* Semánticos: usados con extrema moderación */
    --positive: #168150;
    --positive-soft: #ecf7ed;
    --caution: #8a5a00;
    --caution-soft: #fff4e0;
    --critical: #b3261e;
    --critical-soft: #fdf1f0;

    /* Acentos funcionales. Regla vinculante de contraste:
       el valor crudo es PIGMENTO (puntos, bordes, rellenos, fondos) y jamás
       texto; la variante -ink es la única tinta de texto (AA sobre claro).
       Un significado por color: azul = nuevo/sin leer/actividad de la IA;
       ámbar = requiere tu acción y aún no venció; rojo = pérdida o fallo;
       verde = confirmado/operando/dinero; negro = posición y acción. */
    --info: #3783ff;
    --info-ink: #1e63d0;
    --info-soft: #eef4ff;
    --attention: #ffaa0a;
    --attention-ink: var(--caution);
    --attention-soft: var(--caution-soft);
    --confirm: #29a22d;

    /* Enlazados al tema de marca en runtime (/branding/theme.css) */
    --accent: var(--ink-900);
    --highlight: var(--surface-soft);

    /* Alias heredados: mantienen compatibilidad con vistas existentes */
    --ink: var(--ink-800);
    --muted: var(--ink-500);
    --surface-strong: var(--surface);
    --accent-dark: var(--ink-900);
    --danger: var(--critical);
    --danger-soft: var(--critical-soft);
    --warning: var(--caution);
    --warning-soft: var(--caution-soft);
    --success: var(--positive);
    --success-soft: var(--positive-soft);
    --focus: var(--ink-900);

    /* Radios */
    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 28px;
    --r-2xl: 34px;
    --r-pill: 999px;

    /* Sombras: difusas, casi imperceptibles */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.035), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-ink: 0 8px 24px rgba(1, 1, 1, 0.18);
    --shadow-ink-lg: 0 14px 36px rgba(1, 1, 1, 0.24);
    --shadow: var(--shadow-md);
    --shadow-soft: var(--shadow-sm);

    /* Tipografía */
    --font-display: "Outfit", "Lufga", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-sans: "Manrope", "Aeonik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

    /* Movimiento */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 380ms;

    /* Métricas del armazón */
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 88px;
    --topbar-h: 76px;
    --shell-gap: 22px;
    --dock-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    color: var(--ink-800);
    background: var(--canvas);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.028em;
    color: var(--ink-900);
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 500; }
h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
h3 { font-size: 1.075rem; }
h4 { font-size: 0.975rem; font-weight: 500; }
h5, h6 { font-size: 0.875rem; font-weight: 500; }

p { margin: 0; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

img, svg { display: block; max-width: 100%; }

hr {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: var(--line);
}

::selection {
    background: var(--ink-900);
    color: var(--surface);
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

:where(button, a, input, select, textarea, summary):focus:not(:focus-visible) {
    outline: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Barras de scroll discretas */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Iconografía
   -------------------------------------------------------------------------- */

svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   4. Armazón de la aplicación
   -------------------------------------------------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
}

.app-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.page-shell {
    width: 100%;
    max-width: 1420px;
    flex: 1;
    padding: 8px 34px 46px;
    margin-inline: auto;
    animation: shell-enter var(--t-slow) var(--ease-out) both;
}

@keyframes shell-enter {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: none; }
}

body.is-guest .app-shell { display: block; }
body.is-guest .page-shell { max-width: 1180px; padding-top: 34px; }

/* --------------------------------------------------------------------------
   5. Sidebar
   -------------------------------------------------------------------------- */

.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh;
    flex: 0 0 var(--sidebar-w);
    flex-direction: column;
    padding: 26px 18px 22px;
    background: var(--surface);
    border-right: 1px solid var(--line-soft);
    transition: width var(--t-slow) var(--ease-out), flex-basis var(--t-slow) var(--ease-out), padding var(--t-slow) var(--ease-out);
}

body.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-w-collapsed);
    flex-basis: var(--sidebar-w-collapsed);
    padding-inline: 16px;
}

.app-sidebar__head {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 24px;
    padding-inline: 6px;
}

body.sidebar-collapsed .app-sidebar__head {
    flex-direction: column;
    gap: 18px;
    padding-inline: 0;
}

/* Marca ------------------------------------------------------------------- */

.brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: -0.038em;
    color: var(--ink-900);
}

.brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: 11px;
    transition: transform var(--t-base) var(--ease-spring);
}

.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }

.brand-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    object-fit: contain;
    background: var(--surface);
    border-radius: 11px;
}

.brand-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity var(--t-base) var(--ease-out);
}

/* Acotado al sidebar: la marca del topbar de invitado debe seguir visible. */
body.sidebar-collapsed .app-sidebar .brand-name { display: none; }

/* Botón de colapso -------------------------------------------------------- */

.sidebar-toggle {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    place-items: center;
    color: var(--ink-500);
    background: var(--surface-soft);
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}

.sidebar-toggle:hover {
    color: var(--ink-900);
    background: var(--line);
    transform: scale(1.07);
}

.sidebar-toggle:active { transform: scale(0.94); }
.sidebar-toggle svg { width: 17px; height: 17px; transition: transform var(--t-slow) var(--ease-out); }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Navegación -------------------------------------------------------------- */

.app-sidebar__nav {
    position: relative;
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
    margin-inline: -4px;
    padding-inline: 4px;

    /* Difumina el corte cuando la lista desborda, en vez de truncar en seco. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

.nav-section-label {
    padding: 13px 14px 5px;
    font-size: 0.655rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-400);
    transition: opacity var(--t-base) var(--ease-out);
}

.app-sidebar__nav > .nav-section-label:first-child { padding-top: 0; }

/* Colapsado, el rótulo del grupo se convierte en un filete de 1px.
   El relleno se sustituye por margen: si no, el fondo pinta un bloque. */
body.sidebar-collapsed .nav-section-label {
    height: 1px;
    padding: 0;
    margin: 12px 14px;
    overflow: hidden;
    color: transparent;
    background: var(--line);
}

body.sidebar-collapsed .nav-section-label:first-child { margin-top: 0; }

/* Densidad ajustada para que los 13 accesos quepan sin scroll interno en
   una pantalla de 900px de alto. */
.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 16px 5px 5px;
    font-size: 0.905rem;
    font-weight: 500;
    color: var(--ink-700);
    border-radius: var(--r-pill);
    isolation: isolate;
    transition: color var(--t-base) var(--ease-out);
}

/* Relleno del estado activo/hover: sólo se funde, nunca crece. */
.nav-link::before {
    position: absolute;
    z-index: -1;
    content: "";
    inset: 0;
    background: var(--surface-soft);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}

.nav-link:hover { color: var(--ink-900); }
.nav-link:hover::before { opacity: 1; }

.nav-link[aria-current="page"] {
    color: var(--surface);
}

.nav-link[aria-current="page"]::before {
    background: var(--ink-900);
    opacity: 1;
    box-shadow: var(--shadow-ink);
}

/* Indicador deslizante ------------------------------------------------------
   Una sola píldora recorre el menú en vez de repintarse en cada enlace. La
   instala JS; sin él, el relleno ::before de arriba sigue marcando la sección
   activa, así que la navegación nunca queda sin estado visible. */
.app-sidebar__nav--sliding .nav-link[aria-current="page"]::before { opacity: 0; }

.nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--ink-900);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-ink);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
    will-change: transform;
}

.nav-indicator.is-visible { opacity: 1; }

.nav-link__icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--ink-700);
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
}

.nav-link:hover .nav-link__icon { background: var(--surface); transform: scale(1.05); }

.nav-link[aria-current="page"] .nav-link__icon {
    color: var(--ink-900);
    background: var(--surface);
}

.nav-link__icon svg { width: 18px; height: 18px; }

.nav-link__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity var(--t-fast) var(--ease-out);
}

body.sidebar-collapsed .nav-link {
    justify-content: center;
    padding: 7px;
}

body.sidebar-collapsed .nav-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
}

/* Tooltip del sidebar colapsado */
body.sidebar-collapsed .nav-link::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    z-index: 60;
    padding: 7px 13px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-xs);
    box-shadow: var(--shadow-ink);
    content: attr(data-label);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-8px, -50%, 0);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

body.sidebar-collapsed .nav-link:hover::after,
body.sidebar-collapsed .nav-link:focus-visible::after {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}

/* Pie del sidebar --------------------------------------------------------- */

.app-sidebar__foot {
    padding-top: 16px;
    margin-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.session-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--r-lg);
    transition: background var(--t-base) var(--ease-out);
}

.session-menu:hover { background: var(--surface-soft); }

body.sidebar-collapsed .session-menu {
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.session-user {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 11px;
}

.session-user__avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-pill);
}

.session-user__copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

body.sidebar-collapsed .session-user__copy { display: none; }

.session-user__name {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-900);
}

.session-user__email {
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-500);
}

.logout-form { display: flex; }

.session-logout {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    place-items: center;
    color: var(--ink-500);
    background: transparent;
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}

.session-logout:hover {
    color: var(--critical);
    background: var(--critical-soft);
    transform: scale(1.07);
}

.session-logout svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   6. Barra superior
   -------------------------------------------------------------------------- */

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    min-height: var(--topbar-h);
    align-items: center;
    gap: 16px;
    padding: 14px 34px;
    background: color-mix(in srgb, var(--canvas) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    transition: box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}

.app-topbar.is-stuck {
    background: color-mix(in srgb, var(--canvas) 94%, transparent);
    box-shadow: 0 1px 0 var(--line-soft), var(--shadow-sm);
}

.app-topbar__lead {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 13px;
}

.app-topbar__title {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-900);
}

.app-topbar__actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Saludo compacto: patrón móvil. En escritorio la identidad ya vive en el
   pie del sidebar, así que aquí se oculta para no duplicarla. */
.topbar-greeting {
    display: none;
    align-items: center;
    gap: 9px;
    padding: 5px 15px 5px 5px;
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}

.topbar-greeting__avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-pill);
}

.topbar-greeting__copy { display: grid; line-height: 1.15; }
.topbar-greeting__hi { font-size: 0.68rem; font-weight: 400; color: var(--ink-500); }
.topbar-greeting__name { font-size: 0.82rem; font-weight: 500; color: var(--ink-900); }

/* Disparador del menú móvil.
   Se posiciona fijo para alinearse con la barra superior sin vivir dentro de
   ella: el backdrop-filter de la barra anclaría la hoja a su caja. */
.mobile-menu-trigger {
    position: fixed;
    top: 13px;
    right: 18px;
    z-index: 50;
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    color: var(--ink-900);
    background: var(--surface);
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.mobile-menu-trigger:hover { box-shadow: var(--shadow-md); transform: scale(1.05); }
.mobile-menu-trigger:active { transform: scale(0.93); }

/* --------------------------------------------------------------------------
   7. Dock inferior (móvil)
   -------------------------------------------------------------------------- */

.mobile-primary-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 7px;
    margin: 0 auto 14px;
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--line-soft);

    /* Sin animación de entrada: el dock nace con display:none en escritorio
       y, al cruzar el breakpoint, la animación se quedaba detenida en su
       primer fotograma dejándolo invisible. Es navegación permanente, así
       que su estado de reposo debe ser visible sin depender de nada. */
    opacity: 1;
    transform: none;
}


.mobile-primary-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 11px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-500);
    border-radius: var(--r-pill);
    transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), padding var(--t-slow) var(--ease-spring), gap var(--t-slow) var(--ease-spring);
}

.mobile-primary-nav a svg { width: 21px; height: 21px; }

/* La etiqueta sólo aparece en el activo: se despliega */
.mobile-primary-nav a > span:not(:first-child),
.mobile-primary-nav a { white-space: nowrap; }

.mobile-primary-nav a .dock-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--t-slow) var(--ease-spring), opacity var(--t-base) var(--ease-out);
}

.mobile-primary-nav a[aria-current="page"] {
    gap: 8px;
    padding-right: 17px;
    color: var(--surface);
    background: var(--ink-900);
    box-shadow: var(--shadow-ink);
}

.mobile-primary-nav a[aria-current="page"] .dock-label { max-width: 130px; opacity: 1; }
.mobile-primary-nav a:not([aria-current="page"]):active { background: var(--surface-soft); transform: scale(0.9); }

/* Se retira mientras hay un campo enfocado para no tapar el formulario. */
body.dock-hidden .mobile-primary-nav {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 140%, 0);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

/* --------------------------------------------------------------------------
   8. Hoja / menú completo móvil
   -------------------------------------------------------------------------- */

/* Se apoya en <details> para abrir sin JavaScript; JS sólo añade
   cierre por scrim, Escape y bloqueo de scroll. */
.mobile-navigation {
    display: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Neutraliza el estilo genérico de details/summary en este componente */
.mobile-navigation > summary { padding: 0; background: none; }
.mobile-navigation > summary:hover { background: none; }
.mobile-navigation > *:not(summary) { padding: 0; }
.mobile-navigation[open] > *:not(summary) { animation: none; }

.mobile-navigation__sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base) var(--ease-out);
}

.mobile-navigation[open] .mobile-navigation__sheet { visibility: visible; opacity: 1; }

/* El disparador se eleva por encima del scrim para poder cerrar sin JS.
   Conserva position:fixed; sólo cambia la capa. */
.mobile-navigation[open] .mobile-menu-trigger {
    z-index: 95;
    color: var(--surface);
    background: var(--ink-900);
    box-shadow: var(--shadow-ink);
}

.mobile-navigation__scrim {
    position: absolute;
    inset: 0;
    padding: 0;
    background: rgba(1, 1, 1, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    cursor: pointer;
}

.mobile-navigation__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    max-height: 86dvh;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow: var(--shadow-xl);
    transform: translate3d(0, 100%, 0);
    transition: transform var(--t-slow) var(--ease-out);
}

.mobile-navigation[open] .mobile-navigation__panel { transform: none; }

/* Asa de arrastre */
.mobile-navigation__panel::before {
    width: 42px;
    height: 4px;
    margin: 4px auto 16px;
    background: var(--line-strong);
    border-radius: var(--r-pill);
    content: "";
}

.mobile-navigation__panel a,
.mobile-navigation__panel button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 13px;
    padding: 11px 14px 11px 9px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-700);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.mobile-navigation__panel a > span:first-child,
.mobile-navigation__panel button > span:first-child {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.mobile-navigation__panel a:active,
.mobile-navigation__panel button:active { background: var(--surface-soft); }

.mobile-navigation__panel a[aria-current="page"] {
    color: var(--surface);
    background: var(--ink-900);
}

.mobile-navigation__panel a[aria-current="page"] > span:first-child {
    color: var(--ink-900);
    background: var(--surface);
}

.mobile-navigation__panel form { margin-top: 6px; }
.mobile-navigation__panel button { color: var(--critical); }
.mobile-navigation__panel button > span:first-child { background: var(--critical-soft); }

/* Entrada escalonada de los elementos del menú */
.mobile-navigation[open] .mobile-navigation__panel > * {
    animation: sheet-item var(--t-base) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 26ms + 90ms);
}

@keyframes sheet-item {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   9. Encabezados de página
   -------------------------------------------------------------------------- */

.page-heading {
    display: grid;
    gap: 7px;
    margin-bottom: 26px;
}

.page-heading--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.eyebrow,
.panel-kicker {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.page-title { letter-spacing: -0.035em; }

.page-description,
.page-lead {
    max-width: 62ch;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-500);
}

.section-heading,
.section-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.content-stack { display: grid; gap: 26px; align-content: start; }
.content-grid { display: grid; gap: 22px; }
.content-grid--two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* --------------------------------------------------------------------------
   10. Paneles y tarjetas
   -------------------------------------------------------------------------- */

.panel,
.summary-card,
.status-card,
.context-card,
.form-panel,
.auth-card,
.create-user-card,
.crm-create-card,
.user-card,
.lead-card,
.conversation-context,
.knowledge-preview-card,
.error-panel,
.invitation-panel,
.subpanel {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.panel > * + *,
.summary-card > * + * { margin-top: 12px; }

.panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}

.subpanel {
    padding: 20px;
    background: var(--surface-soft);
    border-color: transparent;
    border-radius: var(--r-lg);
    box-shadow: none;
}

.panel--danger-zone {
    background: var(--critical-soft);
    border-color: color-mix(in srgb, var(--critical) 18%, transparent);
}

/* Cuadrícula del panel de inicio ------------------------------------------ */

.dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.account-summary {
    grid-column: span 2;
    background: var(--ink-900);
    border-color: transparent;
    color: var(--surface);
    box-shadow: var(--shadow-ink-lg);
}

.account-summary h2 { color: var(--surface); }
.account-summary .panel-kicker { color: rgba(255, 255, 255, 0.5); }
.account-summary .muted-text { color: rgba(255, 255, 255, 0.62); }

/* Especificidad elevada: estas reglas deben ganar a .detail-list dt/dd,
   que se declara más abajo en la hoja. */
.account-summary .detail-list dt { color: rgba(255, 255, 255, 0.5); }
.account-summary .detail-list dd { color: var(--surface); }
.account-summary .detail-list--boxed > div { background: rgba(255, 255, 255, 0.08); }
.account-summary .detail-list { margin-top: 4px; }
.account-summary .role-list { margin-bottom: 2px; }

.account-summary .role-chip {
    color: var(--surface);
    background: rgba(255, 255, 255, 0.12);
    border-color: transparent;
}

/* Tarjeta de acción: el patrón de "categorías" de la referencia */
.action-card {
    position: relative;
    display: grid;
    gap: 15px;
    align-content: start;
    padding: 24px;
    overflow: hidden;
    cursor: default;
}

.action-card:hover {
    border-color: var(--line);
    box-shadow: var(--shadow-lg);
    transform: translate3d(0, -3px, 0);
}

.action-card h2 {
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.action-card p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-500);
}

.action-card > div { display: grid; gap: 9px; }

.action-card__icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--ink-900);
    background: var(--surface-soft);
    border-radius: var(--r-sm);
    transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
}

.action-card:hover .action-card__icon {
    color: var(--surface);
    background: var(--ink-900);
    transform: scale(1.06) rotate(-4deg);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-900);
}

.text-link span { transition: transform var(--t-base) var(--ease-spring); }
.text-link:hover span { transform: translate3d(4px, 0, 0); }

/* Tarjeta de métrica (Quick Stats) ---------------------------------------- */

/* Anchos mínimos generosos: por debajo de ~220px el titular de la métrica
   se parte en varias líneas y las tarjetas quedan como columnas altas. */
.summary-grid,
.report-metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}

.report-metric-grid--compact { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.summary-card,
.status-card {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 22px;
    text-align: left;
}

.summary-card:hover,
.status-card:hover {
    box-shadow: var(--shadow-md);
    transform: translate3d(0, -2px, 0);
}

.summary-card strong,
.status-card strong,
.metric-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.1;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}

.summary-card span,
.status-card span,
.metric-label {
    font-size: 0.79rem;
    font-weight: 400;
    color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   11. Botones
   -------------------------------------------------------------------------- */

/* Sólo `.button` (0-1-0). Añadir `button.button`/`a.button` subía la
   especificidad a 0-1-1 y hacía que la base negra ganara a los
   modificadores --quiet, --secondary y --danger. */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 0.885rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    white-space: nowrap;
    color: var(--surface);
    background: var(--ink-900);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

.button:hover { box-shadow: var(--shadow-ink); transform: translate3d(0, -2px, 0); }
.button:active { transform: translate3d(0, 0, 0) scale(0.975); box-shadow: var(--shadow-xs); }

.button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.42;
    box-shadow: none;
    transform: none;
}

.button--secondary {
    color: var(--ink-900);
    background: var(--surface);
    border-color: var(--line);
}

.button--secondary:hover {
    background: var(--surface);
    border-color: var(--ink-300);
    box-shadow: var(--shadow-md);
}

.button--quiet {
    color: var(--ink-600);
    background: transparent;
    border-color: transparent;
}

.button--quiet:hover {
    color: var(--ink-900);
    background: var(--surface-soft);
    box-shadow: none;
    transform: none;
}

.button--danger { background: var(--critical); }
.button--danger:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--critical) 32%, transparent); }

.button--small { padding: 9px 17px; font-size: 0.81rem; }
.button--block { width: 100%; }

.button-row,
.button-stack,
.actions,
.form-actions,
.filter-actions,
.conversation-toolbar__actions,
.knowledge-item-actions,
.knowledge-workflow-actions,
.webhook-token-form__actions,
.user-card__forms,
.inbox-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.button-stack { flex-direction: column; align-items: stretch; }
.form-actions { margin-top: 6px; }

/* Envío en curso: señal puramente visual */
.button[aria-busy="true"] { pointer-events: none; }

.button[aria-busy="true"]::after {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--r-pill);
    opacity: 0.85;
    content: "";
    animation: spin 620ms linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Ondulación al pulsar (inyectada por JS) */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.22;
    pointer-events: none;
    transform: scale(0);
    animation: ripple var(--t-slow) var(--ease-out) forwards;
}

@keyframes ripple {
    to { opacity: 0; transform: scale(2.6); }
}

/* Acción circular ---------------------------------------------------------- */

.round-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px 9px 9px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--surface);
    background: var(--ink-900);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.round-action > span[aria-hidden="true"] {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    font-size: 1rem;
    color: var(--ink-900);
    background: var(--surface);
    border-radius: var(--r-pill);
    transition: transform var(--t-base) var(--ease-spring);
}

.round-action:hover { box-shadow: var(--shadow-ink); transform: translate3d(0, -2px, 0); }
.round-action:hover > span[aria-hidden="true"] { transform: rotate(90deg); }
.round-action:active { transform: scale(0.97); }

.round-action--light {
    color: var(--ink-900);
    background: var(--surface);
    border-color: var(--line);
}

.round-action--light > span[aria-hidden="true"] { color: var(--surface); background: var(--ink-900); }
.round-action--light:hover { box-shadow: var(--shadow-md); }
.round-action--dark { color: var(--surface); background: var(--ink-900); }
.round-action--small { padding: 6px 14px 6px 6px; font-size: 0.79rem; }
.round-action--small > span[aria-hidden="true"] { width: 26px; height: 26px; flex-basis: 26px; font-size: 0.85rem; }
.round-action__label { padding-right: 2px; }

/* --------------------------------------------------------------------------
   12. Formularios
   -------------------------------------------------------------------------- */

label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-700);
}

.settings-section label,
.subpanel label,
.form-field,
.filter-grid label,
.form-grid label,
.compact-form label,
.stack-form label,
.inline-form label {
    display: grid;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-700);
}

/* Selector por exclusión: 71 inputs del proyecto no declaran `type`, y una
   lista de `input[type=...]` los dejaría con el estilo nativo del navegador
   (caja blanca con borde) rompiendo la coherencia del formulario. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select,
textarea {
    width: 100%;
    padding: 12px 15px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-900);
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    appearance: none;
}

textarea {
    min-height: 108px;
    line-height: 1.55;
    resize: vertical;
}

input::placeholder,
textarea::placeholder { color: var(--ink-400); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) { background: var(--surface-sunken); }

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    background: var(--surface);
    border-color: var(--ink-900);
    box-shadow: 0 0 0 4px rgba(1, 1, 1, 0.06);
    outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
    color: var(--ink-400);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Campos de sólo lectura: legibles, pero claramente no editables. */
input[readonly],
textarea[readonly] {
    color: var(--ink-500);
    background: var(--surface-sunken);
    cursor: default;
}

input[readonly]:hover,
textarea[readonly]:hover { background: var(--surface-sunken); }

input[readonly]:focus,
textarea[readonly]:focus {
    background: var(--surface-sunken);
    border-color: var(--line-strong);
    box-shadow: none;
}

/* Los spinners nativos rompen la altura y el ritmo del campo. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
}

input[type="file"] {
    padding: 10px;
    font-size: 0.82rem;
    color: var(--ink-500);
    background: var(--surface-soft);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

input[type="file"]:hover { background: var(--surface-sunken); border-color: var(--ink-300); }

input[type="file"]::file-selector-button {
    padding: 8px 15px;
    margin-right: 12px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--surface);
    background: var(--ink-900);
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
}

/* Casillas y radios ------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
    appearance: none;
}

input[type="radio"] { border-radius: var(--r-pill); }
input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--ink-500); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--ink-900);
    border-color: var(--ink-900);
}

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

input[type="radio"]:checked {
    box-shadow: inset 0 0 0 4px var(--surface);
}

input[type="checkbox"]:active,
input[type="radio"]:active { transform: scale(0.88); }

.check-field,
.checkbox-row,
.check-option,
.choice-inline {
    display: flex !important;
    align-items: center;
    gap: 10px;
    font-size: 0.87rem;
    font-weight: 400;
    color: var(--ink-700);
    cursor: pointer;
}

.check-grid,
.check-list,
.checkbox-list,
.compact-checks {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.check-option {
    padding: 12px 15px;
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

.check-option:hover { background: var(--surface-sunken); }
.check-option:has(input:checked) { background: var(--surface); border-color: var(--ink-900); }

/* Rejillas de formulario -------------------------------------------------- */

.form-grid,
.filter-grid,
.compact-form,
.stack-form,
.settings-form,
.settings-section,
.inline-form {
    display: grid;
    gap: 16px;
}

.form-grid--two,
.filter-grid { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }

/* Los filtros alinean su línea base abajo: así el botón queda a la altura de
   los campos y no a la del rótulo. */
.filter-grid { align-items: end; }

/* Un botón suelto dentro de una rejilla es un item más y se estiraría a toda
   la celda; debe conservar su ancho natural. */
.filter-grid > .button,
.form-grid > .button,
.filter-grid > button,
.form-grid > button {
    width: auto;
    justify-self: start;
    align-self: end;
}
.form-grid--three { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.form-grid--task { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-field--wide { grid-column: 1 / -1; }
.form-field--compact { max-width: 240px; }

.settings-form { margin-block: 22px; }
.settings-section { margin-block: 20px; }
fieldset.settings-section,
fieldset.role-fieldset,
fieldset.compact-fieldset {
    min-width: 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
}

/* `float:left; width:100%` saca al legend del hueco que abre en el borde:
   el panel queda con el marco continuo y el título alineado con el contenido. */
.settings-section legend,
.role-fieldset legend,
.compact-fieldset legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--ink-900);
}

.settings-section legend + *,
.role-fieldset legend + *,
.compact-fieldset legend + * { clear: both; }

.settings-columns { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.form-divider { height: 1px; background: var(--line); border: 0; margin-block: 6px; }

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.form-help,
.field-help,
.table-description,
.table-subtext,
.muted,
.muted-text,
.page-description {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-500);
}

.field-error {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--critical);
}

/* Tooltip de campo -------------------------------------------------------- */

.field-tooltip { position: relative; display: inline-flex; }

.field-tooltip__content {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    z-index: 50;
    width: max-content;
    max-width: 260px;
    padding: 9px 13px;
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-ink);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 6px, 0);
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.field-tooltip:hover .field-tooltip__content,
.field-tooltip:focus-within .field-tooltip__content {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
}

/* --------------------------------------------------------------------------
   13. Tabs / control segmentado
   -------------------------------------------------------------------------- */

.segmented {
    position: relative;
    display: inline-flex;
    padding: 5px;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
    isolation: isolate;
}

.segmented__indicator {
    position: absolute;
    top: 5px;
    bottom: 5px;
    z-index: -1;
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-slow) var(--ease-out), width var(--t-slow) var(--ease-out);
    will-change: transform, width;
}

.segmented__option {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink-500);
    background: transparent;
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    user-select: none;
    transition: color var(--t-base) var(--ease-out);
}

/* Variante con <label> + radio: conserva el envío nativo del formulario. */
.segmented__option:has(input:checked) { color: var(--ink-900); }

/* Anillo de foco sólo con teclado: el clic no debe dejar marca. */
.segmented:has(input:focus-visible) .segmented__indicator {
    box-shadow: var(--shadow-sm), 0 0 0 2px var(--ink-900);
}

.field-caption {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-700);
}

.segmented__option:hover { color: var(--ink-700); }
.segmented__option[aria-selected="true"],
.segmented__option.is-active { color: var(--ink-900); }

/* Fila de chips deslizable ------------------------------------------------- */

.chip-scroller {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-inline: -4px;
    padding-inline: 4px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.chip-scroller::-webkit-scrollbar { display: none; }
.chip-scroller > * { flex: 0 0 auto; scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   14. Chips, etiquetas y estados
   -------------------------------------------------------------------------- */

.tag,
.role-chip,
.status-chip,
.status-pill,
.status-badge,
.channel-badge,
.count-pill,
.count-badge,
.notice-pill,
.stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.755rem;
    font-weight: 500;
    letter-spacing: -0.002em;
    white-space: nowrap;
    color: var(--ink-700);
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.tag-list,
.role-list,
.inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

a.tag:hover,
button.tag:hover { background: var(--line); transform: translate3d(0, -1px, 0); }

.tag--active,
.status-pill--active,
.status-chip--active {
    color: var(--surface);
    background: var(--ink-900);
}

.status-badge--success,
.status-pill--success { color: var(--positive); background: var(--positive-soft); }
.status-pill--info,
.status-chip--info { color: var(--info-ink); background: var(--info-soft); }
/* Vencido: la combinación más visible del sistema, reservada a fechas ya pasadas. */
.status-chip--overdue { color: var(--ink-900); background: var(--attention); }
.status-pill--neutral { color: var(--ink-500); background: var(--surface-soft); }
.status-pill--locked { color: var(--caution); background: var(--caution-soft); }
.status-pill--disabled { color: var(--ink-400); background: var(--surface-soft); }
.status-pill--danger,
.status-chip--danger,
.status-badge--danger { color: var(--critical); background: var(--critical-soft); }
.status-badge--warning,
.status-chip--warning { color: var(--caution); background: var(--caution-soft); }

.count-badge,
.count-pill {
    min-width: 21px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--ink-900);
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.channel-badge--whatsapp,
.channel-badge--instagram,
.channel-badge--messenger {
    color: var(--ink-700);
    background: var(--surface-soft);
}

.status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: currentColor;
    border-radius: var(--r-pill);
}

.nowrap { white-space: nowrap; }
.numeric-cell { font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------------------------------
   15. Avisos
   -------------------------------------------------------------------------- */

.alert,
.notice,
.phase-note,
.webhook-settings__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 11px;
    padding: 15px 18px;
    font-size: 0.855rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-700);
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-md);
}

/* El rótulo no debe partirse en dos líneas y descuadrar el aviso. */
.alert strong,
.notice strong,
.phase-note strong,
.webhook-settings__notice strong {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--ink-900);
}

.alert > :not(strong),
.notice > :not(strong) { flex: 1 1 260px; min-width: 0; }

.alert--success { color: var(--positive); background: var(--positive-soft); }
.alert--error { color: var(--critical); background: var(--critical-soft); }
.alert--warning,
.notice--warning {
    color: var(--caution);
    background: var(--caution-soft);
    border-left: 3px solid var(--attention);
}

.phase-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    font-size: 0.855rem;
    color: rgba(255, 255, 255, 0.72);
    background: var(--ink-900);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-ink);
}

.phase-banner strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--surface);
}

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

.empty-state {
    display: grid;
    gap: 11px;
    justify-items: center;
    padding: 54px 30px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-xl);
}

.empty-state h2,
.empty-state h3 { font-size: 1.06rem; font-weight: 500; }
.empty-state p { max-width: 40ch; font-size: 0.87rem; color: var(--ink-500); }
.empty-state--compact { padding: 30px 22px; }

.empty-state__icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    margin-bottom: 4px;
    font-size: 1.2rem;
    color: var(--ink-400);
    background: var(--surface-soft);
    border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   16. Tablas
   -------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.865rem;
}

thead th {
    padding: 15px 20px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-400);
    border-bottom: 1px solid var(--line-soft);
}

tbody td {
    padding: 15px 20px;
    font-weight: 400;
    color: var(--ink-700);
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}

tbody tr { transition: background var(--t-fast) var(--ease-out); }
tbody tr:hover { background: var(--surface-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody td strong { font-weight: 500; color: var(--ink-900); }

.task-table tbody tr.task-row--overdue td:first-child {
    box-shadow: inset 3px 0 0 var(--critical);
}

/* Listas de definición ---------------------------------------------------- */

.detail-list { display: grid; gap: 14px; margin: 0; }
.detail-list--grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.detail-list > div { display: grid; gap: 3px; }

.detail-list--boxed > div {
    padding: 14px 16px;
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

.detail-list dt {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.detail-list dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-800);
}

.simple-list,
.note-list,
.inline-list--stacked {
    display: grid;
    gap: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.note-list > li {
    padding: 15px 17px;
    font-size: 0.865rem;
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

/* Línea de tiempo --------------------------------------------------------- */

.timeline {
    display: grid;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.timeline > li {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 0 0 20px 30px;
    font-size: 0.865rem;
}

.timeline > li::before {
    position: absolute;
    top: 6px;
    left: 5px;
    width: 9px;
    height: 9px;
    background: var(--surface);
    border: 2px solid var(--ink-900);
    border-radius: var(--r-pill);
    content: "";
}

.timeline > li::after {
    position: absolute;
    top: 19px;
    bottom: 2px;
    left: 9px;
    width: 1px;
    background: var(--line);
    content: "";
}

.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline__marker { font-size: 0.72rem; font-weight: 500; color: var(--ink-400); }

/* Paginación -------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
}

.pagination a,
.pagination span {
    display: grid;
    min-width: 38px;
    height: 38px;
    padding-inline: 12px;
    place-items: center;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ink-600);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-pill);
    transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.pagination a:hover { color: var(--ink-900); border-color: var(--ink-300); transform: translate3d(0, -2px, 0); }
.pagination [aria-current="page"] { color: var(--surface); background: var(--ink-900); border-color: var(--ink-900); }

/* --------------------------------------------------------------------------
   17. Acordeones (<details>)
   -------------------------------------------------------------------------- */

details {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

details[open] { box-shadow: var(--shadow-xs); }

summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    padding: 15px 20px;
    font-size: 0.885rem;
    font-weight: 500;
    color: var(--ink-800);
    cursor: pointer;
    border-radius: inherit;
    list-style: none;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--ink-900); background: var(--surface-soft); }

summary > span[aria-hidden="true"]:last-child {
    display: inline-block;
    color: var(--ink-400);
    transition: transform var(--t-base) var(--ease-spring);
}

details[open] > summary > span[aria-hidden="true"]:last-child { transform: rotate(180deg); }
details > *:not(summary) { padding: 4px 20px 20px; }
details[open] > *:not(summary) { animation: details-open var(--t-base) var(--ease-out) both; }

@keyframes details-open {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to   { opacity: 1; transform: none; }
}

.editor-details summary { font-size: 0.84rem; }

/* --------------------------------------------------------------------------
   18. Autenticación
   -------------------------------------------------------------------------- */

.auth-shell {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 34px 22px;
}

.auth-card {
    width: 100%;
    max-width: 428px;
    padding: 38px;
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
    animation: auth-enter var(--t-slow) var(--ease-out) both;
}

.auth-card--wide { max-width: 560px; }

@keyframes auth-enter {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.auth-intro { display: grid; gap: 8px; margin-bottom: 26px; }
.auth-intro h1 { font-size: 1.75rem; }
.auth-intro p { font-size: 0.9rem; color: var(--ink-500); }

.hero {
    display: grid;
    gap: 16px;
    padding: 54px 0 34px;
    text-align: center;
    justify-items: center;
}

.hero h1 { max-width: 18ch; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); font-weight: 400; }
.hero p { max-width: 52ch; font-size: 1rem; color: var(--ink-500); }

.feature-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.feature-number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   19. Bandeja de conversaciones
   -------------------------------------------------------------------------- */

.inbox-page { display: grid; gap: 22px; }

.inbox-workspace {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(300px, 372px) minmax(0, 1fr);
    align-items: start;
}

.inbox-pane {
    display: grid;
    gap: 15px;
    align-content: start;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
}

.inbox-pane--list { position: sticky; top: calc(var(--topbar-h) + 10px); max-height: calc(100dvh - var(--topbar-h) - 40px); overflow-y: auto; }

.inbox-pane__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inbox-pane__header h2 { font-size: 1.14rem; }

.inbox-total {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding-inline: 10px;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-900);
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    font-variant-numeric: tabular-nums;
}

.inbox-search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 5px 5px 15px;
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.inbox-search:focus-within {
    background: var(--surface);
    border-color: var(--ink-900);
    box-shadow: 0 0 0 4px rgba(1, 1, 1, 0.06);
}

.inbox-search > span[aria-hidden="true"] { font-size: 1.05rem; color: var(--ink-400); }

.inbox-search input {
    flex: 1;
    padding: 8px 0;
    background: transparent;
    border: 0;
}

.inbox-search input:focus { background: transparent; box-shadow: none; }

.inbox-search button {
    padding: 9px 17px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--surface);
    background: var(--ink-900);
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}

.inbox-search button:hover { box-shadow: var(--shadow-ink); transform: scale(1.03); }
.inbox-filter-drawer { border-radius: var(--r-md); }
.inbox-filter-drawer summary { padding: 12px 16px; font-size: 0.83rem; }

/* Lista de conversaciones -------------------------------------------------- */

.conversation-list { display: grid; gap: 5px; }

.conversation-card {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 13px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.conversation-card:hover { background: var(--surface-soft); transform: translate3d(2px, 0, 0); }

.conversation-card--active {
    color: var(--surface);
    background: var(--ink-900);
    box-shadow: var(--shadow-ink);
}

.conversation-card--active:hover { background: var(--ink-900); transform: none; }
.conversation-card--active .conversation-card__preview,
.conversation-card--active .conversation-card__meta { color: rgba(255, 255, 255, 0.62); }
.conversation-card--active .conversation-avatar { color: var(--ink-900); background: var(--surface); }
.conversation-card--active .tag,
.conversation-card--active .channel-badge { color: var(--surface); background: rgba(255, 255, 255, 0.14); }

.conversation-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-900);
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

.conversation-avatar--large { width: 52px; height: 52px; flex-basis: 52px; font-size: 1.15rem; }
.conversation-card__main { display: grid; min-width: 0; flex: 1; gap: 3px; }

.conversation-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.conversation-card__title strong {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* La marca de tiempo llega sin formatear desde la base (AAAA-MM-DD HH:MM:SS);
   vive en la fila de metadatos para no robarle ancho al nombre del contacto. */
.conversation-card__meta time {
    font-size: 0.7rem;
    letter-spacing: -0.01em;
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
}

.conversation-card--active .conversation-card__meta time { color: rgba(255, 255, 255, 0.5); }

.conversation-card__preview {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.8rem;
    color: var(--ink-500);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.conversation-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--ink-400);
}

.conversation-card__tail {
    display: grid;
    flex: 0 0 auto;
    gap: 6px;
    align-content: start;
    justify-items: end;
    text-align: right;
}

/* Evita que la insignia se estire a lo alto de la tarjeta. */
.conversation-card__tail .count-badge {
    height: 22px;
    align-self: start;
}

.conversation-card__arrow {
    color: var(--ink-300);
    transition: transform var(--t-base) var(--ease-spring), color var(--t-base) var(--ease-out);
}

.conversation-card:hover .conversation-card__arrow { color: var(--ink-900); transform: translate3d(3px, 0, 0); }

/* Bienvenida de la bandeja ------------------------------------------------- */

.inbox-pane--welcome {
    display: grid;
    gap: 16px;
    justify-items: center;
    padding: 70px 34px;
    text-align: center;
    align-content: center;
    min-height: 440px;
}

.inbox-welcome-orb {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    font-size: 1.6rem;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-ink-lg);
    animation: orb-float 5s var(--ease-in-out) infinite;
}

@keyframes orb-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -9px, 0); }
}

.inbox-welcome-copy { display: grid; gap: 8px; }
.inbox-welcome-copy h2 { font-size: 1.4rem; }
.inbox-welcome-copy p { max-width: 44ch; font-size: 0.9rem; color: var(--ink-500); }
.inbox-welcome-actions { justify-content: center; }

.inbox-welcome-actions span {
    padding: 8px 15px;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--ink-700);
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    transition: transform var(--t-base) var(--ease-spring), background var(--t-base) var(--ease-out);
}

.inbox-welcome-actions span:hover { background: var(--line); transform: translate3d(0, -2px, 0); }

/* Hilo de conversación ----------------------------------------------------- */

.conversation-stage {
    display: grid;
    gap: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
}

.conversation-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-soft);
}

.conversation-identity { display: flex; align-items: center; gap: 13px; }
.conversation-identity h1,
.conversation-identity h2 { font-size: 1.14rem; }

.conversation-back {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--ink-700);
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    transition: background var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-spring);
}

.conversation-back:hover { background: var(--line); transform: translate3d(-3px, 0, 0); }

.messages-viewport {
    display: grid;
    gap: 14px;
    max-height: 58dvh;
    padding: 24px 22px;
    overflow-y: auto;
    background: var(--surface-soft);
    align-content: start;
}

.messages-date {
    justify-self: center;
    padding: 5px 14px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-500);
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-xs);
}

.message-list { display: grid; gap: 12px; }
.message { display: grid; max-width: 78%; gap: 5px; justify-self: start; animation: message-in var(--t-base) var(--ease-out) both; }
.message--outbound { justify-self: end; }

@keyframes message-in {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

.message__bubble {
    padding: 13px 17px;
    font-size: 0.885rem;
    line-height: 1.52;
    color: var(--ink-800);
    background: var(--surface);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 7px;
    box-shadow: var(--shadow-xs);
}

.message--outbound .message__bubble {
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-lg) var(--r-lg) 7px var(--r-lg);
    box-shadow: var(--shadow-ink);
}

.message__meta,
.message__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding-inline: 5px;
    font-size: 0.7rem;
    color: var(--ink-400);
}

.message--outbound .message__meta,
.message--outbound .message__footer { justify-content: flex-end; }

/* Redactor ----------------------------------------------------------------- */

.composer-shell,
.composer { display: grid; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line-soft); }

.composer__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
}

.composer__hint { font-size: 0.76rem; color: var(--ink-400); }

.composer__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }

.message-template-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
    padding: 0;
    color: var(--ink-900);
    background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    box-shadow: 0 28px 80px rgb(20 17 24 / 24%);
}

.message-template-dialog::backdrop { background: rgb(18 15 22 / 45%); backdrop-filter: blur(8px); }

.message-template-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 14px;
}

.message-template-dialog__header h2 { margin: 2px 0 0; }

.message-template-dialog__tabs,
.template-library-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.message-template-dialog__tabs { padding: 0 24px 16px; border-bottom: 1px solid var(--line-soft); }

.message-template-dialog__tabs button {
    padding: 9px 15px;
    color: var(--ink-500);
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.message-template-dialog__tabs button[aria-selected="true"] { color: var(--surface); background: var(--ink-900); }

.message-template-dialog__panel { max-height: min(620px, calc(100vh - 205px)); padding: 20px 24px 26px; overflow-y: auto; }
.message-template-list { display: grid; gap: 12px; margin-top: 14px; }

.message-template-option,
.template-library-card {
    display: grid;
    gap: 12px;
    padding: 17px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
}

.message-template-option header,
.message-template-option footer,
.template-library-card__header,
.template-library-card footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.message-template-option header div,
.template-library-card__header div { display: grid; gap: 2px; }
.message-template-option p, .template-library-card p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.message-template-option label { margin: 0; }
.message-template-option__warning, .template-library-card__warning { color: var(--critical); font-size: 0.8rem; }
.message-template-create { margin-top: 16px; padding: 15px; background: var(--surface-soft); border-radius: var(--r-lg); }
.message-template-create form { display: grid; gap: 12px; margin-top: 14px; }

.template-library-tabs { margin-bottom: 18px; }
.template-library-section { scroll-margin-top: 90px; }
.template-channel-selector { max-width: 520px; margin: 18px 0; }
.template-card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 18px; }
.template-library-card footer { padding-top: 8px; color: var(--ink-400); font-size: 0.74rem; border-top: 1px solid var(--line-soft); }
.template-library-card.is-archived { opacity: 0.62; }
.saved-message-form { display: grid; gap: 12px; max-width: 760px; margin-top: 18px; }

.composer-window-notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    color: #5f4307;
    background: #fff7df;
    border: 1px solid #efd699;
    border-radius: var(--r-md);
}

.composer-window-notice__badge {
    display: inline-grid;
    min-width: 48px;
    min-height: 32px;
    flex: 0 0 auto;
    place-items: center;
    padding-inline: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #5f4307;
    background: #f6d675;
    border-radius: var(--r-pill);
}

.composer-window-notice strong { display: block; }
.composer-window-notice p { margin: 3px 0 0; font-size: 0.8rem; line-height: 1.5; }

.composer-shell--locked { opacity: 0.72; }
.composer-shell--locked textarea { cursor: not-allowed; }
.composer-shell--locked textarea:disabled { color: var(--ink-500); background: var(--surface-sunken); }
.composer-attachment--disabled { cursor: not-allowed; }
.composer-attachment--disabled:hover { background: var(--surface-soft); }
.composer-send:disabled {
    color: var(--ink-400);
    background: var(--surface-sunken);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.compact-composer,
.composer-template {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.compact-composer textarea,
.composer textarea { min-height: 76px; flex: 1; }

/* Píldora que se ajusta a su contenido: el botón lleva texto («Enviar») y
   una flecha, así que un círculo de tamaño fijo los recortaba. */
.composer-send {
    display: inline-flex;
    min-height: 46px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding-inline: 24px;
    font-family: var(--font-sans);
    font-size: 0.885rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--surface);
    background: var(--ink-900);
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}

.composer-send:hover { box-shadow: var(--shadow-ink); transform: translate3d(0, -2px, 0); }
.composer-send:active { transform: scale(0.97); }
.composer-send:disabled:hover,
.composer-send:disabled:active { box-shadow: none; transform: none; }
.composer-send span[aria-hidden="true"] { font-size: 1.05rem; line-height: 1; }

/* Adjunto: píldora compacta. El input nativo dentro de la etiqueta mostraba
   su propio marco punteado y su botón, duplicando controles. */
.composer-attachment {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 220px;
    align-items: center;
    gap: 10px;
    padding: 7px 15px 7px 7px;
    font-size: 0.8rem;
    background: var(--surface-soft);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}

.composer-attachment:hover { background: var(--surface-sunken); }

.composer-attachment > span[aria-hidden="true"] {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    font-size: 1rem;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-pill);
}

.composer-attachment input[type="file"] {
    min-width: 0;
    flex: 1;
    padding: 0;
    font-size: 0.78rem;
    color: var(--ink-500);
    background: none;
    border: 0;
    cursor: pointer;
}

.composer-attachment input[type="file"]:hover { background: none; }
.composer-attachment input[type="file"]::file-selector-button { display: none; }

/* Adjunto: cabecera con el tipo y la acción, y debajo lo que se escucha o
   se lee. En columna, porque el reproductor y la transcripción necesitan el
   ancho completo del globo. */
.attachment-row {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 15px;
    font-size: 0.82rem;
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

.attachment-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* El globo se ajusta a su contenido: sin un mínimo, una nota de voz sin
   transcripción deja el reproductor demasiado estrecho para usarlo. */
.attachment-audio {
    width: 100%;
    min-width: 240px;
    max-width: 340px;
    height: 36px;
}

/* Miniatura de imagen: recorta para que el hilo mantenga su ritmo vertical;
   el encuadre completo se ve en el visor. */
.attachment-image__link {
    display: block;
    overflow: hidden;
    border-radius: var(--r-sm);
    cursor: zoom-in;
    transition: box-shadow var(--t-base) var(--ease-out);
}

.attachment-image__link:hover { box-shadow: var(--shadow-sm); }

.attachment-image__link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.attachment-image {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    background: var(--surface);
}

/* Visor de imágenes ---------------------------------------------------------
   Una sola capa por página; JavaScript le pone la imagen al abrirla. */
.lightbox {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    padding: 4vh 16px;
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 1, 1, 0.88);
}

.lightbox__panel {
    position: relative;
    display: flex;
    max-width: 1000px;
    max-height: 92vh;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lightbox__image {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}

.lightbox__caption {
    max-width: 70ch;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
}

.lightbox__caption:empty { display: none; }

.lightbox__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lightbox__actions .button--quiet {
    color: var(--surface);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}

.lightbox__actions .button--quiet:hover { background: rgba(255, 255, 255, 0.24); }

/* Contexto de la conversación ---------------------------------------------- */

.conversation-context { display: grid; gap: 18px; align-content: start; }

.conversation-context__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
}

/* El detalle monta TRES paneles: lista + hilo + contexto. Con dos columnas
   declaradas, el tercero caía en una columna implícita y desbordaba.
   Por defecto van dos columnas y el contexto baja a ancho completo: con tres
   el hilo se quedaba en ~300px, demasiado angosto para leer una conversación. */
.inbox-workspace--detail {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    align-items: start;
}

/* Arranca en la segunda columna, NO en `1 / -1`: si cruzara la primera
   quedaría por debajo de la lista sticky y ésta lo taparía al hacer scroll. */
.inbox-workspace--detail > .conversation-context { grid-column: 2 / -1; }

.inbox-workspace--detail > .inbox-pane--list {
    max-height: calc(100dvh - var(--topbar-h) - 40px);
}

/* Sólo con espacio de sobra el contexto ocupa su propia columna. */
@media (min-width: 1500px) {
    .inbox-workspace--detail {
        grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(280px, 330px);
    }

    .inbox-workspace--detail > .conversation-context { grid-column: auto; }
}

/* Contención: sin min-width:0 los hijos flex/grid se niegan a encogerse y
   rebasan la columna en vez de recortar o envolver. */
.conversation-stage,
.conversation-stage > *,
.conversation-toolbar,
.conversation-identity,
.conversation-identity > *,
.composer-shell,
.composer,
.composer-shell > *,
.composer > * { min-width: 0; }

.conversation-identity { flex-wrap: wrap; }
.conversation-stage .message__bubble { overflow-wrap: anywhere; }
.conversation-toolbar__actions { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   20. Leads, pipeline y tareas
   -------------------------------------------------------------------------- */

.crm-index-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
    align-items: start;
}

.crm-index-layout--single,
.knowledge-admin-grid--single,
.tasks-layout--single,
.users-layout--single { grid-template-columns: minmax(0, 1fr); }

.knowledge-admin-grid,
.tasks-layout,
.users-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
    align-items: start;
}

.crm-card-list,
.knowledge-card-list,
.users-list,
.task-results { display: grid; gap: 12px; }

.lead-card,
.knowledge-preview-card,
.user-card {
    display: grid;
    gap: 13px;
    padding: 20px;
    border-radius: var(--r-lg);
}

.lead-card:hover,
.user-card:hover { border-color: var(--line); box-shadow: var(--shadow-md); transform: translate3d(0, -2px, 0); }

.lead-card__header,
.knowledge-card__header,
.user-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lead-card__header h2,
.lead-card__header h3,
.user-card__header h2,
.user-card__header h3,
.knowledge-card__header h2,
.knowledge-card__header h3 { font-size: 1rem; font-weight: 500; }

.lead-card__facts,
.knowledge-card__facts,
.knowledge-version__facts,
.user-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    font-size: 0.79rem;
    color: var(--ink-500);
}

.lead-card__next {
    padding: 11px 15px;
    font-size: 0.81rem;
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

.lead-detail-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
    align-items: start;
}

.lead-detail-main,
.lead-detail-sidebar { display: grid; gap: 18px; align-content: start; }

/* Tablero de pipeline ------------------------------------------------------ */

.pipeline-board {
    display: grid;
    gap: 14px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 1fr);
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

.pipeline-column {
    display: grid;
    gap: 11px;
    align-content: start;
    padding: 16px;
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: var(--r-xl);
    scroll-snap-align: start;
}

.pipeline-column__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-inline: 4px;
}

.pipeline-column__header h2,
.pipeline-column__header h3 { font-size: 0.92rem; font-weight: 500; }
.pipeline-column__cards { display: grid; gap: 9px; }
.pipeline-column--won { background: var(--positive-soft); }
.pipeline-column--lost { background: var(--critical-soft); }

.pipeline-lead {
    display: grid;
    gap: 7px;
    padding: 15px;
    font-size: 0.85rem;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.pipeline-lead:hover { box-shadow: var(--shadow-md); transform: translate3d(0, -2px, 0); }
.pipeline-lead strong { font-weight: 500; color: var(--ink-900); }

.pipeline-empty {
    padding: 24px 14px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--ink-400);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   21. Reportes
   -------------------------------------------------------------------------- */

.report-page { display: grid; gap: 24px; }
.report-section { display: grid; gap: 15px; }
.report-section > h2 { font-size: 1.18rem; }
.report-performance { display: grid; gap: 14px; }

.retrieval-summary,
.knowledge-summary,
.audit-trace {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 15px 18px;
    font-size: 0.82rem;
    color: var(--ink-600);
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   22. Conocimiento, catálogo y ajustes
   -------------------------------------------------------------------------- */

.knowledge-body {
    padding: 20px;
    font-size: 0.885rem;
    line-height: 1.65;
    white-space: pre-wrap;
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

.knowledge-preview-results { display: grid; gap: 11px; }
.knowledge-version__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 11px; }

.secret-display,
.webhook-settings__url,
.webhook-url-field,
.request-id {
    padding: 13px 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.79rem;
    color: var(--ink-800);
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    word-break: break-all;
}

.webhook-settings { display: grid; gap: 15px; }
.webhook-settings__steps { display: grid; gap: 9px; padding-left: 20px; font-size: 0.85rem; color: var(--ink-600); }
.settings-create-channel,
.meta-setup-intro { display: grid; gap: 14px; }
.tag-manager { display: grid; gap: 12px; }
.inline-management-form,
.inline-reason-form,
.task-status-form,
.webhook-token-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; }
.account-summary + .content-stack { margin-top: 20px; }

/* --------------------------------------------------------------------------
   22b. Clases específicas de vista
   Variantes que aparecen en el marcado existente y necesitan regla propia.
   -------------------------------------------------------------------------- */

/* Encabezados con acción a la derecha */
.inbox-page__heading,
.pipeline-page > .page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.inbox-page__heading > div:first-child { display: grid; gap: 7px; }
.inbox-page__heading > .round-action { flex: 0 0 auto; align-self: center; }

.inbox-workspace--empty { grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); }
.empty-state--inbox,
.empty-state--messages { border-style: dashed; background: transparent; }

/* Rejillas de filtro por módulo */
.filter-grid--crm,
.filter-grid--inbox,
.filter-grid--knowledge,
.filter-grid--pipeline,
.filter-grid--tasks,
.report-filter-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
}

/* Las acciones ocupan la fila completa: en una sola celda de la rejilla los
   botones no caben y se apilan. */
.report-filter-actions,
.filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    grid-column: 1 / -1;
    margin-top: 2px;
}

/* Fichas de registro (leads, catálogo, conocimiento) */
.record-detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
}

.record-detail-grid > div { display: grid; gap: 3px; min-width: 0; }

.record-detail-grid dt {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.record-detail-grid dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-800);
    overflow-wrap: anywhere;
}

.record-detail-grid--secondary dd { font-size: 0.84rem; color: var(--ink-600); }
.record-detail-grid__wide { grid-column: 1 / -1; }

.record-list {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.record-list > li {
    display: grid;
    gap: 5px;
    padding: 15px 17px;
    font-size: 0.865rem;
    background: var(--surface-soft);
    border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease-out);
}

.record-list > li:hover { background: var(--surface-sunken); }
.record-list--compact > li { padding: 11px 14px; font-size: 0.82rem; }

.record-readonly {
    padding: 13px 16px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-700);
    background: var(--surface-soft);
    border-radius: var(--r-md);
    overflow-wrap: anywhere;
}

/* Conocimiento */
.knowledge-card { display: grid; gap: 13px; }

.knowledge-version {
    display: grid;
    gap: 9px;
    padding: 16px 18px;
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

/* Pipeline */
.pipeline-page { display: grid; gap: 22px; }

.pipeline-lead__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pipeline-lead__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    font-size: 0.75rem;
    color: var(--ink-500);
}

.pipeline-move,
.status-form,
.policy-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.pipeline-move select,
.status-form select { padding: 9px 34px 9px 12px; font-size: 0.82rem; }

/* Bandeja: respuestas rápidas y conversaciones relacionadas */
.quick-reply-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.related-conversations { display: grid; gap: 9px; }

.message__body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Reportes */
/* Orden fijo: rótulo · cifra · nota. La nota se ancla abajo para que la
   cifra quede a la misma altura en todas las tarjetas de la fila. */
.report-metric-card {
    display: grid;
    gap: 6px;
    grid-template-rows: auto auto 1fr;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.report-metric-card:hover { box-shadow: var(--shadow-md); transform: translate3d(0, -2px, 0); }

.report-metric-card strong {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.1;
    color: var(--ink-900);
    text-wrap: balance;
    font-variant-numeric: tabular-nums;
}

.report-metric-card > :first-child {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink-700);
    text-wrap: balance;
}

.report-metric-card p,
.report-metric-card small {
    align-self: start;
    font-size: 0.755rem;
    line-height: 1.5;
    color: var(--ink-500);
}

.report-breakdown-grid,
.report-detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.report-breakdown { display: grid; gap: 11px; }

.report-contract,
.report-methodology {
    padding: 16px 18px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--ink-600);
    background: var(--surface-soft);
    border-radius: var(--r-md);
}

/* Ficha de lead */
.lead { display: grid; gap: 18px; }

/* Las variantes responsivas de estas clases viven en la sección 26, después
   del bloque de tablet, para que no las pise una media query posterior. */

/* --------------------------------------------------------------------------
   22c. API de analítica
   -------------------------------------------------------------------------- */

.analytics-api { display: grid; gap: 18px; }

.endpoint-list {
    display: grid;
    gap: 1px;
    overflow: hidden;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
}

.endpoint-row {
    display: grid;
    gap: 4px 12px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 13px 16px;
    background: var(--surface);
    transition: background var(--t-fast) var(--ease-out);
}

.endpoint-row:hover { background: var(--surface-soft); }

.endpoint-row__method {
    grid-row: span 2;
    align-self: start;
    padding: 4px 9px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--surface);
    background: var(--ink-900);
    border-radius: var(--r-xs);
}

.endpoint-row__path {
    min-width: 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--ink-900);
}

.endpoint-row__label {
    grid-column: 2;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-700);
}

.endpoint-row__detail {
    grid-column: 2;
    font-size: 0.76rem;
    color: var(--ink-500);
}

.analytics-token-form { display: grid; gap: 16px; }

/* El token recién emitido se muestra una sola vez: debe destacar. */
.token-reveal { align-items: flex-start; }

.analytics-api input[readonly] {
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

code {
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: var(--ink-800);
    background: var(--surface-soft);
    border-radius: 6px;
}

@media (max-width: 767px) {
    .endpoint-row { grid-template-columns: minmax(0, 1fr); }
    .endpoint-row__method { grid-row: auto; justify-self: start; }
    .endpoint-row__label,
    .endpoint-row__detail { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   23. Pie
   -------------------------------------------------------------------------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 34px calc(28px + env(safe-area-inset-bottom));
    font-size: 0.755rem;
    font-weight: 400;
    color: var(--ink-400);
    border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   24. Utilidades de revelado al hacer scroll
   -------------------------------------------------------------------------- */

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24a. Acentos funcionales · componentes
   Azul = nuevo/sin leer/IA · Ámbar = te toca · Rojo = pérdida · Verde = confirmado.
   -------------------------------------------------------------------------- */

/* No leídos: el único azul sólido de la interfaz. */
.count-badge--unread { background: var(--info-ink); }

.conversation-card--unread .conversation-card__title strong { font-weight: 700; }
.conversation-card--unread .conversation-card__preview { color: var(--ink-700); font-weight: 500; }

/* Burbuja del agente IA: la voz de la máquina lleva la seña azul; la negra
   queda como voz humana y la blanca como cliente. */
.message--agent .message__bubble {
    background: var(--surface);
    color: var(--ink-800);
    border: 1px solid color-mix(in srgb, var(--info) 40%, transparent);
    box-shadow: inset 3px 0 0 var(--info);
}

.message--agent .message__meta strong { color: var(--info-ink); }

.message__meta .actor-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    vertical-align: 1px;
    background: var(--info);
    border-radius: var(--r-pill);
}

/* Punto de canal WhatsApp: convención verde ya aprendida por el usuario. */
.channel-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    vertical-align: 1px;
    background: var(--confirm);
    border-radius: var(--r-pill);
}

/* Badges de atención en la navegación global. */
.nav-link__icon { position: relative; }

.nav-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 17px;
    color: #fff;
    text-align: center;
    background: var(--info-ink);
    border-radius: var(--r-pill);
}

.nav-badge--dot {
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    background: var(--critical);
}

.mobile-primary-nav a { position: relative; }

.mobile-primary-nav .nav-badge { top: 2px; right: calc(50% - 20px); }

/* Tiles «Hoy» del inicio: tarjeta con borde inferior de color (patrón de la
   referencia) y conteo en pastilla suave. Neutros cuando no hay pendientes. */
.today-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.today-tile {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 18px 20px 16px;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 3px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-soft, 0 1px 2px rgba(1, 1, 1, 0.04));
}

.today-tile:hover { border-color: var(--ink-300); border-bottom-color: var(--ink-900); }

.today-tile__value {
    font-family: "Outfit", "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}

.today-tile__label { font-size: 0.8rem; font-weight: 500; color: var(--ink-500); }

.today-tile--info { border-bottom-color: var(--info); }
.today-tile--info .today-tile__value { color: var(--info-ink); }
.today-tile--attn { border-bottom-color: var(--attention); }
.today-tile--attn .today-tile__value { color: var(--caution); }
.today-tile--bad { border-bottom-color: var(--critical); }
.today-tile--bad .today-tile__value { color: var(--critical); }
.today-tile--ok { border-bottom-color: var(--confirm); }

.dashboard-grid--nested { margin-top: 16px; }

.agenda-chip--info { border-left-color: var(--info); background: var(--info-soft); }
.agenda-chip__flag { color: var(--caution); font-weight: 500; }

.lead-card__next--overdue { box-shadow: inset 3px 0 0 var(--critical); }

/* Pestañas server-rendered: posición = negro, según la ley de color. */
.tab-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
    -webkit-overflow-scrolling: touch;
}

.tab-nav__link {
    flex: none;
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-500);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--r-pill);
}

.tab-nav__link:hover { color: var(--ink-900); }
.tab-nav__link.is-active { color: var(--surface); background: var(--ink-900); }

/* Barras de distribución de los reportes: relleno azul (actividad) en pasos
   de 5% mediante clases, porque la CSP prohíbe estilos inline. */
/* Búsqueda global ---------------------------------------------------------- */

.topbar-search { flex: 1; max-width: 340px; margin-left: auto; }

.topbar-search input {
    width: 100%;
    padding: 8px 15px;
    font-size: 0.85rem;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

.topbar-search input:focus-visible { border-color: var(--ink-900); outline: none; }

.search-page-form { display: flex; gap: 10px; }
.search-page-form input { flex: 1; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }

.search-results { display: grid; gap: 10px; }

.search-result {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--surface-soft);
    border-radius: var(--r-sm);
}

.search-result__main { display: grid; gap: 3px; min-width: 0; }
.search-result__appointment { display: flex; gap: 6px; align-items: center; color: var(--ink-600); }
.search-result__actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 767px) {
    .topbar-search { max-width: none; }
}

.report-group-title {
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.report-metric-card--good strong { color: var(--positive); }
.report-metric-card--bad { box-shadow: inset 3px 0 0 var(--critical); }
.report-metric-card--bad strong { color: var(--critical); }
.report-metric-card--warn { box-shadow: inset 3px 0 0 var(--attention); }
.report-metric-card--warn strong { color: var(--caution); }

.dist-bar {
    position: relative;
    height: 6px;
    min-width: 90px;
    overflow: hidden;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
}

.dist-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--info);
    border-radius: var(--r-pill);
}

.dist-bar__fill--5 { width: 5%; }
.dist-bar__fill--10 { width: 10%; }
.dist-bar__fill--15 { width: 15%; }
.dist-bar__fill--20 { width: 20%; }
.dist-bar__fill--25 { width: 25%; }
.dist-bar__fill--30 { width: 30%; }
.dist-bar__fill--35 { width: 35%; }
.dist-bar__fill--40 { width: 40%; }
.dist-bar__fill--45 { width: 45%; }
.dist-bar__fill--50 { width: 50%; }
.dist-bar__fill--55 { width: 55%; }
.dist-bar__fill--60 { width: 60%; }
.dist-bar__fill--65 { width: 65%; }
.dist-bar__fill--70 { width: 70%; }
.dist-bar__fill--75 { width: 75%; }
.dist-bar__fill--80 { width: 80%; }
.dist-bar__fill--85 { width: 85%; }
.dist-bar__fill--90 { width: 90%; }
.dist-bar__fill--95 { width: 95%; }
.dist-bar__fill--100 { width: 100%; }


/* Un <details> convertido desde un panel con encabezado: el summary alinea
   kicker y título en línea y conserva el cursor de control. */
details.panel > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    cursor: pointer;
}

details.panel > summary h2 { margin: 0; font-size: 1.06rem; }
details.panel > summary .panel-kicker { margin: 0; }
details.panel[open] > summary { margin-bottom: 14px; }

.attachment-transcript {
    margin: 4px 0 0;
    font-size: 0.84rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--ink-600);
}

/* --------------------------------------------------------------------------
   24b. Agenda comercial
   Rejilla renderizada en el servidor: sin librerías de calendario, sin CDN.
   El mes y la semana comparten celda; el día usa una sola columna ancha.
   -------------------------------------------------------------------------- */

.agenda-heading-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.agenda-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.agenda-views {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
}

.agenda-view-link {
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-500);
    text-decoration: none;
    border-radius: var(--r-pill);
}

.agenda-view-link[aria-current="page"] {
    color: var(--surface);
    background: var(--ink-900);
}

.agenda-stepper {
    display: inline-flex;
    gap: 8px;
}

.agenda-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
    align-items: start;
}

.agenda-layout--single { grid-template-columns: minmax(0, 1fr); }
.agenda-sidebar { display: grid; gap: 20px; }

.agenda-grid {
    display: grid;
    gap: 8px;
}

.agenda-grid--month,
.agenda-grid--week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-grid--day { grid-template-columns: minmax(0, 1fr); }

.agenda-grid__weekday {
    margin: 0;
    padding-bottom: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-400);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agenda-day {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 108px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.agenda-grid--day .agenda-day { min-height: 220px; }
.agenda-day--muted { background: var(--surface-soft); opacity: 0.72; }
.agenda-day--today { border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }

.agenda-day__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.agenda-day__number {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-800);
    text-decoration: none;
}

.agenda-day__number:hover { text-decoration: underline; }
.agenda-day__label { font-size: 0.78rem; color: var(--ink-500); }

.agenda-day__count {
    min-width: 19px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--surface);
    text-align: center;
    background: var(--ink-900);
    border-radius: var(--r-pill);
}

.agenda-day__empty { margin: 0; font-size: 0.75rem; color: var(--ink-400); }
.agenda-day__list { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }

.agenda-chip {
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    color: inherit;
    text-decoration: none;
    background: var(--surface-soft);
    border-left: 3px solid var(--ink-300);
    border-radius: var(--r-xs);
}

.agenda-chip:hover { background: var(--surface-sunken); }
.agenda-chip--active { border-left-color: var(--ink-900); }
.agenda-chip--success { border-left-color: var(--positive); background: var(--positive-soft); }
.agenda-chip--danger { border-left-color: var(--critical); background: var(--critical-soft); }
.agenda-chip--neutral { border-left-color: var(--ink-300); }

.agenda-chip__time { font-size: 0.72rem; font-weight: 500; color: var(--ink-600); }

.agenda-chip__title {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink-900);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-chip__meta { font-size: 0.7rem; color: var(--ink-500); }

.agenda-slot-list { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }

.agenda-slot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    font-size: 0.83rem;
    color: inherit;
    text-decoration: none;
    background: var(--surface-soft);
    border-radius: var(--r-xs);
}

.agenda-slot:hover { background: var(--surface-sunken); }
.agenda-slot__date { color: var(--ink-600); }
.agenda-slot__time { font-weight: 500; color: var(--ink-900); }

.agenda-detail {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
    align-items: start;
}

.agenda-detail__main,
.agenda-detail__side { display: grid; gap: 20px; }

/* Ficha de preparación y bloques de detalle --------------------------------- */

.detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
}

.detail-grid > div { display: grid; gap: 3px; min-width: 0; }

.detail-grid dt {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-grid dd { margin: 0; font-size: 0.88rem; color: var(--ink-800); }

.detail-block { display: grid; gap: 6px; }
.detail-block h3 { font-size: 0.92rem; font-weight: 500; }
.detail-text { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-700); }

.form-grid-two {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.field-hint { font-size: 0.74rem; color: var(--ink-500); }

.availability-table { width: 100%; border-collapse: collapse; }

.availability-table th,
.availability-table td {
    padding: 7px 8px;
    font-size: 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}

.availability-table thead th {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.availability-table tbody th { font-weight: 500; }
.availability-table input[type="time"] { width: 100%; max-width: 150px; }

.timeline__title { margin: 0; font-size: 0.88rem; font-weight: 500; color: var(--ink-900); }
.timeline__meta { margin: 0; font-size: 0.74rem; color: var(--ink-500); }
.timeline__body { margin: 0; font-size: 0.85rem; color: var(--ink-700); }

@media (max-width: 1180px) {
    .agenda-layout,
    .agenda-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    /* En pantallas estrechas el mes no cabe en siete columnas legibles:
       la rejilla pasa a una lista de días y se ocultan los encabezados. */
    .agenda-grid--month,
    .agenda-grid--week { grid-template-columns: minmax(0, 1fr); }

    .agenda-grid__weekday { display: none; }
    .agenda-day { min-height: 0; }
    .agenda-day--muted { display: none; }
    .agenda-toolbar { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   25. Tablet · hasta 1180px
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    :root { --sidebar-w: var(--sidebar-w-collapsed); }

    /* En tablet el sidebar arranca colapsado a iconos, pero sigue siendo conmutable */
    .app-sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); padding-inline: 16px; }
    body:not(.sidebar-expanded) .app-sidebar__head { flex-direction: column; gap: 18px; padding-inline: 0; }
    body:not(.sidebar-expanded) .app-sidebar .brand-name,
    body:not(.sidebar-expanded) .session-user__copy { display: none; }
    body:not(.sidebar-expanded) .nav-link { justify-content: center; padding: 7px; }
    body:not(.sidebar-expanded) .nav-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
    body:not(.sidebar-expanded) .nav-link::after {
        position: absolute;
        top: 50%;
        left: calc(100% + 14px);
        z-index: 60;
        padding: 7px 13px;
        font-size: 0.8rem;
        font-weight: 500;
        white-space: nowrap;
        color: var(--surface);
        background: var(--ink-900);
        border-radius: var(--r-xs);
        content: attr(data-label);
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-8px, -50%, 0);
        transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
    }
    body:not(.sidebar-expanded) .nav-link:hover::after { opacity: 1; transform: translate3d(0, -50%, 0); }
    body:not(.sidebar-expanded) .session-menu { flex-direction: column; gap: 12px; padding: 8px 0; }
    body:not(.sidebar-expanded) .nav-section-label { height: 1px; padding: 0; margin: 12px 14px; overflow: hidden; color: transparent; background: var(--line); }
    body:not(.sidebar-expanded) .nav-section-label:first-child { margin-top: 0; }

    /* Sidebar expandido en tablet: se superpone en lugar de empujar */
    body.sidebar-expanded .app-sidebar {
        position: fixed;
        z-index: 80;
        width: 268px;
        flex-basis: 268px;
        padding-inline: 18px;
        box-shadow: var(--shadow-xl);
    }

    .page-shell, .app-topbar { padding-inline: 24px; }
    .site-footer { padding-inline: 24px; }
    .inbox-workspace { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }

    /* En tablet el contexto baja a ancho completo bajo el hilo. */
    .inbox-workspace--detail { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr); }
    .inbox-workspace--detail > .conversation-context { grid-column: 1 / -1; }

    .crm-index-layout,
    .knowledge-admin-grid,
    .tasks-layout,
    .users-layout,
    .lead-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .account-summary { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   26. Móvil · hasta 860px  (prioridad de diseño)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    body { font-size: 15px; }

    /* El sidebar desaparece; navegación por dock inferior + hoja */
    .app-sidebar { display: none; }
    .app-shell { display: block; }

    .app-topbar {
        /* Reserva a la derecha el hueco del disparador fijo del menú. */
        padding: 12px 72px 12px 18px;
        min-height: 68px;
    }

    .mobile-menu-trigger { display: grid; }
    .mobile-navigation { display: contents; }
    body.is-authenticated .mobile-primary-nav { display: flex; }

    /* En móvil manda el saludo; el título de sección lo cubre el <h1> de la vista. */
    .topbar-greeting { display: inline-flex; }
    .app-topbar__title { display: none; }

    /* Búsqueda: el botón se compacta para no comerse el campo. */
    .inbox-search { padding-left: 13px; }
    .inbox-search button { padding: 9px 14px; }

    /* Espacio para el dock flotante */
    body.is-authenticated .page-shell { padding-bottom: calc(var(--dock-h) + 34px); }
    body.is-authenticated .site-footer { padding-bottom: calc(var(--dock-h) + 30px); }

    .page-shell { padding-inline: 18px; padding-top: 4px; }
    .site-footer { padding-inline: 18px; }

    /* Titulares grandes, al estilo de la referencia móvil */
    .page-heading { margin-bottom: 20px; }
    .page-heading h1,
    .page-title { font-size: clamp(1.9rem, 1.5rem + 3.4vw, 2.4rem); line-height: 1.08; }
    .page-heading--split { align-items: flex-start; }

    /* Densidad */
    .panel,
    .summary-card,
    .status-card,
    .context-card,
    .form-panel,
    .create-user-card,
    .crm-create-card,
    .user-card,
    .lead-card,
    .conversation-context,
    .knowledge-preview-card,
    .error-panel,
    .invitation-panel { padding: 19px; border-radius: var(--r-lg); }

    fieldset.settings-section,
    fieldset.role-fieldset,
    fieldset.compact-fieldset { padding: 19px; border-radius: var(--r-lg); }

    .content-stack { gap: 20px; }
    .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
    .account-summary { grid-column: 1 / -1; }
    .action-card { padding: 17px; gap: 12px; }
    .action-card h2 { font-size: 0.93rem; }
    .action-card p { display: none; }
    .action-card__icon { width: 40px; height: 40px; }

    .summary-grid,
    .report-metric-grid { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
    .summary-card, .status-card { padding: 17px; }
    .summary-card strong, .status-card strong, .metric-value { font-size: 1.55rem; }

    /* Bandeja apilada */
    .inbox-workspace,
    .inbox-workspace--detail { grid-template-columns: minmax(0, 1fr); }
    .inbox-pane--list { position: static; max-height: none; }
    .inbox-page--detail .inbox-pane--list { display: none; }
    .inbox-pane--welcome { min-height: 300px; padding: 46px 22px; }
    .messages-viewport { max-height: none; padding: 18px 15px; }
    .message { max-width: 88%; }
    .conversation-toolbar,
    .composer-shell,
    .composer { padding: 15px 16px; }

    /* Formularios a una columna */
    .form-grid--two,
    .form-grid--three,
    .form-grid--task,
    .filter-grid,
    .settings-columns,
    .check-grid,
    .checkbox-list,
    .compact-checks,
    .content-grid--two,
    .feature-grid,
    .detail-list--grid { grid-template-columns: minmax(0, 1fr); }

    /* Objetivos táctiles cómodos */
    input[type="text"], input[type="email"], input[type="password"], input[type="search"],
    input[type="number"], input[type="url"], input[type="tel"], input[type="date"],
    input[type="datetime-local"], input[type="time"], select, textarea { padding: 13px 15px; font-size: 16px; }

    .button { padding: 13px 22px; }
    .button--block, .form-actions .button, .filter-actions .button { flex: 1; }

    /* Tablas convertidas en tarjetas */
    .table-wrap { border: 0; background: transparent; overflow: visible; }
    .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
    .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

    .table-wrap tbody tr {
        display: grid;
        gap: 7px;
        padding: 17px;
        margin-bottom: 10px;
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
    }

    .table-wrap tbody tr:hover { background: var(--surface); }
    .table-wrap tbody td { padding: 0; border: 0; }

    .table-wrap tbody td[data-label]::before {
        display: block;
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-400);
        content: attr(data-label);
    }

    .task-table tbody tr.task-row--overdue { box-shadow: inset 3px 0 0 var(--critical); }
    .task-table tbody tr.task-row--overdue td:first-child { box-shadow: none; }

    .pipeline-board { grid-auto-columns: minmax(83vw, 1fr); }
    .lead-detail-layout, .crm-index-layout, .knowledge-admin-grid, .tasks-layout, .users-layout { grid-template-columns: minmax(0, 1fr); }

    /* Variantes por vista (sección 22b) a una columna. */
    .inbox-workspace--empty,
    .filter-grid--crm,
    .filter-grid--inbox,
    .filter-grid--knowledge,
    .filter-grid--pipeline,
    .filter-grid--tasks,
    .report-filter-grid,
    .record-detail-grid,
    .report-breakdown-grid,
    .report-detail-grid,
    .quick-reply-grid { grid-template-columns: minmax(0, 1fr); }

    .report-metric-card { padding: 17px; }
    .report-metric-card strong { font-size: 1.45rem; }
    .phase-banner { padding: 16px 18px; border-radius: var(--r-lg); }
    .auth-card { padding: 26px; border-radius: var(--r-xl); }
    .hero { padding: 30px 0 22px; }
}

/* --------------------------------------------------------------------------
   27. Móvil compacto · hasta 480px
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .page-shell, .site-footer { padding-inline: 14px; }
    .app-topbar { padding-left: 14px; padding-right: 66px; }
    .mobile-menu-trigger { right: 14px; }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-grid, .report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobile-primary-nav a { padding: 10px; }
    .mobile-primary-nav a[aria-current="page"] { padding-right: 15px; }
    .button { width: 100%; }
    .heading-actions, .form-actions, .actions { width: 100%; }
    .heading-actions > *, .form-actions > *, .actions > * { flex: 1; }
}

/* --------------------------------------------------------------------------
   28. Escritorio amplio
   -------------------------------------------------------------------------- */

@media (min-width: 1600px) {
    .page-shell { max-width: 1560px; }
    .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

/* --------------------------------------------------------------------------
   28b. Notificaciones flotantes
   -------------------------------------------------------------------------- */

.notification-region {
    position: fixed;
    top: calc(var(--topbar-h) + 16px);
    right: 24px;
    z-index: 120;
    display: grid;
    width: min(430px, calc(100vw - 48px));
    gap: 12px;
    pointer-events: none;
}

.app-notification {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px;
    overflow: hidden;
    color: var(--surface);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.13), transparent 42%),
        var(--ink-900);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-xl) var(--r-xl) var(--r-xs) var(--r-xl);
    box-shadow: var(--shadow-ink-lg);
    pointer-events: auto;
    animation: notification-in var(--t-slow) var(--ease-spring) both;
}

.app-notification::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--attention);
    content: "";
}

.app-notification--error::before { background: #ff675e; }
.app-notification.is-leaving { animation: notification-out 180ms var(--ease-in-out) both; }

.app-notification__header {
    display: grid;
    align-items: center;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.app-notification__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-900);
    background: var(--attention);
    border-radius: var(--r-pill);
}

.app-notification--error .app-notification__icon { background: #ff675e; }
.app-notification__heading { display: grid; gap: 1px; min-width: 0; }

.app-notification__eyebrow {
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.app-notification h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--surface);
}

.app-notification__close {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.app-notification__close:hover,
.app-notification__close:focus-visible {
    color: var(--ink-900);
    background: var(--surface);
}

.app-notification__message {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

.app-notification__request {
    margin: -4px 0 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-notification__action {
    justify-self: start;
    padding: 8px 13px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-900);
    background: var(--surface);
    border-radius: var(--r-pill);
}

@keyframes notification-in {
    from { opacity: 0; transform: translate3d(24px, -8px, 0) scale(0.96); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes notification-out {
    to { opacity: 0; transform: translate3d(20px, 0, 0) scale(0.97); }
}

@media (max-width: 767px) {
    .notification-region {
        top: 78px;
        right: 14px;
        width: calc(100vw - 28px);
    }

    .app-notification { padding: 16px; }
}

/* --------------------------------------------------------------------------
   29. Impresión
   -------------------------------------------------------------------------- */

@media print {
    .app-sidebar, .app-topbar, .mobile-primary-nav, .mobile-navigation, .notification-region, .site-footer, .button, .form-actions { display: none !important; }
    .app-shell { display: block; }
    .page-shell { max-width: none; padding: 0; }
    .panel, .summary-card { border: 1px solid #ddd; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   30. Movimiento reducido
   -------------------------------------------------------------------------- */

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

    [data-reveal] { opacity: 1; transform: none; }
}

/* Acciones de tokens de analítica y campo con botón copiar */
.token-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.copy-field{display:flex;gap:.5rem;align-items:stretch}
.copy-field input{flex:1 1 auto;min-width:0}
.copy-field .button{flex:0 0 auto;white-space:nowrap}


/* Pop-up "Agendar cita" desde la conversación */
.schedule-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem}
.schedule-modal[hidden]{display:none}
.schedule-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.schedule-modal__panel{position:relative;background:var(--surface,#fff);color:inherit;border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:1.25rem 1.5rem;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.schedule-modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.5rem}
.schedule-slots{display:flex;flex-wrap:wrap;gap:.4rem;margin:.25rem 0}
.schedule-slot--active{outline:2px solid var(--accent,#156f52);outline-offset:1px}