/* ════════════════════════════════════════════════════════════════════════════
   Comportamiento Pro — módulo unificado con nav lateral (Layout="sidenav")
   Destino: Gestion_Integraciones.Server/wwwroot/css/comportamiento-pro.css
   Referencia: "Comportamiento Pro.dc.html". Solo tokens --gi-*; hex = colores
   semánticos por grupo.
   ════════════════════════════════════════════════════════════════════════════ */

/* Header */
.cmp3-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cmp3-title { font-size: 16px; font-weight: 800; color: var(--gi-fg-strong); }
.cmp3-sub { font-size: 12.5px; color: var(--gi-muted-fg); }
.cmp3-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
              color: var(--gi-success, #10B981); margin-left: auto; }
.cmp3-saved.saving { color: var(--gi-muted-fg); } .cmp3-saved.error { color: #DC2626; }
.cmp3-btn-ia { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px;
               border: 1px solid var(--brand, #E0714E); background: var(--brand, #E0714E); color: #fff;
               font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cmp3-btn-ia.open { background: var(--gi-card); color: var(--gi-body); border-color: var(--gi-border); }

/* Grid */
.cmp3-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cmp3-grid { grid-template-columns: 1fr; } }

/* Nav lateral */
.cmp3-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 16px; }
.cmp3-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
                 border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left;
                 font-family: inherit; min-width: 0; }
.cmp3-nav-item:hover { background: var(--gi-muted-2); }
.cmp3-nav-item.active { background: var(--gi-card); border-color: var(--brand, #E0714E); }
.cmp3-nav-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center;
                justify-content: center; font-size: 14px; color: #fff; flex: none; }
.cmp3-nav-g1 .cmp3-nav-ico { background: #EC4899; } .cmp3-nav-g2 .cmp3-nav-ico { background: #6366F1; }
.cmp3-nav-g3 .cmp3-nav-ico { background: #F59E0B; } .cmp3-nav-g4 .cmp3-nav-ico { background: #10B981; }
.cmp3-nav-g5 .cmp3-nav-ico { background: #0284c7; }
.cmp3-nav-txt { min-width: 0; flex: 1; }
.cmp3-nav-title { display: block; font-size: 12.5px; font-weight: 600; color: var(--gi-fg-strong); }
.cmp3-nav-item.active .cmp3-nav-title { font-weight: 700; color: var(--brand-dark, #C25438); }
.cmp3-nav-sum { display: block; font-size: 10.5px; color: var(--gi-faint); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.cmp3-nav-ok { color: var(--gi-success, #10B981); font-size: 12px; flex: none; }
.cmp3-nav-todo { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; display: inline-block; flex: none; }
.cmp3-tip { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--gi-card);
            border: 1px dashed var(--gi-border-strong); font-size: 11.5px; color: var(--gi-muted-fg); line-height: 1.45; }
@media (max-width: 900px) {
  .cmp3-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .cmp3-nav-item { flex: none; padding: 7px 10px; }
  .cmp3-nav-sum, .cmp3-tip { display: none; }
}

/* Contenido */
.cmp3-content { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cmp3-card { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 12px;
             padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.cmp3-eyebrow { font-size: 11px; font-weight: 800; color: var(--gi-faint); text-transform: uppercase; letter-spacing: .06em; }
.cmp3-label { font-size: 12.5px; font-weight: 700; color: var(--gi-fg-strong); margin-bottom: 6px; }
.cmp3-label .opt { font-weight: 500; color: var(--gi-faint); }
.cmp3-hint { font-size: 11px; color: var(--gi-faint); margin-top: 5px; }
.cmp3-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* Fila etiqueta → chips (G1 "Cómo habla") */
.cmp3-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: start; }
.cmp3-row-label { font-size: 12.5px; font-weight: 600; color: var(--gi-body); padding-top: 5px; }
@media (max-width: 640px) { .cmp3-row { grid-template-columns: 1fr; gap: 6px; } }
.cmp3-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.cmp3-opt { padding: 5px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; font-family: inherit;
            border: 1px solid var(--gi-border); background: var(--gi-card); color: var(--gi-body); }
.cmp3-opt:hover { border-color: var(--gi-border-strong); }
.cmp3-opt.on { border-color: var(--brand, #E0714E); background: var(--brand-subtle, rgba(224,113,78,.1));
               color: var(--brand-dark, #C25438); font-weight: 700; }

/* Chips de listas (rasgos, temas, prohibiciones) — aplicar a ChipListEditor */
.cmp3-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--gi-muted); color: var(--gi-body); }
.cmp3-chip.ok { background: var(--gi-success-bg); color: var(--gi-success-text); }
.cmp3-chip.no { background: var(--gi-danger-bg); color: var(--gi-danger-text); }
.cmp3-chip-add { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--gi-border-strong);
                 color: var(--gi-faint); background: transparent; cursor: pointer; font-family: inherit; }

/* Inputs / textareas */
.cmp3-input { height: 36px; border: 1px solid var(--gi-border); border-radius: 9px; padding: 0 12px;
              font-size: 13px; color: var(--gi-fg); background: var(--gi-card); font-family: inherit; width: 100%; }
.cmp3-textarea { border: 1px solid var(--gi-border); border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
                 color: var(--gi-body); line-height: 1.5; background: var(--gi-card); font-family: inherit;
                 width: 100%; resize: vertical; min-height: 60px; }
.cmp3-input:focus, .cmp3-textarea:focus { outline: none; border-color: var(--brand, #E0714E);
                                          box-shadow: 0 0 0 3px var(--brand-subtle, rgba(224,113,78,.15)); }

/* G2 — cards de creatividad */
.cmp3-model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 640px) { .cmp3-model { grid-template-columns: 1fr; } }
.cmp3-model-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px;
                   border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left;
                   border: 1px solid var(--gi-border); background: var(--gi-card); }
.cmp3-model-card.on { border-color: var(--brand, #E0714E); background: var(--brand-subtle, rgba(224,113,78,.1)); }
.cmp3-model-emoji { font-size: 18px; }
.cmp3-model-title { font-size: 12.5px; font-weight: 700; color: var(--gi-fg-strong); }
.cmp3-model-card.on .cmp3-model-title { color: var(--brand-dark, #C25438); }
.cmp3-model-desc { font-size: 11px; color: var(--gi-muted-fg); line-height: 1.4; }
.cmp3-note { font-size: 12px; color: var(--gi-muted-fg); line-height: 1.45; padding: 10px 12px;
             background: var(--gi-muted-2); border-radius: 9px; }

/* G3 — acordeón por habilidad */
.cmp3-skill { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 12px; overflow: hidden; }
.cmp3-skill-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: none;
                   background: none; cursor: pointer; text-align: left; font-family: inherit; }
.cmp3-skill-head:hover { background: var(--gi-muted-2); }
.cmp3-skill-ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center;
                  justify-content: center; font-size: 14px; flex: none; }
.cmp3-skill-name { display: block; font-size: 13px; font-weight: 700; color: var(--gi-fg-strong); }
.cmp3-skill-preview { display: block; font-size: 11.5px; color: var(--gi-muted-fg); white-space: nowrap;
                      overflow: hidden; text-overflow: ellipsis; }
.cmp3-skill-pill { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
                   color: var(--gi-success-text); background: var(--gi-success-bg); flex: none; }
.cmp3-skill-pill.empty { color: var(--gi-warning-text); background: var(--gi-warning-bg); }
.cmp3-skill-chev { color: var(--gi-faint); font-size: 12px; }
.cmp3-skill-body { padding: 0 14px 14px 54px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 640px) { .cmp3-skill-body { padding-left: 14px; } }
.cmp3-skill-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cmp3-btn-sm { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--gi-border); background: var(--gi-card);
               color: var(--gi-body); font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.cmp3-btn-sm:hover { background: var(--gi-muted); }
.cmp3-btn-sm .bi-stars { color: var(--brand, #E0714E); }
.cmp3-list-item { font-size: 12.5px; color: var(--gi-body); display: flex; gap: 8px; }
.cmp3-list-item .bi-dot { color: var(--gi-faint); }

/* G5 — bloques de reglas de negocio */
.cmp3-biz { background: var(--gi-card); border: 1px solid var(--gi-border); border-radius: 12px; overflow: hidden; }
.cmp3-biz-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
                 border-bottom: 1px solid color-mix(in srgb, var(--gi-border) 55%, transparent); }
.cmp3-biz-head .bi { color: #0284c7; font-size: 15px; }
.cmp3-biz-name { font-size: 13px; font-weight: 700; color: var(--gi-fg-strong); }
.cmp3-biz-sub { margin-left: auto; font-size: 11px; color: var(--gi-faint); }
.cmp3-biz-body { padding: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cmp3-field-label { font-size: 11.5px; font-weight: 600; color: var(--gi-muted-fg); margin-bottom: 5px; }

/* Banner IA */
.cmp3-ia { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 14px;
           background: linear-gradient(135deg, #FFF7ED, var(--brand-subtle, #FDEEE9)); border: 1px solid #FDBA74; }
.cmp3-ia-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--brand, #E0714E); color: #fff;
               display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.cmp3-ia-title { font-size: 13px; font-weight: 700; color: #7c2d12; }
.cmp3-ia-text { font-size: 12px; color: #9a3412; }
.cmp3-ia-go { padding: 7px 12px; border-radius: 8px; border: none; background: var(--brand, #E0714E); color: #fff;
              font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cmp3-ia-close { width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: #9a3412; cursor: pointer; }
[data-theme="dark"] .cmp3-ia { background: color-mix(in srgb, var(--brand) 12%, var(--gi-card)); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
[data-theme="dark"] .cmp3-ia-title, [data-theme="dark"] .cmp3-ia-text, [data-theme="dark"] .cmp3-ia-close { color: var(--gi-fg); }

/* Panel del asistente IA ("← Volver") */
.cmp3-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 8px;
             border: 1px solid var(--gi-border); background: var(--gi-card); color: var(--gi-body);
             font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; align-self: flex-start; }

/* ── Agregados al aplicar (9/9): los chips de listas son ChipListEditor (.cle-*),
   así que el color por contexto se aplica desde el contenedor. ─────────────── */
.cmp3-card .cle-chip, .cmp3-row .cle-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px;
                                            background: var(--gi-muted); color: var(--gi-body); }
.cmp3-topics-ok .cle-chip { background: var(--gi-success-bg); color: var(--gi-success-text); }
.cmp3-topics-no .cle-chip, .cmp3-never .cle-chip { background: var(--gi-danger-bg, #FEF2F2); color: var(--gi-danger-text, #991B1B); }
.cmp3-stack { display: flex; flex-direction: column; gap: 12px; }
.cmp3-chips { min-width: 0; }
.cmp3-saved .ad-spinner { width: 10px; height: 10px; border-width: 2px; }
/* G5: dentro del grid, acciones y link avanzado ocupan todo el ancho */
.cmp3-biz-body .brn-actions, .cmp3-biz-body .brn-advanced { grid-column: 1 / -1; }
.cmp3-biz-body .brn-field { margin: 0; }