/* TANDA v2 — system-extra.css
   Clases que reemplazan los style="..." inline de los HTMLs originales de system/.
   Carga DESPUES de system.css para sobrescribir donde haga falta. */

/* Modal de detalle de llamada — pantalla casi completa (mismo patrón que
   chat-modal-card). El cuerpo crece todo lo que pueda y la transcripción
   ocupa el alto restante con scroll interno. */
#modalLlamadaDetalle.modal-w-640 .modal-card { max-width: 92vw; width: 92vw; }
#modalLlamadaDetalle .modal-card {
    display: flex;
    flex-direction: column;
    width: 92vw;
    height: 88vh;
    max-height: 88vh;
}
.modal-transcripcion {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    padding: 1.1rem 1rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 10px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: .5rem;
}
.modal-transcripcion .trans-turn       { margin-bottom: .6rem; }
.modal-transcripcion .trans-turn:last-child { margin-bottom: 0; }
.modal-transcripcion .trans-turn-head  { margin-bottom: .35rem; }
.modal-transcripcion .trans-turn p     { margin: 0; }
@media (max-width: 720px) {
    #modalLlamadaDetalle.modal-w-640 .modal-card { max-width: 100vw; width: 100vw; }
    #modalLlamadaDetalle .modal-card { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* Filas de usuario en cards de cliente */
.cliente-row {
    display: flex;
    gap: .6rem;
    align-items: center;
}

/* Header de tabla con texto a la derecha */
.col-actions { text-align: right; }

/* Header de la sección "Cartera asignada" (Mi cuenta del ejecutivo) */
.ejec-cartera-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: var(--sp-3);
}
.ejec-cartera-head h3 {
    font-size: .95rem;
    margin-bottom: .15rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.ejec-cartera-resumen-line {
    font-size: .85rem;
    margin: 0;
}
.sys-table-wrap-flush { margin: 0; }

/* Botones compactos en tablas */
.btn-tight { padding: .4rem .65rem; }
.btn-tight-wide { padding: .4rem .9rem; font-size: .78rem; }
.btn-link-cartera { padding: .55rem 1rem; font-size: .85rem; }

/* Avatares medianos */
.avatar-md--lg {
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
}

/* Spacing residual de plantillas originales */
.mt-quarter      { margin-top: .25rem; }
.mt-half-rem     { margin-top: .4rem; }
.mb-quarter      { margin-bottom: .25rem; }
.h-section-title { font-size: 1.2rem; }
.h-section-small { font-size: .95rem; }
.section-spacer-bottom { margin-bottom: var(--sp-3); }
.section-spacer-top    { margin-top: 1rem; }

/* Modales: max-width especifico */
.modal-w-480 .modal-card { max-width: 480px; }
.modal-w-520 .modal-card { max-width: 520px; }
.modal-w-560 .modal-card { max-width: 560px; }
.modal-w-640 .modal-card { max-width: 640px; }

/* Cabecera de modal con titulo a la izq y boton de cerrar a la derecha.
   Reglas anidadas en .modal-card para ganar al text-align: center heredado
   y para resistir cualquier override de specificity baja. */
.modal-card .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
    text-align: left;
}
.modal-card .modal-head > div { flex: 1; min-width: 0; }
.modal-card .modal-head h3 { margin: 0 0 .15rem; text-align: left; }
.modal-card .modal-head .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Preview imagen modal */
.preview-img-cap { max-height: 70vh; }

/* QR del totp setup */
.totp-qr-svg { width: 220px; height: 220px; }
.totp-qr-wrap {
    display: flex;
    justify-content: center;
    margin: var(--sp-3) 0;
}
.totp-qr {
    background: #fff;
    padding: 12px;
    border-radius: var(--r-sm, 10px);
    box-shadow: var(--neu-out-sm);
    line-height: 0;
}
.totp-qr img,
.totp-qr canvas { display: block; }

/* Texto secundario */
.text-xs { font-size: .78rem; }
.text-sm { font-size: .85rem; }

/* TOTP setup */
.totp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}
.totp-steps > li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line, #d2d8e3);
}
.totp-steps > li:last-child { border-bottom: 0; }
.totp-steps > li > strong { display: block; margin-bottom: .35rem; }
.totp-secret-box {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 4px 4px 8px #c7ccd6, inset -4px -4px 8px #ffffff;
    border-radius: 12px;
    padding: .75rem 1rem;
    margin: .5rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.totp-secret-label { font-size: .78rem; color: var(--text-muted, #6c7891); }
.totp-secret-code  { font-size: .92rem; letter-spacing: .04em; word-break: break-all; }
.totp-uri          { margin: .5rem 0; }
.totp-uri summary  { cursor: pointer; font-size: .82rem; color: var(--text-muted, #6c7891); }
.totp-uri-code     {
    display: block;
    word-break: break-all;
    font-size: .72rem;
    padding: .5rem;
    background: var(--surface, #e8ecf3);
    border-radius: 8px;
    margin-top: .35rem;
}
.totp-backup-codes {
    list-style: none;
    padding: 0;
    margin: .65rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
}
.totp-backup-codes li code {
    display: block;
    padding: .55rem .75rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 8px;
    font-size: .85rem;
    text-align: center;
    letter-spacing: .04em;
}
@media (max-width: 480px) {
    .totp-backup-codes { grid-template-columns: 1fr; }
}

/* Logo cuadrado uniforme + nombre al lado.
   Aplica a:
   - .app-brand .app-brand-link (login, totp_setup)
   - .sys-brand (sidebar) */
.app-brand .app-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}
.app-brand .app-brand-link img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.app-brand .brand-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text, #2a3142);
    line-height: 1;
}
.sys-brand {
    display: inline-flex !important;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
}
.sys-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.sys-brand .brand-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text, #2a3142);
    line-height: 1;
}

/* -----------------------------------------------------------
   Dashboard: filtro por rango de fechas
   ----------------------------------------------------------- */
.sys-toolbar--range {
    margin-top: -.5rem;
    margin-bottom: 1rem;
    gap: .65rem;
    flex-wrap: wrap;
}
.range-label {
    display: inline-flex;
    flex-direction: column;
    font-size: .72rem;
    color: var(--text-muted, #6c7891);
    gap: .25rem;
}
.input--date {
    padding: .45rem .65rem;
    font-size: .82rem;
    width: auto;
    min-width: 140px;
}

/* -----------------------------------------------------------
   Pago-card variante "esperado" (sin comprobante)
   ----------------------------------------------------------- */
.pago-card--esperado {
    opacity: .92;
    border: 1px dashed rgba(108,120,145,.35);
}
.pago-card--esperado .img-frame {
    background: transparent;
}
.img-frame__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1rem .75rem;
    text-align: center;
    color: var(--text-muted, #6c7891);
}
.img-frame__placeholder .icon-circle {
    width: 44px; height: 44px;
    font-size: 1.4rem;
    margin-bottom: .25rem;
}
.img-frame__placeholder small {
    font-size: .72rem;
    line-height: 1.35;
}

/* ============================================================
   Sección de Comunicaciones IA — Configuración del ejecutivo
   Solo "Mis agentes" (sin plantilla — esa la edita el admin).
   ============================================================ */
.ia-config-section {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem 1.75rem 1.25rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(46,204,113,.05) 0%, transparent 80%), var(--surface, #f3f5fa);
    box-shadow: var(--shadow-out, 0 2px 8px rgba(0,0,0,.04));
    border-left: 5px solid #2ecc71;
}
.ia-config-section-head {
    margin-bottom: 1.25rem;
    padding-bottom: .85rem;
    border-bottom: 1px dashed rgba(0,0,0,.08);
}
.ia-config-section-head .section-title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.ia-config-section-head .section-title::before {
    content: '';
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #2ecc71;
}
.ia-config-section-head .section-title::after {
    content: 'personal';
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: rgba(46,204,113,.15);
    color: #1e8e4a;
}
.ia-config-section-head p { margin: 0; }
.ia-config-section .ia-config-block { margin: .75rem 0; }

@media (max-width: 720px) {
    .ia-config-section { padding: 1rem 1rem .75rem; }
}

/* Tab Chats — lista de chats escalados al ejecutivo */
.chat-escalado-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.chat-escalado-item {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 1rem;
    align-items: center;
    padding: .85rem 1.1rem;
    background: var(--surface, #f3f5fa);
    border-radius: 12px;
    border-left: 4px solid #e74c3c;
    cursor: pointer;
    transition: background .15s ease;
}
.chat-escalado-item:hover { background: var(--surface-2, #eef2f8); }
.chat-escalado-info strong { display: block; }
.chat-escalado-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) {
    .chat-escalado-item { grid-template-columns: 1fr; gap: .25rem; }
}

/* Modal de atención de chat en vivo (system)
   Ocupa casi toda la pantalla; mensajes con separación clara. */
#modalChatDetalle.modal-w-640 .modal-card { max-width: 92vw; width: 92vw; }
.chat-modal-card {
    display: flex;
    flex-direction: column;
    width: 92vw;
    height: 88vh;
    max-height: 88vh;
}
.chat-modal-cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none;
    padding: 1rem 1.1rem;
    background: var(--surface, #f3f5fa);
    border-radius: 12px;
    margin: .5rem 0;
}
.chat-modal-cuerpo .trans-turn { margin-bottom: 1.1rem; }
.chat-modal-cuerpo .trans-turn:last-child { margin-bottom: 0; }
.chat-modal-cuerpo .trans-turn-head { margin-bottom: .25rem; }
.chat-modal-cuerpo .trans-turn p { margin: 0; padding: .55rem .75rem; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.chat-modal-cuerpo .trans-turn.is-cli p { background: #fff; border: 1px solid rgba(0,0,0,.05); }
.chat-modal-cuerpo .trans-turn.is-ia  p { background: #eef5ff; border: 1px solid #d4e4ff; }

.chat-modal-form {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    padding-top: .65rem;
    border-top: 1px dashed rgba(0,0,0,.08);
}
.chat-modal-form textarea { flex: 1; resize: vertical; min-height: 56px; }
.chat-modal-actions { display: flex; gap: .35rem; align-items: center; }
@media (max-width: 720px) {
    #modalChatDetalle.modal-w-640 .modal-card { max-width: 100vw; width: 100vw; }
    .chat-modal-card { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* Toolbar del tab Chats (filtros + estado) */
.chat-vivos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .5rem 0 .75rem;
    flex-wrap: wrap;
}
.chat-vivos-filtros { display: flex; gap: .35rem; }
.chat-vivos-filtros .pill { cursor: pointer; }

/* Items de chat-escalado-list: borde lateral según estado */
.chat-escalado-item.is-escalado { border-left: 3px solid #c95151; }
.chat-escalado-item.is-ia       { border-left: 3px solid #2f9c5a; }
.chat-escalado-item .chat-icono { margin-right: .25rem; }

/* Boton "Activar notificaciones" en topbar de system */
.btn-notify {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-size: .78rem;
    color: #2b2b2b;
    line-height: 1;
}
.btn-notify:hover {
    background: #f7f7f9;
    border-color: rgba(0,0,0,.18);
}
.btn-notify.is-active {
    background: #e8f5ee;
    border-color: #2f9c5a;
    color: #1f6b3d;
}
.btn-notify.is-blocked {
    background: #fbeaea;
    border-color: #c95151;
    color: #8a2a2a;
}
.btn-notify .notify-label { font-weight: 500; }
@media (max-width: 720px) {
    .btn-notify .notify-label { display: none; }
    .btn-notify { padding: .4rem; }
}

/* Modal "Iniciar llamada IA" — replica el styling de network. */
.modal-w-560 .modal-card { max-width: 560px; width: 100%; }
.iniciar-llamada-card .field { margin-bottom: .85rem; }
.iniciar-llamada-card .field > label {
    display: block; font-weight: 600; font-size: .85rem;
    color: var(--text); margin-bottom: .35rem;
}
.iniciar-llamada-agentes,
.iniciar-llamada-cuando {
    display: flex; gap: .4rem; flex-wrap: wrap;
}
.radio-pill {
    position: relative; display: inline-flex; align-items: center;
    padding: .4rem .85rem; border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff; cursor: pointer; font-size: .82rem;
    user-select: none; transition: background .15s ease, border-color .15s ease;
}
.radio-pill:hover { background: #f7f7f9; }
.radio-pill input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.radio-pill:has(input:checked) {
    background: var(--accent-soft, #fde0e0);
    border-color: var(--accent, #ef6e6e);
    color: var(--accent-strong, #d85555);
    font-weight: 600;
}
.radio-pill.is-disabled,
.radio-pill input:disabled + span {
    opacity: .45; cursor: not-allowed;
}
.iniciar-llamada-sugerencias {
    display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem;
}
.iniciar-llamada-sugerencias .pill {
    cursor: pointer; font-size: .75rem; padding: .2rem .6rem;
    background: var(--surface-2, #eef2f8); border: 1px solid rgba(0,0,0,.06);
}
.iniciar-llamada-sugerencias .pill:hover { background: #e4e9f1; }
.iniciar-llamada-datetime { margin-top: .5rem; }
.iniciar-llamada-contador {
    padding: .5rem .75rem; border-radius: 8px;
    background: var(--surface, #f3f5fa); font-size: .85rem;
    margin-bottom: .85rem;
}
.iniciar-llamada-contador.is-limit {
    background: #fbeaea; color: #8a2a2a;
    border: 1px solid #c95151;
}

/* Tab "Iniciar" — buscador compartido + 2 secciones con tablas */
.iniciar-form {
    display: flex; gap: .5rem; align-items: center;
    margin: .75rem 0 1.25rem; flex-wrap: wrap;
}
.iniciar-form .sys-search { flex: 1; min-width: 240px; }
.iniciar-seccion { margin-bottom: 1.75rem; }
.iniciar-seccion-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: .75rem; margin-bottom: .5rem;
}
.iniciar-seccion-head .section-title { margin: 0; }
.iniciar-table { margin-top: .25rem; }
.iniciar-table th, .iniciar-table td { padding: .55rem .65rem; }
.iniciar-hint { padding: .85rem; text-align: center; }
.iniciar-row-convertido { opacity: .55; }
.iniciar-row-convertido strong { text-decoration: line-through; }

/* Agenda — fila vencida + badge */
.agenda-item.is-vencida { opacity: .85; border-left: 3px solid #c95151; }
.agenda-badge-vencida { margin-left: .35rem; font-size: .65rem; vertical-align: middle; }

/* Toast persistente "Llamada en curso" — fixed abajo derecha */
.llamada-toast {
    position: fixed;
    right: 1.25rem; bottom: 1.25rem;
    z-index: 9999;
    display: flex; align-items: center; gap: .8rem;
    min-width: 280px; max-width: 380px;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
    border-left: 4px solid #2f9c5a;
    animation: llamadaToastIn .25s ease-out;
}
@keyframes llamadaToastIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.llamada-toast.is-en-curso { border-left-color: #2f9c5a; }
.llamada-toast.is-en-curso .llamada-toast-icon {
    animation: llamadaPulse 1.4s ease-in-out infinite;
}
@keyframes llamadaPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.15); opacity: .7; }
}
.llamada-toast.is-terminada { border-left-color: #c95151; }
.llamada-toast-icon { font-size: 1.6rem; line-height: 1; }
.llamada-toast-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.llamada-toast-title { font-size: .85rem; font-weight: 700; color: #1e1e1e; }
.llamada-toast-info {
    font-size: .76rem; color: #555;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.llamada-toast-timer {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1.05rem; font-weight: 700; color: #2f9c5a;
    margin-top: .1rem;
}
.llamada-toast.is-terminada .llamada-toast-timer { color: #555; }
.llamada-toast-close {
    border: none; background: transparent; cursor: pointer;
    color: #888; font-size: 1.1rem; padding: .25rem .4rem;
    border-radius: 6px;
}
.llamada-toast-close:hover { background: #f3f3f3; color: #333; }
@media (max-width: 480px) {
    .llamada-toast {
        left: 1rem; right: 1rem; bottom: 1rem;
        max-width: none; min-width: 0;
    }
}