/* ============================================================
   Camsol CRM: sistema de diseño

   Estructura tomada del layout de wacrm: shell de alto completo
   con sidebar fijo, barra superior de 56 px, contenido con
   tarjetas de borde de 1 px y esquinas de 12 px. El color y la
   tipografía son los de Camsol (naranja International, negro
   del HUB y las fuentes International), y cambian con la marca
   activa: global pone data-brand en <html>.

   Modo claro y oscuro con data-mode en <html>. Claro por
   defecto, como el HUB; el interruptor vive en la barra
   superior y se guarda en el navegador.

   Orden: tokens, fuentes, base, tipografía, formularios,
   distintivos, tarjetas, tablas, pestañas, diálogos, shell,
   utilidades y responsive.
   ============================================================ */

/* ── Tokens: modo claro ─────────────────────────────────────── */
:root,
html[data-mode="light"] {
    --bg: #f4f4f3;
    --surface: #ffffff;
    --surface-2: #faf9f8;
    --surface-3: #f0efed;
    --sidebar-bg: #272623;
    --sidebar-text: #e7e6e3;
    --sidebar-muted: #9d9c97;
    --sidebar-border: #3a3936;
    --sidebar-hover: #34332f;
    --text: #272623;
    --text-muted: #6f6e6a;
    --text-soft: #92918c;
    --border: #e2e1de;
    --border-strong: #cdccc8;
    --ok: #1e8449;
    --ok-soft: rgba(30, 132, 73, .1);
    --warn: #b7791f;
    --warn-soft: rgba(183, 121, 31, .12);
    --danger: #c0392b;
    --danger-soft: rgba(192, 57, 43, .1);
    --shadow: 0 1px 2px rgba(39, 38, 35, .06);
    --shadow-lg: 0 12px 32px rgba(39, 38, 35, .16);
}

/* ── Tokens: modo oscuro ────────────────────────────────────── */
html[data-mode="dark"] {
    --bg: #17171a;
    --surface: #1f1f22;
    --surface-2: #26262a;
    --surface-3: #2e2e33;
    --sidebar-bg: #141416;
    --sidebar-text: #ececef;
    --sidebar-muted: #8d8d95;
    --sidebar-border: #2b2b30;
    --sidebar-hover: #26262a;
    --text: #f2f2f4;
    --text-muted: #a1a1a9;
    --text-soft: #7c7c85;
    --border: #2f2f35;
    --border-strong: #3d3d44;
    --ok: #3ec27a;
    --ok-soft: rgba(62, 194, 122, .14);
    --warn: #e0a23c;
    --warn-soft: rgba(224, 162, 60, .14);
    --danger: #ef6a5c;
    --danger-soft: rgba(239, 106, 92, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);
}

/* ── Tokens comunes ─────────────────────────────────────────── */
:root {
    --sidebar-w: 248px;
    --topbar-h: 56px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --gap: 20px;
    --pad-x: 24px;
    --control-h: 34px;

    --titulo: "International Headline", "Segoe UI", system-ui, sans-serif;
    --texto: "International Text", "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Color de cada marca: el punto del selector y los distintivos. */
    --brand-camsol: #fc4d0e;
    --brand-idealease: #3a6ff0;
    --brand-quality-trucks: #e2231a;

    /* Acento de la marca activa. Camsol por defecto. */
    --accent: #fc4d0e;
    --accent-hover: #d43d08;
    --accent-soft: rgba(252, 77, 14, .12);
    --accent-soft-2: rgba(252, 77, 14, .22);
    --accent-contrast: #ffffff;
    /* Sobre el sidebar oscuro el acento necesita más luz. */
    --accent-on-dark: #ff7a45;
}

html[data-brand="idealease"] {
    --accent: #0033a0;
    --accent-hover: #002677;
    --accent-soft: rgba(0, 51, 160, .12);
    --accent-soft-2: rgba(0, 51, 160, .22);
    --accent-on-dark: #7196ff;
}

html[data-brand="quality-trucks"] {
    --accent: #d82627;
    --accent-hover: #b81f20;
    --accent-soft: rgba(216, 38, 39, .12);
    --accent-soft-2: rgba(216, 38, 39, .22);
    --accent-on-dark: #ff6f6f;
}

/* En oscuro el acento de marca se aclara para no perder contraste sobre el fondo. */
html[data-mode="dark"] { --accent-soft: rgba(255, 255, 255, .07); }
html[data-mode="dark"][data-brand="camsol"] { --accent: #ff7a45; --accent-hover: #ff8f61; --accent-contrast: #1a1a1c; }
html[data-mode="dark"][data-brand="idealease"] { --accent: #7196ff; --accent-hover: #8dabff; --accent-contrast: #1a1a1c; }
html[data-mode="dark"][data-brand="quality-trucks"] { --accent: #ff6f6f; --accent-hover: #ff8a8a; --accent-contrast: #1a1a1c; }

/* ── Fuentes de marca ───────────────────────────────────────── */
@font-face{font-family:"International Headline";src:url("/font/intl-headline/INTLHeadlineOffice-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"International Headline";src:url("/font/intl-headline/INTLHeadlineOffice-Medium.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"International Headline";src:url("/font/intl-headline/INTLHeadlineOffice-Regular.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"International Headline";src:url("/font/intl-headline/INTLHeadlineOffice-Light.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-Medium.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-MediumItalic.woff") format("woff");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-Regular.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-RegularItalic.woff") format("woff");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-Light.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"International Text";src:url("/font/intl-text/INTLTextOffice-LightItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--texto);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

svg { flex: none; }
img { max-width: 100%; height: auto; }

::selection { background: var(--accent-soft-2); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Tipografía ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--titulo);
    color: var(--text);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.01em;
}

h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 13px; font-weight: 600; }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: 12px; }

code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

.muted { color: var(--text-muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* ── Botones ────────────────────────────────────────────────── */
button, .btn {
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--control-h);
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}

button:hover:not(:disabled), .btn:hover { background: var(--surface-3); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary, .btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
button.primary:hover:not(:disabled), .btn.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

button.danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}
button.danger:hover:not(:disabled) { background: var(--danger-soft); }

/* Acción destructiva ya confirmada: relleno sólido para que sea la única llamada del diálogo. */
button.danger.solid { background: var(--danger); color: #fff; }
button.danger.solid:hover:not(:disabled) { background: var(--danger); filter: brightness(.92); }

/* Botón sin marco, para acciones secundarias dentro de una fila o tarjeta. */
button.quiet {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 600;
}
button.quiet:hover:not(:disabled) { background: none; text-decoration: underline; }
button.quiet.danger { color: var(--danger); }

button.icon-btn {
    width: var(--control-h);
    padding: 0;
    color: var(--text-muted);
}
button.icon-btn:hover:not(:disabled) { color: var(--text); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Formularios ────────────────────────────────────────────── */
label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

label > input, label > select, label > textarea, label > .pass-wrap, label > .phone-field { margin-top: 5px; }

.phone-field { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 6px; }
.phone-field select { padding: 0 4px 0 8px; }

input, select, textarea {
    font: inherit;
    font-size: 13px;
    width: 100%;
    height: var(--control-h);
    padding: 0 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .12s, box-shadow .12s;
}

textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
select { cursor: pointer; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="checkbox"], input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

input::placeholder, textarea::placeholder { color: var(--text-soft); }

fieldset { border: 0; margin: 0; padding: 0; }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 14px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 38px; }
.btn-toggle-pass {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: var(--control-h);
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
}
.btn-toggle-pass:hover { background: none; color: var(--text); }

/* Interruptor: el mismo control para la IA de una conversación y para las opciones de configuración. */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
    position: relative;
    width: 34px;
    height: 20px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    transition: background .15s;
}
.switch .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }

/* ── Distintivos y fichas ───────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 21px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.badge.si { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.badge.no { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.badge.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.badge.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }

.dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--text-soft);
}
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.danger { background: var(--danger); }

/* ── Tarjetas y paneles ─────────────────────────────────────── */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.panel-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
    min-height: 46px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
}
.panel-head h2 { display: flex; align-items: center; gap: 8px; }
.panel-head .actions { margin-left: auto; }

.panel-body { padding: 18px; }
.panel-body > * + * { margin-top: 14px; }

.panel-intro {
    color: var(--text-muted);
    font-size: 13px;
    max-width: 70ch;
}

.panel-intro-wide { max-width: none; }

.hint-list { color: var(--text-muted); font-size: 13px; padding-left: 18px; display: grid; gap: 2px; }
.hint-list strong { color: var(--text); }

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.grid { display: grid; gap: 16px; }
/* Sin esto una tabla o un texto largo ensancha la columna más allá de la pantalla. */
.stack > *, .grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* Tarjeta de indicador del resumen: título, ícono, cifra grande y comparación. */
.metric {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.metric-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.metric-top p { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--text-muted);
}
.metric-value {
    margin-top: 12px;
    font-family: var(--titulo);
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.metric-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-muted);
}
.metric-foot.up { color: var(--ok); }
.metric-foot.down { color: var(--danger); }

/* Gráfica de barras del resumen y de reportes. */
.chart { width: 100%; height: auto; }
.chart rect { fill: var(--accent); }
.chart text { fill: var(--text-muted); font-family: var(--texto); font-size: 11px; text-anchor: middle; }
.chart .axis { stroke: var(--border); stroke-width: 1; }

/* Embudo: etiqueta, cifra y barra de proporción. */
.funnel { display: flex; flex-direction: column; gap: 11px; }
.funnel-step {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    font-size: 13px;
}
.funnel-step strong { font-variant-numeric: tabular-nums; }
.funnel-step meter { grid-column: 1 / -1; width: 100%; height: 6px; }
meter { -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--surface-3); }
meter::-webkit-meter-bar { border: 0; border-radius: var(--radius-pill); background: var(--surface-3); }
meter::-webkit-meter-optimum-value { border-radius: var(--radius-pill); background: var(--accent); }
meter::-moz-meter-bar { border-radius: var(--radius-pill); background: var(--accent); }

/* Estados vacíos y de carga, iguales en toda la aplicación. */
.empty {
    padding: 38px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.empty strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }

.spinner {
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border: 2px solid var(--accent-soft-2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2s; }
    * { transition-duration: .01ms !important; }
}

/* Aviso de la página: resultado de una acción o error de carga. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid var(--ok);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--ok-soft);
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.notice.error { border-color: var(--danger); background: var(--danger-soft); }
.notice.info { border-color: var(--accent); background: var(--accent-soft); }

/* ── Tablas ─────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

thead th {
    position: sticky;
    top: 0;
    padding: 9px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--texto);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tbody td.empty { background: none; }
tbody tr:hover td.empty { background: none; }

/* Fila que separa un grupo de filas (por ejemplo, filas agrupadas por categoría). */
tr.group-row td {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cell-main { display: block; font-weight: 600; color: var(--text); }
.cell-sub { display: block; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }

/* Paginación, debajo de cada tabla. */
#pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
}
#pagination div { display: flex; gap: 8px; }

/* ── Filtros ────────────────────────────────────────────────── */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.filters label { flex: 1 1 170px; min-width: 0; }
.filters .actions { margin-left: auto; }

/* Grupo de botones excluyentes: el alcance del inbox, el rango del resumen. */
.segmented {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.segmented button {
    height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
}
.segmented button:hover:not(:disabled) { background: none; color: var(--text); }
.segmented button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

/* ── Pestañas de sección ────────────────────────────────────── */
.page-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a {
    padding: 9px 13px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.page-tabs a:hover { color: var(--text); text-decoration: none; }
.page-tabs a[aria-current="page"] {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

/* ── Diálogos ───────────────────────────────────────────────── */
dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(23, 23, 26, .55); }
dialog .panel-head { flex: none; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
dialog .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog .dialog-foot {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
}
dialog.confirm-dialog { width: min(440px, calc(100vw - 32px)); }
dialog.confirm-dialog .panel-body > * + * { margin-top: 14px; }

/* ── Shell: sidebar + barra superior + contenido ────────────── */
.app {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

#sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    flex: none;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    flex: none;
    padding: 0 16px;
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand .mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
}
.sidebar-brand .marca {
    display: block;
    font-family: var(--titulo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.2;
}
.sidebar-brand .sub {
    display: block;
    color: var(--sidebar-muted);
    font-size: 10px;
    letter-spacing: .03em;
}

.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px;
}

/* Selector de marca: el mismo patrón del HUB, sobre la barra oscura. */
.brand-switch { position: relative; margin-bottom: 12px; }
.brand-switch-btn, .brand-current {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    text-align: left;
}
.brand-switch-btn:hover:not(:disabled) { background: var(--sidebar-hover); border-color: var(--sidebar-muted); }
.brand-switch-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.2; }
.brand-switch-label small {
    display: block;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.brand-switch-btn .chevron { margin-left: auto; color: var(--sidebar-muted); }

.brand-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--brand-camsol);
}
.brand-dot[data-brand="idealease"] { background: var(--brand-idealease); }
.brand-dot[data-brand="quality-trucks"] { background: var(--brand-quality-trucks); }

.brand-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    padding: 5px;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    background: var(--sidebar-hover);
    box-shadow: var(--shadow-lg);
}
.brand-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 34px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--sidebar-text);
    font-size: 12px;
    text-align: left;
}
.brand-menu button:hover:not(:disabled) { background: rgba(255, 255, 255, .07); }
.brand-menu-label { flex: 1; min-width: 0; font-weight: 600; }
.brand-menu-label small { display: block; color: var(--sidebar-muted); font-weight: 500; font-size: 10px; }
.brand-menu .check { color: var(--accent-on-dark); }

/* Ver como (solo Administrador): se resalta mientras se simula otro rol. */
.view-as { margin-bottom: 12px; }
.view-as label small {
    display: block;
    margin-bottom: 4px;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.view-as select {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    font-size: 12px;
    font-weight: 600;
}
.view-as.active select { border-color: var(--accent-on-dark); }

.brand-empty {
    padding: 10px;
    color: var(--sidebar-muted);
    font-size: 12px;
}

.nav-titulo {
    padding: 14px 10px 5px;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-muted);
    font-size: 13px;
    font-weight: 600;
}
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text); text-decoration: none; }
.nav-link svg { color: currentColor; opacity: .85; }
.nav-link span { min-width: 0; overflow-wrap: anywhere; }
.nav-link[aria-current="page"] {
    background: var(--sidebar-hover);
    color: var(--accent-on-dark);
}

.sidebar-foot {
    flex: none;
    padding: 10px;
    border-top: 1px solid var(--sidebar-border);
}
.sf-user {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--sidebar-text);
    text-align: left;
}
.sf-user:hover:not(:disabled) { background: var(--sidebar-hover); }
.sf-user .avatar { background: rgba(255, 255, 255, .1); color: var(--sidebar-text); }
.sf-user-info { min-width: 0; flex: 1; text-align: left; }
.sf-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-role {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sidebar-muted);
    font-size: 11px;
}

/* Columna de contenido */
.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

#topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--topbar-h);
    flex: none;
    padding: 0 var(--pad-x);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.topbar-title { min-width: 0; flex: 0 1 auto; }
.topbar-title h1 {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-title small {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
#topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
#page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.sidebar-backdrop { display: none; }

.sidebar-toggle { display: none; }

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--gap);
    min-height: 0;
    overflow-y: auto;
    padding: var(--gap) var(--pad-x) 34px;
}
main > * { flex: none; }
#content { display: flex; flex-direction: column; gap: var(--gap); }

/* El inbox ocupa todo el alto: sin padding ni scroll de la página. */
main.full-height {
    gap: 0;
    padding: 0;
    overflow: hidden;
}
main.full-height .page-tabs { flex: none; padding: 0 var(--pad-x); background: var(--surface); }
main.full-height #notice { flex: none; margin: 10px var(--pad-x) 0; }
main.full-height #content {
    flex: 1;
    gap: 0;
    min-height: 0;
}

footer {
    padding-top: 10px;
    color: var(--text-soft);
    font-size: 11px;
}

/* ── Menú de la cuenta (barra superior y pie del sidebar) ───── */
.menu-anchor { position: relative; }

.menu {
    position: absolute;
    z-index: 40;
    min-width: 210px;
    max-width: calc(100vw - 24px);
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.menu-head {
    padding: 7px 9px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.menu-head strong { display: block; font-size: 13px; }
.menu-head small { color: var(--text-muted); }
.menu a, .menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
.menu a:hover, .menu button:hover:not(:disabled) { background: var(--surface-3); text-decoration: none; }
.menu button.danger { color: var(--danger); }
.menu .sep { height: 1px; margin: 4px 0; background: var(--border); }
.menu.menu-end { right: 0; }
.menu.menu-start { left: 0; }
.menu.menu-down { top: calc(100% + 5px); }
.menu.menu-up { bottom: calc(100% + 5px); }

.account-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 9px 0 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
}
.account-chip:hover:not(:disabled) { background: var(--surface-3); }
.account-info { min-width: 0; max-width: 160px; text-align: left; line-height: 1.2; }
.account-info strong, .account-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-info strong { font-size: 12px; }
.account-info small { color: var(--text-muted); font-size: 11px; }

/* ── Burbujas de conversación ───────────────────────────────── */
/* Las usan el inbox de WhatsApp, la ficha del lead y el inbox del bot. */

.messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 58vh;
    max-height: 58dvh;
    overflow-y: auto;
    padding: 16px 18px;
}

.day-sep {
    align-self: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.message {
    max-width: min(560px, 78%);
    padding: 8px 12px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-bottom-left-radius: 4px;
    background: var(--surface);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.message.out {
    align-self: flex-end;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: 4px;
    border-color: transparent;
    background: var(--accent-soft-2);
}

/* Adjunto de un mensaje: imagen, audio o video se ven ahí mismo; un documento es un enlace de descarga. */
.message-media { display: block; max-width: 260px; max-height: 260px; margin-bottom: 4px; border-radius: var(--radius-md, 8px); }
.message-attachment { display: inline-flex; align-items: center; margin-bottom: 4px; color: inherit; text-decoration: underline; }

.message small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
}
.message small .failed { color: var(--danger); font-weight: 700; }

/* ── Notas internas, reutilizadas por el inbox y el lead ────── */
.note {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: 13px;
}
.note small { display: block; margin-top: 4px; color: var(--text-muted); }
.notes-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Lista de definición para fichas de datos ───────────────── */
.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}
.facts dt { color: var(--text-muted); }
.facts dt, .facts dd { min-width: 0; overflow-wrap: anywhere; }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --pad-x: 16px; --gap: 16px; }

    #sidebar {
        position: fixed;
        z-index: 50;
        inset: 0 auto 0 0;
        width: min(var(--sidebar-w), 86vw);
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .18s ease-out, visibility 0s .18s;
    }
    #sidebar.open { visibility: visible; transform: none; transition-delay: 0s; }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(23, 23, 26, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s;
    }
    .sidebar-backdrop:hover:not(:disabled) { background: rgba(23, 23, 26, .5); }
    .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

    .sidebar-toggle {
        display: inline-flex;
        width: var(--control-h);
        padding: 0;
        border: 0;
        background: none;
        color: var(--text-muted);
    }

    .account-info { display: none; }
}

/* Pantallas de teléfono y tableta vertical: la barra superior deja las acciones de la página en su propia fila. */
@media (max-width: 720px) {
    #topbar {
        flex-wrap: wrap;
        gap: 8px;
        height: auto;
        min-height: var(--topbar-h);
        padding-block: 8px;
    }
    #topbar .topbar-right { display: contents; }
    .topbar-title { flex: 1 1 0; }
    #mode-toggle { order: 1; margin-left: auto; }
    .account-chip { order: 2; }
    #page-actions { order: 3; flex: 1 0 100%; }
    #page-actions:empty { display: none; }
    #page-actions > * { flex: 1 1 auto; }

    .panel-body { padding: 14px; }
    .panel-head, .filters { padding-inline: 14px; }
    #pagination { padding-inline: 14px; }
    .legend { padding-inline: 14px; }
    .empty { padding: 28px 14px; }

    /* Tablas del CRM como tarjetas: cada celda muestra su encabezado a la izquierda. */
    .table-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
    .table-cards tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .table-cards tbody tr:last-child { border-bottom: 0; }
    .table-cards tbody tr:hover td { background: none; }
    .table-cards tbody td {
        position: relative;
        min-height: 26px;
        padding: 5px 0 5px 42%;
        border: 0;
        overflow-wrap: anywhere;
    }
    .table-cards td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        top: 6px;
        left: 0;
        width: 38%;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .03em;
        text-transform: uppercase;
    }
    .table-cards td[data-label=""] { padding-left: 0; }
    .table-cards td[data-label=""]::before { content: none; }
    .table-cards td.empty { padding: 28px 0; }
    .table-cards td.empty::before { content: none; }

    .access-matrix th[scope="row"] { min-width: 120px; }
    .access-matrix th[scope="row"] small { display: none; }
    .roles-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .filters { flex-direction: column; align-items: stretch; }
    .filters label { flex: none; }
    .filters .actions { margin-left: 0; }
    .filters .actions > button { flex: 1; }
    .topbar-title small { display: none; }
    dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    dialog .panel-head { border-radius: 0; }
    /* La confirmación sube desde abajo, no ocupa toda la pantalla. */
    dialog.confirm-dialog {
        width: 100vw;
        height: auto;
        margin: auto 0 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    dialog.confirm-dialog .panel-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    dialog .dialog-foot > button { flex: 1 1 auto; }
    .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .metric { padding: 14px; }
    .metric-value { margin-top: 10px; font-size: 24px; }
}

/* Teléfono en horizontal: el inbox no cabe en el alto, así que la página vuelve a desplazarse y el inbox conserva un alto útil. */
@media (max-height: 560px) {
    main.full-height { overflow-y: auto; }
    main.full-height #content { flex: none; min-height: 440px; }
}

/* Pantallas táctiles: controles de 40 px y texto de 16 px para que el navegador no acerque la vista al enfocar. */
@media (pointer: coarse) {
    :root { --control-h: 40px; }
    input, select, textarea { font-size: 16px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .row-actions button { height: 34px; }
    .segmented button { height: 32px; }
    .nav-link { padding-block: 11px; }
    .menu a, .menu button, .brand-menu button { height: 40px; }
}

/* ============================================================
   Piezas de páginas concretas

   Se quedan aquí, y no en hojas propias, porque son pocas
   reglas y así el CRM sigue cargando una sola hoja.
   ============================================================ */

legend {
    padding: 0 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

fieldset > * + * { margin-top: 12px; }
fieldset[disabled] { opacity: .65; }

/* Bloque de texto preformateado: código embebido, registros de importación. */
.code-block {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Botones de acción dentro de una fila de tabla. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.row-actions button, .row-actions .btn { height: 28px; padding: 0 9px; font-size: 12px; }

/* Página de una decisión de la IA: el recorrido paso a paso y el hilo con el mensaje en cuestión resaltado. */
.ai-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ai-steps li { padding: 2px 0 2px 10px; border-left: 3px solid var(--border); overflow-wrap: anywhere; }
.ai-steps li.good { border-left-color: var(--ok); }
.ai-steps li.bad { border-left-color: var(--danger); }
.ai-steps small { display: block; color: var(--text-muted); font-size: 13px; }
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ai-conv { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.4fr); gap: 10px; align-items: start; }
.ai-thread { position: sticky; top: 10px; }
.ai-view .messages { max-height: 72dvh; }
@media (max-width: 900px) {
    .ai-conv { grid-template-columns: minmax(0, 1fr); }
    .ai-thread { position: static; }
    .ai-view .messages { max-height: 46dvh; }
}
.ai-view .message.subject { outline: 2px solid var(--accent); }

/* ── Marcas ─────────────────────────────────────────────────── */

.brand-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 600;
}
.chip-default { color: var(--accent); }

.brand-picker .brand-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 8px;
}

/* ── Permisos ───────────────────────────────────────────────── */

.perm-tree {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.perm-node + .perm-node { border-top: 1px solid var(--border); }
.perm-node > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.perm-node > summary::-webkit-details-marker { display: none; }
.perm-node > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text-soft);
    border-bottom: 2px solid var(--text-soft);
    transform: rotate(-45deg);
    transition: transform .15s;
}
.perm-node[open] > summary::before { transform: rotate(45deg); }
.perm-node > summary:hover { background: var(--surface-2); }
.perm-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-soft); }
.perm-items { padding: 4px 14px 12px 34px; }
.perm-items > * + * { margin-top: 8px; }

.perm-group {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.perm-group > * + * { margin-top: 7px; }

.perm-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.perm-item input { margin-top: 3px; }
.perm-item small { display: block; color: var(--text-soft); font-size: 11px; }

/* ── Matriz de acceso a páginas ─────────────────────────────── */

.access-matrix th[scope="row"] { min-width: 180px; text-align: left; font-weight: 600; }
/* La columna de páginas queda fija mientras la matriz se desplaza de lado. */
.access-matrix tbody th[scope="row"], .access-matrix tfoot th[scope="row"], .access-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.access-matrix thead th:first-child { background: var(--surface-2); }
.access-matrix thead th { min-width: 110px; }
.access-matrix th[scope="row"] small,
.access-matrix thead small { display: block; color: var(--text-muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.access-matrix thead small.locked { color: var(--warn); }
.access-matrix td { text-align: center; }
.access-matrix tbody th, .access-matrix tbody td { border-bottom: 1px solid var(--border); padding: 9px 14px; }
.access-matrix .group-row th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
}
.access-matrix td { font-size: 12px; color: var(--text-muted); }

/* ── Editor de rol ──────────────────────────────────────────── */

.roles-layout {
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.role-list { display: flex; flex-direction: column; padding: 0 8px 8px; }
.role-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    height: auto;
    padding: 8px 10px;
    border: 0;
    background: none;
    text-align: left;
}
.role-item small { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.role-item[aria-pressed="true"] { background: var(--surface-2); font-weight: 600; }
.role-new {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--border);
}
.perm-section h3 {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.perm-section > * + h3, .perm-items > * + * { margin-top: 12px; }
.perm-section .perm-row + .perm-row, .perm-section .perm-item + .perm-item { margin-top: 8px; }
.perm-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.scope-options { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.scope-options legend {
    padding: 0;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.scope-options label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
#role-tree { margin-block: 12px; }

.access-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--warn-soft);
    color: var(--warn);
    font-size: 11px;
    font-weight: 700;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    list-style: none;
    color: var(--text-muted);
    font-size: 12px;
}
.legend li { display: flex; align-items: center; gap: 7px; }

/* ── Horario de atención ────────────────────────────────────── */

.hours-block {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
#hours-form > * + * { margin-top: 14px; }
.hours-block + .hours-block { margin-top: 8px; }
.hours-block .field-row { flex: 1; min-width: 220px; }
.hours-block > [data-remove-block] { margin-left: auto; }

.hours-days { display: flex; flex-wrap: wrap; gap: 6px; }
.day-check {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: var(--control-h);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
}
.day-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.day-check:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.day-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.holiday-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.holiday-row + .holiday-row { margin-top: 8px; }
.holiday-row input[type="date"] { width: auto; min-width: 170px; }
.holiday-row .check-row { white-space: nowrap; }
.holiday-row [data-remove-holiday] { margin-left: auto; }

/* Objetivos de atención: un departamento por fila, campo y botón juntos */
.goal-list { display: grid; gap: 10px; }
.goal-list > * + * { margin-top: 0; }
.goal-row { display: flex; align-items: end; gap: 10px; }
.goal-row label { flex: 1; min-width: 0; }

.hint { color: var(--text-soft); font-size: 12px; }
.hint.warn { color: var(--warn); }

.choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
}
.choice input { margin-top: 2px; }
.choice strong { display: block; font-size: 13px; }
.choice small { color: var(--text-muted); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:disabled) { cursor: default; }

.msg-error { color: var(--danger); font-size: 13px; }
.msg-error:empty { display: none; }

/* ── Checklists ─────────────────────────────────────────────── */

.checklist-items { display: flex; flex-direction: column; gap: 10px; }

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.checklist-item.is-checked { border-left-color: var(--ok); }
.checklist-item input[type="checkbox"] { margin-top: 3px; }
.checklist-item-body { flex: 1; min-width: 0; }
.checklist-item-body > * + * { margin-top: 6px; }

/* ── Responsive de estas piezas ─────────────────────────────── */

/* Al imprimir una evaluación solo interesa su contenido. */
@media print {
    #sidebar, #topbar, .dialog-foot, .page-tabs { display: none; }
    dialog { position: static; border: 0; box-shadow: none; max-height: none; }
}

/* ── Tablas ordenables ──────────────────────────────────────── */
.sort-btn {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
th[aria-sort="ascending"] .sort-btn::after { content: " \25B2"; }
th[aria-sort="descending"] .sort-btn::after { content: " \25BC"; }
th[aria-sort="none"] .sort-btn::after { content: " \2195"; opacity: .45; }

/* ── Modo cómodo: texto y controles grandes ─────────────────── */
/* Las páginas que lo piden ponen la clase en <html>; así alcanza también a sus diálogos. */
html.comfort main, html.comfort dialog { font-size: 16px; }
html.comfort main label, html.comfort dialog label { color: var(--text); font-size: 15px; }
html.comfort main input:not([type="checkbox"]), html.comfort main select,
html.comfort dialog input:not([type="checkbox"]), html.comfort dialog select { height: 46px; font-size: 16px; }
html.comfort main input[type="checkbox"], html.comfort dialog input[type="checkbox"] { width: 22px; height: 22px; }
html.comfort main button, html.comfort dialog button { height: 44px; padding: 0 18px; font-size: 15px; }
html.comfort dialog button.icon-btn { width: 44px; padding: 0; }
html.comfort dialog .panel-head { min-height: 56px; }
html.comfort dialog .panel-head h2 { font-size: 20px; }
html.comfort main .check-row, html.comfort dialog .check-row { gap: 10px; font-size: 16px; }
html.comfort main .panel-intro, html.comfort dialog .panel-intro { font-size: 15px; }
html.comfort dialog { width: min(640px, calc(100vw - 32px)); }
html.comfort dialog.confirm-dialog { width: min(480px, calc(100vw - 32px)); }
html.comfort dialog .perm-group { padding: 14px 16px; }
html.comfort dialog .perm-group > * + * { margin-top: 12px; }
html.comfort dialog fieldset > * + *, html.comfort dialog .adv-form > * + * { margin-top: 14px; }
html.comfort dialog legend { color: var(--text); font-family: var(--titulo); font-size: 17px; }
html.comfort #notice { position: sticky; top: 0; z-index: 5; padding: 14px 16px; font-size: 16px; box-shadow: var(--shadow-lg); }

html.comfort main, html.comfort .app-main, html.comfort #content > * { min-width: 0; }
html.comfort .adv-search-box input, html.comfort .adv-toolbar select { min-width: 0; }

.opt { margin-left: 6px; color: var(--text-soft); font-size: 13px; font-weight: 500; }
.field-hint { color: var(--text-muted); font-size: 14px; }
.field-title { color: var(--text); font-size: 15px; font-weight: 600; }

/* Preguntas propias de un anuncio */
.ad-questions > summary { cursor: pointer; font-weight: 600; }
.ad-fields { display: grid; gap: 8px; }
.ad-field { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 12px; align-items: end; }
.ad-field [hidden] { display: none; }
.ad-field:has(.ad-q-new[hidden]) { grid-template-columns: 1fr auto; }
.ad-q { display: grid; gap: 8px; margin: 10px 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.ad-q textarea { width: 100%; resize: vertical; }
.ad-q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ad-q-tools { display: flex; gap: 6px; justify-content: flex-end; align-self: end; }
@media (max-width: 560px) { .ad-q-grid, .ad-field, .ad-field:has(.ad-q-new[hidden]) { grid-template-columns: 1fr; } }
.form-error { color: var(--danger); font-size: 15px; font-weight: 600; }
.form-error:empty { display: none; }

/* ── Asesores ───────────────────────────────────────────────── */
.adv-lead { max-width: 75ch; color: var(--text-muted); font-size: 16px; line-height: 1.6; }

.adv-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 2px solid var(--border); scrollbar-width: none; }
.adv-tabs::-webkit-scrollbar { display: none; }
html.comfort .adv-tabs .adv-tab {
    height: 52px;
    margin-bottom: -2px;
    padding: 0 20px;
    border: 0;
    border-bottom: 4px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    background: none;
    color: var(--text-muted);
    font-size: 17px;
}
html.comfort .adv-tabs .adv-tab:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
html.comfort .adv-tabs .adv-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); }
.adv-tab-count {
    min-width: 26px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text);
    font-size: 14px;
    text-align: center;
}
.adv-tab-count:empty { display: none; }
.adv-tab[aria-selected="true"] .adv-tab-count { background: var(--accent-soft-2); }

/* Resumen que también filtra: cada botón es un estado. */
.adv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
html.comfort main button.adv-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon num" "text text";
    align-items: center;
    justify-items: start;
    gap: 6px 12px;
    height: auto;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: left;
    white-space: normal;
}
html.comfort main button.adv-stat:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
html.comfort main button.adv-stat[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.adv-stat-icon { grid-area: icon; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3); color: var(--text-muted); }
.adv-stat.ok .adv-stat-icon { background: var(--ok-soft); color: var(--ok); }
.adv-stat.vacation .adv-stat-icon { background: var(--warn-soft); color: var(--warn); }
.adv-stat-num { grid-area: num; font-family: var(--titulo); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.adv-stat-text { grid-area: text; display: flex; flex-direction: column; }
.adv-stat-text strong { font-size: 16px; }
.adv-stat-text small { color: var(--text-muted); font-size: 14px; font-weight: 500; }

.adv-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.adv-toolbar label { flex: 1 1 240px; min-width: 0; }
.adv-toolbar > button { flex: none; }
.adv-search-box { position: relative; display: block; margin-top: 5px; }
.adv-search-box svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.adv-search-box input { margin-top: 0; padding-left: 42px; }
html.comfort main button.big { padding: 0 22px; font-size: 16px; }

/* La tipografía de titulares es de solo mayúsculas: nombres y títulos van en la de texto para leerse mejor. */
.adv-name, .adv-group-head, .adv-dept-head h3, .adv-cats h4, .adv-stat-num, html.comfort dialog legend { font-family: var(--texto); font-weight: 700; letter-spacing: 0; }
.adv-group + .adv-group { margin-top: 26px; }
.adv-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 20px; }
.adv-group-count { color: var(--text-muted); font-family: var(--texto); font-size: 15px; font-weight: 500; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; }

.adv-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-left: 6px solid var(--ok);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.adv-card.vacation { border-left-color: var(--warn); }
.adv-card.paused { border-left-color: var(--border-strong); background: var(--surface-2); }
.adv-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.adv-card .avatar.lg { width: 52px; height: 52px; font-size: 18px; }
.adv-who { flex: 1 1 140px; min-width: 0; }
.adv-name { font-size: 18px; overflow-wrap: anywhere; }
.adv-who p { font-size: 15px; }
.adv-turn { display: inline-block; margin-bottom: 4px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-size: 15px; font-weight: 700; }
.adv-turn.none { background: var(--surface-3); color: var(--text-muted); }

.adv-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.adv-status.ok { background: var(--ok-soft); }
.adv-status.ok svg { color: var(--ok); }
.adv-status.vacation { background: var(--warn-soft); }
.adv-status.vacation svg { color: var(--warn); }
.adv-return { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); font-size: 15px; font-weight: 600; }

.adv-details { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.adv-details > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 4px 12px; align-items: start; }
.adv-details dt { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 15px; }
.adv-details dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.adv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: 14px;
    font-weight: 600;
}
html.comfort main .adv-chip.big { padding: 2px 4px 2px 14px; font-size: 15px; }
html.comfort main .adv-chip button.icon-btn { width: 38px; height: 38px; padding: 0; border: 0; background: none; }

.adv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }

.adv-help { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-left: 6px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); }
.adv-help > svg { margin-top: 2px; color: var(--accent); }
.adv-help p, .adv-help ul { font-size: 16px; }
.adv-help ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.adv-help li + li { margin-top: 4px; }
.adv-help a { font-weight: 600; text-decoration: underline; }

.adv-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 16px; }
.adv-dept { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.adv-dept-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.adv-dept-head h3 { font-size: 20px; }
.adv-cats h4 { margin-bottom: 8px; font-size: 16px; }
.adv-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

html.comfort main .table-wrap td, html.comfort main .table-wrap th { font-size: 15px; }
html.comfort main .badge { height: 28px; padding: 0 12px; font-size: 14px; }

@media (max-width: 640px) {
    .adv-details > div { grid-template-columns: 1fr; }
    .adv-actions > button { flex: 1 1 calc(50% - 8px); padding: 0 10px; }
    html.comfort .adv-tabs .adv-tab { padding: 0 14px; font-size: 16px; }
}

/* ── Reportes: pestañas, aviso y barras de proporción ───────── */
.report-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.report-tabs::-webkit-scrollbar { display: none; }
.report-tabs button {
    height: 32px;
    padding: 0 14px;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
[role="tabpanel"][hidden] { display: none; }
.report > .stack, .cfg-section { margin-bottom: 16px; scroll-margin-top: 12px; }

.report-alert {
    padding: 8px 14px;
    border: 1px solid var(--warn);
    border-left-width: 6px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    font-size: 13px;
}
.report-alert ul { margin: 2px 0 0 18px; }


/* Dona con leyenda; una clase por rebanada porque la CSP bloquea estilos en línea */
.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.pie-chart { position: relative; width: 120px; flex: none; }
.pie-chart svg { display: block; width: 100%; }
.pie-chart circle { transition: opacity .15s; }
.pie-chart svg:hover circle:not(:hover) { opacity: .55; }
.pie-chart > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.pie-chart > span b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pie-chart > span small { color: var(--text-muted); font-size: 11px; }
.pie-legend { flex: 1 1 220px; max-width: 460px; display: grid; gap: 0; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.pie-legend li { display: grid; grid-template-columns: 12px 1fr auto 48px; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.pie-legend li:last-child { border-bottom: 0; }
.pie-name { overflow-wrap: anywhere; }
.pie-legend small { color: var(--text-muted); text-align: right; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.pie circle { stroke: var(--c); }
.c0 { --c: var(--accent); }
.c1 { --c: #14a38b; }
.c2 { --c: #e0a23c; }
.c3 { --c: #7c5cd6; }
.c4 { --c: #3d8bd9; }
.c5 { --c: #d6567a; }
.c6 { --c: #8a8f98; }
.report-split { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 12px 16px; align-items: start; padding: 12px 16px; }
.report-split > :empty { display: none; }
.report-split:has(> :first-child:empty) { grid-template-columns: 1fr; }

.share { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.share meter { width: 110px; height: 10px; flex: none; }
meter { appearance: none; border: 0; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
meter::-webkit-meter-bar { border: 0; border-radius: 999px; background: var(--surface-3); }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--accent); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--accent); }

@media (max-width: 900px) {
    .report-split { grid-template-columns: 1fr; padding: 14px; }
}

/* Reportes: densidad alta para ver todo sin desplazarse. */
.report .metric { padding: 10px 14px; }
.report .metric-value { margin-top: 6px; font-size: 22px; }
.report .metric-foot { margin-top: 4px; }
.report .metric-icon { width: 24px; height: 24px; }
.report .grid { gap: 10px; }
.report .stack { gap: 12px; }
.report .panel-head { min-height: 36px; padding: 6px 16px; }
.report .panel-body { padding: 10px 16px; }
.report tbody td { padding: 7px 14px; }
.report thead th { padding: 7px 14px; }

/* Leads y ficha del lead: densidad alta para ver todo sin desplazarse. */
.dense { display: flex; flex-direction: column; gap: 10px; }
.dense .grid { gap: 10px; align-items: start; }
.dense .stack { gap: 10px; }
.dense .panel-head { min-height: 36px; padding: 6px 14px; }
.dense .panel-body { padding: 10px 14px; }
.dense .panel-body > * + * { margin-top: 10px; }
.dense .filters { padding: 10px 14px; gap: 8px; }
.dense thead th { padding: 6px 12px; }
.dense tbody td { padding: 6px 12px; }
.dense #pagination { padding: 6px 14px; }
.dense .field-row { gap: 8px; }
.dense .note { padding: 6px 10px; }
.dense textarea { min-height: 0; }
.dense .actions { flex-wrap: wrap; gap: 6px; }
.leads-table .table-wrap { max-height: calc(100dvh - 232px); }
.leads-table td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leads-table .row-status { height: 26px; padding: 0 22px 0 7px; font-size: 12px; font-weight: 600; }
.leads-table .row-actions a { width: 28px; height: 28px; }

/* Pestañas de estado: filtran con un clic y muestran cuánto hay en cada uno. */
.lead-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}
.lead-tabs::-webkit-scrollbar { display: none; }
.lead-tab {
    height: 30px;
    margin-bottom: -1px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
}
.lead-tab[aria-pressed="true"] {
    border-color: var(--border);
    border-bottom-color: var(--surface);
    background: var(--surface);
    color: var(--text);
}
.lead-tab-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.lead-tab[aria-pressed="true"] .lead-tab-count { background: var(--accent-soft); color: var(--accent); }
.lead-tab-count:empty { display: none; }

/* Cuánto lleva esperando el lead: en rojo cuando ya se pasó del límite de contacto. */
.wait { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.wait.late { color: var(--danger); }

/*
 * Ficha del lead: el encabezado dice qué toca hacer y debajo quedan a la vista
 * los datos, la conversación y la asignación, que es con lo que se decide.
 */
.lead-view {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 330px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "head head head"
        "data chat side";
    gap: 10px;
    height: calc(100dvh - var(--topbar-h) - var(--gap) - 34px);
}
.lead-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; }
.lead-data { grid-area: data; }
.lead-chat { grid-area: chat; }
.lead-side { grid-area: side; }

/* Las tres columnas llenan la pantalla y cada panel se desplaza por dentro: nada queda debajo del doblez. */
.lead-view > .panel, .lead-side { min-height: 0; max-height: 100%; }
.lead-data, .lead-chat, .lead-side, .lead-assign, .lead-extra { display: flex; flex-direction: column; }
.lead-side { gap: 10px; }
.lead-data > .panel-body, .lead-assign > .panel-body, .lead-extra > .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.lead-view .panel-head, .lead-extra > .lead-tabs, .lead-tools { flex: none; }
/* La asignación cede altura a las notas y tareas cuando falta espacio, pero nunca desaparece. */
.lead-assign { flex: 0 1 auto; min-height: 150px; }
.lead-extra { flex: 1 1 auto; min-height: 160px; }
.lead-extra .inline-add button { justify-self: end; }

.lead-id { display: flex; align-items: center; gap: 10px; }
.lead-id strong { display: block; }
.lead-step { margin: 0; }
.lead-head-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-left: auto; }
.lead-head-controls > p { margin: 0; display: flex; gap: 6px; }
.lead-status { display: grid; grid-template-columns: 130px 120px; gap: 8px; }
.lead-data .facts { grid-template-columns: auto 1fr; gap: 4px 10px; }
.lead-data .facts dd, .lead-assign .facts dd { text-align: right; }
.lead-data #summary { width: 100%; font-size: 12px; }
.lead-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--border); }
.lead-tools button { height: 28px; padding: 0 10px; font-size: 12px; }

.lead-chat { min-height: 0; }
.lead-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.thread-block + .thread-block { border-top: 1px solid var(--border); }
.thread-block > .muted { padding: 8px 14px 0; }
.lead-thread .messages { max-height: none; overflow: visible; }

.inline-add { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.inline-add > :first-child:not(:only-child) { grid-column: 1 / -1; }
.inline-add textarea { resize: none; }
.notes-list:empty { display: none; }
.notes-list .check-row { margin-top: 4px; }

/* Secciones plegables discretas dentro de un panel. */
.fold summary { cursor: pointer; padding: 4px 0; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.fold[open] summary { margin-bottom: 6px; }
.fold-body { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1280px) {
    .lead-view { grid-template-columns: 260px minmax(0, 1fr) 290px; }
}
/* Sin ancho para tres columnas vuelve a ser una página que se desplaza, con cada panel a su altura natural. */
@media (max-width: 1000px) {
    .lead-view {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "head" "data" "chat" "side";
        height: auto;
    }
    .lead-view > .panel, .lead-side { max-height: none; }
    .lead-data > .panel-body, .lead-extra > .panel-body { overflow-y: visible; }
    .lead-assign { max-height: none; }
    .lead-chat { height: 70dvh; }
    .lead-head-controls { margin-left: 0; width: 100%; }
    .lead-status { grid-template-columns: 1fr 1fr; }
}

/* ── Diccionario del chatbot: lista a la izquierda, herramientas a la derecha ── */
.dict { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.dict > * { min-width: 0; }
.dict-list .table-wrap { max-height: calc(100dvh - 250px); overflow-y: auto; }
@media (max-width: 900px) { .dict { grid-template-columns: 1fr; } .dict-list .table-wrap { max-height: 60dvh; } }