/* IberikIA — estilos compartidos NOC dashboard / admin / settings / login.
 * Paleta clara por defecto (data-bs-theme="light"). Fallback dark disponible
 * por si en el futuro queremos restaurar el modo oscuro: basta con cambiar
 * el atributo del <html>. Variables CSS para que cualquier futuro toggle
 * sea trivial. Todos los colores cumplen contraste WCAG AA. */

:root,
:root[data-bs-theme="light"] {
    --bg-page:        #f6f8fb;
    --bg-card:        #ffffff;
    --bg-card-2:      #f1f5f9;
    --bg-code:        #0f172a;
    --border-soft:    #e5e7eb;
    --border-strong:  #cbd5e1;
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --accent:         #0284c7;
    --accent-hover:   #0369a1;
    --accent-soft:    rgba(2, 132, 199, 0.10);
    --accent-border:  rgba(2, 132, 199, 0.30);
    --accent-on:      #ffffff;
    --green:          #059669;
    --green-soft:     rgba(5, 150, 105, 0.10);
    --amber:          #d97706;
    --amber-soft:     rgba(217, 119, 6, 0.12);
    --red:            #dc2626;
    --red-soft:       rgba(220, 38, 38, 0.10);
    --shadow-card:    0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-hover:   0 4px 12px rgba(15, 23, 42, 0.08);
    --audio-filter:   none;
    --topbar-bg:      #ffffff;
    --topbar-border:  #e5e7eb;
}

:root[data-bs-theme="dark"] {
    --bg-page:        #0a0f1c;
    --bg-card:        #111827;
    --bg-card-2:      #1e293b;
    --bg-code:        #050810;
    --border-soft:    #1f2937;
    --border-strong:  #334155;
    --text-primary:   #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted:     #64748b;
    --accent:         #38bdf8;
    --accent-hover:   #0ea5e9;
    --accent-soft:    rgba(56, 189, 248, 0.12);
    --accent-border:  rgba(56, 189, 248, 0.30);
    --accent-on:      #0a0f1c;
    --green:          #10b981;
    --green-soft:     rgba(16, 185, 129, 0.12);
    --amber:          #f59e0b;
    --amber-soft:     rgba(245, 158, 11, 0.12);
    --red:            #ef4444;
    --red-soft:       rgba(239, 68, 68, 0.12);
    --shadow-card:    none;
    --shadow-hover:   none;
    --audio-filter:   invert(0.9) hue-rotate(180deg);
    --topbar-bg:      linear-gradient(180deg, #0b1322 0%, #0a0f1c 100%);
    --topbar-border:  #1f2937;
}

/* ----- base ----- */
html, body {
    background: var(--bg-page);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ----- topbar ----- */
.topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    padding: 14px 28px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    position: sticky; top: 0; z-index: 100;
    transition: backdrop-filter 0.15s ease;
}
/* backdrop-filter solo cuando hay contenido detrás (ahorra repaint cuando estás
 * en lo alto de la página). El JS pone .scrolled en window.scrollY > 4. */
.topbar.scrolled { backdrop-filter: blur(6px); }
.brand {
    display: flex; align-items: center; gap: 12px;
    font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px;
    color: var(--text-primary);
}
.brand .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px var(--green-soft);
}
/* Topbar de páginas admin: la dot pasa a ámbar (sin necesidad de inline-style). */
.topbar-admin .brand .dot {
    background: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-soft);
}
.brand small { color: var(--text-muted); font-weight: 400; margin-left: 4px; font-size: 0.78rem; }
/* Pulse reservado SOLO para estados activos (llamada en curso). El brand dot
 * y el live-dot son decorativos: estáticos. */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Píldoras meta de la topbar (links pequeños, info, badges) */
.meta-pill {
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    padding: 5px 11px; border-radius: 999px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
    transition: all 0.15s ease;
}
.meta-pill:hover { color: var(--accent); border-color: var(--accent); }
.meta-pill .live-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: 6px;
}
.meta-pill .live-dot-err { background: var(--red); }
.pill-admin {
    background: var(--amber-soft);
    border-color: rgba(217, 119, 6, 0.35);
    color: var(--amber);
}
.pill-admin:hover { color: var(--amber); border-color: var(--amber); }

/* Toggle dark/light: el icono cambia según el tema activo. */
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    padding: 0;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
:root[data-bs-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
:root[data-bs-theme="dark"] .theme-toggle .icon-moon { display: none; }
.sound-toggle.sound-on {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* ----- cards y paneles ----- */
.container-main { padding: 22px 28px 60px; }

/* Stat-bar: ticker condensado horizontal (sustituye al grid de 6 stat-cards).
 * Dos grupos separados por divisor: actividad y coste. */
.stat-bar {
    display: flex; align-items: stretch; flex-wrap: wrap;
    gap: 4px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 14px 22px;
    margin-bottom: 20px;
}
.stat-group { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.stat-divider {
    width: 1px; background: var(--border-soft); align-self: stretch;
}
.stat-bar .stat-mini {
    display: inline-flex; flex-direction: column; gap: 2px;
    background: transparent; border: none; padding: 0; border-radius: 0;
}
.stat-mini-label {
    text-transform: uppercase; font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.06em; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
}
.stat-bar strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem; font-weight: 600;
    color: var(--text-primary); line-height: 1.1;
}
.stat-bar strong.accent { color: var(--accent); }
.stat-bar strong.green  { color: var(--green); }
.stat-bar .stat-row { display: inline-flex; align-items: center; gap: 10px; }
.stat-bar .sparkline { display: block; opacity: 0.85; }

@media (max-width: 768px) {
    .stat-bar { padding: 12px 14px; gap: 12px; }
    .stat-divider { display: none; }
    .stat-group { gap: 18px; }
}

/* Stat-card legacy (queda por si alguien la usa, pero stat-bar es el patrón). */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: var(--shadow-card);
}
.stat-card .label {
    text-transform: uppercase; font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    display: flex; align-items: center; gap: 6px; font-weight: 600;
}
.stat-card .value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem; font-weight: 600; margin-top: 6px;
    color: var(--text-primary);
    line-height: 1.1;
}
.stat-card .value.accent { color: var(--accent); }
.stat-card .value.green  { color: var(--green); }

.panel {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
}
.panel-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    background: var(--bg-card);
}
.panel-title {
    font-weight: 600; font-size: 0.92rem;
    display: flex; align-items: center; gap: 9px;
    color: var(--text-primary);
}
.panel-title i { color: var(--accent); }
.panel-body { padding: 20px; }

/* ----- formularios ----- */
.form-control, .form-select, textarea.form-control {
    background: var(--bg-card);
    border-color: var(--border-soft);
    color: var(--text-primary);
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.18rem var(--accent-soft);
}
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.55; }

label {
    color: var(--text-secondary);
    font-size: 0.76rem; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 600;
}
.hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 4px; }

.btn-accent {
    background: var(--accent); border-color: var(--accent);
    color: var(--accent-on); font-weight: 600;
    padding: 9px 20px; transition: all 0.15s ease;
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on); }
.btn-accent:focus { box-shadow: 0 0 0 0.18rem var(--accent-soft); }

/* Dirty form indicator: pequeño punto en el botón submit cuando hay cambios. */
.dirty-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--amber);
    margin-left: 8px; vertical-align: middle;
    box-shadow: 0 0 0 2px var(--amber-soft);
}
button.dirty { box-shadow: 0 0 0 2px var(--amber-soft); }

/* Subtítulo de sección anidada dentro de un panel (alternativa a card-en-card). */
.subsection-heading {
    font-size: 0.84rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 0 0 4px 0;
    display: flex; align-items: center; gap: 6px;
}
.subsection-heading i { color: var(--accent); }

.btn-danger-soft {
    background: var(--red-soft);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: var(--red);
}
.btn-danger-soft:hover {
    background: var(--red);
    color: #ffffff;
    border-color: var(--red);
}

/* Tablas dentro de paneles (admin / ficha): cabecera atenuada en mayúsculas finas. */
.panel-body table { font-size: 0.88rem; }
.panel-body table th {
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.panel-body table td { color: var(--text-primary); vertical-align: middle; }

/* Tarjetas de herramientas (function-calling). */
.tool-card-existing {
    background: var(--bg-card-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.tool-card-new {
    background: var(--bg-card);
    border: 1px dashed var(--accent);
    border-radius: 10px;
}
.tool-config-textarea {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

/* Markdown preview en empresa.php prompt + settings.php prompt */
.md-preview {
    min-height: 240px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-card-2);
    border-color: var(--border-soft);
    line-height: 1.55;
}
.md-preview h1, .md-preview h2, .md-preview h3 { margin-top: 0.8em; margin-bottom: 0.4em; font-weight: 600; }
.md-preview h1 { font-size: 1.4rem; }
.md-preview h2 { font-size: 1.2rem; }
.md-preview h3 { font-size: 1.05rem; }
.md-preview p { margin-bottom: 0.6em; }
.md-preview code { background: var(--bg-card); padding: 1px 5px; border-radius: 4px; font-size: 0.86em; }
.md-preview pre { background: var(--bg-code); color: #cbd5e1; padding: 12px; border-radius: 6px; overflow-x: auto; }
.md-preview pre code { background: transparent; color: inherit; padding: 0; }
.md-preview ul, .md-preview ol { margin-bottom: 0.6em; padding-left: 1.4em; }
.md-preview a { color: var(--accent); }
.md-preview blockquote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--text-secondary); margin: 0.6em 0; }

/* Buttons outline reaprovechan los de Bootstrap con tint */
.input-group-text {
    background: var(--bg-card-2); border-color: var(--border-soft);
    color: var(--text-secondary);
}

/* Slider range con valor inline */
.range-with-value {
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
}
.range-with-value input[type=range] { width: 100%; }
.range-with-value .range-val {
    font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
    background: var(--bg-card-2); padding: 4px 10px;
    border-radius: 6px; min-width: 56px; text-align: center;
    color: var(--text-primary); border: 1px solid var(--border-soft);
}
input[type=range] { accent-color: var(--accent); }

/* ----- tabla de llamadas ----- */
table.calls { width: 100%; margin: 0; font-size: 0.88rem; }
table.calls thead th {
    background: var(--bg-card-2);
    color: var(--text-secondary);
    font-weight: 600; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    position: sticky; top: 0;
}
table.calls tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    color: var(--text-primary);
}
table.calls tbody tr { cursor: pointer; transition: background 0.1s ease; }
table.calls tbody tr:hover { background: var(--accent-soft); }
table.calls tbody tr:last-child td { border-bottom: none; }
table.calls .audio-wrap, table.calls .btn-download { cursor: default; }

/* Responsivo: en <900px ocultamos columnas pesadas. El detalle vive en el modal. */
@media (max-width: 900px) {
    table.calls .col-id, table.calls .col-did, table.calls .col-coste { display: none; }
}
@media (max-width: 640px) {
    table.calls .col-nombre, table.calls .col-empresa { display: none; }
    table.calls thead th, table.calls tbody td { padding: 12px 10px; }
    table.calls { font-size: 0.92rem; }
    table.calls .col-audio { display: none; }
    /* Indicador discreto de que hay audio cuando ocultamos las columnas. */
    table.calls .col-estado .status-badge { padding: 4px 12px; }
}

.id-cell { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.84rem; }
.reviewed-mark { color: var(--green); margin-left: 4px; font-size: 0.9rem; }
table.calls tbody tr.reviewed td { color: var(--text-muted); }
table.calls tbody tr.reviewed .num-strong { color: var(--text-secondary); }
.num-strong { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-primary); }
/* Azul = el número es de alguien del directorio interno de esa empresa, o sea que
   la llamada viene de dentro de casa y no de un cliente. --accent ya es azul en
   los dos temas (#0284c7 claro / #38bdf8 oscuro), así que no hay que duplicar la
   regla por tema. El segundo selector es necesario para ganar en especificidad a
   'tr.reviewed .num-strong', que si no dejaría gris el número de las revisadas. */
.num-strong.num-interno,
table.calls tbody tr.reviewed .num-strong.num-interno { color: var(--accent); }
.num-soft   { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); font-size: 0.82rem; }
.no-data    { color: var(--text-muted); font-style: italic; font-size: 0.85rem; }

/* Llamada analizada a la que NO corresponde nota (una derivación correcta de 15 s, o una
   en la que el cliente no llegó a decir nada). Deliberadamente neutra: no es un suspenso
   ni un error, y tampoco puede confundirse con el "—" de "todavía sin analizar". */
.q-nula {
    color: var(--text-secondary);
    background: var(--bg-card-2);
    border: 1px solid var(--border-soft);
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 500; white-space: nowrap;
    cursor: help;
}

.empresa-tag {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.72rem; font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

/* Chip compacto "×N" junto al estado: la llamada tuvo N tramos (transferencia
   con recuperación). El detalle completo va en el title; nowrap para que el
   chip no parta la celda en dos líneas. */
table.calls .col-estado { white-space: nowrap; }
.tramos-chip {
    display: inline-flex; align-items: center;
    margin-left: 6px; padding: 2px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    border: 1px solid var(--accent-border);
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600;
    cursor: help; vertical-align: middle;
}

/* ----- badges de estado de llamada (más sobrios, sin uppercase agresivo) ----- */
.status-badge {
    font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 500;
    padding: 3px 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid transparent;
}
.status-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-badge.active    { background: var(--green-soft); color: var(--green); border-color: rgba(5, 150, 105, 0.25); }
.status-badge.active .dot { background: var(--green); animation: pulse 1.4s infinite; }
.status-badge.completed { background: var(--bg-card-2); color: var(--text-secondary); border-color: var(--border-soft); }
.status-badge.aborted   { background: var(--red-soft); color: var(--red); border-color: rgba(220, 38, 38, 0.25); }
.status-badge.pending   { background: var(--amber-soft); color: var(--amber); border-color: rgba(217, 119, 6, 0.25); }
.status-badge.maxduration { background: var(--amber-soft); color: var(--amber); border-color: rgba(217, 119, 6, 0.25); }

/* ----- audio player ----- */
.audio-wrap { display: flex; align-items: center; gap: 8px; }
audio { width: 220px; height: 32px; filter: var(--audio-filter); }
.btn-download {
    color: var(--accent); text-decoration: none;
    padding: 4px 8px; border-radius: 6px;
    transition: background 0.15s;
}
.btn-download:hover { background: var(--accent-soft); color: var(--accent-hover); }

/* ----- estados vacíos y animaciones ----- */
.empty-state { padding: 50px 20px; text-align: center; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; color: var(--border-strong); display: block; margin-bottom: 10px; }
.empty-state .hint { display: inline-block; margin-top: 6px; }
.empty-onboarding .empty-title { color: var(--text-primary); font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.empty-onboarding .empty-desc  { font-size: 0.88rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto; }
.empty-onboarding .empty-desc a { color: var(--accent); text-decoration: none; }
.empty-onboarding .empty-desc a:hover { text-decoration: underline; }
.row-new { animation: rowIn 0.6s ease; }
@keyframes rowIn { from { background: var(--accent-soft); } to { background: transparent; } }

/* ----- modal ----- */
.modal-content {
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-soft);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}
.modal-header, .modal-footer { border-color: var(--border-soft); }
.modal-title { color: var(--text-primary); }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 22px;
}
.detail-item .label {
    color: var(--text-muted); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 600;
}
.detail-item .value {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary); margin-top: 3px;
    font-size: 0.92rem;
}
.detail-section {
    background: var(--bg-card-2);
    border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 14px 16px;
}
.detail-section h6 {
    color: var(--accent);
    font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 12px; font-weight: 600;
}
.cost-breakdown { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.cost-breakdown .row-cb {
    display: flex; justify-content: space-between;
    padding: 5px 0; border-bottom: 1px dashed var(--border-soft);
}
.cost-breakdown .row-cb:last-child {
    border-bottom: none; font-weight: 700; color: var(--accent);
    padding-top: 9px; margin-top: 3px; border-top: 1px solid var(--border-soft);
}
.json-dump {
    background: var(--bg-code);
    border: 1px solid var(--border-soft);
    border-radius: 6px; padding: 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
    max-height: 280px; overflow: auto;
    white-space: pre-wrap; color: #cbd5e1;
}
.audio-big audio { width: 100%; height: 36px; filter: var(--audio-filter); }

.dm-summary-text       { margin-bottom: 0.5rem; }
.dm-summary-highlights { padding-left: 1.2rem; margin: 0; }

.details-summary {
    cursor: pointer; font-size: 0.85rem;
    color: var(--text-secondary);
}
.details-summary:hover { color: var(--accent); }
pre.call-log {
    max-height: 320px; overflow: auto;
    background: var(--bg-code); padding: 0.75rem;
    border-radius: 0.4rem; font-size: 0.78rem;
    color: #cbd5e1; margin: 0;
    white-space: pre-wrap; word-break: break-word;
}

/* ----- dropdown ----- */
.dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-hover);
    color: var(--text-primary);
}
.controls-menu { min-width: 320px; }

/* Menú avatar (colapsa recordings/phpmyadmin/ajustes/salir tras la ficha del user) */
.user-menu-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    padding: 5px 11px; border-radius: 999px;
    cursor: pointer;
}
.user-menu-toggle:hover, .user-menu-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.user-menu-toggle .caret { font-size: 0.7rem; opacity: 0.6; }
.user-menu .dropdown-item {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-primary); font-size: 0.86rem;
    padding: 8px 14px;
}
.user-menu .dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
.user-menu .dropdown-item i { color: var(--text-muted); width: 16px; text-align: center; }
.user-menu .dropdown-item:hover i { color: var(--accent); }
.user-menu .dropdown-item.danger { color: var(--red); }
.user-menu .dropdown-item.danger i { color: var(--red); opacity: 0.7; }
.user-menu .dropdown-item.danger:hover { background: var(--red-soft); }
.user-menu .dropdown-header {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); padding: 8px 14px 4px;
}
.user-menu .dropdown-divider { border-color: var(--border-soft); margin: 6px 0; }

/* Cluster de toggles (theme + sound) sin borde — visualmente agrupados */
.toggle-cluster {
    display: inline-flex; gap: 2px;
    padding: 2px; border-radius: 999px;
    background: var(--bg-card-2);
    border: 1px solid var(--border-soft);
}
.toggle-cluster .theme-toggle {
    width: 30px; height: 30px;
    background: transparent;
    border: none;
}
.toggle-cluster .theme-toggle:hover { background: var(--accent-soft); }

/* Filtros agrupados tras un botón popover en la toolbar del panel calls */
.filter-trigger {
    position: relative;
}
.filter-trigger .filter-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--accent); color: var(--accent-on);
    font-size: 0.65rem; font-weight: 700;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.filter-popover {
    min-width: 320px;
    padding: 14px;
}
.filter-popover .filter-row { margin-bottom: 12px; }
.filter-popover .filter-row:last-child { margin-bottom: 0; }
.filter-popover .filter-row label {
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    margin-bottom: 4px; font-weight: 600;
}
.filter-popover .filter-actions {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border-soft);
    padding-top: 10px; margin-top: 10px;
}

/* Tabla unificada tokens+coste (sustituye dos paneles col-md-6) */
.cost-table {
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.84rem;
    border-collapse: collapse;
}
.cost-table thead th {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); font-weight: 600;
    text-align: right; padding: 4px 10px 8px;
    border-bottom: 1px solid var(--border-soft);
}
.cost-table thead th:first-child { text-align: left; }
.cost-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px dashed var(--border-soft);
    text-align: right;
    color: var(--text-primary);
}
.cost-table tbody td:first-child {
    text-align: left;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
}
.cost-table tbody tr.total td {
    font-weight: 700; color: var(--accent);
    border-bottom: none; border-top: 1px solid var(--border-soft);
    padding-top: 9px;
}
.cost-table tbody tr.total td:first-child { color: var(--accent); }

/* Radio cards para el selector de modo de barge-in (sustituye select + muro de texto) */
.barge-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.barge-mode-card {
    display: block;
    cursor: pointer;
    background: var(--bg-card);
    border: 1.5px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    position: relative;
}
.barge-mode-card:hover { border-color: var(--accent); }
.barge-mode-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.barge-mode-card .mode-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.barge-mode-card .mode-name {
    font-weight: 600; color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92rem;
}
.barge-mode-card .mode-badge {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--bg-card-2); color: var(--text-muted);
    padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.barge-mode-card .mode-desc {
    color: var(--text-secondary);
    font-size: 0.8rem; line-height: 1.45;
}
.barge-mode-card input[type="radio"]:checked + .mode-head + .mode-desc,
.barge-mode-card:has(input[type="radio"]:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.10);
}
.barge-mode-card:has(input[type="radio"]:checked) .mode-badge {
    background: var(--accent); color: var(--accent-on);
}
.barge-mode-card:has(input[type="radio"]:checked) .mode-name { color: var(--accent); }

/* ----- visually hidden (live regions, skip-links) ----- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ----- health dots ----- */
.hc-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 3px; vertical-align: middle;
    background: var(--text-muted); transition: background 0.2s;
}
.hc-dot.ok   { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.hc-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.hc-dot.bad  { background: var(--red);   box-shadow: 0 0 0 3px var(--red-soft); }
#healthPill { cursor: help; }

/* ----- flash messages ----- */
.flash {
    padding: 11px 16px; border-radius: 8px; margin-bottom: 16px;
    font-size: 0.88rem;
    border: 1px solid transparent;
}
.flash.success { background: var(--green-soft); border-color: rgba(5, 150, 105, 0.25); color: var(--green); }
.flash.error   { background: var(--red-soft);   border-color: rgba(220, 38, 38, 0.25); color: var(--red); }

/* ----- bloques info (settings) ----- */
.info-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.info-item { color: var(--text-muted); font-size: 0.82rem; }
.info-item strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; margin-left: 6px; font-weight: 600; }

.tag {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.72rem; font-family: 'JetBrains Mono', monospace; font-weight: 600;
}

/* ----- login ----- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 36px 32px;
    width: 100%; max-width: 380px;
    box-shadow: var(--shadow-hover);
}

/* ----- compactar ligeramente en pantallas pequeñas ----- */
@media (max-width: 768px) {
    .container-main { padding: 16px 14px 40px; }
    .topbar { padding: 12px 14px; }
    .stat-card .value { font-size: 1.3rem; }
    .panel-body { padding: 16px; }
}

/* ----- dispositivos táctiles: cumplir WCAG 2.5.5 Target Size (44x44) -----
 * Aplicamos solo cuando el dispositivo principal es táctil (pointer: coarse),
 * para no inflar los botones en desktop con ratón. */
@media (pointer: coarse) {
    .btn-sm, .btn-sm.btn-accent, .btn-sm.btn-outline-secondary,
    .btn-sm.btn-danger-soft, .btn-sm.btn-outline-warning, .btn-sm.btn-outline-danger {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    .meta-pill { min-height: 38px; padding: 8px 13px; }
    .did-pill button {
        min-width: 32px; min-height: 32px;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
    }
    .hc-dot { transform: scale(1.3); }
    .form-control, .form-select { min-height: 44px; }
    .form-control-sm, .form-select-sm { min-height: 38px; font-size: 0.95rem; }
    .form-check-input { min-width: 22px; min-height: 22px; }
}

/* ===== Transcripción tipo chat (modal dashboard + llamada.php) — 2026-06-10 ===== */
.chat-box { max-height: 480px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.chat-row { display: flex; }
.chat-row.chat-agent { justify-content: flex-end; }
.chat-row.chat-caller { justify-content: flex-start; }
.chat-bubble { max-width: 72%; padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; line-height: 1.45; }
.chat-caller .chat-bubble { background: var(--bg-page, #f1f3f5); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.chat-agent .chat-bubble { background: var(--accent-soft); border: 1px solid var(--accent-border); border-bottom-right-radius: 4px; }
.chat-who { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.chat-ts { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; text-align: right; }
.chat-tramo-sep { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin: 12px 0 8px; }

/* ===================================================================== */
/* ===== EN DIRECTO — monitorización de llamadas en vivo (2026-07-23) ==== */
/* ===================================================================== */

/* Indicador "en directo": punto rojo con anillo que se expande (ping). Es el
 * lenguaje visual de "esto está pasando AHORA". Reservado a superficies vivas. */
.live-dot-ping {
    position: relative; display: inline-block;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--red); flex: 0 0 auto;
}
.live-dot-ping::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%; background: var(--red);
    animation: livePing 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes livePing {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}
.live-dot-idle {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted); margin-right: 8px; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
    .live-dot-ping::after { animation: none; }
    .status-badge.active .dot { animation: none; }
}

/* Panel hero "En directo ahora": cabecera con título de más peso (jerarquía real,
 * no solo mayúsculas), rejilla de tarjetas de llamada en curso. */
.live-panel { margin-bottom: 20px; }
.live-panel .live-head {
    background: var(--bg-card);
    gap: 10px 14px;
}
.live-title {
    font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
    gap: 10px; color: var(--text-primary);
}
.live-title i { color: inherit; }
.live-count {
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700;
    background: var(--red-soft); color: var(--red);
    border: 1px solid rgba(220, 38, 38, 0.25);
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}
.live-count.zero { background: var(--bg-card-2); color: var(--text-muted); border-color: var(--border-soft); }
.live-updated { margin: 0; }
.live-updated.err { color: var(--red); font-weight: 600; }

.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px; padding: 16px 20px;
}
.live-idle {
    padding: 22px 20px; color: var(--text-secondary); font-size: 0.9rem;
    display: flex; align-items: center;
}

/* Tarjeta de una llamada en curso. Hover eleva (sensación de "clicable / vivo"). */
.live-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px; padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer; position: relative;
}
.live-card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent-border); transform: translateY(-1px); }
.live-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-card-caller {
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 0.98rem;
    color: var(--text-primary); min-width: 0;
}
.live-card-caller .num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-card-name { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.82rem; color: var(--text-secondary); }
.live-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.live-elapsed {
    font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    padding: 1px 8px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.live-card-did { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }

/* Chip "qué está haciendo ahora": la señal más viva de la tarjeta. */
.live-activity {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 500; color: var(--accent);
    background: var(--accent-soft); border: 1px solid var(--accent-border);
    padding: 4px 10px; border-radius: 8px;
    max-width: 100%;
}
.live-activity i { font-size: 0.85rem; flex: 0 0 auto; }
.live-activity .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-activity.tool  { color: var(--amber); background: var(--amber-soft); border-color: rgba(217, 119, 6, 0.25); }
.live-activity.pending { color: var(--text-secondary); background: var(--bg-card-2); border-color: var(--border-soft); }
.live-card-cta {
    align-self: flex-start;
    font-size: 0.8rem; font-weight: 600; color: var(--accent);
    display: inline-flex; align-items: center; gap: 5px;
}
.live-card:hover .live-card-cta { text-decoration: underline; }

/* ----- Offcanvas: timeline en directo de UNA llamada ----- */
.live-oc {
    background: var(--bg-card); color: var(--text-primary);
    border-left: 1px solid var(--border-soft);
}
.live-oc .offcanvas-header {
    border-bottom: 1px solid var(--border-soft);
    align-items: flex-start; gap: 12px;
}
.live-oc-caller {
    display: flex; align-items: center; gap: 9px;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.05rem;
    color: var(--text-primary);
}
.live-oc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.live-oc.ended .live-dot-ping { background: var(--text-muted); }
.live-oc.ended .live-dot-ping::after { animation: none; display: none; }
.lt-box {
    display: flex; flex-direction: column; gap: 10px;
    padding: 4px 2px 8px;
}
.lt-empty { color: var(--text-muted); font-style: italic; font-size: 0.88rem; padding: 24px 4px; text-align: center; }
/* Turnos reutilizan las burbujas de chat (.chat-*). Acción de tool = fila central. */
.lt-tool {
    align-self: center; max-width: 92%;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8rem; color: var(--text-secondary);
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    padding: 5px 12px; border-radius: 999px;
}
.lt-tool i { color: var(--amber); }
.lt-tool.sistema i { color: var(--text-muted); }
.lt-sep { text-align: center; font-size: 0.76rem; color: var(--text-muted); margin: 8px 0 2px; }
.lt-ended-banner {
    text-align: center; font-size: 0.82rem; font-weight: 600;
    color: var(--text-secondary); background: var(--bg-card-2);
    border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 8px 12px; margin-top: 10px;
}
.live-oc-foot {
    border-top: 1px solid var(--border-soft);
    padding: 12px 16px; display: flex; gap: 8px; justify-content: flex-end;
}

/* Llamada en curso en el listado: segunda via de aviso, independiente del panel en vivo */
table.calls tbody tr.fila-en-curso td { background: var(--green-soft); }
table.calls tbody tr.fila-en-curso .col-estado { font-weight: 600; }

/* ===== Móvil (≤768) — adaptación ESTRUCTURAL, no tipografía fluida =====
   Añadido 30/07/2026: llamada.php y dashboard.php no tenían ni una media query.
   Los breakpoints son los que ya usaba el fichero (768 / 640), no otros nuevos. */
@media (max-width: 768px) {
    /* El contenido no puede tocar el borde de la pantalla. */
    .container-main { padding-left: 14px; padding-right: 14px; }

    /* Objetivo táctil: 44 px es el mínimo cómodo con el pulgar.
       .btn-download entra aquí porque medía 27 px: son los enlaces de descarga
       de grabación del detalle de llamada, de lo más pequeño de todo el panel.
       Los form-control/form-select se quedan en los 38 px de Bootstrap a
       propósito: subirlos alargaría todos los formularios de la ficha sin
       ganar nada, porque se tocan de uno en uno. */
    .meta-pill, .topbar .btn, .btn-sm, .btn-download {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Cualquier tabla dentro de una tarjeta se desplaza sola en horizontal
       en vez de estirar la página entera. */
    .card table, .call-card table { display: block; overflow-x: auto; }
}