/* ── APARIENCIA — los colores de la interfaz, en un solo juego de variables ──────────────
   Antes esta hoja tenía 266 colores escritos a mano y ninguna variable, y por eso las once
   pantallas que la comparten (Ventas, Mensajes, Contactos, Embudos, Catálogo, Calendario,
   Agentes, Entrenar, Importador, Configuración e Inicio) no podían tener modo oscuro: no
   había ningún punto donde invertirlos.

   Ahora los valores de acá son el modo DÍA, y el bloque «html.oscuro» del final es el único
   lugar donde se decide la noche. Los colores con significado —el verde de «pagado», el rojo
   de «vencido», el azul de las etiquetas— NO están acá: son pares fondo+texto que ya se leen
   bien en cualquier fondo, y meterlos en el juego los volvería grises. */
:root{
  --ui-fondo:#f5f5f5;    /* el fondo de la página */
  --ui-panel:#fff;       /* tarjetas y campos: lo que se despega del fondo */
  --ui-panel2:var(--marca-encima,#ffffff);   /* superficies secundarias */
  --ui-hondo:#f0f2f5;    /* zonas hundidas: listas, barras */
  --ui-linea:#e0e0e0;    /* bordes */
  --ui-linea2:var(--dia-fondo,#f5f5f5);   /* separadores finos */
  /* Los de texto NO son de gusto: son los que llegan a 4.5:1 contra el fondo más
     desfavorable del modo día (#f0f2f5). Los viejos #888 y #aaa daban 3.4:1 y 2.3:1 —
     nunca habían llegado, ni antes de tocar nada. Los títulos apuntan a 7:1. */
  --ui-titulo:var(--dia-titulo);
  --ui-texto:#333;       /* texto principal */
  --ui-texto2:#555;      /* texto secundario */
  --ui-tenue:#5f5f6b;    /* apoyos, ayudas — era #888 y daba 3.4:1 */
  --ui-tenue2:#6a6a76;   /* lo más apagado — era #aaa y daba 2.3:1 */
  --ui-acento:var(--marca); /* el morado, cuando hace de TEXTO */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--letra,'Segoe UI',-apple-system,Roboto,sans-serif);background:var(--ui-hondo);color:var(--ui-texto);font-size:var(--t-base,14px)}

/* Layout */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:230px;background:var(--noche-fondo);color:var(--marca-encima,#fff);display:flex;flex-direction:column;flex-shrink:0}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Sidebar */
.sidebar-header{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:36px;height:36px;background:var(--marca);border-radius:var(--radio,10px);display:flex;align-items:center;justify-content:center;font-size:var(--t-titulo,20px);flex-shrink:0}
.sidebar-logo h2{font-size:var(--t-titulo,15px);font-weight:var(--p-fuerte,700);color:var(--marca-encima,#fff)}
.sidebar-logo span{font-size:var(--t-micro,11px);color:rgba(255,255,255,.5);display:block}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 16px;min-height:45px;box-sizing:border-box;cursor:pointer;text-decoration:none;color:rgba(255,255,255,.6);font-size:var(--t-base,13.5px);transition:all .15s;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.07);color:var(--marca-encima,#fff)}
.nav-item.active{background:var(--marca-tenue);color:var(--marca);border-left-color:var(--marca)}
.nav-icon{font-size:var(--t-titulo,17px);width:22px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.wa-status-pill{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radio,8px);background:rgba(255,255,255,.05);font-size:var(--t-chico,12px);color:rgba(255,255,255,.7)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--estado-error-punto,#ef4444);flex-shrink:0}
.dot.connected{background:var(--estado-ok-punto)}
.dot.qr,.dot.reconnecting{background:var(--estado-alerta-punto,#f59e0b);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Header */
.header{background:var(--ui-panel);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-linea2);flex-shrink:0}
.header h1{font-size:var(--t-titulo,18px);font-weight:var(--p-medio,600);color:var(--ui-titulo)}
.header-right{display:flex;align-items:center;gap:10px}
.user-badge{font-size:var(--t-chico,12px);color:var(--ui-texto2);background:var(--ui-fondo);padding:5px 10px;border-radius:var(--radio-pastilla,20px)}

/* Content */
.content{flex:1;overflow-y:auto}
.page-body{padding:22px}

/* Buttons */
.btn{padding:8px 16px;border-radius:var(--radio,8px);border:none;cursor:pointer;font-size:var(--t-base,13.5px);font-weight:var(--p-medio,500);transition:all .15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--marca);color:var(--marca-encima,#fff)}
.btn-primary:hover:not(:disabled){background:var(--marca-fuerte)}
.btn-secondary{background:var(--ui-hondo);color:var(--ui-texto2)}
.btn-secondary:hover:not(:disabled){background:#e0e2e5}
.btn-danger{background:var(--estado-error-punto,#ef4444);color:var(--marca-encima,#fff)}
.btn-danger:hover:not(:disabled){background:var(--estado-error,#dc2626)}
.btn-outline{background:transparent;border:1px solid var(--ui-linea);color:var(--ui-texto2)}
.btn-outline:hover{background:var(--ui-fondo)}
.btn-sm{padding:5px 12px;font-size:var(--t-chico,12.5px)}
.btn-lg{padding:11px 22px;font-size:var(--t-titulo,15px)}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-bottom:22px}
.stat-card{background:var(--ui-panel);border-radius:var(--radio,12px);padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stat-icon-wrap{font-size:var(--t-cifra,22px);margin-bottom:8px}
.stat-value{font-size:var(--t-cifra,28px);font-weight:var(--p-fuerte,700);color:var(--ui-titulo);line-height:1}
.stat-label{font-size:var(--t-chico,12px);color:var(--ui-tenue);margin-top:4px}
.stat-sub{font-size:var(--t-micro,11px);color:var(--ui-tenue2);margin-top:2px}

/* Cards */
.card{background:var(--ui-panel);border-radius:var(--radio,12px);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card-header{padding:16px 20px;border-bottom:1px solid var(--ui-linea2);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:var(--t-titulo,15px);font-weight:var(--p-medio,600);color:var(--ui-titulo)}
.card-body{padding:16px 20px}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:10px 14px;background:var(--ui-panel2);font-size:var(--t-micro,11.5px);font-weight:var(--p-medio,600);color:var(--ui-tenue);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--ui-fondo)}
.table td{padding:11px 14px;border-bottom:1px solid var(--ui-fondo);font-size:var(--t-base,13.5px);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--ui-panel2)}

/* Badge */
.badge{padding:3px 8px;border-radius:var(--radio-pastilla,20px);font-size:var(--t-micro,11px);font-weight:var(--p-medio,600)}
.badge-green{background:var(--fondo-exito,#d1fae5);color:#065f46}
.badge-red{background:var(--fondo-error,#fee2e2);color:#991b1b}
.badge-blue{background:var(--fondo-info,#dbeafe);color:#1e40af}
.badge-gray{background:var(--ui-hondo);color:var(--ui-tenue)}
.badge-yellow{background:var(--fondo-aviso,#fef3c7);color:#92400e}
.badge-purple{background:#ede9fe;color:#5b21b6}

/* RAG Tabs */
.rag-tab-btn{padding:8px 14px;font-size:var(--t-chico,12px);font-weight:var(--p-medio,600);border:none;background:var(--ui-linea);color:var(--ui-tenue);border-radius:var(--radio,6px);cursor:pointer;transition:all .15s}
.rag-tab-btn:hover{background:#d1d5db;color:#374151}
.rag-tab-btn.active{background:#166534;color:var(--marca-encima,#fff)}
.rag-tab-content{animation:fadeIn .2s ease}
.rag-doc-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--ui-panel);border:1px solid var(--ui-linea);border-radius:var(--radio,6px);margin-bottom:6px}
.rag-doc-item:hover{border-color:var(--marca)}
.rag-doc-name{font-size:var(--t-base,13px);font-weight:var(--p-medio,500);color:#1f2937}
.rag-doc-badges{display:flex;gap:6px;align-items:center}
.rag-doc-badge{font-size:var(--t-micro,10px);padding:2px 6px;border-radius:var(--radio-chico,4px);font-weight:var(--p-medio,600)}
.rag-doc-badge.master{background:#fecaca;color:#991b1b}
.rag-doc-badge.auto{background:var(--fondo-info,#dbeafe);color:#1e40af}
.rag-doc-badge.product{background:var(--fondo-aviso,#fef3c7);color:#92400e}
.rag-doc-badge.funnel{background:var(--fondo-exito,#d1fae5);color:#065f46}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Forms */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:var(--t-base,13px);font-weight:var(--p-medio,500);color:var(--ui-texto2);margin-bottom:5px}
/* 🔴 CALENDARIO · los cuatro filtros salían con el texto cortado por arriba (Pablo, 05/10).
   `.form-control` pone 21 px de marco vertical (9+9 de relleno y 1,5+1,5 de borde) y estos
   cuatro traen `height:30px`/`32px` escrito en su etiqueta: a una línea de 12 px le quedaban 10.
   Va acotado por id porque bajarle el relleno a `.form-control` arreglaría el calendario y
   rompería los formularios de las otras veinte pantallas. `calendar.html` no tiene bloque
   <style> propio, así que este es el único lugar donde ponerlo sin tocar su marcado. */
#tTipo,#tAsesora,#tEstado2,#statusFilter{padding-top:4px;padding-bottom:4px;line-height:1.2}
/* 🔴 `line-height` EXPLÍCITO, y no es adorno (Pablo, 05/10). Sin él, un <select> toma el alto
   de línea que le pone el navegador, que no crece con la letra: con la escala 1.12 la letra pasó a
   15,12 px y los desplegables quedaron en 34 px cuando necesitaban 40 — el texto de la opción
   salía cortado por abajo en TODA la app.
   ⚠️ Y el `line-height` SOLO no alcanza: medido, Chrome lo computa como `normal` en un <select> y
      lo ignora. Lo que sí manda es `min-height`, en `em` para que crezca con la letra y no haya
      que volver acá cada vez que cambie la escala. 2.7em sobre 15,12 px da 40,8 px. */
.form-control{width:100%;padding:9px 12px;border:1.5px solid var(--ui-linea);border-radius:var(--radio,8px);font-size:var(--t-base,13.5px);line-height:1.35;min-height:2.7em;outline:none;transition:border .15s;background:var(--ui-panel);font-family:inherit}
.form-control:focus{border-color:var(--marca)}
textarea.form-control{resize:vertical;min-height:80px}
select.form-control{cursor:pointer}
.form-hint{font-size:var(--t-micro,11.5px);color:var(--ui-tenue);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Settings grid */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.settings-card{background:var(--ui-panel);border-radius:var(--radio,12px);padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.settings-card h3{font-size:var(--t-titulo,15px);font-weight:var(--p-medio,600);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--ui-linea2);color:var(--ui-titulo)}

/* Objective cards */
.obj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.obj-card{border:2px solid var(--ui-linea);border-radius:var(--radio,10px);padding:14px 10px;cursor:pointer;transition:all .15s;text-align:center;user-select:none}
.obj-card:hover{border-color:var(--marca);background:var(--marca-tenue-2)}
.obj-card.selected{border-color:var(--marca);background:var(--marca-tenue-2)}
.obj-emoji{font-size:var(--t-cifra,26px);margin-bottom:6px}
.obj-title{font-weight:var(--p-medio,600);font-size:var(--t-chico,12.5px);color:var(--ui-titulo)}
.obj-desc{font-size:var(--t-micro,11px);color:var(--ui-tenue);margin-top:3px;line-height:1.3}

/* WhatsApp connect */
.wa-connect-area{text-align:center;padding:16px 0}
.wa-status-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radio-pastilla,20px);font-size:var(--t-base,13px);font-weight:var(--p-medio,500);margin-bottom:14px}
.wa-status-badge.connected{background:var(--fondo-exito,#d1fae5);color:#065f46}
.wa-status-badge.disconnected{background:var(--fondo-error,#fee2e2);color:#991b1b}
.wa-status-badge.qr{background:var(--fondo-info,#dbeafe);color:#1e40af}
.wa-status-badge.reconnecting{background:var(--fondo-aviso,#fef3c7);color:#92400e}
.qr-wrap{margin:16px 0}
.qr-wrap img{width:200px;height:200px;border-radius:var(--radio,12px);border:6px solid var(--ui-panel);box-shadow:0 4px 20px rgba(0,0,0,.12)}
.qr-hint{font-size:var(--t-chico,12px);color:var(--ui-tenue);margin-top:8px}

/* Messages layout */
.msg-layout{display:flex;flex:1;overflow:hidden}
.contacts-panel{width:300px;background:var(--ui-panel);border-right:1px solid var(--ui-linea2);display:flex;flex-direction:column;flex-shrink:0}
.contacts-search{padding:12px;border-bottom:1px solid var(--ui-linea2)}
.contacts-search input{width:100%;padding:8px 12px;border:1.5px solid var(--ui-linea2);border-radius:var(--radio-pastilla,20px);font-size:var(--t-base,13px);outline:none}
.contacts-search input:focus{border-color:var(--marca)}
.contacts-list{flex:1;overflow-y:auto}
.contact-item{padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--ui-fondo);transition:background .1s}
.contact-item:hover{background:var(--ui-panel2)}
.contact-item.active{background:#e8f5e9}
.ci-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px}
.ci-name{font-weight:var(--p-medio,500);font-size:var(--t-base,13.5px);color:var(--ui-texto)}
.ci-time{font-size:var(--t-micro,11px);color:var(--ui-tenue2);white-space:nowrap}
.ci-preview{font-size:var(--t-chico,12px);color:var(--ui-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

/* Chat */
.chat-panel{flex:1;display:flex;flex-direction:column;background:var(--fondo-chat,#e5ddd5);overflow:hidden}
.chat-header{background:var(--ui-panel);padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ui-linea2);flex-shrink:0}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:var(--marca);display:flex;align-items:center;justify-content:center;color:var(--marca-encima,#fff);font-weight:var(--p-medio,600);font-size:var(--t-titulo,15px);flex-shrink:0}
.chat-contact-info h4{font-size:var(--t-base,14px);font-weight:var(--p-medio,600);color:var(--ui-texto)}
.chat-contact-info p{font-size:var(--t-chico,12px);color:var(--ui-tenue)}
/* CONTENEDOR PRINCIPAL DEL CHAT */
.chat-messages{flex:1;overflow-y:auto;padding:10px 5%;display:flex;flex-direction:column;gap:2px}
.msg-messages{flex:1;overflow-y:auto;padding:8px 5%;display:flex;flex-direction:column;gap:1px}

/* FILA DE MENSAJE */
.msg-row2{display:flex;width:100%;margin:1px 0}
.msg-row2.in{justify-content:flex-start}
.msg-row2.out{justify-content:flex-end}

/* WRAPPER - limitar ancho */
.msg-wrapper{max-width:65%;display:flex;flex-direction:column}
.msg-row2.in .msg-wrapper{align-items:flex-start}
.msg-row2.out .msg-wrapper{align-items:flex-end}

/* BURBUJA */
.bubble2{padding:4px 9px;border-radius:var(--radio,7.5px);font-size:var(--t-base,14px);line-height:1.4;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;max-width:100%;box-shadow:0 1px 0.5px rgba(0,0,0,0.13)}

/* Cliente - izquierda - blanco */
.msg-row2.in .bubble2{background:var(--ui-panel);border-radius:0 7.5px 7.5px 7.5px;color:var(--ui-texto)}

/* Nuestros mensajes - derecha - verde WhatsApp */
.msg-row2.out .bubble2{background:#d9fdd3;border-radius:7.5px 0 7.5px 7.5px;color:var(--ui-texto)}

/* IMÁGENES DENTRO DE BURBUJAS */
.bubble2 img{max-width:100%;max-height:280px;border-radius:var(--radio,6px);display:block;cursor:zoom-in}

/* HORA Y META */
.bubble2-meta{display:flex;justify-content:flex-end;margin-top:1px;padding:0}
.bubble2-time{font-size:var(--t-micro,11px);color:#667781}

/* SENDER LABEL */
.bubble2-sender{font-size:var(--t-micro,11px);color:#667781;margin-bottom:1px;line-height:1.2}

/* TEXTO */
.bubble2-text{color:var(--ui-texto);word-break:break-word;margin:0;padding:0;line-height:1.4}

/* SEPARADOR DE FECHA */
.date-separator{display:flex;justify-content:center;margin:8px 0}
.date-separator span{background:var(--ui-linea2);padding:4px 12px;border-radius:var(--radio,8px);font-size:var(--t-chico,12px);color:var(--ui-texto2)}

/* EVENTOS DEL SISTEMA */
.msg-event{align-self:center;background:var(--ui-linea2);color:var(--ui-texto2);font-size:var(--t-chico,12px);padding:4px 14px;border-radius:var(--radio,8px);margin:4px auto;text-align:center;max-width:85%}
.msg-event2{display:flex;justify-content:center;margin:2px auto;max-width:85%}
.msg-event2 span{background:var(--ui-linea2);color:var(--ui-texto2);font-size:var(--t-chico,12px);padding:4px 12px;border-radius:var(--radio,8px);text-align:center}

/* Tags de remitente */
.ai-tag{background:#0d6efd;color:var(--marca-encima,#fff);font-size:var(--t-micro,9.5px);padding:1px 5px;border-radius:var(--radio-chico,3px);font-weight:var(--p-medio,600)}
.human-tag{background:#6c757d;color:var(--marca-encima,#fff);font-size:var(--t-micro,9.5px);padding:1px 5px;border-radius:var(--radio-chico,3px);font-weight:var(--p-medio,600)}
.owner-tag{font-size:var(--t-micro,11px);color:var(--ui-texto2);font-weight:var(--p-medio,600)}

.chat-input-area{background:var(--ui-panel);padding:12px 14px;display:flex;gap:8px;align-items:center;flex-shrink:0;border-top:1px solid var(--ui-linea2)}
.chat-input-area input{flex:1;padding:9px 16px;border:1.5px solid var(--ui-linea);border-radius:var(--radio-pastilla,22px);font-size:var(--t-base,13.5px);outline:none;font-family:inherit}
.chat-input-area input:focus{border-color:var(--marca)}
.no-chat{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--ui-tenue2);text-align:center;padding:40px}
.no-chat-emoji{font-size:var(--t-cifra,56px);margin-bottom:16px;opacity:.4}
.no-chat h3{font-size:var(--t-titulo,17px);color:var(--ui-tenue2);font-weight:var(--p-medio,500)}
.no-chat p{font-size:var(--t-base,13px);margin-top:6px}

/* Login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0c29,#302b63,var(--noche-panel,#22223d))}
.login-card{background:var(--ui-panel);border-radius:var(--radio,16px);padding:38px 36px;width:100%;max-width:370px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-logo{text-align:center;margin-bottom:28px}
.logo-circle{width:62px;height:62px;background:var(--marca);border-radius:var(--radio,16px);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-cifra,30px);margin-bottom:12px}
.login-logo h1{font-size:var(--t-cifra,22px);font-weight:var(--p-fuerte,700);color:var(--ui-titulo)}
.login-logo p{font-size:var(--t-base,13px);color:var(--ui-tenue);margin-top:3px}
.login-error{background:var(--fondo-error,#fee2e2);color:#991b1b;padding:10px 13px;border-radius:var(--radio,8px);font-size:var(--t-base,13px);margin-bottom:14px;display:none}

/* Alert */
.alert{padding:11px 14px;border-radius:var(--radio,8px);font-size:var(--t-base,13px);margin-bottom:14px}
.alert-success{background:var(--fondo-exito,#d1fae5);color:#065f46}
.alert-danger{background:var(--fondo-error,#fee2e2);color:#991b1b}
.alert-info{background:var(--fondo-info,#dbeafe);color:#1e40af}
.alert-warning{background:var(--fondo-aviso,#fef3c7);color:#92400e}

/* Scrollbar */





/* Provider cards */
.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.provider-card{border:2px solid var(--ui-linea);border-radius:var(--radio,10px);padding:14px 10px;cursor:pointer;transition:all .15s;text-align:center;user-select:none;position:relative}
.provider-card:hover{border-color:var(--marca);background:var(--ui-panel2)}
.provider-card.selected{border-color:var(--marca);background:var(--ui-linea2)}
.provider-logo{font-size:var(--t-cifra,22px);margin-bottom:4px}
.provider-name{font-weight:var(--p-medio,600);font-size:var(--t-base,13px);color:var(--ui-titulo)}
.provider-sub{font-size:var(--t-micro,11px);color:var(--ui-tenue);margin-top:1px}
.provider-model{font-size:var(--t-micro,10px);color:var(--ui-tenue2);margin-top:3px;font-family:monospace;background:var(--ui-fondo);padding:2px 5px;border-radius:var(--radio-chico,3px);display:inline-block}
/* Active badge on API key labels */
.key-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.active-badge{background:var(--marca);color:var(--marca-encima,#fff);font-size:var(--t-micro,10px);padding:1px 7px;border-radius:var(--radio,10px);margin-left:6px;font-weight:var(--p-medio,600);vertical-align:middle}

/* Toast animation */
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* Tabs */
.tab-nav{display:flex;gap:4px;border-bottom:2px solid var(--ui-linea2);margin-bottom:22px}
.tab-btn{padding:10px 20px;border:none;background:none;cursor:pointer;font-size:var(--t-base,13.5px);font-weight:var(--p-medio,500);color:var(--ui-tenue);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;border-radius:6px 6px 0 0}
.tab-btn:hover{color:var(--ui-titulo);background:rgba(0,0,0,.03)}
.tab-btn.active{color:var(--marca);border-bottom-color:var(--marca);background:var(--marca-tenue-2)}

/* File upload */
.upload-zone{border:2px dashed var(--ui-linea);border-radius:var(--radio,12px);padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--ui-panel2)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--marca);background:var(--marca-tenue-2)}
.upload-zone-icon{font-size:var(--t-cifra,36px);margin-bottom:8px}
.upload-zone-title{font-weight:var(--p-medio,600);color:var(--ui-texto2);font-size:var(--t-base,14px);margin-bottom:4px}
.upload-zone-hint{font-size:var(--t-chico,12px);color:var(--ui-tenue)}
.file-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.file-item{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--dia-fondo,#f5f5f5);border-radius:var(--radio,10px);border:1px solid var(--ui-fondo)}
.file-item-icon{font-size:var(--t-cifra,26px);flex-shrink:0;width:32px;text-align:center}
.file-item-info{flex:1;min-width:0}
.file-item-name{font-size:var(--t-base,13.5px);font-weight:var(--p-medio,500);color:var(--ui-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-item-meta{font-size:var(--t-micro,11.5px);color:var(--ui-tenue);margin-top:2px}
.file-item-chars{font-size:var(--t-micro,11px);color:var(--marca);margin-top:1px}
.upload-progress{font-size:var(--t-base,13px);color:var(--ui-texto2);margin-top:10px;text-align:center;display:none}

/* Contact memory badges */
.memory-badge{display:inline-flex;align-items:center;gap:4px;background:var(--ui-linea2);color:var(--marca);padding:2px 8px;border-radius:var(--radio,10px);font-size:var(--t-micro,11px);font-weight:var(--p-medio,500);margin-right:4px;margin-top:2px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--ui-panel);border-radius:var(--radio,14px);box-shadow:0 20px 60px rgba(0,0,0,.25);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--ui-linea2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-header h3{font-size:var(--t-titulo,16px);font-weight:var(--p-medio,600);color:var(--ui-titulo)}
.modal-close{background:none;border:none;font-size:var(--t-titulo,20px);cursor:pointer;color:var(--ui-tenue2);padding:0 4px;line-height:1}
.modal-close:hover{color:var(--ui-texto)}
.modal-body{overflow-y:auto;padding:20px;flex:1}
.modal-footer{padding:14px 20px;border-top:1px solid var(--ui-linea2);display:flex;justify-content:flex-end;gap:10px;flex-shrink:0}

/* Funnels grid */
.funnels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}

/* Funnel card */
.funnel-card{background:var(--ui-panel);border-radius:var(--radio,12px);padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.08);border:1.5px solid var(--ui-linea2);transition:box-shadow .15s}
.funnel-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.funnel-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.funnel-card-badges{display:flex;flex-wrap:wrap;gap:4px}
.funnel-card-actions{display:flex;gap:6px;flex-shrink:0;margin-left:8px}
.funnel-card-name{font-size:var(--t-titulo,15px);font-weight:var(--p-medio,600);color:var(--ui-titulo);margin-bottom:4px}
.funnel-card-product{font-size:var(--t-chico,12.5px);color:var(--ui-texto2);margin-bottom:8px}
.funnel-keywords{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.kw-tag{background:var(--ui-linea2);color:var(--marca);font-size:var(--t-micro,11px);padding:2px 7px;border-radius:var(--radio,10px);font-weight:var(--p-medio,500)}
.funnel-card-stats{display:flex;gap:14px;font-size:var(--t-chico,12px);color:var(--ui-tenue);border-top:1px solid var(--ui-fondo);padding-top:10px;margin-top:8px}

/* Personality selector */
.personality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.personality-card{border:2px solid var(--ui-linea);border-radius:var(--radio,10px);padding:12px 8px;cursor:pointer;transition:all .15s;text-align:center;user-select:none;display:block}
.personality-card:hover{border-color:var(--marca);background:var(--ui-panel2)}
.personality-card.selected{border-color:var(--marca);background:var(--ui-linea2)}
.personality-emoji{font-size:var(--t-cifra,22px);margin-bottom:4px}
.personality-name{font-weight:var(--p-medio,600);font-size:var(--t-chico,12.5px);color:var(--ui-titulo)}
.personality-desc{font-size:var(--t-micro,11px);color:var(--ui-tenue);margin-top:2px}

/* Toggle switch */
.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0;display:inline-block}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--ui-linea);border-radius:var(--radio-pastilla,24px);transition:.2s}
.toggle-slider:before{position:absolute;content:"";width:18px;height:18px;left:3px;bottom:3px;background:var(--ui-panel);border-radius:50%;transition:.2s}
.toggle-switch input:checked + .toggle-slider{background:var(--marca)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px)}

/* Follow-up rows */
.followup-row{border:1.5px solid var(--ui-linea2);border-radius:var(--radio,10px);padding:14px;margin-bottom:10px;background:var(--ui-panel2)}
.followup-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.followup-num{font-size:var(--t-chico,12.5px);font-weight:var(--p-medio,600);color:var(--ui-texto2)}
.btn-remove-fu{background:none;border:none;cursor:pointer;color:var(--ui-tenue2);font-size:var(--t-titulo,15px);padding:0 4px;line-height:1}
.btn-remove-fu:hover{color:var(--estado-error-punto,#ef4444)}

/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:6px;padding:4px 0}
.bar-group{display:flex;flex-direction:column;align-items:center;flex:1;min-width:32px}
.bar-val{font-size:var(--t-micro,10px);color:var(--ui-texto2);margin-bottom:2px;min-height:14px;text-align:center}
.bar-col{height:120px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.bar-fill{width:80%;min-width:24px;background:linear-gradient(to top,var(--marca-fuerte),var(--marca));border-radius:4px 4px 0 0;transition:height .4s}
.bar-day{font-size:var(--t-micro,10px);color:var(--ui-tenue2);margin-top:6px;white-space:nowrap;text-align:center}

/* Responsive tweaks */
@media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:1fr}.provider-grid{grid-template-columns:1fr}.personality-grid{grid-template-columns:1fr 1fr}}

/* Labels */
.ci-labels{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.label-chip-mini{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.label-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radio,10px);font-size:var(--t-micro,11.5px);font-weight:var(--p-medio,500)}
.label-picker{position:absolute;top:calc(100% + 6px);right:0;width:260px;background:var(--ui-panel);border:1px solid var(--ui-linea2);border-radius:var(--radio,10px);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:500}
.label-picker-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--ui-linea2);font-size:var(--t-base,13px);font-weight:var(--p-medio,600);color:var(--ui-texto)}
.label-picker-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:var(--t-base,13px);transition:background .1s}
.label-picker-item:hover{background:var(--ui-panel2)}
.label-picker-item.selected{background:var(--marca-tenue-2)}
.label-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* Chat header actions */
.chat-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.ai-conv-toggle{display:flex;align-items:center;gap:6px}

/* WA option cards */
.wa-option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.wa-option-card{border:2px solid var(--ui-linea);border-radius:var(--radio,10px);padding:12px 8px;cursor:pointer;transition:all .15s;text-align:center;user-select:none;display:block}
.wa-option-card:hover{border-color:var(--marca);background:var(--marca-tenue-2)}
.wa-option-card.selected{border-color:var(--marca);background:var(--marca-tenue-2)}
.wa-option-icon{font-size:var(--t-cifra,22px);margin-bottom:4px}
.wa-option-title{font-weight:var(--p-medio,600);font-size:var(--t-chico,12.5px);color:var(--ui-titulo)}
.wa-option-desc{font-size:var(--t-micro,11px);color:var(--ui-tenue);margin-top:2px;line-height:1.3}

/* Products (Catalog) */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.product-card{background:var(--ui-panel);border-radius:var(--radio,12px);box-shadow:0 1px 3px rgba(0,0,0,.08);border:1.5px solid var(--ui-linea2);overflow:hidden;transition:box-shadow .15s;position:relative}
.product-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.product-card-body{padding:14px 16px}
.product-card-name{font-size:var(--t-titulo,15px);font-weight:var(--p-medio,600);color:var(--ui-titulo);margin-bottom:4px}
.product-card-desc{font-size:var(--t-chico,12.5px);color:var(--ui-tenue);line-height:1.45;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card-meta{display:flex;gap:10px;font-size:var(--t-micro,11.5px);color:var(--ui-tenue2);border-top:1px solid var(--ui-fondo);padding-top:10px;flex-wrap:wrap}
.product-card-actions{display:flex;gap:6px;margin-top:10px}

/* Catalog modal tabs */
.catalog-tab-nav{display:flex;border-bottom:1px solid var(--ui-linea2);margin-bottom:0;gap:2px;flex-wrap:wrap}
.catalog-tab-btn{padding:8px 14px;border:none;background:none;cursor:pointer;font-size:var(--t-chico,12.5px);font-weight:var(--p-medio,500);color:var(--ui-tenue);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;border-radius:4px 4px 0 0}
.catalog-tab-btn:hover{color:var(--ui-titulo);background:var(--ui-fondo)}
.catalog-tab-btn.active{color:var(--marca);border-bottom-color:var(--marca);background:var(--marca-tenue-2)}

/* Media grid */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:8px}
.media-item{position:relative;border-radius:var(--radio,8px);overflow:hidden;background:var(--ui-fondo);aspect-ratio:1}
.media-item img,.media-item video{width:100%;height:100%;object-fit:cover;display:block}
.media-item-remove{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:var(--marca-encima,#fff);border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:var(--t-micro,11px);display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.media-item-remove:hover{background:rgba(239,68,68,.85)}
.media-upload-btn{border:2px dashed var(--ui-linea);border-radius:var(--radio,8px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;background:var(--ui-panel2);font-size:var(--t-micro,11px);color:var(--ui-tenue2);text-align:center;padding:8px;user-select:none}
.media-upload-btn:hover{border-color:var(--marca);background:var(--marca-tenue-2);color:var(--marca)}
.media-upload-icon{font-size:var(--t-cifra,22px);margin-bottom:4px}

/* Catalog package/faq rows */
.pkg-row,.faq-row{border:1.5px solid var(--ui-linea2);border-radius:var(--radio,10px);padding:14px;margin-bottom:10px;background:var(--ui-panel2)}
.pkg-row-header,.faq-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* Followup multimedia upload area */
.fu-upload-area{border:2px dashed var(--ui-linea);border-radius:var(--radio,8px);padding:14px 12px;text-align:center;cursor:pointer;transition:all .15s;background:var(--ui-panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:var(--t-chico,12.5px);color:var(--ui-tenue);min-height:60px}
.fu-upload-area:hover{border-color:var(--marca);background:var(--ui-fondo);color:var(--marca)}
.fu-upload-icon{font-size:var(--t-titulo,20px);line-height:1}
.fu-section{margin-top:2px}

/* Package photo thumbnail */
.pkg-photo-wrap{width:72px;height:72px;border:2px dashed var(--ui-linea);border-radius:var(--radio,8px);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:var(--ui-panel2);transition:border-color .15s;flex-shrink:0}
.pkg-photo-wrap:hover{border-color:var(--marca);background:var(--ui-fondo)}

/* Calendar */
.cal-grid-header{display:grid;grid-template-columns:repeat(7,1fr);background:var(--ui-panel2);border-bottom:1px solid var(--ui-linea2)}
.cal-grid-header>div{padding:8px 4px;text-align:center;font-size:var(--t-micro,11.5px);font-weight:var(--p-medio,600);color:var(--ui-tenue);letter-spacing:.02em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--ui-linea2)}
.cal-cell{border-right:1px solid var(--ui-linea2);border-bottom:1px solid var(--ui-linea2);min-height:90px;padding:4px;cursor:pointer;transition:background .12s;vertical-align:top}
.cal-cell:hover{background:#f5fff8}
.cal-cell.cal-empty{background:var(--ui-panel2);cursor:default}
.cal-cell.cal-empty:hover{background:var(--ui-panel2)}
.cal-cell.cal-today{background:var(--marca-tenue-2)}
.cal-cell.cal-selected{background:var(--marca-tenue);box-shadow:inset 0 0 0 2px var(--marca)}
.cal-day-num{font-size:var(--t-chico,12px);font-weight:var(--p-medio,600);color:var(--ui-texto2);margin-bottom:3px;line-height:1}
.cal-cell.cal-today .cal-day-num{color:var(--marca)}
.cal-appt-chip{font-size:var(--t-micro,10.5px);border-radius:var(--radio-chico,4px);padding:1px 5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-chip-pending{background:#fef9c3;color:#92400e}
.cal-chip-confirmed{background:var(--fondo-exito-claro,#dcfce7);color:#166534}
.cal-chip-cancelled{background:var(--ui-hondo);color:var(--ui-tenue)}
.cal-chip-completed{background:var(--fondo-info,#dbeafe);color:#1e40af}

/* Sales page */
.sales-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.sales-stat-card{background:var(--ui-panel);border-radius:var(--radio,10px);padding:14px 18px;box-shadow:0 1px 3px rgba(0,0,0,.07);border:1.5px solid var(--ui-linea2);text-align:center}
.sales-stat-val{font-size:var(--t-cifra,22px);font-weight:var(--p-fuerte,700);color:var(--ui-titulo);line-height:1.1;margin-bottom:2px}
.sales-stat-lbl{font-size:var(--t-micro,11.5px);color:var(--ui-tenue)}

/* Agents page */
.agent-card{background:var(--ui-panel);border:1.5px solid var(--ui-linea2);border-radius:var(--radio,12px);padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.07);transition:box-shadow .15s;display:flex;flex-direction:column;gap:8px}
.agent-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.agent-card-name{font-size:var(--t-titulo,15px);font-weight:var(--p-fuerte,700);color:var(--ui-titulo)}
.agent-card-role{font-size:var(--t-chico,12px);color:var(--marca);font-weight:var(--p-medio,600);margin-bottom:2px}
.agent-card-desc{font-size:var(--t-chico,12px);color:var(--ui-tenue);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.agent-card-meta{font-size:var(--t-micro,11.5px);color:var(--ui-tenue2)}
.agent-card-actions{display:flex;gap:6px;margin-top:4px}
.agents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}

/* Contacts page */
.contact-list-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--ui-fondo);cursor:pointer;transition:background .1s}
.contact-list-item:hover{background:var(--ui-panel2)}
.contact-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--marca-fuerte),var(--marca));display:flex;align-items:center;justify-content:center;color:var(--marca-encima,#fff);font-size:var(--t-titulo,15px);font-weight:var(--p-fuerte,700);flex-shrink:0}
.contact-info{flex:1;min-width:0}
.contact-name{font-size:var(--t-base,13.5px);font-weight:var(--p-medio,600);color:var(--ui-titulo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-meta{font-size:var(--t-micro,11.5px);color:var(--ui-tenue2)}
.contact-labels{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.contact-label-chip{font-size:var(--t-micro,10.5px);padding:1px 7px;border-radius:var(--radio-pastilla,99px);font-weight:var(--p-medio,600)}
.profile-section-title{font-size:var(--t-chico,12px);font-weight:var(--p-fuerte,700);color:var(--ui-tenue);text-transform:uppercase;letter-spacing:.05em;margin:12px 0 6px}

/* ══════════════════════════════════════════════════════════════════════════════
   CONFIGURACIÓN — diseño de la página (SOLO presentación)
   Todo scopeado a .settings-page (clase adicional en el .page-body de settings.html)
   para no afectar ninguna otra página del panel. Cero cambios de ids/JS/estructura.
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1. Contenedor centrado: los inputs dejan de estirarse de borde a borde */
.settings-page{max-width:1140px;margin:0 auto}

/* 3. Tarjetas con presencia: aire, borde sutil + sombra suave, separación clara */
.settings-page .settings-grid{grid-template-columns:1fr;gap:20px}
.settings-page .settings-card{padding:26px 28px;border:1px solid var(--ui-hondo);border-radius:var(--radio,14px);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.045)}

/* 4. Jerarquía tipográfica */
.settings-page .settings-card h3{font-size:var(--t-titulo,16px);font-weight:var(--p-fuerte,650);letter-spacing:-.01em;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--dia-fondo,#f5f5f5)}
.settings-page .form-label{font-size:var(--t-chico,12.5px);font-weight:var(--p-medio,500);color:var(--ui-tenue);margin-bottom:6px}
.settings-page .form-hint{font-size:var(--t-micro,11px);color:var(--ui-tenue);line-height:1.5;margin-top:5px}
.settings-page .form-group{margin-bottom:18px}

/* 5. Inputs: altura cómoda, borde suave, foco con el verde de marca */
.settings-page .form-control{padding:10px 13px;border:1.5px solid var(--ui-linea);border-radius:var(--radio,9px);
  font-size:var(--t-base,13.5px);transition:border-color .15s,box-shadow .15s}
.settings-page .form-control:hover:not(:focus){border-color:#d8dbe0}
.settings-page .form-control:focus{border-color:var(--marca);box-shadow:0 0 0 3px rgba(37,211,102,.13)}
.settings-page textarea.form-control{line-height:1.55;min-height:74px;resize:vertical}
.settings-page select.form-control{cursor:pointer}

/* 7. Botones de guardar: a la derecha de su tarjeta */
.settings-page .settings-card > button.btn,
.settings-page .settings-card > form > button.btn{display:flex;width:fit-content;margin-left:auto}
.settings-page .settings-card > button.btn{margin-top:4px}
.settings-page .btn-primary{box-shadow:0 1px 2px rgba(37,211,102,.25)}
.settings-page .btn-primary:hover:not(:disabled){box-shadow:0 3px 10px rgba(18,140,126,.28)}

/* 2. Grid de 2 columnas para los campos cortos del formulario de empresa.
   Va detrás de @supports :has() → si el navegador no lo soporta, el formulario
   queda EXACTAMENTE como antes (una columna) en vez de romperse. */
@supports selector(:has(*)){
  .settings-page #companyForm{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
  /* campos largos y filas agrupadas → ancho completo */
  .settings-page #companyForm > .form-group:has(textarea),
  .settings-page #companyForm > .form-row,
  .settings-page #companyForm > button{grid-column:1/-1}
  /* una .form-row con 3 campos (redes) se reparte en 3 columnas */
  .settings-page .form-row:has(> .form-group:nth-child(3)){grid-template-columns:repeat(3,1fr)}
}

/* 6. Pestañas superiores con más presencia */
.settings-page .tab-nav{gap:6px;border-bottom-width:1px;border-bottom-color:var(--ui-hondo);margin-bottom:26px}
.settings-page .tab-btn{padding:11px 20px;font-size:var(--t-base,14px);font-weight:var(--p-medio,550);border-radius:9px 9px 0 0;
  border-bottom-width:2.5px;margin-bottom:-1px}
.settings-page .tab-btn:hover{background:rgba(37,211,102,.055);color:var(--marca-fuerte)}
.settings-page .tab-btn.active{background:var(--fondo-seleccion,rgba(37,211,102,.09));font-weight:var(--p-fuerte,650)}

/* Responsive: una columna en pantallas chicas */
@media(max-width:900px){
  .settings-page{max-width:none}
  .settings-page .settings-card{padding:20px 18px}
  .settings-page .tab-nav{overflow-x:auto;gap:2px}
  .settings-page .tab-btn{padding:10px 14px;font-size:var(--t-base,13px);white-space:nowrap}
  @supports selector(:has(*)){
    .settings-page #companyForm{grid-template-columns:1fr}
    .settings-page .form-row:has(> .form-group:nth-child(3)){grid-template-columns:1fr}
  }
}

/* ── Configuración (2ª pasada): que NINGÚN campo se estire, en ninguna pestaña ──
   La 1ª pasada solo tocó #companyForm; en Asistente/Avanzado los campos seguían a
   ~1038px y apilados. Se acota el ancho de cada campo a una medida cómoda de lectura
   y las 4 API keys pasan a 2 columnas. Los campos con max-width inline (zona horaria,
   teléfono del admin, embudo de retención) mandan ellos: el inline gana. */
.settings-page input.form-control,
.settings-page select.form-control{max-width:560px}
.settings-page textarea.form-control{max-width:880px}
/* las 4 API keys: 2×2 en vez de una columna de 1038px */
.settings-page .api-keys-section{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.settings-page .api-keys-section .form-group{min-width:0}
.settings-page .api-keys-section input.form-control{max-width:none}
/* en el grid de 2 columnas del formulario de empresa el ancho lo pone la columna */
.settings-page #companyForm input.form-control,
.settings-page #companyForm select.form-control{max-width:none}
.settings-page #companyForm .form-row input.form-control{max-width:none}

@media(max-width:900px){
  .settings-page input.form-control,
  .settings-page select.form-control,
  .settings-page textarea.form-control{max-width:none}
  .settings-page .api-keys-section{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONFIGURACIÓN v2 — layout de 2 COLUMNAS tipo dashboard (solo presentación)
   Las tarjetas van dentro de un contenedor por columna (.cfg-col, flex vertical):
   así CADA columna empaqueta sus tarjetas. Sin wrappers, el grid estiraba la fila a
   la tarjeta más alta y la columna angosta quedaba con un hueco de ~1000px (medido).
   ══════════════════════════════════════════════════════════════════════════════ */

/* 3. contenedor más generoso para que dos columnas respiren */
.settings-page{max-width:1400px}

/* 1+2. dos columnas: ancha ~60% / angosta ~37% · align-items:start = altura propia */
.settings-page .settings-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.settings-page .cfg-col{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ── 08/10 · LOS TÍTULOS LLEVAN ÍCONO DE LÍNEA, NO EMOJI (Pablo) ───────────────────────────────
   Un emoji trae su propia paleta —la pone el sistema operativo— así que los dieciocho títulos de
   Configuración tenían dieciocho colores que nadie eligió, distintos en Windows, Android y iPhone.
   Los íconos de `NU_ICONOS` van en `currentColor`: toman el color del título y se ven igual de día,
   de noche y a cualquier escala de letra.
   ⚠️ `vertical-align` no alcanza con un svg de 17px dentro de un h3 de 17px: por eso el h3 es flex.
      Y `flex:0 0 auto` evita que el ícono se achique cuando el título ocupa dos renglones. */
.settings-page .settings-card h3{display:flex;align-items:center;gap:8px}
.settings-page .nu-ico-tit{display:inline-flex;align-items:center;flex:0 0 auto;color:var(--ui-tenue)}
.settings-page .nu-ico-tit .nu-ico{display:block}
/* La caja de «Instrucciones del WhatsApp principal», antes pintada con tres hexadecimales
   (#f0f8ff, #3b82f6, #1e40af) que no tenían valor de modo noche: quedaba celeste con letra azul
   marino sobre una tarjeta oscura. Ahora sale de los mismos tokens que el resto. */
.settings-page .cfg-caja{background:var(--ui-panel2,#f7f8fa);border:1px solid var(--ui-linea,#e5e7eb);
  border-radius:var(--radio,12px);padding:18px 20px;margin-bottom:18px}

/* 4. título + subtítulo gris debajo (sin línea divisoria, como la referencia) */
.settings-page .settings-card h3{border-bottom:none;padding-bottom:0;margin-bottom:5px}
.settings-page .cfg-sub{margin:0 0 18px;font-size:var(--t-chico,12.5px);color:var(--ui-tenue);line-height:1.5}
.settings-page .settings-card > h3 + p{font-size:var(--t-chico,12.5px) !important;color:var(--ui-tenue) !important;line-height:1.5}

/* 6. tarjetas blancas bien despegadas del fondo gris del body (#f0f2f5) */
.settings-page .settings-card{background:var(--ui-panel);border-color:#e7e9ee;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px rgba(16,24,40,.05)}

/* 5. tarjeta angosta → los campos se apilan (1 columna, incluido teléfono/dirección) */
.settings-page #companyForm{grid-template-columns:1fr}
.settings-page .form-row,
.settings-page .form-row:has(> .form-group:nth-child(3)){grid-template-columns:1fr}
/* excepción: la tarjeta a ancho completo (RAG) sí puede usar pares */
.settings-page .settings-card[style*="1/-1"] .form-row{grid-template-columns:1fr 1fr}

/* 7. por debajo de 1100px: una sola columna (los wrappers se apilan solos) */
/* El corte mira el VIEWPORT, pero el sidebar se come 230px: a 1330px de ventana el
   ancho ÚTIL cruza los ~1100px pedidos. Por debajo de eso, una sola columna (dos
   columnas por debajo daban 366px de ancho: los botones de WhatsApp se partían). */
@media(max-width:1330px){
  .settings-page{max-width:none}
  .settings-page .settings-grid{grid-template-columns:1fr}
  .settings-page .cfg-col{gap:20px}
}

/* ── LA NOCHE — la ÚNICA definición para las once pantallas de style.css ─────────────────
   No hay ni un color escrito a mano acá: todo sale de la paleta de nunio.css, la misma que
   usan el Dashboard, Costos, Números e Integraciones. Por eso el fondo es idéntico en las
   quince: si mañana cambia --noche-fondo, cambian todas a la vez.
   Se engancha en <html> y no en <body> porque tema.js corre en el <head>, cuando el <body>
   todavía no existe: así la pantalla ya nace oscura y no hay fogonazo blanco. */
html.oscuro{
  --ui-fondo:var(--noche-fondo);
  --ui-panel:var(--noche-panel);
  --ui-panel2:var(--noche-panel2);
  --ui-hondo:var(--noche-hondo);
  --ui-linea:var(--noche-linea);
  --ui-linea2:var(--noche-sep);
  /* De noche el título tiene que ser CLARO. Antes heredaba el azul de la marca, que es
     exactamente el color del fondo: se volvía invisible. */
  --ui-titulo:var(--noche-titulo);
  --ui-texto:var(--noche-texto);
  --ui-texto2:var(--noche-texto2);
  --ui-tenue:var(--noche-tenue);
  --ui-tenue2:var(--noche-tenue2);
  --ui-acento:var(--noche-acento);
}
html.oscuro body{background:var(--ui-fondo);color:var(--ui-texto)}
/* Los campos son el punto ciego: muchos navegadores NO les heredan el color del texto, así
   que sin esto quedaría texto casi negro sobre un campo oscuro. */
html.oscuro input,html.oscuro textarea,html.oscuro select{background:var(--ui-panel2);color:var(--ui-texto);border-color:var(--ui-linea)}
html.oscuro input::placeholder,html.oscuro textarea::placeholder{color:var(--ui-tenue2)}



/* ── CONTRASTE — las zonas que no pueden salir de la paleta ──────────────────────────
   La barra lateral es azul oscuro EN LOS DOS MODOS: su texto tiene que ser claro
   siempre. El botón «Cerrar sesión» heredaba el gris de texto secundario y de día daba
   2.29:1 sobre el azul —ilegible, y venía de antes de tocar la paleta—.
   Y un <a> sin clase se quedaba con el azul de fábrica del navegador (#0000ee), que
   sobre una tarjeta oscura da 1.64:1. */
.sidebar .btn, .sidebar button{color:var(--marca-encima,#fff);border-color:rgba(255,255,255,.28)}
.sidebar .btn:hover, .sidebar button:hover{background:rgba(255,255,255,.10);color:var(--marca-encima,#fff)}
.main a:not([class]), .settings-card a:not([class]), .cfg-sub a{color:var(--ui-acento)}
/* El morado de marca como TEXTO sobre fondo oscuro daba 2.4:1: acá pasa por --ui-acento,
   que de noche es un morado claro y de día sigue siendo el de la marca. */
/* 🔴 `.rag-tab-btn.active` SALIÓ de esta lista el 05/10. Esa pastilla va RELLENA de verde
   oscuro (regla de arriba) y el acento encima daba azul sobre verde: ilegible. Las otras dos
   no llevan relleno, así que el acento sí se lee. Una pastilla rellena contrasta con SU
   relleno, no con el fondo de la página. */
.tab-btn.active, .msg-tab.active{color:var(--ui-acento)}