/* ---------------------------------------------------------------------------
   Interview Caller - hoja de estilos del panel

   Sin dependencias externas: no hay CDN, ni fuentes remotas, ni framework.
   Motivo: la Content-Security-Policy del panel restringe el origen de los
   recursos a 'self'. Cargar un framework remoto obligaria a relajarla, que es
   justo lo que se quiere evitar en una aplicacion que origina llamadas
   telefonicas reales.

   Se usan variables CSS para que los colores de estado coincidan con los que
   devuelve InterviewStatus::color() en PHP.
--------------------------------------------------------------------------- */

@font-face {
    font-family: "Share Tech Mono";
    src: url("../fonts/ShareTechMono-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

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

/* Paleta del panel: superficies oscuras, acento lila y estados semánticos. */
:root {
    --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-tech: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --bg: #09090f;
    --surface: #111119;
    --surface-alt: #15151f;
    --border: #24202f;
    --border-strong: #30263d;

    /* Los campos conservan un borde visible sobre las tarjetas. */
    --input-bg: #111119;
    --text: #f4f1fa;
    --text-muted: #a8a3b5;

    /* Relleno de botones y acento legible para enlaces y foco. */
    --primary: #9333ea;
    --primary-hover: #7e22ce;
    --primary-dark: #a855f7;
    --focus: #a855f7;

    /* Estados operativos. */
    --green: #22c55e;
    --green-text: #22c55e;
    --teal: #38bdf8;
    --orange: #f59e0b;
    --red: #ef4444;
    --blue: #38bdf8;
    --yellow: #f59e0b;
    --gray: #a8a3b5;
    --slate: #a8a3b5;

    /*
     * Fondos de las insignias y los avisos: el color del estado a muy baja opacidad.
     * Se usa color-mix para derivarlos del propio color en lugar de fijar catorce
     * valores a mano.
     */
    --tint: 10%;

    --radius: 8px;
    --shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }

/*
 * Sin esto, el icono del calendario de <input type="date"> y cualquier otro
 * control nativo del navegador (flecha de <select>, casillas del sistema en
 * navegadores que las dibujan asi) se pintan para un fondo claro: sobre
 * --input-bg casi no se ven. color-scheme le dice al navegador que use su
 * paleta oscura para esos controles, sin tocar ningun color que ya fijamos
 * a mano en el resto de la hoja.
 */
:root { color-scheme: dark; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    background-image: none;
}

.skip-link {
    position: fixed; top: 10px; left: 10px; z-index: 1000;
    padding: 9px 13px; border-radius: 9px; background: #fff; color: #160f1c;
    font-weight: 700; transform: translateY(-160%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }

/* --- Estructura principal y barra lateral -------------------------------- */
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 256px; height: 100vh; position: sticky; top: 0; flex: 0 0 256px;
    padding: 26px 16px 20px; display: flex; flex-direction: column;
    background: #0c0c13; border-right: 1px solid var(--border);
}
.workspace { min-width: 0; min-height: 100vh; flex: 1; display: flex; flex-direction: column; }
.global-call-alert {
    position: fixed; z-index: 900; top: 18px;
    left: calc(256px + (100vw - 256px) / 2); transform: translateX(-50%);
    width: min(620px, calc(100vw - 296px));
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--orange) 62%, transparent);
    border-radius: 14px; background: color-mix(in srgb, var(--orange) 14%, #15111a);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .48);
}
.global-call-alert[hidden] { display: none; }
.global-call-alert.is-escalated { border-color: var(--red); }
.global-call-alert.is-muted { border-color: var(--border-strong); }
.global-call-alert-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: #111; }
.global-call-alert > div { display: grid; gap: 2px; }
.global-call-alert > div strong { font-size: 14px; }
.global-call-alert > div span { color: var(--text-muted); font-size: 11px; }
.global-call-alert-mute { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark {
    display: block; width: 53px; height: 53px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(196,181,253,.55);
    box-shadow: 0 4px 12px rgba(0,0,0,.24);
}

.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 46px; }
.nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
}
.nav a:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }
.nav a.active {
    background: #24113d;
    border-color: var(--border-strong);
    color: #b96aff;
}
.nav-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-live-count { min-width: 22px; margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-tech); font-size: 11px; text-align: center; }

@media (max-width: 760px) {
    .global-call-alert { top: 10px; left: 10px; right: 10px; transform: none; width: auto; grid-template-columns: auto minmax(0, 1fr) auto; }
    .global-call-alert .btn { grid-column: 1 / 3; justify-content: center; }
    .global-call-alert-mute { grid-column: 3; grid-row: 2; }
}

/* Enlace de navegacion sustituido por un aviso "Proximamente": misma forma
   que .nav a, sin color de enlace ni cursor de clic, para que se note que no
   lleva a ningun sitio en vez de parecer un enlace roto. */
.nav-soon {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .01em;
    cursor: default;
}
.nav-soon small {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-actions { margin-top: auto; display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
.sidebar-actions .btn { text-align: center; }
.user { color: var(--text-muted); font-size: 13px; }

.session-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 12px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
}
.session-dot {
    width: 9px; height: 9px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text) 25%, transparent);
}
.session-text { min-width: 0; line-height: 1.25; }
.session-text strong { display: block; font-size: 13px; color: var(--text); }
.session-text small { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-logout { margin: 0; }
.session-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
}
.session-logout-btn svg { width: 15px; height: 15px; }
.session-logout-btn:hover { color: var(--text); background: var(--surface-alt); }

.workspace-header {
    /* Mismo degradado que .sidebar, para que el header y el "Resumen
       operativo" de arriba luzcan como una sola pieza con el menu, en vez
       de un color plano distinto. */
    background: #0b0b12;

    /* Separacion apenas visible con el contenido claro de abajo -no un
       borde marcado, solo lo justo para que no se vea pegado-. */
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.top-bar {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 96px 0 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
.sip-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
}
.sip-status svg { width: 14px; height: 14px; }
.server-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--surface);
}
.server-clock svg { width: 14px; height: 14px; }
.server-clock time { font-variant-numeric: tabular-nums; color: var(--text); }
.server-clock small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sip-status-up   { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 40%, transparent); background: color-mix(in srgb, var(--green-text) var(--tint), transparent); }
.sip-status-down { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) var(--tint), transparent); }

.user-menu { position: relative; }
.user-menu-checkbox { display: none; }
.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 180px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: right;
}
.user-menu-checkbox:checked ~ .user-menu-dropdown { display: block; }
.user-menu-name { font-weight: 600; margin-bottom: 2px; }
.user-menu-dropdown form { margin-top: 10px; }

.summary-strip { max-width: 1440px; margin: 0 auto; padding: 28px 96px 4px 48px; }
.summary-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.summary-head h2 { margin-top: 3px; color: #f5f3ff; font-size: 18px; }
.eyebrow { color: var(--primary-dark); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.summary-stats { max-width: 620px; margin-bottom: 0; }
.summary-stats .stat { padding: 11px 13px; box-shadow: none; }
.summary-stats .stat-icon { width: 32px; height: 32px; border-radius: 9px; }
.summary-stats .stat-value { font-size: 20px; }
.summary-stats .stat-desc { display: none; }
.summary-range-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* --- Agentes conectados --------------------------------------------------- */

.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.agent-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--shadow);
}
.agent-avatar {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}
.agent-name { font-weight: 600; margin-bottom: 2px; }
.agent-status-pill {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.agent-status-ready   { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.agent-status-paused  { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.agent-status-offline { background: color-mix(in srgb, var(--gray) var(--tint), transparent); color: var(--gray); }
.agent-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }

.summary-range-form select, .summary-range-form input[type="date"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 12px;
}

/* --- Contenedor ---------------------------------------------------------- */

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 64px 56px 48px; flex: 1 0 auto; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-head h1 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.025em; line-height: 1.2; }
.page-head h1 + .muted,
.page-head > div > .muted { margin: 5px 0 0; max-width: 720px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.mono { font-family: var(--font-tech); font-size: 13px; }
.num, .right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }

/* --- Tarjetas ------------------------------------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.card-head h2 { font-size: 14px; letter-spacing: .01em; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* --- Indicadores --------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stats-secondary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/*
 * Recuadro de cifra (partials/stat.php): icono a la izquierda, valor grande,
 * etiqueta y descripcion. --stat-color tiñe icono, valor, borde y sombra; la
 * fija cada variante de color de abajo.
 */
.stat {
    --stat-color: var(--gray);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--stat-color) 72%, var(--border));
    border-radius: var(--radius);
    box-shadow: none;
}
.stat { transition: background .12s ease, border-color .12s ease; }
.stat:hover { background: color-mix(in srgb, var(--surface-alt) 42%, var(--surface)); border-color: color-mix(in srgb, var(--stat-color) 46%, var(--border)); }
.dashboard-stats { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.worker-status {
    display: flex; align-items: center; gap: 11px; margin: -6px 0 20px; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.worker-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.worker-status > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.worker-status strong { font-size: 13px; }
.worker-status span { color: var(--text-muted); font-size: 12px; }
.worker-status-up { border-color: color-mix(in srgb, var(--green-text) 35%, var(--border)); }
.worker-status-up .worker-status-dot { background: var(--green-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-text) 16%, transparent); }
.worker-status-down { border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.worker-status-down .worker-status-dot { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent); }
.stat-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--stat-color) 16%, transparent);
    color: var(--stat-color);
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-body { min-width: 0; }
.stat-value { display: block; font-family: var(--font-tech); font-size: 24px; font-weight: 400; line-height: 1.1; color: var(--stat-color); }
.stat-label { display: block; color: var(--text); font-size: 12px; font-weight: 600; margin-top: 3px; }
.stat-desc { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; line-height: 1.3; }
.stat-sm .stat-value { font-size: 22px; }

.stat-total  { --stat-color: var(--text); }
.stat-green  { --stat-color: var(--green-text); }
.stat-teal   { --stat-color: var(--teal); }
.stat-orange { --stat-color: var(--orange); }
.stat-red    { --stat-color: var(--red); }
.stat-blue   { --stat-color: var(--blue); }
.stat-slate  { --stat-color: var(--slate); }

/* --- Tablas -------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-alt) 84%, var(--surface));
    white-space: nowrap;
}
.table th.num { text-align: right; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
.table tbody tr:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface-alt)); }

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

.empty { padding: 42px 20px; text-align: center; color: var(--text-muted); }
.empty strong, .empty span { display: block; }
.empty strong { color: var(--text); font-weight: 600; }
.empty span { margin-top: 3px; font-size: 12px; }
.empty-compact { padding: 34px 18px; }
.empty-state {
    display: grid; justify-items: center; gap: 7px; padding: 56px 24px;
    color: var(--text-muted); text-align: center;
}
.empty-state strong { color: var(--text); font-size: 16px; }
.empty-state > span:not(.empty-state-icon) { max-width: 460px; }
.empty-state .btn { margin-top: 9px; }
.empty-state-icon {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 3px;
    border: 1px solid var(--border); border-radius: var(--radius); color: var(--primary-dark); background: var(--surface-alt);
}
.empty-state-icon svg { width: 19px; height: 19px; }

.note-mark { color: var(--text-muted); cursor: help; margin-left: 4px; }

.key {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;

    /*
     * Aspecto de tecla fisica: del color del panel con borde marcado, que es como
     * se ve una tecla en una interfaz oscura.
     */
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    font-family: var(--font-tech);
}

/* --- Etiquetas de estado ------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.badge-gray { background: color-mix(in srgb, var(--gray) var(--tint), transparent); color: var(--gray); }
.badge-blue { background: color-mix(in srgb, var(--blue) var(--tint), transparent); color: var(--blue); }
.badge-green { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.badge-teal { background: color-mix(in srgb, var(--teal) var(--tint), transparent); color: var(--teal); }
.badge-orange { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.badge-red { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }
.badge-slate { background: color-mix(in srgb, var(--slate) var(--tint), transparent); color: var(--slate); }

.badge-outcome-confirmed { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.badge-outcome-rescheduled { background: color-mix(in srgb, var(--teal) var(--tint), transparent); color: var(--teal); }
.badge-outcome-no_response { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.badge-outcome-error { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }

/* --- Botones ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.btn { transition: background .12s ease, border-color .12s ease; }
.btn:hover { background: var(--bg); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px; font-size: 12px; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--red) var(--tint), transparent); }
.btn-success { color: #07110a; background: var(--green-text); border-color: var(--green-text); }
.btn-success:hover { color: #07110a; background: color-mix(in srgb, var(--green-text) 88%, white); border-color: var(--green-text); }
.btn-warning { color: #181303; background: var(--yellow); border-color: var(--yellow); }
.btn-warning:hover { color: #181303; background: color-mix(in srgb, var(--yellow) 88%, white); border-color: var(--yellow); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg); }

/* --- Formularios --------------------------------------------------------- */

.form { padding: 20px; }

.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}
.req { color: var(--red); }

.field input[type="text"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="password"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: color-mix(in srgb, var(--surface-alt) 78%, #27212f);
    color: var(--text);
}
.field textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 1px var(--focus);
    box-shadow: 0 0 0 3px rgba(192, 91, 207, .18);
}
.field .has-error { border-color: var(--red); }

.field-hint { display: block; color: var(--text-muted); font-size: 12px; margin-top: 5px; }
.field-hint code {
    background: var(--bg);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.field-error { display: block; color: var(--red); font-size: 12px; margin-top: 5px; }

.form-actions {
    display: flex;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 18px;
}

.filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 16px;
}
.filters.card { border-color: color-mix(in srgb, var(--primary-dark) 18%, var(--border)); box-shadow: none; }
.filters .field { margin-bottom: 0; flex: 1; min-width: 140px; }
.field-actions { display: flex; gap: 8px; flex: 0 0 auto !important; }

/* --- Teclado numerico (dialpad) -------------------------------------------
   Usado en "Llamar ahora" y en el Softphone: un input grande, una grilla de
   teclas clickeables y un boton de llamar que se pone verde en cuanto hay
   algo escrito. --------------------------------------------------------- */

.field[data-dialpad] {
    max-width: 420px;
}

.dialpad-input {
    width: 100%;
    padding: 16px 14px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-tech);
}
.dialpad-input::placeholder { color: var(--text-muted); font-weight: 400; }
.dialpad-input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(192, 91, 207, .18);
}

.dialpad-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.dialpad-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-tech);
}
.dialpad-key:hover { background: var(--bg); }
.dialpad-key:active { background: var(--border); }
.dialpad-key small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--text-muted);
}
.dialpad-key-accent { color: var(--primary-dark); }

.dialpad-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.dialpad-call svg { width: 16px; height: 16px; fill: currentColor; }
.dialpad-call.has-digits {
    background: var(--green-text);
    border-color: var(--green-text);
    color: #0b0f0c;
}
.dialpad-call.has-digits:hover { filter: brightness(1.08); }
.dialpad-call:disabled {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    opacity: .6;
    cursor: not-allowed;
}

/* --- Softphone (dos columnas) --------------------------------------------- */

[hidden] { display: none !important; }

.sp-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; align-items: start; }
.sp-dialer { padding: 18px; }
.sp-dialer .field[data-dialpad] { max-width: none; margin-bottom: 0; }

.sp-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.sp-status-line { font-size: 12px; margin: 0 0 10px; }

.sp-number-field { position: relative; }
.sp-number-input { padding-right: 44px; padding-left: 44px; }
.sp-backspace {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    padding: 4px;
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.sp-backspace svg { width: 20px; height: 20px; }
.sp-backspace:hover { color: var(--text); }

.dialpad-call.is-hangup,
.dialpad-call.is-hangup:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

.sp-audio { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.sp-audio-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.sp-audio-name { font-size: 12px; font-weight: 600; }
.sp-device {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 12px;
}
.sp-meter { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: var(--surface-alt); overflow: hidden; }
.sp-meter span { display: block; height: 100%; width: 0; background: var(--green-text); transition: width .08s linear; }

.sp-panel { padding: 0; overflow: hidden; }
.sp-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.sp-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.sp-tab.is-active { background: var(--surface); color: var(--primary-dark); border-bottom-color: var(--primary); }
.sp-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--primary-dark);
    font-size: 10px;
    font-weight: 700;
}
.sp-tab-panel { display: none; padding: 14px; }
.sp-tab-panel.is-active { display: block; }

.sp-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    margin-bottom: 8px;
}
.sp-recent { list-style: none; margin: 0; padding: 0; }
.sp-recent li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 6px;
    border-bottom: 1px solid var(--border);
}
.sp-recent li:last-child { border-bottom: 0; }
.sp-recent-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.sp-recent-icon svg { width: 18px; height: 18px; }
.sp-ic-green  { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.sp-ic-red    { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }
.sp-ic-orange { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.sp-ic-gray   { background: color-mix(in srgb, var(--gray) var(--tint), transparent); color: var(--gray); }
.sp-recent-number { font-weight: 600; }
.sp-recent-reason { font-size: 12px; color: var(--red); }
.sp-recent-meta { font-size: 12px; color: var(--text-muted); }
.sp-recent-result { font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-res-green { color: var(--green-text); }
.sp-res-red { color: var(--red); }
.sp-res-orange { color: var(--orange); }
.sp-res-gray { color: var(--gray); }
.sp-callback {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--green-text) 40%, transparent);
    background: color-mix(in srgb, var(--green-text) var(--tint), transparent);
    color: var(--green-text);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.sp-callback svg { width: 15px; height: 15px; }

.sp-live-hero {
    text-align: center;
    padding: 22px 16px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%);
}
.sp-live-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.sp-live-pill.is-answered { background: var(--green-text); color: #0b0f0c; }
.sp-live-phone {
    width: 64px;
    height: 64px;
    margin: 14px auto 12px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 18%, transparent);
}
.sp-live-phone svg { width: 26px; height: 26px; }
.sp-live-number { font-family: var(--font-tech); font-size: 22px; font-weight: 400; letter-spacing: .02em; }
.sp-live-state { margin-top: 4px; color: var(--primary-dark); font-weight: 600; }
.sp-live-meta { margin-top: 4px; font-family: var(--font-tech); font-size: 12px; color: var(--text-muted); }

.sp-dtmf {
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    border-radius: 12px;
}
.sp-dtmf-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.sp-dtmf-actions { margin-left: auto; display: flex; gap: 6px; }
.sp-live-tag { padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; }
.sp-dtmf-log {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg);
    font-family: var(--font-tech);
    font-size: 18px;
    letter-spacing: .15em;
    word-break: break-all;
}
.sp-dtmf-log .muted { font-family: inherit; font-size: 13px; letter-spacing: 0; }
.sp-dtmf-toggle {
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
}
.sp-dtmf-toggle.is-on { background: var(--primary); color: #fff; }

.sp-live-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.sp-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.sp-control-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--text); }
.sp-control-icon svg { width: 18px; height: 18px; }
.sp-control.is-on { border-color: var(--primary); color: var(--primary-dark); }
.sp-control.is-on .sp-control-icon { color: var(--primary-dark); }

.sp-inline-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sp-inline-pad button {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.sp-inline-pad button:hover { background: var(--bg); }

.sp-hangup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: #dc2626;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.sp-hangup svg { width: 18px; height: 18px; }
.sp-hangup:hover { filter: brightness(1.08); }

@media (max-width: 960px) {
    .sp-layout { grid-template-columns: 1fr; }
}

/* --- Informe de campaña --------------------------------------------------- */

.report-head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--green-text) var(--tint), transparent);
    color: var(--green-text);
}
.report-check svg { width: 16px; height: 16px; }
.report-pill {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.report-pill-green {
    border-color: color-mix(in srgb, var(--green-text) 40%, transparent);
    background: color-mix(in srgb, var(--green-text) var(--tint), transparent);
    color: var(--green-text);
}
.report-flag { font-size: 20px; line-height: 1; }
.td-sub { font-size: 11px; margin-top: 2px; }

/* --- Cola de llamadas en vivo --------------------------------------------- */

.lq-system {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.lq-system .lq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.lq-system.is-up { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 40%, transparent); }
.lq-system.is-up .lq-dot { background: var(--green-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text) 22%, transparent); }
.lq-system.is-down { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.lq-system.is-down .lq-dot { background: var(--red); }
.lq-system-wrap { display: grid; justify-items: end; gap: 4px; }
.lq-updated { color: var(--text-muted); font-size: 11px; }
.lq-updated.is-stale { color: var(--red); }

.lq-alert-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.lq-alert-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.lq-alert-toggle.is-enabled {
    border-color: color-mix(in srgb, var(--green-text) 45%, transparent);
    color: var(--green-text);
}
.lq-alert-toolbar .muted { font-size: 12px; }
.lq-urgent {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--orange) 13%, var(--surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--orange) 8%, transparent), 0 12px 28px rgba(0, 0, 0, .18);
}
.lq-urgent:not([hidden]) { display: grid; }
.lq-urgent.is-escalated {
    border-color: color-mix(in srgb, var(--red) 65%, transparent);
    animation: lq-alert-pulse 1.8s ease-in-out infinite;
}
.lq-urgent-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--orange);
    color: #111;
    font-size: 19px;
}
.lq-urgent-copy { display: grid; gap: 3px; }
.lq-urgent-copy strong { font-size: 15px; }
.lq-urgent-copy span { color: var(--text-muted); font-size: 12px; }
@keyframes lq-alert-pulse {
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 13%, transparent), 0 12px 28px rgba(0, 0, 0, .18); }
}

.lq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.lq-col { padding: 0; overflow: hidden; }
.lq-col-head { padding: 16px 18px; }
.lq-col-head h2 { display: flex; align-items: center; gap: 8px; }
.lq-col-head h2 svg { width: 17px; height: 17px; color: var(--primary-dark); }
.lq-pill { padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.lq-pill-wait { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.lq-pill-live { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }

.lq-list { list-style: none; margin: 0; padding: 0; }
.lq-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}
.lq-item-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.lq-item-icon svg { width: 18px; height: 18px; }
.lq-ic-wait { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.lq-ic-live { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.lq-item-number { font-family: var(--font-tech); font-weight: 400; }
.lq-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.lq-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}
.lq-btn svg { width: 15px; height: 15px; }
.lq-btn:disabled { opacity: .55; cursor: not-allowed; }
.lq-btn-answer { background: var(--green-text); color: #0b0f0c; }
.lq-btn-answer:hover:not(:disabled) { filter: brightness(1.08); }
.lq-btn-hangup { background: #dc2626; }
.lq-btn-hangup:hover:not(:disabled) { filter: brightness(1.08); }
.lq-ext-note { margin-top: 16px; font-size: 12px; }
.lq-audio-state { font-variant-numeric: tabular-nums; }
.lq-audio-state.is-bad { color: #b42318; font-weight: 600; }

@media (max-width: 860px) {
    .lq-grid { grid-template-columns: 1fr; }
    .lq-alert-toolbar { align-items: flex-start; flex-direction: column; }
    .lq-urgent { grid-template-columns: auto minmax(0, 1fr); }
    .lq-urgent .lq-btn { grid-column: 1 / -1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .lq-urgent.is-escalated { animation: none; }
}

/* --- Tarjetas de agente (softphone) --------------------------------------- */

.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ag-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.ag-card-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ag-avatar {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-weight: 700; font-size: 15px;
}
.ag-id { min-width: 0; flex: 1; }
.ag-name { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-sub { font-size: 12px; color: var(--text-muted); }
.ag-status {
    padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
}
.ag-status.ag-ok   { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); color: var(--green-text); }
.ag-status.ag-warn { background: color-mix(in srgb, var(--orange) var(--tint), transparent); color: var(--orange); }
.ag-status.ag-off  { background: color-mix(in srgb, var(--red) var(--tint), transparent); color: var(--red); }

.ag-rows { margin: 4px 0 0; }
.ag-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.ag-row:last-child { border-bottom: 0; }
.ag-row dt { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-dark); }
.ag-row dt svg { width: 14px; height: 14px; }
.ag-row dd { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.ag-val { font-weight: 400; font-family: var(--font-tech); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-secret { letter-spacing: .1em; }
.ag-ext-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); }
.ag-icon-btn {
    margin-left: auto; flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    border: 1px solid var(--border); background: var(--surface-alt);
    color: var(--text-muted); cursor: pointer;
}
.ag-icon-btn svg { width: 14px; height: 14px; }
.ag-icon-btn:hover { color: var(--text); }
.ag-icon-btn.is-copied { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 45%, transparent); }

.ag-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ag-edit { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ag-edit svg { width: 15px; height: 15px; }

.agency-admin-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.agency-admin-fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.agency-admin-fieldset .field:last-child { margin-bottom: 0; }

/* Modo SIP: radios visibles + bloque que aparece al elegir "SIP propio",
   sin JavaScript (mismo truco de hermano que el IVR de campañas). */
.sip-mode-field .sip-mode-radio { margin-right: 6px; accent-color: var(--primary-dark); }
.sip-mode-option { margin-right: 16px; font-size: 14px; cursor: pointer; }
.sip-reveal {
    display: none;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--primary-dark) 40%, var(--border));
    border-radius: var(--radius);
}
.sip-reveal legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); }
.sip-reveal .field:last-child { margin-bottom: 0; }
.sip-mode-radio-own:checked ~ .sip-reveal { display: block; }

.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input[type="date"] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
}

/* --- Avisos -------------------------------------------------------------- */

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    border: 1px solid;
    font-size: 13px;
}
.alert-icon { font-weight: 700; line-height: 1.4; flex: 0 0 auto; }

/*
 * .alert es flex: cada hijo directo -incluido un tramo de texto suelto entre
 * dos <code>/<strong>- se convierte en su propia caja de flex y la fila se
 * parte en una columna por palabra. El icono ya es un hijo aparte
 * (.alert-icon); todo el mensaje, por rico que sea su HTML interno, tiene
 * que ir dentro de ESTE UNICO segundo hijo para que flexbox lo trate como
 * un solo bloque que fluye con normalidad.
 */
.alert-body,
.alert > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Lista de enlaces dentro de un aviso (ej. llamadas pendientes de guardar):
   una por linea en vez de un texto corrido dificil de escanear. */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
.alert-list-item { white-space: nowrap; }
.alert-success { background: color-mix(in srgb, var(--green-text) var(--tint), transparent); border-color: color-mix(in srgb, var(--green-text) 40%, transparent); color: var(--green-text); }
.alert-error { background: color-mix(in srgb, var(--red) var(--tint), transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.alert-warning { background: color-mix(in srgb, var(--yellow) var(--tint), transparent); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); color: var(--yellow); }
.alert-info { background: color-mix(in srgb, var(--blue) var(--tint), transparent); border-color: color-mix(in srgb, var(--blue) 40%, transparent); color: var(--blue); }

/* --- Detalle ------------------------------------------------------------- */

.detail { margin: 0; padding: 18px; display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; }
.detail dt { color: var(--text-muted); font-size: 13px; }
.detail dd { margin: 0; }

/* --- Cronologia ---------------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 18px; }
.timeline li {
    display: flex;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.timeline li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.timeline-time { color: var(--text-muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.timeline-body { flex: 1; }
.timeline-meta { color: var(--text-muted); font-size: 12px; margin-top: 3px; }

/* --- Barras de resultados ------------------------------------------------ */

.bars { padding: 18px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { flex: 0 0 130px; font-size: 13px; }
.bar-track { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-value { flex: 0 0 90px; text-align: right; font-size: 13px; }

.bar-confirmed   { background: var(--green); }
.bar-rescheduled { background: var(--teal); }
.bar-no_response { background: var(--orange); }
.bar-error       { background: var(--red); }

/* --- Paginacion ---------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0 20px;
}

.back { margin-top: 8px; }

/* --- Pagina de error ----------------------------------------------------- */

.error-page { text-align: center; padding: 64px 20px; max-width: 640px; margin: 0 auto; }
.error-code { font-size: 56px; font-weight: 700; color: var(--border); line-height: 1; }
.error-message { color: var(--text-muted); margin-bottom: 24px; }
.error-actions { display: flex; gap: 10px; justify-content: center; }
.error-detail {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 20px 0;
    overflow: hidden;
}
.error-detail-head {
    padding: 8px 14px;
    background: color-mix(in srgb, var(--yellow) var(--tint), transparent);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--yellow);
}
.error-detail pre {
    margin: 0;
    padding: 14px;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.5;
}

/* --- Pie ----------------------------------------------------------------- */

.footer {
    /* Mismo degradado que .sidebar y .workspace-header, para que no quede
       como un bloque negro plano y distinto del resto. */
    background: linear-gradient(180deg, #170b19 0%, #0b070c 100%);
}
.footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 96px 32px 48px;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 720px) {
    .app-shell { display: block; }
    .sidebar {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 40;
        padding: 10px 12px 8px; border-right: 0; border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    }
    .brand { gap: 9px; }
    .brand-mark { width: 36px; height: 36px; }
    .brand small { display: none; }
    .nav {
        margin-top: 9px; padding-bottom: 2px; flex-direction: row; gap: 6px;
        overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a, .nav-soon { flex: 0 0 auto; padding: 7px 10px; scroll-snap-align: start; font-size: 12px; }
    .nav-soon small { display: none; }
    .sidebar-actions { display: none; }
    .workspace { min-height: auto; }
    .top-bar { padding: 10px 16px 0; }
    .summary-strip { padding: 16px 16px 4px; }
    .summary-stats { max-width: none; }
    .summary-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .summary-head h2 { font-size: 16px; }
    .summary-range-form { width: 100%; }
    .summary-range-form select { flex: 1; }
    .container { padding: 22px 16px 40px; }
    .page-head { margin-bottom: 16px; }
    .page-head .actions { width: 100%; }
    .page-head .actions .btn { flex: 1 1 auto; text-align: center; }
    .dashboard-stats { grid-template-columns: 1fr 1fr; }
    .stats { gap: 9px; }
    .stat { padding: 12px; }
    .stat-icon { width: 34px; height: 34px; }
    .stat-value { font-size: 21px; }
    .filters { align-items: stretch; }
    .filters .field { flex: 1 1 calc(50% - 8px); }
    .filters .field-actions { flex: 1 0 100% !important; }
    .filters .field-actions .btn { flex: 1; text-align: center; }
    .detail { grid-template-columns: 1fr; gap: 3px; }
    .detail dd { margin-bottom: 10px; }
    .bar-row { flex-wrap: wrap; }
    .bar-label { flex: 1 1 auto; }
    .bar-track { flex: 1 0 100%; order: 3; }
    .footer-inner { padding: 18px 16px 28px; }
}

@media (max-width: 480px) {
    .dashboard-stats,
    .summary-stats { grid-template-columns: 1fr 1fr; }
    .summary-stats .stat { gap: 8px; }
    .summary-stats .stat-icon { display: none; }
    .filters .field { flex-basis: 100%; }
    .page-head > form.inline-form { width: 100%; display: flex; gap: 8px; }
    .page-head > form.inline-form input { flex: 1; min-width: 0; }
}

/* --- Pantalla de configuracion ------------------------------------------ */

/*
 * .card-head reparte sus hijos en horizontal, que es lo correcto para una
 * cabecera con titulo y boton. Aqui el titulo lleva debajo una descripcion, asi
 * que esta variante los apila sin alterar el comportamiento del resto.
 */
.card-head-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.card-head-stack h2 { font-size: 15px; font-weight: 600; }
.card-head-stack p { margin: 0; }

/*
 * Etiqueta de una casilla de verificacion. No se reutiliza .inline porque esa
 * clase es display:inline y aqui hace falta alinear la casilla con su texto.
 */
.check {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
    vertical-align: middle;
}
.check input[type="checkbox"], .check input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.check.small span { font-size: 12px; color: var(--text-muted); }
.check.small { margin-top: 8px !important; }

/* Grupo de opciones excluyentes apiladas, ej. "atender por telefono/navegador". */
.field-radio {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    margin: 6px 0 !important;
    cursor: pointer;
}
.field-radio input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    flex: 0 0 auto;
}

/* Grupo de casillas: los paises permitidos. */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

/* Un ajuste no editable se muestra, pero deja claro que no se puede tocar. */
.field input:disabled, .field select:disabled {
    background: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* --- Vista previa de la configuracion de Asterisk ------------------------ */

/*
 * Los ficheros .conf tienen lineas largas y sangrado significativo. Se conservan
 * tal cual y se desplaza en horizontal, en lugar de partir las lineas: un
 * pjsip.conf con los saltos cambiados no se parece a lo que se va a escribir, que
 * es justamente lo que esta pantalla existe para ensenar.
 */
pre.mono {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    color: var(--text);
    margin: 0;
}
.config-preview {
    max-height: 420px;
    overflow-y: auto;
}

/* --- Campañas (marcado masivo) -------------------------------------------- */

/*
 * Todo lo de abajo es CSS puro, sin una linea de JavaScript: es la misma regla
 * que ya sigue el resto del panel (ver la cabecera de QuickCallController). Las
 * pestañas de contactos y el bloque de IVR se resuelven con radios/checkbox
 * ocultos y el combinador de hermano general (~).
 */

.field-hint-eyebrow {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 8px;
}

.type-hints { margin-top: 10px; display: grid; gap: 4px; }
.type-hints .field-hint { margin: 0; }
.type-hints strong { color: var(--text); }

/* Recuadro de subida: el input real cubre toda la caja, transparente, para que
   el clic y el arrastrar-y-soltar funcionen sin JavaScript. */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    padding: 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    cursor: pointer;
}
.dropzone:hover { border-color: var(--focus); background: var(--surface-alt); }
.dropzone.has-error { border-color: var(--red); }
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone-text { font-size: 13px; font-weight: 600; color: var(--text); }
.dropzone-meta { font-size: 12px; color: var(--text-muted); }
.dropzone-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-dark) 14%, transparent);
    color: var(--primary-dark);
}
.dropzone-icon svg { width: 20px; height: 20px; }
.dropzone { display: flex; flex-direction: column; border-color: color-mix(in srgb, var(--primary-dark) 40%, var(--border-strong)); border-radius: var(--radius); }
.dropzone-text, .dropzone-meta { display: block; }
.dropzone.is-dragover { border-style: solid; border-color: var(--focus); background: var(--surface-alt); }
.dropzone.has-file { border-style: solid; border-color: var(--primary-dark); }
.dropzone.has-file .dropzone-text { color: var(--primary-dark); word-break: break-all; }

/* Secciones del formulario de campaña (modal "Nueva campaña"). */
.campaign-form { padding: 0 !important; }
.form-section { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.form-section:last-of-type { border-bottom: 0; }
.form-section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.form-section-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.form-section-head p { margin: 2px 0 0; font-size: 12px; }
.form-section-title,
.field-label-row { display: flex; align-items: center; gap: 7px; }
.field-label-row { justify-content: space-between; margin-bottom: 6px; }
.field-label-row > label,
.field-label-row > .field-label { margin: 0; }
.field-label { display: block; font-weight: 600; color: var(--text); }
.context-help { position: relative; z-index: 4; display: inline-flex; flex: 0 0 auto; }
.context-help[open] { z-index: 8; }
.context-help summary {
    width: 20px; height: 20px; display: grid; place-items: center;
    list-style: none; border: 1px solid var(--border-strong); border-radius: 50%;
    color: var(--text-muted); background: var(--surface-alt);
    font-size: 12px; font-weight: 700; line-height: 1; cursor: help; user-select: none;
}
.context-help summary::-webkit-details-marker { display: none; }
.context-help summary:hover,
.context-help summary:focus-visible,
.context-help[open] summary {
    color: #fff; border-color: var(--primary-dark); background: var(--primary); outline: none;
}
.context-help summary:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.context-help-popover {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    width: min(290px, calc(100vw - 52px)); padding: 11px 12px;
    border: 1px solid var(--border-strong); border-radius: 10px;
    background: #211a2a; box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
    color: var(--text-muted); font-size: 12px; font-weight: 400;
    line-height: 1.45; text-transform: none; letter-spacing: normal;
}
.context-help-popover::before {
    content: ""; position: absolute; top: -5px; right: 6px; width: 8px; height: 8px;
    transform: rotate(45deg); border-left: 1px solid var(--border-strong);
    border-top: 1px solid var(--border-strong); background: #211a2a;
}
.context-help-popover strong,
.context-help-popover span { display: block; }
.context-help-popover strong { margin-bottom: 3px; color: var(--text); }
.context-help[open] .context-help-popover,
.context-help:hover .context-help-popover { display: block; }
.form-section-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary-dark) 16%, transparent);
    color: var(--primary-dark);
}
.form-section-icon svg { width: 17px; height: 17px; }
.form-section .field:last-child { margin-bottom: 0; }
.campaign-form .form-actions { margin: 0; padding: 16px 20px 20px; border-top: 0; }
.tab-btn svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.time-input { position: relative; }
.time-input input[type="time"] {
    width: 100%;
    padding: 9px 36px 9px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--input-bg);
    color: var(--text);
    font-family: var(--font-tech);
    font-size: 14px;
}
.time-input input[type="time"].has-error { border-color: var(--red); }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon svg { width: 15px; height: 15px; }

.modal-title { display: flex; gap: 12px; align-items: center; }
.modal-title-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
}
.modal-title-icon svg { width: 18px; height: 18px; }
.modal-subtitle { margin: 2px 0 0; font-size: 12px; }

/* Pestañas de "Contactos": radios ocultos + etiquetas como botones. */
/* position: relative ancla los radios ocultos a la fila de pestañas. Sin
   ancla quedan fuera de la ventana de "Nueva campaña" y, al pulsar una
   pestaña, Chrome desplaza todo el modal para enseñar el radio enfocado:
   la cabecera se corta y la zona de "Subir archivo" queda fuera de vista. */
.tabs { position: relative; margin-top: 2px; }
.tab-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tab-btn {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.tab-btn:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.tab-btn:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.tab-input:checked + .tab-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    position: relative;
    z-index: 1;
}
.tab-input:focus-visible + .tab-btn { outline: 2px solid var(--focus); outline-offset: 1px; }

.tab-panel { display: none; padding-top: 12px; }
#contacts_source_paste:checked ~ .tab-panel-paste { display: block; }
#contacts_source_file:checked ~ .tab-panel-file { display: block; }

/* Bloque de IVR: oculto hasta que se marca "Enable IVR". */
.ivr-title { font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.ivr-reveal {
    display: none;
    margin-top: 14px;
    padding: 14px 0 0 16px;
    border-left: 2px solid var(--border);
}
.ivr-toggle {
    width: 15px;
    height: 15px;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--primary);
    cursor: pointer;
}
.ivr-toggle:checked ~ .ivr-reveal { display: block; }
.ivr-toggle:focus-visible + .check { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Capacidad y marcacion: tres controles en rejilla en escritorio, apilados
   en movil; casillas con texto completo y area de pulsacion generosa;
   "Configuracion avanzada" como <details> secundario (sin JavaScript). */
.campaign-capacity-grid {
    display: grid;
    /* auto-fit: tres columnas en la pagina de edicion, las que quepan dentro
       del modal (560px) y una sola en movil. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 16px;
    align-items: start;
}
.campaign-capacity-grid .field { margin-bottom: 0; }
.campaign-capacity-grid input[type="number"] { font-family: var(--font-tech); }
.campaign-checks { display: grid; gap: 8px; margin-top: 16px; }
.campaign-check {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    min-height: 44px;
}
.campaign-check > .check { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.campaign-check:hover { border-color: var(--border-strong); }
.campaign-check input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.campaign-check span { display: block; }
.campaign-check strong { display: block; font-weight: 600; font-size: 13px; color: var(--text); }
.campaign-check small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.campaign-check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.campaign-advanced {
    margin-top: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface-alt) 60%, transparent);
}
.campaign-advanced > summary {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}
.campaign-advanced > summary::-webkit-details-marker { display: none; }
.campaign-advanced > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.campaign-advanced[open] > summary::before { transform: rotate(45deg); }
.campaign-advanced > summary:hover { color: var(--text); }
.campaign-advanced > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius); }
.campaign-advanced-body { padding: 4px 12px 14px; }
.campaign-advanced-body .field { margin-bottom: 0; max-width: 320px; }
.campaign-current-file { margin: 0 0 10px; font-size: 13px; }
.campaign-current-file strong { color: var(--text); word-break: break-all; }
.campaign-live-overview { display: grid; grid-template-columns: minmax(260px, 1.3fr) 1fr; gap: 24px; align-items: center; }
.campaign-progress-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.campaign-progress-head > div { display: grid; gap: 2px; }
.campaign-overview-label,
.campaign-live-metrics span { color: var(--text-muted); font-size: 12px; }
.campaign-progress-percent { color: var(--primary-dark); font-family: var(--font-tech); font-size: 22px; }
.campaign-progress-track { height: 8px; margin: 10px 0 6px; overflow: hidden; border-radius: 99px; background: var(--surface-alt); }
.campaign-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.campaign-live-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.campaign-live-metrics > div { display: grid; gap: 2px; padding: 10px 12px; border-left: 1px solid var(--border); }
.campaign-live-metrics strong { font-size: 20px; }
.campaign-live-metrics strong small { margin-left: 2px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
.campaign-live-metrics .campaign-live-text { font-size: 14px; }
.campaign-table-meta { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.campaign-table-progress { min-width: 130px; }
.campaign-table-progress > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.campaign-table-progress > div span { color: var(--text-muted); font-family: var(--font-tech); }
.campaign-mini-progress { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-alt); }
.campaign-mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--primary-dark); }
.audio-preview {
    margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface-alt);
}
.audio-preview[hidden] { display: none; }
.audio-preview-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.audio-preview-meta { min-width: 0; overflow: hidden; color: var(--text-muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.audio-preview-remove { padding: 3px 7px; border: 0; border-radius: 6px; background: transparent; color: var(--red); font: inherit; cursor: pointer; }
.audio-preview-remove:hover,
.audio-preview-remove:focus-visible { background: color-mix(in srgb, var(--red) 12%, transparent); outline: none; }
.audio-preview audio { display: block; width: 100%; height: 36px; }
#new-campaign .modal-card { max-width: 740px; }
#new-campaign .modal-card {
    height: calc(100vh - 80px);
    height: min(860px, calc(100dvh - 80px));
    border-color: color-mix(in srgb, var(--primary-dark) 30%, var(--border-strong));
    border-radius: 10px;
    background: #100d14;
}
#new-campaign .modal-head {
    padding: 18px 22px;
    background: #151019;
}
#new-campaign .modal-body {
    height: 0; min-height: 0; flex: 1 1 0; display: flex;
    padding: 0; overflow: hidden; background: #0d0a10;
}
#new-campaign .campaign-form {
    width: 100%; height: auto; min-height: 0; flex: 1 1 0;
    display: flex; flex-direction: column; overflow: hidden;
}
#new-campaign .campaign-form-content {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
    scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin;
}
#new-campaign .campaign-form-content::-webkit-scrollbar { width: 9px; }
#new-campaign .campaign-form-content::-webkit-scrollbar-track { background: transparent; }
#new-campaign .campaign-form-content::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid #0d0a10; border-radius: 8px; }
#new-campaign .form-section {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #141119;
}
#new-campaign .form-section-head { margin-bottom: 16px; }
#new-campaign .form-section-icon {
    background: rgba(192, 91, 207, .13);
    box-shadow: none;
}
#new-campaign .field { margin-bottom: 15px; }
#new-campaign .field > label,
#new-campaign .field-label-row > label,
#new-campaign .field-label { font-size: 12px; }
#new-campaign input[type="text"],
#new-campaign input[type="number"],
#new-campaign input[type="time"],
#new-campaign select,
#new-campaign textarea {
    border-color: #3a2d48;
    background: #211a29;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#new-campaign input:hover,
#new-campaign select:hover,
#new-campaign textarea:hover { border-color: #584069; background: #251d2e; }
#new-campaign input:focus,
#new-campaign select:focus,
#new-campaign textarea:focus {
    border-color: var(--primary-dark);
    background: #251d2e;
    box-shadow: 0 0 0 3px rgba(192, 91, 207, .12);
}
#new-campaign .dropzone {
    min-height: 108px;
    border-width: 1px;
    background: rgba(29, 24, 38, .5);
}
#new-campaign .dropzone:hover { background: rgba(86, 14, 94, .10); }
#new-campaign .campaign-check { background: rgba(29, 24, 38, .62); }
#new-campaign .campaign-advanced { background: rgba(8, 6, 10, .2); }
#new-campaign .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#new-campaign .tab-btn { display: flex; align-items: center; justify-content: center; margin: 0; border-radius: 8px !important; }
#new-campaign .tab-panel { grid-column: 1 / -1; }
#new-campaign .modal-body .campaign-form .form-actions {
    flex: 0 0 auto; align-items: center; margin: 0; padding: 12px 18px;
    background: #17121c;
    border-top: 1px solid var(--border); box-shadow: none;
}
.campaign-create-summary { display: grid; gap: 1px; margin-right: auto; line-height: 1.3; }
.campaign-create-summary strong { font-size: 12px; }
.campaign-create-summary > span { color: var(--text-muted); font-size: 11px; }
.audio-preview-head strong { display: flex; align-items: center; gap: 6px; }
.audio-ready-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-text); box-shadow: 0 0 0 3px rgba(137, 209, 133, .12); }
@media (max-width: 760px) {
    .campaign-capacity-grid { grid-template-columns: 1fr; }
    .campaign-live-overview { grid-template-columns: 1fr; }
    .campaign-live-metrics > div:first-child { border-left: 0; }
    #new-campaign .modal-card { height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
    #new-campaign.modal-overlay { padding: 12px; }
    #new-campaign .campaign-form-content { padding: 8px; gap: 8px; }
    #new-campaign .form-section { padding: 15px; }
    .campaign-form .form-actions { padding: 14px 16px; }
    #new-campaign .modal-body .campaign-form .form-actions { padding: 10px 12px; flex-wrap: wrap; }
    .campaign-create-summary { flex: 1 0 100%; }
    .campaign-live-metrics { grid-template-columns: 1fr; }
    .campaign-live-metrics > div { border-left: 0; border-top: 1px solid var(--border); }
}

/* Estado de la campaña: punto de color + etiqueta, en badges y en el bloque
   destacado del detalle. */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gray) 22%, transparent);
    flex: 0 0 auto;
}
.status-dot-lg { width: 12px; height: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gray) 22%, transparent); }
.status-dot-green { background: var(--green-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-text) 25%, transparent); }
.status-dot-green.status-dot-lg { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-text) 25%, transparent); }
.status-dot-orange { background: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 25%, transparent); }
.status-dot-orange.status-dot-lg { box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 25%, transparent); }
.status-dot-gray { background: #6b6b76; box-shadow: 0 0 0 3px rgba(107, 107, 118, .25); }
.campaign-status-badge { display: inline-flex; align-items: center; gap: 6px; }
.badge-orange.campaign-status-badge { color: var(--yellow); background: color-mix(in srgb, var(--yellow) var(--tint), transparent); }
.campaign-row-actions { white-space: nowrap; }
.campaign-schedule-col { white-space: nowrap; }
.campaign-schedule-col small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 10px; }
.campaign-start-time { color: var(--primary-dark); font-size: 14px; }
.campaign-no-schedule { color: var(--text-muted); font-size: 12px; }
@media (max-width: 760px) {
    .campaign-created-col { display: none; }
    .campaign-schedule-col { display: none; }
    .campaign-table-progress { min-width: 110px; }
}

.campaign-status-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    border-left: 4px solid var(--gray);
}
.campaign-status-running { border-left-color: var(--green-text); }
.campaign-status-paused { border-left-color: var(--yellow); }
.campaign-status-finished { border-left-color: #6b6b76; }
.campaign-status-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.campaign-status-label { font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.campaign-status-running .campaign-status-label { color: var(--green-text); }
.campaign-status-paused .campaign-status-label { color: var(--yellow); }
.campaign-status-finished .campaign-status-label { color: var(--text-muted); }
.campaign-status-text { margin: 0; font-size: 13px; color: var(--text); line-height: 1.55; }
.campaign-status-note {
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--orange);
    background: color-mix(in srgb, var(--orange) var(--tint), transparent);
    border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
    border-radius: var(--radius);
    display: inline-block;
}
.campaign-status-actions { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
.campaign-action { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin: 0; }
.campaign-action .btn { min-height: 40px; }
.campaign-action-hint { font-size: 11px; color: var(--text-muted); }
.campaign-resume-review {
    display: grid;
    justify-items: end;
    gap: 1px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-size: 11px;
    color: var(--text-muted);
}
.campaign-resume-review a { font-weight: 700; }
@media (max-width: 720px) {
    .campaign-status-card { flex-direction: column; align-items: stretch; }
    .campaign-status-actions { flex-direction: row; flex-wrap: wrap; }
    .campaign-action { align-items: flex-start; flex: 1 1 160px; }
    .campaign-action .btn { width: 100%; justify-content: center; }
    .campaign-resume-review { flex: 1 1 100%; justify-items: start; }
}

.campaign-edit-head { flex-wrap: wrap; }
.campaign-edit-head p { margin: 0; font-size: 12px; }

/* Configuracion guardada, en el detalle. */
.campaign-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 20px;
    margin: 0;
    padding: 16px 18px;
}
.campaign-config-grid dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.campaign-config-grid dd { margin: 3px 0 0; font-size: 14px; color: var(--text); word-break: break-word; }
.campaign-config-grid dd small { font-size: 12px; }

/* Confirmacion de "Finalizar": modal pequeño, accion peligrosa. */
.modal-card-sm { max-width: 460px; }
.modal-title-icon-danger { background: var(--red); color: #fff; font-size: 14px; }
.modal-title-icon-warning { background: var(--yellow); color: #181303; font-size: 14px; }
.modal-card-sm .modal-body { overflow-y: auto; padding: 20px; }
.campaign-confirm-text { margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.campaign-confirm-actions { justify-content: flex-end; border-top: 0; padding-top: 0; margin: 0; }
.campaign-confirm-actions .btn { min-height: 40px; }

/* --- Modal ("Nueva campaña" y similares) ----------------------------------

   Sin JavaScript, igual que el resto del panel: el enlace que abre el modal
   apunta a #new-campaign y aqui se muestra con :target. Cerrar es un enlace
   a la URL sin fragmento (deja de haber target, se oculta solo). Limitacion
   conocida y aceptada de esta tecnica: no se puede cerrar pulsando fuera de
   la tarjeta ni con Escape, solo con el aspa -un <a> no puede envolver un
   <form>, asi que el fondo no puede ser el propio enlace de cierre-.
*/

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 40px 20px;
    overflow-y: auto;
    background: rgba(4, 3, 7, .72);
}
.modal-overlay:target { display: flex; justify-content: center; align-items: flex-start; }

.modal-card {
    width: 100%;
    max-width: 560px;
    /* dejar los 40px de padding arriba/abajo del overlay libres, para que el
       scroll quede dentro de la tarjeta y no en la ventana entera. */
    max-height: calc(100vh - 80px);
    margin: auto;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    overflow: hidden; /* el scroll va en .modal-body, no aqui */
}
.modal-head {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 17px; }
.modal-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
}
.modal-close:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }

.modal-body {
    flex: 1 1 auto;
    /* 'scroll' y no 'auto': la barra queda siempre visible, en el borde
       derecho de la propia tarjeta, en vez de aparecer solo al pasar el
       raton o desaparecer del todo con barras superpuestas del sistema. */
    overflow-y: scroll;
    scrollbar-color: var(--border-strong) transparent; /* Firefox */
    scrollbar-width: thin;
}
.modal-body .form { padding: 20px; }

/* Misma barra, para Chrome/Safari/Edge (no admiten scrollbar-color). */
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    border-radius: 6px;
    border: 2px solid var(--surface);
}
.modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }

/* --- Sesion: usuario en el lateral + boton de cerrar sesion --------------- */

.user-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.btn-link:hover { color: var(--text); }

/* --- Pantalla de login ----------------------------------------------------- */

/*
 * Estetica "panel de telefonia nocturno". Todo va encapsulado bajo
 * .auth-body / .auth-card / .auth-* para no tocar el panel autenticado: los
 * tonos azul marino y violeta de aqui NO se comparten con :root.
 */
.auth-body {
    --auth-bg: #060915;
    --auth-card: rgba(11, 14, 34, .82);
    --auth-line: rgba(110, 130, 255, .22);
    --auth-line-strong: rgba(139, 124, 246, .55);
    --auth-input: rgba(6, 9, 26, .88);
    --auth-text: #e9ebff;
    --auth-text-soft: #c3c8ea;
    --auth-text-muted: #8f97c4;
    --auth-violet: #7c5cf6;
    --auth-blue: #3f6be6;
    --auth-green: #4ade80;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--auth-text);
    background:
        radial-gradient(ellipse 60% 45% at 12% 8%, rgba(88, 62, 200, .22) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 90% 20%, rgba(52, 96, 220, .18) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 110%, rgba(76, 52, 170, .26) 0%, transparent 70%),
        linear-gradient(180deg, #080b1c 0%, #060915 55%, #04060f 100%);
}

/* Rejilla tecnica muy tenue, como el mapa de un cuadro de mandos. */
.auth-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120, 140, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 140, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 100%);
}

.auth-canvas { position: fixed; inset: 0; z-index: 0; opacity: .9; }

.auth-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 452px;      /* 420px de tarjeta + 16px de margen a cada lado */
    padding: 24px 16px;
}
.auth-shell .alert { margin-bottom: 14px; }

.auth-card {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 40px 34px 30px;
    text-align: center;
    background: var(--auth-card);
    border: 1px solid var(--auth-line);
    border-radius: 28px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(255, 255, 255, .02) inset,
        0 0 60px rgba(88, 62, 200, .10);
    overflow: hidden;
}

/* Filo superior luminoso, violeta -> azul. */
.auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--auth-violet) 35%, var(--auth-blue) 65%, transparent);
    opacity: .9;
    pointer-events: none;
}

/* Brillos ambientales dentro de la tarjeta. */
.auth-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
    opacity: .55;
}
.auth-glow-top    { top: -90px; right: -70px; width: 240px; height: 240px; background: rgba(124, 92, 246, .35); }
.auth-glow-bottom { bottom: -110px; left: -80px; width: 260px; height: 260px; background: rgba(63, 107, 230, .28); }

.auth-head { position: relative; margin-bottom: 22px; }

/* Logo en anillo luminoso con circulos concentricos. */
.auth-logo-wrap {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
}
.auth-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.auth-ring-outer {
    inset: 0;
    border: 1px dashed rgba(139, 124, 246, .32);
    animation: auth-spin 60s linear infinite;
}
.auth-ring-inner {
    inset: 12px;
    border: 1px solid rgba(110, 130, 255, .22);
    box-shadow: 0 0 22px rgba(124, 92, 246, .18) inset;
}
.auth-logo {
    position: relative;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--auth-violet), var(--auth-blue));
    box-shadow:
        0 0 0 5px rgba(124, 92, 246, .14),
        0 0 32px rgba(124, 92, 246, .55),
        0 14px 34px rgba(63, 107, 230, .35);
}
.auth-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.auth-app-name {
    margin: 0;
    font-family: var(--font-tech);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    color: var(--auth-text);
    text-shadow: 0 0 18px rgba(124, 92, 246, .45);
}

/* Subtitulo entre dos lineas finas. */
.auth-tagline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px auto 0;
    max-width: 300px;
    font-family: var(--font-tech);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--auth-text-muted);
    white-space: nowrap;
}
.auth-tagline::before,
.auth-tagline::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 124, 246, .45));
}
.auth-tagline::after { background: linear-gradient(90deg, rgba(139, 124, 246, .45), transparent); }

.auth-intro {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--auth-text-soft);
}

/* Formulario: anulamos el relleno generico de .form. */
.auth-card .auth-form { padding: 0; text-align: left; }

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

.auth-card .auth-field { position: relative; margin-bottom: 14px; }
.auth-field-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 54px;
    color: var(--auth-text-muted);
    pointer-events: none;
    transition: color .18s ease;
}
.auth-field-icon svg { display: block; }

.auth-card .auth-input,
.auth-card .field input[type="text"].auth-input,
.auth-card .field input[type="password"].auth-input {
    width: 100%;
    height: 54px;
    padding: 0 18px 0 52px;
    font-size: 15px;
    color: var(--auth-text);
    background: var(--auth-input);
    border: 1px solid var(--auth-line);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 18px rgba(0, 0, 0, .25);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-card .auth-input::placeholder { color: var(--auth-text-muted); opacity: 1; letter-spacing: .02em; }
.auth-card .auth-input:focus {
    outline: none;
    border-color: var(--auth-line-strong);
    box-shadow:
        0 0 0 3px rgba(124, 92, 246, .22),
        0 0 26px rgba(99, 102, 241, .28);
}
.auth-card .auth-field:focus-within .auth-field-icon { color: #b8a8ff; }
.auth-card .auth-input.has-error { border-color: var(--red); }
.auth-card .auth-input.has-error:focus { box-shadow: 0 0 0 3px rgba(244, 135, 113, .22); }
.auth-card .auth-field-error { margin: 7px 0 0 8px; font-size: 12px; }

/* Relleno de autocompletado del navegador: que no rompa el tema oscuro. */
.auth-card .auth-input:-webkit-autofill,
.auth-card .auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    -webkit-box-shadow: 0 0 0 1000px #0a0e26 inset;
    caret-color: var(--auth-text);
}

.auth-card .auth-actions { margin: 24px 0 0; }
.auth-card .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, #6a4df0 0%, #5359e8 55%, #3f6be6 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 12px 30px rgba(99, 102, 241, .38),
        0 1px 0 rgba(255, 255, 255, .18) inset;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.auth-card .auth-submit svg { flex: 0 0 auto; transition: transform .18s ease; }
.auth-card .auth-submit:hover {
    background: linear-gradient(90deg, #6a4df0 0%, #5359e8 55%, #3f6be6 100%);
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(99, 102, 241, .48), 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.auth-card .auth-submit:hover svg { transform: translateX(3px); }
.auth-card .auth-submit:active { transform: translateY(0); filter: brightness(.98); }
.auth-card .auth-submit:focus-visible {
    outline: 2px solid #c7d2fe;
    outline-offset: 3px;
}

/* Pie: indicadores decorativos. */
.auth-foot {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--auth-line);
    background: rgba(12, 16, 40, .7);
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #aeb5db;
}
.auth-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--auth-green);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, .18), 0 0 8px rgba(74, 222, 128, .8);
}

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

/* Movil: tarjeta a ancho completo con 16px de margen, todo un punto mas compacto. */
@media (max-width: 480px) {
    .auth-shell { padding: 20px 16px; }
    .auth-card { padding: 32px 22px 24px; border-radius: 24px; }
    .auth-logo-wrap { width: 108px; height: 108px; margin-bottom: 14px; }
    .auth-logo { width: 76px; height: 76px; }
    .auth-app-name { font-size: 21px; letter-spacing: .12em; }
    .auth-tagline { letter-spacing: .22em; }
}

/* Pantallas muy bajas (movil apaisado): que quepa sin esconder el boton. */
@media (max-height: 640px) {
    .auth-shell { padding-top: 16px; padding-bottom: 16px; }
    .auth-card { padding-top: 26px; padding-bottom: 20px; }
    .auth-head { margin-bottom: 14px; }
    .auth-logo-wrap { width: 92px; height: 92px; margin-bottom: 10px; }
    .auth-logo { width: 66px; height: 66px; }
    .auth-ring-inner { inset: 9px; }
    .auth-intro { margin-bottom: 14px; }
    .auth-card .auth-actions { margin-top: 18px; }
    .auth-foot { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-ring-outer { animation: none; }
    .auth-field-icon,
    .auth-card .auth-input,
    .auth-card .auth-submit,
    .auth-card .auth-submit svg { transition: none; }
    .auth-card .auth-submit:hover { transform: none; }
    .auth-card .auth-submit:hover svg { transform: none; }
}

/* Boton "Configuracion automatica" del formulario de campaña */
.campaign-auto-config { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; }
.campaign-auto-config-note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted, #667085); }
.campaign-auto-config-note.is-warning { color: #b54708; }
.campaign-auto-config-note.is-error { color: #b42318; }
.campaign-auto-config .is-autofilled { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25); transition: box-shadow 0.6s; }

/* Llamadas en Vivo: "Mis llamadas de hoy" */
.lq-history { margin-top: 16px; padding: 0; overflow: hidden; }
.lq-history .table-wrap { overflow-x: auto; }
.lq-history-table td, .lq-history-table th { white-space: nowrap; }
.lq-history-live { color: var(--primary-dark, #1d4ed8); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Selectores y fichas de importe
   --------------------------------------------------------------------------- */

.btn-lg { padding: 11px 22px; font-size: 15px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Cabecera: pastilla de estado ---------------------------------------- */
.service-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); text-decoration: none;
}
.service-pill:hover { text-decoration: none; filter: brightness(1.15); }
.service-pill svg { width: 14px; height: 14px; }
.service-pill-ok      { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 40%, transparent); background: color-mix(in srgb, var(--green-text) var(--tint), transparent); }
.service-pill-warn    { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, transparent); background: color-mix(in srgb, var(--orange) var(--tint), transparent); }
.service-pill-expired { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) var(--tint), transparent); }

/* --- Tarjetas de opciones (insignia, titulo + precio, lista, boton) ------ */

/* --- Banner de aviso bajo la cabecera ------------------------------------ */
.service-banner-wrap { max-width: 1440px; margin: 0 auto; padding: 14px 96px 0 48px; }
.service-banner {
    padding: 14px 18px;
    display: flex; align-items: center; gap: 16px;
    border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface);
}
.service-banner-error { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--red) 9%, var(--surface)); }
.service-banner-warn  { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); background: color-mix(in srgb, var(--orange) 9%, var(--surface)); }
.service-banner-icon { flex: none; display: inline-flex; }
.service-banner-icon svg { width: 26px; height: 26px; }
.service-banner-error .service-banner-icon { color: var(--red); }
.service-banner-warn .service-banner-icon { color: var(--orange); }
.service-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.service-banner-text strong { font-size: 15px; color: #ffffff; }
.service-banner-text span { font-size: 13px; color: var(--text-muted); }
.service-banner-btn { flex: none; gap: 8px; padding: 9px 16px; font-weight: 700; }
.service-banner-btn svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
    .service-banner-wrap { padding: 12px 12px 0; }
    .service-banner { flex-wrap: wrap; }
    .service-banner-btn { width: 100%; justify-content: center; }
}

/* --- Resumen en tarjeta -------------------------------------------------- */
.agency-plans { margin-bottom: 18px; }
.agency-plans .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.agency-plans .card-head .muted { margin-top: 4px; font-size: 12px; }
.agency-plans-summary { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Firma de soporte (Telegram) en pie del panel y login ---------------- */
.support-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 600; }
.support-link svg { width: 14px; height: 14px; }
.support-link:hover { text-decoration: underline; }
.auth-support { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--text-muted); }

/* --- Nueva campaña: asistente de 4 pasos
   Un radio oculto por paso decide que panel se ve, que paso marca el
   indicador y que botones aparecen. Sin JavaScript, igual que las pestañas de
   contactos y el bloque IVR. La edicion enseña todo de una vez: nada de esto
   le aplica. */

/* Radios anclados arriba del formulario: sin ancla, al enfocarlos Chrome
   desplazaba el modal para enseñarlos (mismo fallo que las pestañas de
   contactos, ver .tabs). */
.campaign-form-wizard { position: relative; }
.wizard-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wizard-steps {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 12px 18px;
    list-style: none;
    border-bottom: 1px solid var(--border);
    background: #151019;
}
.wizard-steps li { flex: 1; min-width: 0; }
.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.wizard-step:hover { background: var(--surface-alt); color: var(--text); }
.wizard-step-n {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-alt);
    font-family: var(--font-tech);
    font-size: 11px;
}
.wizard-step-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Paso completado: el numero pasa a ser una marca. Un glifo, no un emoji,
   para que se vea igual en todos los sistemas. */
.wizard-step.is-done .wizard-step-n {
    border-color: var(--green-text);
    background: color-mix(in srgb, var(--green-text) 18%, transparent);
    color: var(--green-text);
    font-size: 0;
}
.wizard-step.is-done .wizard-step-n::after { content: "✓"; font-size: 12px; line-height: 1; }

.wizard-hint {
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}
.campaign-form-wizard .wizard-hint { display: none; }
#wizard-step-1:checked ~ .wizard-hint[data-step="1"],
#wizard-step-2:checked ~ .wizard-hint[data-step="2"],
#wizard-step-3:checked ~ .wizard-hint[data-step="3"],
#wizard-step-4:checked ~ .wizard-hint[data-step="4"] { display: block; }

/* La ayuda del paso sustituye al titulo de la seccion, salvo en Audios, que
   tiene dos (audio principal e IVR). */
.campaign-form-wizard .wizard-panel:not([data-step="3"]) > .form-section > .form-section-head { display: none; }

.campaign-form-wizard .wizard-panel { display: none; }
.campaign-form-wizard .wizard-back,
.campaign-form-wizard .wizard-next { display: none; }
.wizard-back, .wizard-next { cursor: pointer; }

#wizard-step-1:checked ~ .campaign-form-content .wizard-panel[data-step="1"],
#wizard-step-2:checked ~ .campaign-form-content .wizard-panel[data-step="2"],
#wizard-step-3:checked ~ .campaign-form-content .wizard-panel[data-step="3"],
#wizard-step-4:checked ~ .campaign-form-content .wizard-panel[data-step="4"] { display: flex; flex-direction: column; gap: 12px; }

#wizard-step-1:checked ~ .wizard-steps .wizard-step[data-step="1"],
#wizard-step-2:checked ~ .wizard-steps .wizard-step[data-step="2"],
#wizard-step-3:checked ~ .wizard-steps .wizard-step[data-step="3"],
#wizard-step-4:checked ~ .wizard-steps .wizard-step[data-step="4"] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--text);
    font-weight: 600;
}
#wizard-step-1:checked ~ .wizard-steps .wizard-step[data-step="1"] .wizard-step-n,
#wizard-step-2:checked ~ .wizard-steps .wizard-step[data-step="2"] .wizard-step-n,
#wizard-step-3:checked ~ .wizard-steps .wizard-step[data-step="3"] .wizard-step-n,
#wizard-step-4:checked ~ .wizard-steps .wizard-step[data-step="4"] .wizard-step-n {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

#wizard-step-1:checked ~ .form-actions .wizard-next[data-step="1"],
#wizard-step-2:checked ~ .form-actions .wizard-next[data-step="2"],
#wizard-step-3:checked ~ .form-actions .wizard-next[data-step="3"],
#wizard-step-2:checked ~ .form-actions .wizard-back[data-step="2"],
#wizard-step-3:checked ~ .form-actions .wizard-back[data-step="3"],
#wizard-step-4:checked ~ .form-actions .wizard-back[data-step="4"] { display: inline-flex; }

/* Avanzar es la accion principal hasta el ultimo paso, donde lo es crear. */
.campaign-form-wizard .wizard-next {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.campaign-form-wizard .wizard-next:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.campaign-form-wizard .wizard-submit { display: none; }
#wizard-step-4:checked ~ .form-actions .wizard-submit { display: inline-flex; }

@media (max-width: 620px) {
    .wizard-steps { padding: 10px 12px; gap: 4px; }
    .wizard-step { justify-content: center; padding: 7px 4px; }
    .wizard-step-name { display: none; }
}

/* Tipo de campaña en tarjetas, con su explicacion a la vista. */
.type-cards { display: grid; gap: 10px; }
.type-card {
    position: relative; display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.field label.type-card { display: flex; font-weight: 400; margin: 0; }
.type-card:hover { border-color: var(--border-strong); }
.type-card input { margin-top: 3px; accent-color: var(--primary); }
.type-card:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.type-card-body { display: grid; gap: 4px; }
.type-card-body strong { font-size: 14px; }
.type-card-body small { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.type-cards.has-error .type-card { border-color: var(--red); }

/* En la edicion (sin asistente) los paneles no existen a efectos de diseño. */
.campaign-form:not(.campaign-form-wizard) .wizard-panel { display: contents; }

/* Llamadas en vivo: aviso de microfono bloqueado o ausente (live-queue.js). */
.lq-mic {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 0 0 16px; padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--text); font-size: 13px;
}
.lq-mic[hidden] { display: none; }
.lq-mic span { flex: 1 1 280px; }

/* Minutos, configuracion movil y navegacion accesible. */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-toggle, .mobile-shortcuts { display: none; }
.sidebar { overflow-y: auto; }
.top-bar { flex-wrap: wrap; gap: 10px; }
.minute-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); background: var(--surface); font-size: 12px; font-weight: 600; }
.minute-pill svg { width: 16px; height: 16px; flex: 0 0 auto; }
.minute-pill:hover { text-decoration: none; border-color: var(--primary); }
.minute-pill-low, .minute-pill-reserved { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, var(--border)); }
.minute-pill-exhausted { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--border)); }
.minute-notice { margin: 12px 28px 0; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--border)); border-radius: 10px; color: var(--text); background: var(--surface); font-size: 13px; }
.minute-notice.is-exhausted { border-color: var(--red); }
.minute-notice[hidden], .call-budget-note[hidden] { display: none; }
.call-budget-note { display: grid; gap: 5px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.call-budget-note .muted { font-size: 13px; }
.field-hint { font-size: 13px; line-height: 1.6; }
.phone-setup { display: grid; gap: 18px; }
.phone-setup .card { margin-bottom: 0; }
.phone-setup + .card { margin-top: 22px; }
.phone-setup .card-head h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.setup-number { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 50%; color: #e2a8ea; background: #211a29; font-size: 13px; }
.setup-body { padding: 18px 20px; }
.setup-body > p:first-child { margin-top: 0; }
.setup-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.setup-platforms details, .setup-troubleshooting { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.setup-platforms summary, .setup-troubleshooting summary { cursor: pointer; font-weight: 600; }
.setup-platforms p, .setup-troubleshooting li { font-size: 14px; line-height: 1.7; }
.setup-help-link { font-size: 13px; }
.setup-fields { margin: 0; }
.setup-field { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.setup-field:last-child { border: 0; }
.setup-field dt { color: var(--text-muted); font-size: 14px; }
.setup-field dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.setup-field dd > .mono { overflow-wrap: anywhere; min-width: 0; flex: 1; font-size: 15px; }
.setup-secret > .mono { flex-basis: 100%; }
.setup-check { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.device-status { display: inline-flex; align-items: center; min-height: 32px; gap: 7px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; font-weight: 600; }
.device-status.is-connected { color: var(--green-text); border-color: color-mix(in srgb, var(--green-text) 40%, var(--border)); }
.copy-feedback { min-height: 1.5em; margin-bottom: 0; font-size: 13px; color: var(--green-text); }
.queue-device-form { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
.queue-device-form .field { margin: 0; flex: 1 1 200px; max-width: 280px; }
.queue-device-form label { font-size: 13px; }
.queue-device-info { display: grid; gap: 6px; flex: 1 1 220px; }
.queue-device-info .muted { font-size: 13px; }
.queue-minute-note { border-top: 1px solid var(--border); margin: 0; padding: 12px 18px; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.queue-minute-note strong { color: var(--text); }
.minute-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.minute-stat { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.minute-stat > span { display: block; font-size: 13px; color: var(--text-muted); }
.minute-stat strong { display: block; font-family: var(--font-ui); font-size: 24px; margin: 8px 0; }
.minute-stat p { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-bottom: 0; }
.minute-stat-primary { border-color: #765184; }
.minute-stat-primary strong { color: #e2a8ea; }
.minute-progress { width: 100%; height: 9px; accent-color: #bb75ce; }
.budget-explanation { font-size: 14px; line-height: 1.7; }
.budget-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.phone-setup .btn { min-height: 38px; }
summary:focus-visible, .nav-toggle:focus-visible, .mobile-shortcuts a:focus-visible, .minute-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 720px) {
    .sidebar { position: relative; z-index: 20; width: auto; height: auto; padding: 12px 16px; overflow: visible; }
    .brand-row .brand { min-width: 0; }
    .brand-row .brand strong { font-size: 14px; }
    .nav-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
    .nav-toggle svg { width: 18px; height: 18px; }
    .mobile-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .mobile-shortcuts a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 4px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; font-weight: 600; }
    .mobile-shortcuts a.active { background: #211a29; color: #e2a8ea; border-color: #765184; }
    .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 6px; margin-top: 14px; padding: 0; }
    .nav a, .nav-soon { min-width: 0; min-height: 44px; white-space: normal; padding: 10px; }
    .ui-ready .sidebar:not(.is-menu-open) .nav { display: none; }
    .sidebar.is-menu-open .sidebar-actions { display: grid; margin-top: 14px; }
    .top-bar { padding: 14px 16px 0; justify-content: flex-start; }
    .server-clock { margin-right: auto; }
    .minute-pill { min-height: 40px; max-width: 100%; }
    .minute-notice { margin: 12px 16px 0; }
    .setup-body { padding: 16px; }
    .setup-platforms { grid-template-columns: 1fr; }
    .setup-platforms summary, .setup-troubleshooting summary { min-height: 24px; }
    .setup-field { grid-template-columns: 1fr; gap: 7px; }
    .phone-setup .btn, .queue-device-form .btn { min-height: 44px; }
    .queue-device-form { gap: 12px; padding: 16px; }
    .queue-device-form .field { flex-basis: 100%; max-width: none; }
    .queue-device-info { flex-basis: 100%; order: 3; }
    .queue-device-form > .btn-ghost { margin-left: auto; }
    .minute-stat-grid { grid-template-columns: 1fr; gap: 10px; }
    .minute-stat { padding: 16px; }
    .minute-stat strong { font-size: 22px; }
}
@media (max-width: 720px) {
    .top-bar .server-clock { order: 0; }
    .top-bar .user-menu { order: 1; }
    .top-bar .service-pill { order: 2; }
    .top-bar .sip-status { order: 3; }
    .top-bar .minute-pill { order: 4; }
}
@media (max-width: 720px) {
    .setup-platforms summary, .setup-troubleshooting summary { min-height: 44px; line-height: 28px; padding: 8px 0; }
}

/* Navigation accents and clear softphone readiness. */
.nav a.active { border-color: #5b2a91; }
.nav a:hover { background: #1a1625; }
.workspace-header { border-bottom-color: var(--border); }
.card, .stat { border-radius: 10px; }
.page-head h1 { font-size: clamp(24px, 2vw, 28px); }
.sp-status-line { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--text-muted); }
.sp-status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--yellow); }
.sp-status-line.is-ok { color: var(--green-text); }
.sp-status-line.is-ok .sp-status-dot { background: var(--green-text); }
.sp-status-line.is-bad { color: var(--red); }
.sp-status-line.is-bad .sp-status-dot { background: var(--red); }
.sp-layout { align-items: stretch; }
.sp-layout > .card { margin-bottom: 0; }
.sp-panel { display: flex; flex-direction: column; }
.sp-panel .sp-tab-panel.is-active { flex: 1 1 auto; }
.sp-number-input { background: var(--input-bg); }
.sp-dialer .dialpad-key { appearance: none; }
.sp-dialer .dialpad-key:focus-visible,
.sp-dialer .sp-control:focus-visible,
.sp-dialer .sp-backspace:focus-visible,
.sp-panel button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-dialer .dialpad-call:not(.has-digits):not(:disabled):not(.is-hangup) { color: var(--text-muted); }
@media (max-width: 720px) {
    .mobile-shortcuts a.active { background: #24113d; color: #b96aff; border-color: #5b2a91; }
}

/* Pestañas de seccion (Llamadas, Equipo): enlaces entre pantallas hermanas. */
.section-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.section-tabs a {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.section-tabs a:hover { color: var(--text); }
.section-tabs a.active { background: var(--primary); border-color: var(--primary); color: #ffffff; }

/* Grupos de campos (<fieldset class="field">): mismo marco que el resto del tema. */
fieldset.field { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; min-width: 0; }
fieldset.field > legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
fieldset.field > .check { display: flex; margin-bottom: 8px; }
fieldset.field .field:last-child { margin-bottom: 0; }
.pbx-toggle input[type="checkbox"] { accent-color: var(--primary); }

/* Transferencias: estado de cada vía y lista editable de destinos. */
.xfer-routes { display: grid; gap: 16px; margin-bottom: 16px; }
.xfer-route { display: grid; gap: 8px; align-content: start; }
.xfer-route p { margin: 0; }
.xfer-route-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xfer-route-head h2 { margin: 0; font-size: 16px; }
.xfer-route .btn { justify-self: start; }
.xfer-list { display: grid; gap: 10px; }
.xfer-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 10px; }
.xfer-item.is-inactive { opacity: .7; }
.xfer-item-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.xfer-item-main .mono { font-family: var(--font-tech); color: var(--text-muted); }
.xfer-edit > summary { list-style: none; width: max-content; }
.xfer-edit > summary::-webkit-details-marker { display: none; }
.xfer-edit[open] > summary { margin-bottom: 10px; }
.xfer-edit .form { margin-bottom: 8px; }
.xfer-active { align-self: end; }
.btn-danger-text { color: var(--red); }

/* Teléfono del usuario en la cabecera y barra de llamada del teléfono web. */
.phone-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text); text-decoration: none; white-space: nowrap; }
.phone-indicator:hover { border-color: var(--primary-dark); }
.phone-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); flex: none; }
.phone-indicator[data-state="ready"] .phone-indicator-dot { background: var(--green); }
.phone-indicator[data-state="connecting"] .phone-indicator-dot { background: var(--orange); }
.phone-indicator[data-state="blocked"] .phone-indicator-dot, .phone-indicator[data-state="call"] .phone-indicator-dot { background: var(--red); }
.phone-indicator[data-state="off"] { border-style: dashed; color: var(--text-muted); }
.web-phone-bar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-alt); box-shadow: var(--shadow); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.web-phone-bar .phone-indicator-dot { background: var(--red); }
.web-phone-bar #web-phone-state { color: var(--text-muted); font-size: 13px; }