:root {
    --color-bg: #eef5fb;
    --color-card: #ffffff;
    --color-border: #dbe7f1;
    --color-text: #142136;
    --color-text-muted: #57708f;

    --color-primary: #2f95d6;
    --color-primary-dark: #1c6ea3;
    --color-primary-soft: #e4f2fb;

    --gradient-start: #5bc7ef;
    --gradient-end: #142840;

    --color-success-bg: #e3f7ea;
    --color-success-text: #1b7a45;
    --color-warning-bg: #fef3e0;
    --color-warning-text: #92600a;
    --color-danger-bg: #fdeaea;
    --color-danger-text: #b23131;
    --color-neutral-bg: #e9eff5;
    --color-neutral-text: #55708f;
    --color-info-bg: #dcecfa;
    --color-info-text: #1c5fa8;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px rgba(20, 33, 54, 0.06), 0 1px 3px rgba(20, 33, 54, 0.05);
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, "Segoe UI", Roboto, system-ui, Arial, sans-serif;
    background: var(--color-card);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Estructura general: barra lateral + contenido
   ============================================================ */

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

.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--color-card);
    border-right: 1px solid var(--color-border);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Pegado a la pantalla (no al alto del contenido, que puede
       pasar de 2000px en el Dashboard) -- así el botón de
       "parar todo" siempre queda visible sin tener que scrollear,
       que es justo el punto de un botón de emergencia. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-logo {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin: 0 0 1.75rem 0;
    padding: 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav a .icon {
    font-size: 1.05rem;
}

.sidebar-nav a:hover {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

.sidebar-nav a.active {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.kill-switch-zone {
    margin-top: auto;
    padding-top: 1rem;
}

.kill-switch-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-danger-text);
    background: var(--color-card);
    color: var(--color-danger-text);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Login/logout 2026-09-26 */
.logout-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.6rem;
    margin-top: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.logout-link:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.kill-switch-btn:hover {
    background: var(--color-danger-bg);
}

.kill-switch-btn.kill-switch-active {
    background: var(--color-danger-text);
    color: #fff;
    border-color: var(--color-danger-text);
    animation: kill-switch-pulse 1.8s ease-in-out infinite;
}

@keyframes kill-switch-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(178, 49, 49, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(178, 49, 49, 0); }
}

/* ============================================================
   Rol del usuario (admin / viewer de solo lectura, ej. el
   gerente) -- ver app/auth.py + app/static/common.js.
   Todo lo marcado data-admin-only arranca OCULTO por defecto
   (falla cerrado: si el fetch de /campaign/whoami tarda, falla,
   o JS no llega a correr, nunca se alcanza a ver un botón que
   el backend igual bloquearía) y solo se revela cuando
   common.js confirma el rol "admin" agregando .role-admin al
   body. `revert` en vez de un valor fijo porque data-admin-only
   se usa sobre tags distintos (button, form, section...) y cada
   uno necesita su display por defecto real, no todos "block".
   ============================================================ */

[data-admin-only] {
    display: none !important;
}

body.role-admin [data-admin-only] {
    display: revert !important;
}

/* data-agent-up 2026-09-25: nivel "agente o superior" (superuser/
   admin/agent, todo menos viewer) -- ej. responder/cerrar en el
   Panel de Asesor, algo que Lida (rol agent) sí puede hacer aunque
   no sea administradora. Mismo patrón fail-closed que data-admin-only. */
[data-agent-up] {
    display: none !important;
}

body.role-agent-up [data-agent-up] {
    display: revert !important;
}

/* Excepciones: elementos cuyo layout depende de un display propio
   por clase (flex) -- "revert" los devolvería al default del
   navegador para su tag (button->inline-block, form->block), no
   al que les da su propia clase, rompiendo el centrado/la fila. */
body.role-admin .kill-switch-btn[data-admin-only] {
    display: flex !important;
}

body.role-agent-up .chat-input-row[data-agent-up] {
    display: flex !important;
}

.viewer-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
}

body.role-viewer .viewer-badge {
    display: flex;
}

.agent-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.6rem;
    border-radius: 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

body.role-agent .agent-badge {
    display: flex;
}

.content {
    flex: 1;
    min-width: 0;
    background: var(--color-bg);
    padding: 1.75rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

header {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    padding: 1.75rem 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

header p {
    margin: 0.3rem 0 0 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
}

main {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

header {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
}

/* El Dashboard es un reporte tipo BI: un solo lienzo, más ancho
   que el resto del panel para que quepan más columnas por fila
   y se necesite menos scroll. */
main.dashboard-wide,
header.dashboard-wide {
    max-width: 1320px;
}

@media (max-width: 760px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        flex-direction: row;
        align-items: center;
        padding: 1rem;
        overflow-x: auto;
        overflow-y: visible;
        position: static;
        height: auto;
    }

    .kill-switch-zone {
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
        flex-shrink: 0;
    }

    .kill-switch-btn {
        width: auto;
        white-space: nowrap;
    }

    .logout-link {
        width: auto;
        white-space: nowrap;
        margin-top: 0;
        margin-left: 0.5rem;
    }

    .sidebar-logo {
        margin: 0 1rem 0 0;
    }

    .sidebar-nav {
        flex-direction: row;
    }

    .content {
        padding: 1.25rem 1rem 3rem;
    }
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.6rem 1.85rem;
    box-shadow: var(--shadow);
}

.card h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-text);
}

.hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0 0 0.75rem 0;
}

code {
    background: var(--color-neutral-bg);
    color: var(--color-text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.88rem;
}

th {
    text-align: left;
    padding: 0.6rem 0.6rem;
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--color-border);
}

td {
    text-align: left;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

tbody tr {
    transition: background 0.15s ease;
}

tbody tr:hover {
    background: var(--color-primary-soft);
}

tbody tr.row-alert {
    background: var(--color-danger-bg);
}

tbody tr.row-alert:hover {
    background: #fbdcda;
}

button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(20, 33, 54, 0.12);
}

button:hover {
    background: var(--color-primary-dark);
}

button:active {
    transform: scale(0.98);
}

button.secondary {
    background: var(--color-neutral-bg);
    color: var(--color-text);
    box-shadow: none;
}

button.secondary:hover {
    background: #dde7f0;
}

button.secondary.danger {
    color: var(--color-danger-text);
}

button.secondary.danger:hover {
    background: var(--color-danger-bg);
}

/* Para links que se ven como botón (ej. "Exportar Excel", que
   es una descarga directa, no una acción de JS) */
a.button-link {
    display: inline-block;
    margin-left: 0.5rem;
    background: var(--color-neutral-bg);
    color: var(--color-text);
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

a.button-link:hover {
    background: #dde7f0;
}

input[type="file"] {
    font-size: 0.85rem;
    margin-right: 0.75rem;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.filters-row select,
.filters-row input[type="text"],
.filters-row input[type="date"],
.filters-row input[type="datetime-local"],
.filters-row textarea {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    background: #fff;
    color: var(--color-text);
    font-family: inherit;
}

.filter-datetime-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.filters-row .filters-sep {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.filters-row.dashboard-filters {
    margin: 0 0 1rem 0;
}

.filters-row input[type="text"] {
    flex: 1;
    min-width: 200px;
}

.filters-row textarea {
    flex: 1;
    min-width: 260px;
    resize: vertical;
}

.export-conv-box {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.export-conv-box h3 {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
}

/* ============================================================
   Formulario de Configuración (/panel/config)
   ============================================================ */

.config-field {
    max-width: 420px;
    margin-bottom: 1.1rem;
}

.config-field label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.config-field input,
.config-field textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    background: #fff;
    color: var(--color-text);
    font-family: inherit;
}

.config-field .hint {
    margin: 0.3rem 0 0;
}

/* Mensajes del bot -- párrafos más largos que un teléfono/número,
   necesitan más ancho que el resto de .config-field. */
.message-editor {
    max-width: 640px;
}

.message-editor label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

a.button-link.small {
    margin-left: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
}

/* ============================================================
   Filtro de varios estados a la vez -- dropdown con checkboxes,
   reemplaza el <select multiple> nativo (feo y poco claro sobre
   cuántos quedaron marcados). Reusable para cualquier filtro de
   "elige varios de una lista corta".
   ============================================================ */

.multi-filter {
    position: relative;
}

.multi-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
}

.multi-filter-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.multi-filter-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.multi-filter-count {
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    min-width: 1.1rem;
    text-align: center;
}

.multi-filter-count:empty {
    display: none;
}

.multi-filter-caret {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-left: 0.1rem;
}

.multi-filter-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
}

.multi-filter-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.multi-filter-option:hover {
    background: var(--color-primary-soft);
}

/* Menú "Exportar" del Dashboard -- mismas piezas visuales que el
   multi-filter (botón + panel flotante), pero con links en vez de
   checkboxes -- cada opción exporta según los filtros activos. */
.export-menu-panel {
    min-width: 280px;
}

a.export-menu-item {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
}

a.export-menu-item:hover {
    background: var(--color-primary-soft);
}

.export-menu-hint {
    margin: 0.4rem 0 0.1rem;
    padding: 0.4rem 0.6rem 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.72rem;
}

.multi-filter-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.multi-filter-panel-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.3rem 0.3rem 0.1rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--color-border);
}

.multi-filter-panel-footer button {
    background: none;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    box-shadow: none;
}

.multi-filter-panel-footer button:hover {
    color: var(--color-primary-dark);
    background: none;
}

/* Burbujas de resumen que sí se pueden tocar (filtran al hacer
   clic) -- misma pinta que .badge, pero con affordance de botón. */
.badge-clickable {
    cursor: pointer;
    border: none;
    box-shadow: none;
    font-family: inherit;
    transition: filter 0.1s ease, transform 0.05s ease;
}

.badge-clickable:hover {
    filter: brightness(0.95);
}

.badge-clickable:active {
    transform: scale(0.97);
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.badge-neutral {
    background: var(--color-neutral-bg);
    color: var(--color-neutral-text);
}

.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.live-indicator {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0.75rem 0;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.table-wrap {
    overflow-x: auto;
}

/* Campañas 2026-09-25: agregar las columnas Enviado/Actualizado
   apretaba la de Acciones hasta apilar los botones en una columna
   angosta -- el table-wrap ya tenía scroll horizontal, pero la
   tabla nunca llegaba a desbordar porque width:100% la encogía
   para caber en el contenedor en vez de activar el scroll. Con un
   min-width, en pantallas angostas SÍ desborda y se puede
   deslizar, y en las anchas cada columna respira. */
#campaigns-table {
    min-width: 780px;
}

/* Contactos 2026-09-26: mismo motivo -- 2 columnas de fecha/hora
   mas para no apretar el resto (Motivo/Acciones). */
#detail-table {
    min-width: 1150px;
}

/* La celda de Acciones se quedó fija en 2 botones + el menú "⋮"
   (ver .action-menu más abajo) a propósito -- NO le agregues un
   botón suelto más aquí, por más que parezca la opción rápida.
   Ya pasó 2 veces (2026-09-25 con las columnas de fecha,
   2026-09-28 con "Retirar pendientes") que sumar un botón directo
   apretaba esta columna hasta apilarlos en una fila angosta. Una
   acción nueva de campaña va DENTRO de .action-menu-panel. */
#campaigns-table .actions-cell {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
}

.action-menu {
    position: relative;
    display: inline-block;
}

.action-menu-btn {
    padding: 0.55rem 0.7rem;
    line-height: 1;
    font-weight: 800;
}

.action-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    flex-direction: column;
    gap: 0.15rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    min-width: 200px;
}

.action-menu-panel.open {
    display: flex;
}

.action-menu-item {
    background: none;
    color: var(--color-text);
    box-shadow: none;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    font-size: 0.83rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.action-menu-item:hover {
    background: var(--color-primary-soft);
}

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

.action-menu-item.danger:hover {
    background: var(--color-danger-bg);
}

#campaigns-table td.date-cell {
    white-space: nowrap;
}

#upload-result {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

#upload-result.ok {
    color: var(--color-success-text);
}

#upload-result.error {
    color: var(--color-danger-text);
}

.empty-state {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    padding: 1rem 0;
    text-align: center;
}

/* ============================================================
   Conversaciones con asesor
   ============================================================ */

.agent-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 0.75rem;
}

.agent-list-col {
    width: 300px;
    flex-shrink: 0;
    max-height: 72vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.agent-thread-col {
    flex: 1;
    min-width: 0;
}

.pending-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.pending-item:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.pending-item.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

.pending-item .who {
    font-weight: 700;
    font-size: 0.9rem;
}

.pending-item .meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.pending-item.urgent {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-text);
}

.pending-item.urgent:hover {
    background: #fadbdb;
}

.pending-item .meta.urgent-label {
    color: var(--color-danger-text);
    font-weight: 700;
}

.pending-item .trigger-snippet {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Punto de "mensaje nuevo" -- mismo lenguaje visual que WhatsApp */
.unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 0.4rem;
    flex-shrink: 0;
}

.attended-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--color-success-bg);
    color: var(--color-success-text);
    margin-left: 0.4rem;
    vertical-align: middle;
}

.chat-thread {
    max-height: 62vh;
    min-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

.msg-bubble {
    max-width: 78%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 1px 1px rgba(20, 33, 54, 0.05);
}

.msg-in {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 2px;
}

.msg-out {
    align-self: flex-end;
    background: var(--color-primary-soft);
    border-bottom-right-radius: 2px;
}

.msg-time {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.chat-input-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.chat-input-row input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    font-size: 0.88rem;
}

.chat-input-row input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.nav-badge {
    display: none;
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: auto;
}

/* ============================================================
   Tarjetas de estadísticas (dashboard)
   ============================================================ */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.7rem;
}

.stat-tile {
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.stat-tile:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.stat-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: #fff;
}

.stat-tile .stat-value {
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--gradient-end);
}

.stat-tile .stat-label {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* ============================================================
   Lienzo del Dashboard -- un único contenedor tipo reporte BI
   (ver referencias que pidió el usuario): TODO vive adentro de
   esta sola caja con un solo borde/sombra. Las secciones de
   adentro (.panel) son livianas -- sin su propia sombra, con un
   tinte sutil que las distingue del lienzo blanco sin que cada
   una se lea como una tarjeta independiente flotando en la
   página. Así se arma "un solo cajón" en vez de una fila larga
   de tarjetas sueltas.
   ============================================================ */

.dashboard-canvas {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.6rem 1.75rem;
}

.canvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.canvas-header h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.canvas-header .live-indicator {
    margin: 0;
}

/* Encabezado de sub-sección dentro del lienzo (ej. "Flujo 1 —
   Captación") -- agrupa paneles relacionados para que se lea
   como un reporte con secciones, no una fila plana de tarjetas
   sueltas. Cada sección es su PROPIO .dash-grid (no un solo
   grid gigante) a propósito: así "dense" nunca reordena un
   panel de una sección hacia el hueco de otra. */

.dash-section-heading {
    margin: 1.4rem 0 0.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dash-section-heading:first-of-type {
    margin-top: 0.85rem;
    padding-top: 0;
    border-top: none;
}

/* El encabezado de sección es mayúsculas/espaciado a propósito,
   pero eso NO debe heredarlo un link/botón que cuelgue adentro
   (ej. "Exportar" en Flujo 2) -- mismo criterio que .period-toggle
   más abajo. */
.dash-section-heading a.button-link {
    text-transform: none;
    letter-spacing: normal;
    margin-left: 0;
}

/* Selector de ventana de tiempo (7/14/30/60 días) de las
   gráficas de tendencia -- grupo de botones tipo "segmented
   control", no un <select> (son solo 4 opciones fijas). */

.period-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px;
    background: #fff;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.period-toggle button {
    border: none;
    background: transparent;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.period-toggle button.active {
    background: var(--color-primary);
    color: #fff;
}

.period-toggle button:hover:not(.active) {
    background: var(--color-primary-soft);
}

/* Cuadrícula del Dashboard -- 12 columnas, los paneles ocupan
   el ancho que declaren (col-4/6/8/12), no todos full-width. */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    gap: 0.85rem;
    align-items: stretch;
}

/* Nota de especificidad: .panel y .col-N deben quedar en el
   MISMO nivel de especificidad (una sola clase cada una) para
   que .col-N pueda ganar por orden de cascada -- un selector
   ".dash-grid > .panel" (2 clases) le ganaría siempre a ".col-4"
   (1 clase) sin importar el orden, y todos los paneles quedarían
   forzados a ancho completo. */

.panel {
    grid-column: span 12;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1.05rem 1.2rem;
    box-shadow: none;
}

.panel h2 {
    margin: 0 0 0.3rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
}

.panel .hint {
    margin-bottom: 0.5rem;
}

.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
    .col-4, .col-5, .col-6, .col-7, .col-8 {
        grid-column: span 12;
    }

    .dashboard-canvas {
        padding: 1.1rem 1rem 1.4rem;
    }
}

/* ============================================================
   Ribbon -- una cifra destacada tipo "logro" (Top acción, etc.)
   ============================================================ */

.ribbon {
    background: linear-gradient(160deg, var(--gradient-start), var(--gradient-end));
    border-radius: var(--radius-sm);
    padding: 1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    height: 100%;
    min-height: 110px;
}

.ribbon .ribbon-icon {
    font-size: 1.4rem;
}

.ribbon .ribbon-label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    font-weight: 700;
}

.ribbon .ribbon-value {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.ribbon .ribbon-sub {
    font-size: 0.72rem;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Treemap -- área proporcional al valor (empaquetado simple por
   filas, no es un squarified treemap exacto pero se acerca
   visualmente y es suficiente para 4-8 categorías).
   ============================================================ */

.treemap {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    height: 165px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.treemap-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.6rem 0.7rem;
    color: #fff;
    font-weight: 700;
    cursor: default;
    min-width: 90px;
    flex-grow: 1;
    transition: filter 0.1s ease;
}

.treemap-cell:hover {
    filter: brightness(1.08);
}

.treemap-cell .treemap-label {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.treemap-cell .treemap-value {
    font-size: 0.95rem;
    font-weight: 800;
    margin-top: 0.2rem;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Gráficas de barras horizontales
   ============================================================ */

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.bar-row .bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.83rem;
    margin-bottom: 0.25rem;
}

.bar-row .bar-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bar-track {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    height: 11px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
    min-width: 3px;
}

.bar-row {
    cursor: default;
    border-radius: 8px;
    padding: 0.15rem 0.3rem;
    margin: -0.15rem -0.3rem;
    transition: background 0.1s ease;
}

.bar-row:hover,
.bar-row:focus-visible {
    background: var(--color-neutral-bg);
    outline: none;
}

/* ============================================================
   Tooltip compartido de gráficas (hover/foco en barras)
   ============================================================ */

#chart-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 999;
    background: var(--color-text);
    color: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.8rem;
    box-shadow: 0 6px 16px rgba(20, 33, 54, 0.25);
    max-width: 260px;
}

#chart-tooltip .tt-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#chart-tooltip .tt-label {
    opacity: 0.85;
}

/* ============================================================
   Meter -- una sola proporción (ej. tasa de confirmación)
   ============================================================ */

.meter-track {
    height: 24px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-top: 0.5rem;
}

.meter-fill {
    height: 100%;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.65rem;
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    transition: width 0.6s ease;
    min-width: 2.5rem;
    white-space: nowrap;
}

.meter-caption {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Donut -- proporción entre 2-4 categorías (ver skill de dataviz)
   ============================================================ */

.donut-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.donut {
    width: 108px;
    height: 108px;
    min-width: 108px;
    border-radius: 50%;
    position: relative;
}

.donut-center {
    position: absolute;
    inset: 22%;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.donut-center .donut-total {
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    line-height: 1;
}

.donut-center .donut-total-label {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
    text-align: center;
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-row .legend-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding-left: 0.75rem;
}

/* ============================================================
   Gráfica de línea (tendencia) -- área al 10%, línea 2px,
   puntos con anillo de superficie (ver skill de dataviz).
   ============================================================ */

.line-chart-wrap {
    margin-top: 0.75rem;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.line-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.line-dot,
.line-hit {
    cursor: default;
}

.line-chart-endlabel {
    font-size: 0.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Medidor radial -- una proporción, variante circular del meter
   ============================================================ */

.radial-gauge {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.radial-gauge-center {
    width: 76%;
    height: 76%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.radial-gauge-value {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    line-height: 1;
}

.radial-gauge-label {
    font-size: 0.62rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 0 0.4rem;
    margin-top: 0.25rem;
}

.funnel-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.funnel-header .hint {
    flex: 1;
    min-width: 220px;
    margin: 0;
}

/* ============================================================
   Embudo de captación
   ============================================================ */

.funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.75rem;
    padding: 0.25rem 0;
}

.funnel-stage {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.funnel-bar {
    min-width: 18%;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    transition: width 0.5s ease;
    box-shadow: 0 2px 6px rgba(20, 33, 54, 0.1);
}

.funnel-label {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

.funnel-drop {
    font-size: 0.72rem;
    color: var(--color-danger-text);
    margin: 0.3rem 0;
}


/* Panel de gasto de WhatsApp por fechas (Dashboard) */
.cost-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-end;
    margin: 0.75rem 0 1rem;
}

.cost-presets,
.cost-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

.cost-dates label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--color-text-muted, inherit);
}

.cost-presets button.active {
    background: var(--color-primary, #2f5c8a);
    color: #fff;
}

.cost-total {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
}

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

.cost-table th,
.cost-table td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    vertical-align: top;
}

.cost-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table-scroll {
    overflow-x: auto;
}