/* =====================================================================
   Páginas de configuración (hub /configuracion + índice CRM).
   Se carga GLOBALMENTE en el <head> a propósito: con hx-boost, htmx solo
   reemplaza #main-content y NO recarga el <head>; además, al volver
   (history restore) no re-inyecta los <style> de la página. Si estos
   estilos vivieran en {% block extra_head %} o inline, se perderían al
   navegar/volver. Aquí, al estar en una hoja global permanente, aplican
   siempre.
   ===================================================================== */

/* ---- Hub: tenant/settings.html ---- */
.cfg-intro { font-size:.92rem; color:var(--text-secondary); margin:0 0 1.3rem; line-height:1.55; }

.cfg-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:1.4rem; flex-wrap:wrap; }
.cfg-tab {
    padding:9px 16px; font-size:14px; font-weight:500; color:var(--text-secondary);
    background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
    margin-bottom:-1px; font-family:inherit;
}
.cfg-tab:hover { color:var(--text); }
.cfg-tab.active { color:var(--primary,#7E68DB); border-bottom-color:var(--primary,#7E68DB); }

.cfg-panel { display:none; }
.cfg-panel.active { display:block; }

/* ---- Tarjetas (compartidas por hub e índice) ---- */
.config-card {
    border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.2rem;
    margin-bottom:1rem; transition:border-color .15s, box-shadow .15s; background:var(--bg-card,#fff);
}
.config-card:hover { border-color:rgba(126,104,219,.35); box-shadow:0 1px 3px rgba(15,23,42,.04); }
.config-card-header { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.config-card-icon {
    width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center;
    justify-content:center; flex-shrink:0; font-size:16px;
}
.config-card-title { font-weight:500; font-size:15px; color:var(--text); margin:0; }
.config-card-action { margin-left:auto; color:var(--primary,#7E68DB); font-size:.88rem; font-weight:500; text-decoration:none; white-space:nowrap; }
.config-card-action:hover { text-decoration:underline; }
.config-card-desc { font-size:.9rem; color:var(--text-secondary); line-height:1.5; margin:0 0 .2rem 0; }

/* ---- Variantes de icono del hub ---- */
.ci-tags{background:#EEEDFE;color:#3C3489;} .ci-cat{background:#E1F5EE;color:#085041;}
.ci-stage{background:#E6F1FB;color:#0C447C;} .ci-mail{background:#FAEEDA;color:#854F0B;}
.ci-kb{background:#EEEDFE;color:#3C3489;} .ci-ia{background:#E1F5EE;color:#085041;}
.ci-users{background:#E6F1FB;color:#0C447C;} .ci-rgpd{background:#EAF3DE;color:#27500A;}
.ci-logs{background:#F1EFE8;color:#5F5E5A;} .ci-api{background:#FAEEDA;color:#854F0B;}

/* ---- Índice CRM: catalog/config_index.html ---- */
.config-index-intro { font-size:.92rem; color:var(--text-secondary); margin:0 0 1.5rem; line-height:1.55; }

.config-card-icon-tags { background:#EEEDFE; color:#3C3489; }
.config-card-icon-categorias { background:#E1F5EE; color:#085041; }
.config-card-icon-etapas { background:#E6F1FB; color:#0C447C; }

.config-card-examples { margin-top:.65rem; padding-top:.65rem; border-top:1px dashed var(--border); }
.config-card-examples-label {
    font-size:.7rem; color:var(--text-tertiary); font-weight:600;
    text-transform:uppercase; letter-spacing:.07em; margin-bottom:.4rem;
}
.config-card-examples-row { display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }

.config-chip { font-size:.78rem; padding:2px 9px; border-radius:12px; font-weight:500; }
.config-chip-purple { background:#EEEDFE; color:#3C3489; }
.config-chip-teal { background:#E1F5EE; color:#085041; }
.config-chip-blue { background:#E6F1FB; color:#0C447C; }
.config-chip-amber { background:#FAEEDA; color:#854F0B; }
.config-chip-stage { background:#f3f4f6; color:#374151; font-size:.78rem; padding:2px 9px; border-radius:4px; font-weight:500; }
.config-chip-stage-active { background:#E1F5EE; color:#085041; }

.config-card-categories { font-size:.85rem; color:var(--text-secondary); }
.config-card-categories strong { color:var(--text); font-weight:500; }

.stage-arrow { color:var(--text-tertiary); font-size:.85rem; }

/* ---- Pantalla de envío de email (marketing/email_settings.html) ---- */
.mode-option {
    display:flex; gap:.7rem; align-items:flex-start; border:1px solid var(--border);
    border-radius:10px; padding:.9rem 1rem; margin-bottom:.7rem; cursor:pointer;
    transition:border-color .15s, background .15s;
}
.mode-option:hover { border-color:rgba(126,104,219,.35); }
.mode-option.selected { border-color:var(--primary,#7E68DB); background:rgba(126,104,219,.05); }
.mode-option input[type="radio"] { margin-top:.25rem; flex-shrink:0; }
.mode-option-body { display:flex; flex-direction:column; gap:.25rem; }
.mode-option-title { font-weight:600; font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.mode-option-desc { font-size:.85rem; color:var(--text-secondary); line-height:1.5; }

.mode-panel { display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.mode-panel.mp-on { display:block; }

.identity-box { background:var(--bg-subtle,#f8fafc); border:1px solid var(--border); border-radius:8px; padding:.9rem 1rem; }
.identity-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); font-weight:600; }
.identity-value { font-size:1rem; font-weight:600; color:var(--text); margin-top:.3rem; word-break:break-word; }

/* Sub-paneles (tipo de proveedor dentro de "Personalizado") */
.subpanel { display:none; }
.subpanel.sp-on { display:block; }
