/* ---------------------------------------------------------------------------
   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.
--------------------------------------------------------------------------- */

/*
 * PALETA - VS Code Dark+
 *
 * Los valores son los del tema real, no una aproximacion: el fondo del editor
 * (#1e1e1e), el de los paneles laterales (#252526), la barra de actividad
 * (#333333), el texto (#d4d4d4) y los colores de sintaxis para los estados.
 *
 * POR QUE LOS ESTADOS USAN COLORES DE SINTAXIS:
 *   En un tema oscuro no se puede repetir el truco del tema claro -fondo palido y
 *   texto saturado- porque sobre negro los fondos palidos deslumbran. Aqui cada
 *   estado es texto de color sobre un fondo apenas tenido, que es exactamente como
 *   VS Code marca errores y avisos.
 *
 * CONTRASTE:
 *   Los colores de texto sobre #1e1e1e y sobre #252526 se eligieron comprobando
 *   que superan 4.5:1, el minimo de WCAG AA para texto normal. El panel se mira
 *   durante horas y con datos que hay que leer sin equivocarse: un numero de
 *   telefono mal leido es una llamada a otra persona.
 */
:root {
    --bg: #09080d;
    --surface: #141119;
    --surface-alt: #1d1826;
    --border: #30263e;
    --border-strong: #49375e;

    /*
     * Fondo de los campos de formulario. En VS Code los input son MAS CLAROS que el
     * panel que los contiene; con el mismo color del panel el campo desaparece y solo
     * se adivina por su borde.
     */
    --input-bg: #3c3c3c;
    --text: #d4d4d4;
    --text-muted: #9d9d9d;    /* subido desde #858585 para llegar a 4.5:1 */

    --primary: #8b5cf6;
    --primary-dark: #a78bfa;
    --focus: #a78bfa;

    /* Colores de sintaxis, usados para los estados */
    --green: #6a9955;         /* comentarios */
    --green-text: #89d185;    /* verde legible sobre fondo oscuro */
    --teal: #4ec9b0;          /* tipos */
    --orange: #ce9178;        /* cadenas */
    --red: #f48771;           /* errores */
    --blue: #569cd6;          /* palabras clave */
    --yellow: #dcdcaa;        /* funciones */
    --gray: #9d9d9d;
    --slate: #c586c0;         /* control de flujo */

    /*
     * 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, que es lo que hacia el tema claro y lo que obligaba a tocar
     * catorce sitios al cambiar un tono.
     */
    --tint: 14%;

    --radius: 10px;
    --shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

* { 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    background-image: radial-gradient(circle at 78% -10%, rgba(124, 58, 237, .13), transparent 34%);
}

a { color: var(--primary); 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: 30px 40px 22px 28px; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #110c19 0%, #0b0910 100%); border-right: 1px solid var(--border);
}
.workspace { min-width: 0; flex: 1; }

.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 8px 24px rgba(139,92,246,.28);
}

.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-weight: 500;
    font-size: 13px;
}
.nav a:hover { background: var(--surface-alt); text-decoration: none; color: var(--text); }
.nav a.active {
    background: rgba(139,92,246,.14);
    border-color: rgba(139,92,246,.45);
    color: #c4b5fd;
}
.nav-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* 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-weight: 500;
    font-size: 13px;
    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: 9px; }
.sidebar-actions .btn { text-align: center; }
.user { color: var(--text-muted); font-size: 13px; }

.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: linear-gradient(180deg, #110c19 0%, #0b0910 100%);

    /* 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; }
.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-grid { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px; max-width: 460px; }
.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;
}
.summary-item { min-height: 84px; padding: 14px 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); border-top: 2px solid #59456f; border-radius: 10px; background: linear-gradient(145deg, rgba(30,24,39,.96), rgba(17,14,22,.96)); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.summary-item strong { display: block; color: #ede9fe; font-size: 25px; font-weight: 650; line-height: 1; }
.summary-item span { display: block; color: var(--text-muted); font-size: 11px; line-height: 1.25; }
.summary-confirmed { border-left-color: var(--green-text); }
.summary-rescheduled { border-left-color: var(--teal); }
.summary-no_answer { border-left-color: var(--orange); }
.summary-failed { border-left-color: var(--red); }
.summary-calling { border-left-color: var(--primary); }

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

.container { max-width: 1440px; margin: 0 auto; padding: 28px 96px 48px 48px; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 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: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.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)); }

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    border-left: 3px solid var(--gray);
}
.stat-value { display: block; font-size: 26px; font-weight: 600; line-height: 1.1; }
.stat-label { display: block; color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.stat-sm { padding: 12px; }
.stat-sm .stat-value { font-size: 20px; }

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

/* --- 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: var(--surface-alt);
    white-space: nowrap;
}
.table th.num { text-align: right; }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-alt); }

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

.empty { padding: 32px 18px; text-align: center; color: var(--text-muted); }

.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. En el tema claro era oscura con texto blanco; sobre
     * fondo oscuro eso dejaba un rectangulo claro con texto blanco encima, ilegible.
     * Ahora es 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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- 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: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.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:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.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-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="tel"],
.field input[type="date"],
.field input[type="number"],
.field input[type="password"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: var(--input-bg);
    color: var(--text);
}
.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(37, 99, 235, .12);
}
.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 .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);
}
.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(37, 99, 235, .12);
}

.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;
}
.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-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.sp-identity-value {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-alt);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-status-line { font-size: 12px; margin: 0 0 10px; }

.sp-number { position: relative; }
.field .sp-number-country {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.sp-number-country svg { width: 13px; height: 13px; color: var(--primary-dark); }
.sp-number-country select {
    background: transparent;
    border: 0;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.sp-number-input { padding-right: 44px; padding-left: 44px; }
.sp-backspace {
    position: absolute;
    right: 10px;
    bottom: 12px;
    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-size: 22px; font-weight: 700; letter-spacing: .02em; }
.sp-live-state { margin-top: 4px; color: var(--primary-dark); font-weight: 600; }
.sp-live-meta { margin-top: 4px; 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: ui-monospace, SFMono-Regular, Menlo, monospace;
    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; }
}

.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, #110c19 0%, #0b0910 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: relative; padding: 16px; }
    .nav { margin-top: 16px; }
    .sidebar-actions { margin-top: 16px; }
    .summary-strip { padding: 22px 16px 4px; }
    .summary-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
    .summary-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Pantalla de configuracion (Fase 4) ---------------------------------- */

/*
 * .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 (Fase 4) ---------------- */

/*
 * 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; color: var(--text); }
.dropzone-meta { font-size: 12px; color: var(--text-muted); }

/* Pestañas de "Contactos": radios ocultos + etiquetas como botones. */
.tabs { margin-top: 2px; }
.tab-input {
    position: absolute;
    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; }

/* --- 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 ----------------------------------------------------- */

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 22% 20%, #1c1330 0%, #0c0914 45%, #050308 100%);
}
.auth-canvas { position: fixed; inset: 0; z-index: 0; }
.auth-shell { position: relative; z-index: 1; width: 100%; max-width: 380px; padding: 20px; }
.auth-card {
    position: relative;
    z-index: 1;
    padding: 32px 30px 28px;
    text-align: center;
    background: rgba(20, 17, 25, .85);
    border: 1px solid rgba(139, 92, 246, .22);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.auth-head { margin-bottom: 24px; }
.auth-logo {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 14px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #6d28d9, #a855f7);
    box-shadow: 0 0 0 6px rgba(139, 92, 246, .12), 0 12px 30px rgba(109, 40, 217, .45);
}
.auth-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.auth-app-name { font-size: 20px; font-weight: 700; letter-spacing: .03em; color: #f5f3ff; }
.auth-subtitle {
    margin: 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.auth-card .form { text-align: left; }
.auth-card .field-actions .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }