/* TANDA v2 — network-extra.css
   Reemplaza style="..." inline de los HTMLs originales de network/.
   Carga DESPUES de network.css. */

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

/* Header columns */
.col-actions { text-align: right; }

/* Botones compactos */
.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 */
.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 width */
.modal-w-480 .modal-card { max-width: 480px; }
.modal-w-560 .modal-card { max-width: 560px; }
.modal-w-640 .modal-card { max-width: 640px; }

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

/* Texto secundario */
.text-xs { font-size: .78rem; }
.text-sm { font-size: .85rem; }
.text-danger { color: var(--danger, #d23838); }

/* Form grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
}
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* Variante 3 columnas (usada en Telefonía VoIP: Teléfono | Usuario | Contraseña) */
.form-grid.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .form-grid.form-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .form-grid.form-grid--3 { grid-template-columns: 1fr; } }

/* Estilo de inputs en modo solo lectura */
.input[readonly] {
    background: var(--surface-soft, #e4e8f1);
    color: var(--text-muted, #6c7891);
    cursor: default;
}

/* Cuenta de depósitos — subtítulo + grilla de establecimientos */
.cd-section-sub {
    font-size: .85rem;
    margin: 0 0 var(--sp-4, 1rem);
}
.cd-visible-row { margin-bottom: var(--sp-4, 1rem); display: flex; align-items: center; gap: .5rem; }

.estab-help { font-size: .78rem; margin: .15rem 0 .55rem; }
.estab-footnote {
    font-size: .72rem;
    margin: .25rem 0 .55rem;
}

/* Acciones que ocupan toda la fila del form-grid */
.form-grid-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
    gap: .5rem;
    flex-wrap: wrap;
}
.tanda-edit-actions { justify-content: flex-start; }

/* ============================================================
   Expediente — Vínculo con base de prospectos
   ============================================================ */
.vinculo-base-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
    flex-wrap: wrap;
}
.vinculo-base-row .badge.is-success {
    background: rgba(34,197,94,.12);
    color: #16a34a;
}
.badge-inline {
    margin-left: .35rem;
    font-size: .7rem;
    padding: .05rem .4rem;
}

.linkear-help { margin: 0 0 .75rem; }
.linkear-section { margin-bottom: 1rem; }
.linkear-title {
    margin: 0 0 .5rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #6c7891);
}
.linkear-empty {
    margin: .25rem 0;
    font-size: .85rem;
    text-align: center;
    padding: 1rem;
    border-radius: var(--radius-md, 12px);
    background: var(--surface-soft, #e4e8f1);
    box-shadow: var(--neu-inset, inset 2px 2px 5px rgba(163,177,198,.4), inset -2px -2px 5px rgba(255,255,255,.85));
}

.linkear-list { display: flex; flex-direction: column; gap: .4rem; }
.linkear-list-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding-right: .25rem;
}
.linkear-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    border-radius: var(--radius-md, 12px);
    background: var(--surface, #eef1f8);
    box-shadow: var(--neu-flat, 3px 3px 7px rgba(163,177,198,.4), -3px -3px 7px rgba(255,255,255,.85));
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.linkear-item:hover { transform: translateY(-1px); }
.linkear-item:has(input:checked) {
    box-shadow: var(--neu-inset, inset 2px 2px 6px rgba(163,177,198,.45), inset -2px -2px 6px rgba(255,255,255,.85));
    outline: 2px solid var(--accent, #ef4444);
    outline-offset: -2px;
}
.linkear-item input[type="radio"] {
    flex: 0 0 auto;
    accent-color: var(--accent, #ef4444);
    margin: 0;
}
.linkear-item-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.linkear-item-info strong { font-weight: 600; }
.linkear-item-info small { font-size: .8rem; }

/* -----------------------------------------------------------
   Sugerencias de usuario (chips) para "Nuevo ejecutivo"
   ----------------------------------------------------------- */
.usuario-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin-top: .45rem;
}
.usuario-suggestions .pill.is-suggestion {
    cursor: pointer;
    background: var(--surface, #e8ecf3);
    box-shadow: 3px 3px 6px #c7ccd6, -3px -3px 6px #ffffff;
    padding: .35rem .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent, #ef6e6e);
    border: 0;
    border-radius: 999px;
    transition: transform .15s ease;
}
.usuario-suggestions .pill.is-suggestion:hover {
    transform: translateY(-1px);
}

/* Field-hint con estados de validacion inline */
.field .field-hint.is-error   { color: var(--danger,  #d23838); }
.field .field-hint.is-success { color: var(--success, #2c8d4d); }

/* Boton "Generar contraseña" (debajo del input, no dentro) */
.pwd-gen-btn {
    display: inline-block;
    margin-top: .75rem;
    padding: .45rem .9rem;
    font-size: .8rem;
}

/* -----------------------------------------------------------
   Acciones administrativas en /ejecutivo?id=X
   Cada accion en su propia fila; input + boton alineados.
   ----------------------------------------------------------- */
.admin-acciones {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: 1rem;
}
.admin-accion-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin: 0;
}
.admin-accion-row .admin-accion-input {
    flex: 1 1 320px;
    min-width: 0;
}
.admin-accion-row .btn { flex: 0 0 auto; }

/* -----------------------------------------------------------
   Notificaciones FCM — boton campana (individual) y bulk
   ----------------------------------------------------------- */
.btn-bell {
    padding: .35rem .55rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 999px;
}
.btn-bell[aria-disabled="true"],
.btn-bell.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}
.fcm-status-off {
    margin-bottom: 1rem;
}

/* Resumen de seleccionados en el modal bulk */
.bulk-list-summary {
    list-style: none;
    padding: 0;
    margin: .35rem 0 1rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 10px;
}
.bulk-summary-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .85rem;
    border-bottom: 1px solid rgba(108,120,145,.08);
}
.bulk-summary-row:last-child { border-bottom: 0; }
.bulk-summary-row.is-disabled { opacity: .55; }
.bulk-summary-row .bulk-status { flex: 0 0 auto; }
.bulk-summary-row strong { font-weight: 600; }
.bulk-summary-row small { color: var(--text-muted, #6c7891); }

/* Tabla de cuentas con bulk: checkbox column */
.sys-table .col-check  { width: 36px; text-align: center; padding-right: 0; }
.sys-table .col-check input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }

.bulk-toolbar {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin: .35rem 0 .85rem;
    padding: .65rem .9rem;
    background: var(--surface, #e8ecf3);
    box-shadow: 4px 4px 8px #c7ccd6, -4px -4px 8px #ffffff;
    border-radius: 14px;
    font-size: .85rem;
}
.bulk-toolbar .bulk-counter   { font-weight: 600; }
.bulk-toolbar .btn            { padding: .45rem .9rem; font-size: .82rem; }
.bulk-toolbar small           { flex-basis: 100%; }
.bulk-toolbar[hidden]         { display: none; }
.bulk-toolbar .btn[disabled]  { opacity: .5; cursor: not-allowed; }

/* Campana inline en cards de pago (dashboard) */
.pago-card .fcm-bell-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: .45rem;
}

/* -----------------------------------------------------------
   Comunicaciones IA — forms de agente + Telefonía
   ----------------------------------------------------------- */
/* Párrafos introductorios sueltos en network/views (Telefonía, etc.) —
   por defecto .lead solo lleva margen dentro de .auth-card o .config-section. */
.sys-main > .lead { margin: .25rem .25rem 1.25rem; font-size: .9rem; }

/* Modal global de carga (en _head.php). El JS lo abre/cierra. */
.modal-loading-card {
    max-width: 320px;
    text-align: center;
    padding: 1.5rem 1.25rem 1.25rem;
}
.modal-loading-card .spinner { margin: 0 auto var(--sp-3, .9rem); }
.modal-loading-title { margin: .25rem 0 .25rem; font-size: 1.05rem; }
.modal-loading-text  { color: var(--text-muted, #6c7891); font-size: .85rem; margin: 0; }

/* Summary mejorado del details de agente IA: título + descripción + badge */
.agente-config-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
    padding: .25rem 0;
}
.agente-config-summary::-webkit-details-marker { display: none; }
.agente-config-head { flex: 1 1 280px; min-width: 0; }
.ia-agent-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}
.agente-config-desc {
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
}
.ia-agent-badge {
    display: inline-block;
    flex: 0 0 auto;
    padding: .3rem .75rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted, #6c7891);
    white-space: nowrap;
}

.agente-form { padding-top: 1rem; }
.agente-form .form-grid { gap: .85rem 1rem; }
.agente-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .82rem; line-height: 1.5; }
.agente-form .field label { font-weight: 600; }

.agente-voz-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.agente-voz-row .agente-voz-select { flex: 1 1 280px; }
.agente-voz-row .btn-probar-voz    { flex: 0 0 auto; }

/* Tarjetas VoIP por ejecutivo */
.voip-card {
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 12px;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}
.voip-card.is-disabled { opacity: .55; }
.voip-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
}
.voip-head small { display: block; color: var(--text-muted, #6c7891); font-size: .78rem; margin-top: .15rem; }
.voip-head code  { font-size: .78rem; padding: .1rem .35rem; background: rgba(108,120,145,.12); border-radius: 4px; }

.exec-status { font-size: .78rem; font-weight: 600; white-space: nowrap; }

/* Fila de ejecutivo (tabla /ejecutivos) — ID badge + nombre/correo */
.ej-row {
    display: flex;
    gap: .6rem;
    align-items: center;
}
.ej-row .client-id {
    flex: 0 0 auto;
}
.ej-row > div { min-width: 0; }
.ej-row strong { display: block; font-weight: 600; }
.ej-row small {
    display: block;
    color: var(--text-muted, #6c7891);
    font-size: .78rem;
    margin-top: .15rem;
}

/* Replica del estilo inline del template:
   h3 uppercase muted pequeño usado como header de seccion dentro de cliente-group */
.section-title-uppercase {
    font-size: .95rem;
    margin: 0 0 var(--sp-4, 1rem);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #6c7891);
    font-weight: 600;
}

/* Header de la seccion "Cartera asignada" del perfil del ejecutivo:
   título uppercase + resumen a la izquierda, botón a la derecha */
.ejec-cartera-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: var(--sp-3, .75rem);
}
.ejec-cartera-head > div { min-width: 0; }
.ejec-cartera-head .section-title-uppercase {
    margin-bottom: .15rem;
}
.ejec-cartera-resumen-line {
    font-size: .85rem;
    margin: 0;
}

/* ============================================================
   Expediente — réplica de inline styles del template
   ============================================================ */

/* Avatar grande del header del cliente (template: style="width:64px;height:64px;font-size:1.4rem;") */
.avatar-md.cliente-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 1.4rem;
}

/* Nombre del cliente (template: <h3 style="font-size:1.2rem;">) */
.cliente-nombre {
    font-size: 1.2rem;
    margin: 0 0 .15rem;
}

/* Fila de acciones del header del cliente (WhatsApp / Suspender / Eliminar) */
.cliente-head-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.cliente-head-btn {
    font-size: .85rem;
    padding: .55rem 1rem;
}

/* Botón "Guardar cambios" de Datos personales (template: style="margin-top:var(--sp-3);") */
.expediente-submit {
    margin-top: var(--sp-3, .75rem);
}

/* Encabezado y subtítulo de la sección Comentarios */
.comentarios-title {
    margin-bottom: .15rem;
}
.comentarios-subtitle {
    font-size: .82rem;
    margin-bottom: var(--sp-4, 1rem);
}

/* Form de "Agregar comentario" debajo del timeline */
.form-nuevo-comentario {
    margin-top: var(--sp-4, 1rem);
}

/* Botones primarios con fondo rojo de peligro (template usa style="background:var(--danger);" en algunos modales) */
.btn.btn-danger-bg {
    background: var(--danger, #d23838);
}

/* Anchos auxiliares para modales (template usa style="max-width:540px;") */
.modal-w-540 .modal-card,
.modal.modal-w-540 .modal-card { max-width: 540px; }
.modal-w-520 .modal-card,
.modal.modal-w-520 .modal-card { max-width: 520px; }

/* Estado vacío del listado de comentarios */
.comentarios-empty {
    margin: 0 0 var(--sp-3, .75rem);
    text-align: center;
    padding: 1rem;
}

/* Sección "Enviar notificación push" (FCM por cliente) */
.notif-warning {
    font-size: .85rem;
    margin: 0 0 var(--sp-3, .75rem);
}
.notif-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-3, .75rem);
}

/* Footer de conteo en /cuentas (template: style="margin-top: var(--sp-5); font-size: .82rem;") */
.cuentas-count {
    margin-top: var(--sp-5, 1.25rem);
    font-size: .82rem;
}

/* Gestionar cartera — header de sección (título uppercase + subtítulo) */
.gc-section-head {
    margin-bottom: var(--sp-3, .75rem);
}
.gc-section-head .section-title-uppercase {
    margin-bottom: .15rem;
}
.gc-section-sub {
    font-size: .85rem;
    margin: 0;
}

/* Botón badge clickeable para columna Asignación */
.badge-asign-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    display: inline-block;
}
.badge-asign-btn:hover .badge,
.badge-asign-btn:focus-visible .badge {
    transform: translateY(-1px);
    box-shadow: var(--neu-flat, 2px 2px 5px rgba(163,177,198,.35), -2px -2px 5px rgba(255,255,255,.7));
}

/* Helper text del modal de Asignación */
.gc-asign-help {
    display: block;
    margin-top: .5rem;
    font-size: .78rem;
}

/* Botón compacto para columna Comentarios */
.btn-coments {
    font-size: .85rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.btn-coments[disabled] { opacity: .6; cursor: default; }
.exec-status.is-active    { color: var(--success, #2c8d4d); }
.exec-status.is-suspended { color: var(--danger,  #d23838); }

/* Perfil del ejecutivo — header card con acciones inline */
.ejec-status-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}
.ejec-header-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}
.ejec-cartera-resumen {
    font-weight: 400;
    margin-left: .65rem;
}
.ejec-cartera-link {
    float: right;
    margin-top: -4px;
}

/* Subtítulo en línea junto a un <h2 class="section-title"> */
.section-title-sub {
    font-weight: 400;
    margin-left: .5rem;
    font-size: .82rem;
    color: var(--text-muted, #6c7891);
}

/* Botón con texto rojo (acciones destructivas como Eliminar cuenta) */
.is-danger-text { color: var(--danger, #d23838) !important; }

/* Cards de "Cargar prospectos" en gestionar-cartera */
.cargar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 720px) { .cargar-grid { grid-template-columns: 1fr; } }
.cargar-card {
    background: var(--surface, #e8ecf3);
    box-shadow: 6px 6px 12px #c7ccd6, -6px -6px 12px #ffffff;
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
}
.cargar-card .icon-circle {
    width: 56px; height: 56px;
    font-size: 1.6rem;
    margin: 0 auto .75rem;
}
.cargar-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.cargar-card p  { margin: 0 0 1rem; }

.select--compact {
    padding: .45rem .65rem;
    font-size: .82rem;
}

.inline-form { display: inline-block; margin: 0; }

.cliente-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
}
.modal-badge {
    display: block;
    text-align: center;
    margin-top: 1rem;
    padding: .65rem;
}

.comentarios-timeline { margin-top: 1rem; }
.comentario-item {
    padding: .85rem 1rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 12px;
    margin-bottom: .5rem;
}
.comentario-item .meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
    font-size: .82rem;
}
.comentario-item .meta small { color: var(--text-muted, #6c7891); }
.comentario-item p { margin: 0; font-size: .9rem; line-height: 1.5; }

/* Tabs (comunicaciones-ia, configuracion) */
.sys-tabs {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 4px 4px 8px #c7ccd6, inset -4px -4px 8px #ffffff;
    border-radius: 14px;
    padding: .35rem;
}
.sys-tabs a {
    padding: .55rem 1.1rem;
    border-radius: 10px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-mute, #6c7891);
    text-decoration: none;
    transition: all .15s ease;
}
.sys-tabs a.is-active {
    background: var(--surface, #e8ecf3);
    box-shadow: 4px 4px 8px #c7ccd6, -4px -4px 8px #ffffff;
    color: var(--accent, #3d5af1);
}

/* IA config blocks */
.ia-config-block {
    background: var(--surface, #e8ecf3);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 8px 8px 16px #c7ccd6, -8px -8px 16px #ffffff;
    margin-bottom: 1rem;
}
.ia-config-block summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .5rem;
}
.ia-config-block summary::-webkit-details-marker { display: none; }
.ia-config-block[open] summary {
    border-bottom: 1px solid var(--line, #d2d8e3);
    margin-bottom: 1rem;
}

/* Listas */
.trans-list, .records-list, .agenda-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.trans-item, .record-item, .agenda-item {
    padding: .85rem 1rem;
    margin-bottom: .5rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 12px;
}
.trans-item { cursor: pointer; }
.record-item, .agenda-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}
.trans-meta {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}
.trans-preview {
    margin: 0;
    font-size: .85rem;
    color: var(--text-mute, #6c7891);
    line-height: 1.5;
}
.record-meta, .agenda-info { flex: 1; min-width: 200px; }
.record-meta strong, .agenda-info strong { display: block; }
.record-audio { flex: 1; min-width: 200px; max-width: 300px; }
.agenda-hora {
    font-weight: 700;
    font-size: .95rem;
    min-width: 60px;
}
.agenda-day { margin-bottom: 1.5rem; }
.agenda-day h3 {
    font-size: .9rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-mute, #6c7891);
}

/* Modal con audio + transcripcion */
.modal-audio { width: 100%; margin: .75rem 0; }
/* 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; /* separación entre turnos */
    margin-top: .5rem;
}
/* Refuerzo del margen por si algún selector externo intenta colapsar el flex gap */
.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; }
}

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

/* Form sections (configuracion) */
.config-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--surface, #e8ecf3);
    box-shadow: 6px 6px 12px #c7ccd6, -6px -6px 12px #ffffff;
    border-radius: 16px;
}
.config-section h3 {
    margin: 0 0 .25rem 0;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-mute, #6c7891);
}
.config-section .lead {
    color: var(--text-mute);
    margin: 0 0 1rem 0;
    font-size: .85rem;
}

/* Tanda config (planes editables) */
.tanda-config {
    padding: 1rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 3px 3px 6px #c7ccd6, inset -3px -3px 6px #ffffff;
    border-radius: 12px;
    margin-bottom: 1rem;
}
.tanda-config-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.tanda-config-head .input { flex: 1; }

/* Spacing entre form-grid, checkbox y boton Guardar dentro de .tanda-config */
.tanda-config .terms-note      { margin-top: 1.25rem; margin-bottom: .25rem; }
.tanda-config .cliente-actions { margin-top: 1.75rem; }

.tanda-rm {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--danger, #d23838);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
}
.tanda-rm:hover { background: rgba(210,56,56,.08); }

/* Establishment grid — responsive: tantos items por fila como entren */
.estab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem;
    margin: .5rem 0;
}
.estab-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: var(--surface, #eef1f8);
    box-shadow: var(--neu-flat, 2px 2px 5px rgba(163,177,198,.35), -2px -2px 5px rgba(255,255,255,.7));
    border-radius: 12px;
    cursor: pointer;
    font-size: .85rem;
    transition: box-shadow .15s ease;
}
.estab-row input[type="checkbox"] {
    flex: 0 0 auto;
    accent-color: var(--accent, #ef4444);
    margin: 0;
}
.estab-row:has(input:checked) {
    box-shadow: var(--neu-inset, inset 2px 2px 5px rgba(163,177,198,.4), inset -2px -2px 5px rgba(255,255,255,.85));
    outline: 1px solid var(--accent, #ef4444);
    outline-offset: -1px;
}
.estab-row span { line-height: 1.2; }

.estab-add {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}
.estab-add .input { flex: 1; }

/* Logo: fila con preview + label "Logo actual" */
.logo-current-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0 1.25rem;
}
.logo-upload-form { margin-top: .5rem; }

/* Logo preview en configuracion */
.logo-preview-current {
    max-width: 180px;
    max-height: 80px;
    padding: 1rem;
    background: var(--surface, #e8ecf3);
    box-shadow: inset 4px 4px 8px #c7ccd6, inset -4px -4px 8px #ffffff;
    border-radius: 12px;
}

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

/* ============================================================
   Comunicaciones IA — tabs Records / Agendadas
   ============================================================ */

/* Header bar arriba del tab Agendadas */
.ia-agendar-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3, .75rem);
    margin-bottom: var(--sp-4, 1rem);
    flex-wrap: wrap;
}
.ia-agendar-head { flex: 1 1 280px; min-width: 0; }
.ia-agendar-head .ia-agent-title { margin: 0 0 .15rem; }
.ia-agendar-desc { margin: 0; }

/* Lista de días agendados */
.agenda-list { display: flex; flex-direction: column; gap: var(--sp-4, 1rem); }
.agenda-day { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.agenda-day-title {
    margin: 0 0 .35rem;
    font-size: .8rem;
    letter-spacing: .08em;
    color: var(--accent, #ef4444);
    text-transform: uppercase;
    font-weight: 700;
}
.agenda-day-date {
    color: var(--text-muted, #6c7891);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
    margin-left: .25rem;
}
.agenda-items { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.agenda-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: var(--sp-3, .75rem);
    padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
    border-radius: var(--radius-md, 14px);
    background: var(--surface, #eef1f8);
    box-shadow: var(--neu-flat, 4px 4px 10px rgba(163,177,198,.45), -4px -4px 10px rgba(255,255,255,.85));
}
.agenda-time {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent, #ef4444);
    letter-spacing: .02em;
}
.agenda-info { min-width: 0; }
.agenda-info strong { display: block; font-weight: 600; }
.agenda-info small {
    display: block;
    margin-top: .15rem;
    color: var(--text-muted, #6c7891);
    font-size: .82rem;
}
.agenda-actions {
    display: flex;
    gap: var(--sp-2, .5rem);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.agenda-actions .inline-form { display: inline-flex; }

@media (max-width: 640px) {
    .agenda-item {
        grid-template-columns: 56px 1fr;
        grid-template-areas: "time info" "actions actions";
    }
    .agenda-time { grid-area: time; }
    .agenda-info { grid-area: info; }
    .agenda-actions { grid-area: actions; justify-content: flex-start; }
}

/* Lista de grabaciones (tab Records) */
.rec-list { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.rec-item {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr);
    align-items: center;
    gap: var(--sp-3, .75rem);
    padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
    border-radius: var(--radius-md, 14px);
    background: var(--surface, #eef1f8);
    box-shadow: var(--neu-flat, 4px 4px 10px rgba(163,177,198,.45), -4px -4px 10px rgba(255,255,255,.85));
}
.rec-info { min-width: 0; }
.rec-info strong { display: block; font-weight: 600; }
.rec-info small { display: block; margin-top: .15rem; font-size: .8rem; }

.audio-mock {
    display: flex;
    align-items: center;
    gap: var(--sp-2, .5rem);
    padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
    border-radius: 999px;
    background: var(--surface-soft, #e4e8f1);
    box-shadow: var(--neu-inset, inset 3px 3px 7px rgba(163,177,198,.5), inset -3px -3px 7px rgba(255,255,255,.85));
}
.audio-play, .audio-download {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: var(--surface, #eef1f8);
    box-shadow: var(--neu-flat, 3px 3px 7px rgba(163,177,198,.45), -3px -3px 7px rgba(255,255,255,.85));
    color: var(--accent, #ef4444);
    cursor: pointer;
    font-size: .9rem;
    text-decoration: none;
}
.audio-play:hover, .audio-download:hover {
    box-shadow: var(--neu-inset, inset 2px 2px 5px rgba(163,177,198,.5), inset -2px -2px 5px rgba(255,255,255,.85));
}
.audio-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(108,120,145,.18);
    overflow: hidden;
    min-width: 80px;
}
.audio-progress {
    height: 100%;
    width: 0;
    background: var(--accent, #ef4444);
    border-radius: 999px;
    transition: width .15s linear;
}
.audio-time {
    font-size: .78rem;
    color: var(--text-muted, #6c7891);
    font-variant-numeric: tabular-nums;
    min-width: 84px;
    text-align: right;
}

@media (max-width: 720px) {
    .rec-item { grid-template-columns: 1fr; }
}

/* ============================================================
   Modal de pago: jerarquía y espaciado de acciones
   (aprobar = primaria/positiva arriba; declinar = secundaria)
   ============================================================ */
.pago-modal-acciones {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}
.pago-modal-acciones > form { margin: 0; }

/* Bloque de declinar: separado de la acción primaria con una línea sutil */
.pago-modal-decline {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border, rgba(0,0,0,.08));
}
.pago-modal-decline .field { margin-bottom: var(--sp-3); }

/* QR del alta de 2FA (totp-setup) — el div lo rellena qrcode.min.js */
.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; }

/* Kill switch global + toggle individual (comunicaciones IA tab=config) */
.ia-kill {
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0 1.5rem;
    background: var(--surface, #f3f5fa);
    box-shadow: var(--shadow-in, inset 0 1px 3px rgba(0,0,0,.06));
}
.ia-kill.is-on  { border-left: 4px solid #2ecc71; }
.ia-kill.is-off { border-left: 4px solid #e74c3c; background: #fdecea; }
.ia-kill-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.ia-kill-row--sub {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px dashed rgba(0,0,0,.08);
}
.ia-kill-info { flex: 1 1 320px; }
.ia-kill-info strong { display: block; margin-bottom: .25rem; }
.ia-kill-info p { margin: 0; }
.ia-kill-form { flex: 0 0 auto; }
.btn-danger {
    background: #e74c3c; color: #fff;
    border: 1px solid #c0392b;
    box-shadow: 0 2px 5px rgba(192,57,43,.25);
}
.btn-danger:hover { background: #c0392b; }

/* ============================================================
   Secciones de Comunicaciones IA — Configuración
   Distinción visual entre:
     A. Configuración global de los agentes (plantilla/molde)
     B. Mis agentes IA (instancia personal)
   ============================================================ */
.ia-config-section {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem 1.75rem 1.25rem;
    border-radius: 16px;
    background: var(--surface, #f3f5fa);
    box-shadow: var(--shadow-out, 0 2px 8px rgba(0,0,0,.04));
    position: relative;
    border-left: 5px solid transparent;
}
.ia-config-section--global   {
    border-left-color: #6c5ce7;
    background: linear-gradient(180deg, rgba(108,92,231,.04) 0%, transparent 80%), var(--surface, #f3f5fa);
}
.ia-config-section--personal {
    border-left-color: #2ecc71;
    background: linear-gradient(180deg, rgba(46,204,113,.05) 0%, transparent 80%), var(--surface, #f3f5fa);
}

.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%;
}
.ia-config-section--global   .ia-config-section-head .section-title::before { background: #6c5ce7; }
.ia-config-section--personal .ia-config-section-head .section-title::before { background: #2ecc71; }

.ia-config-section-head .section-title::after {
    content: attr(data-chip);
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ia-config-section--global   .ia-config-section-head .section-title::after {
    content: 'plantilla';
    background: rgba(108,92,231,.15);
    color: #6c5ce7;
}
.ia-config-section--personal .ia-config-section-head .section-title::after {
    content: 'personal';
    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 admin/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 (network)
   Ocupa casi toda la pantalla para tener espacio cómodo de lectura/escritura.
   El cuerpo crece todo lo que pueda y los mensajes traen separación visible. */
#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;
}
/* Separación entre mensajes dentro del cuerpo (cada turno es un .trans-turn) */
.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 network */
.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" — radio pills, sugerencias, datetime */
.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;
    }
}

/* ============================================================
   Autocomplete del modal "Agendar llamada" (Comunicaciones IA → Agendadas).
   El input tiene un dropdown debajo con resultados de clientes y prospectos
   pintados por /api/buscar-contacto. Cada item lleva un badge para
   distinguir cliente con cuenta vs prospecto.
   ============================================================ */
.ag-buscador { position: relative; }

.ag-resultados {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 4px 0 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: 280px;
    overflow-y: auto;
}
.ag-resultados li {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    transition: background-color 120ms ease;
}
.ag-resultados li:hover,
.ag-resultados li.is-active {
    background: #f7f7f7;
}
.ag-resultados li .ag-r-nombre {
    font-weight: 500;
    color: #222;
}
.ag-resultados li .ag-r-tel {
    color: #777;
    font-size: 0.85em;
}
.ag-resultados .ag-empty,
.ag-resultados .ag-loading {
    padding: 10px 12px;
    color: #777;
    font-size: 0.9em;
    cursor: default;
}
.ag-resultados .ag-empty:hover,
.ag-resultados .ag-loading:hover { background: transparent; }

/* Badge "Cliente" / "Prospecto" — pill chico al inicio de cada resultado y
   en el chip de selección confirmada. */
.ag-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
}
.ag-badge.is-cliente {
    background: #e6f7ed;
    color: #126b34;
}
.ag-badge.is-prospecto {
    background: #fff0e3;
    color: #a04a00;
}

/* Chip de "ya seleccioné este destino". Reemplaza visualmente el input
   mientras la selección está activa; al hacer click en ✕ se limpia y
   vuelve el input editable. */
.ag-seleccionado {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 10px;
    background: #f3f6fb;
    border: 1px solid #d6e0ee;
    border-radius: 999px;
    font-size: 0.9em;
}
.ag-seleccionado .ag-nombre { font-weight: 500; }
.ag-seleccionado .ag-tel    { color: #555; font-size: 0.88em; }
.ag-seleccionado .icon-btn  { margin-left: auto; }

.icon-btn.icon-btn-tight {
    width: 22px; height: 22px;
    padding: 0;
    font-size: 0.9em;
}

/* Nota de "sin desglose diario" del chart de tandas en network/dashboard.
   Antes era style="text-align:center;padding:2rem" inline; movido a clase
   para cumplir CSP estricta (sin 'unsafe-inline' en style-src). */
.dashboard-chart-note {
    text-align: center;
    padding: 2rem;
}