/* ════════════════════════════════════════════════════════════════════════
 * fc2.css · v2.0.0 · FC2 Shell styles
 * LUZOcrm V2 / TRANSED ONG · TAG: FC3-SHELL-V2
 * Scope: .fc2-host (todos los selectors descienden de aquí).
 * Solo var(--token) LUZOkit · 3 temas auto.
 *
 * v2.0.0 vs v1.3.0:
 *   - Header bumped a v2.0.0 / FC3-SHELL-V2.
 *   - Agregado .fc2-view-slot[hidden] { display: none } (router shell v2).
 *   - Agregado .st-toggle-badge (badge dinámico de Bandeja) + variante .is-red.
 *   - .st-toggle-btn ahora con position: relative para soportar badge.
 *
 * Convenciones heredadas:
 *   - Topbar usa clases .st-* IDÉNTICAS a Staff/P360.
 *   - Body usa clases .fc2-* (namespace propio del módulo).
 *   - Tokens LUZOkit: --c-brand, --bg-card, --tx-base, --border, --bbg, etc.
 *   - Bordes 0.5px · radius 7/8/12px · font-weight 500.
 *   - Sin border-left decorativo coloreado · halos solo box-shadow.
 * ════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1. TOPBAR ÚNICO · 56px · IDÉNTICO a Staff/P360 (.st-topbar)
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host .st-topbar,
.fc2-topbar.st-topbar {
  height: 56px;
  background: var(--bg-card);
  border-bottom: .5px solid var(--border-soft, var(--border, #e2e8f0));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  flex-shrink: 0;
}

/* ─── Icono módulo · SIN FONDO color marca ───────────────────────────── */
.fc2-host .st-mod-icon {
  display: flex;
  align-items: center;
  color: var(--c-brand);
}
.fc2-host .st-mod-icon svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Título del módulo ──────────────────────────────────────────────── */
.fc2-host .st-mod-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--tx-base);
  white-space: nowrap;
  letter-spacing: -.1px;
}

.fc2-host .st-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   2. PILL CENTRAL · toggle-btn con icono + label (.st-toggle-group)
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host .st-toggle-group {
  display: flex;
  border: .5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}

.fc2-host .st-toggle-btn {
  height: 32px;
  padding: 0 14px;
  min-width: 130px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--tx-muted);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.fc2-host .st-toggle-btn svg {
  width: 12px; height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fc2-host .st-toggle-btn:hover:not(.active):not(.is-active) {
  color: var(--tx-base);
}

.fc2-host .st-toggle-btn.active,
.fc2-host .st-toggle-btn.is-active {
  background: var(--c-brand-light, var(--bbg, rgba(109,40,217,.08)));
  color: var(--c-brand);
}

.fc2-host .st-toggle-btn + .st-toggle-btn {
  border-left: .5px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. SEARCH AUTOCOLAPSABLE (.st-search-*)
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host .st-search-wrap {
  display: flex;
  align-items: center;
  border: .5px solid transparent;
  border-radius: 8px;
  transition: all .2s;
}

.fc2-host .st-search-wrap.open {
  border-color: var(--border);
  background: var(--bg-surface);
}

.fc2-host .st-search-icon-btn {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--tx-muted);
  transition: background .15s, color .15s;
}

.fc2-host .st-search-icon-btn:hover {
  background: var(--c-brand-light, var(--bbg, rgba(109,40,217,.08)));
  color: var(--c-brand);
}

.fc2-host .st-search-wrap.open .st-search-icon-btn {
  color: var(--c-brand);
}

.fc2-host .st-search-icon-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.fc2-host .st-search-input {
  width: 0;
  height: 30px;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-family: inherit;
  color: var(--tx-base);
  outline: none;
  overflow: hidden;
  transition: width .22s, padding .22s;
}

.fc2-host .st-search-wrap.open .st-search-input {
  width: 180px;
  padding: 0 8px 0 0;
}

.fc2-host .st-search-input::placeholder {
  color: var(--tx-muted);
  opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. NUEVO FICHA · primario violeta · sin dropdown
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host .st-nuevo-wrap {
  display: flex;
  border-radius: 7px;
  overflow: hidden;
}

.fc2-host .st-btn-nuevo {
  height: 32px;
  background: var(--c-brand);
  color: #fff;
  border: none;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  transition: filter .15s;
}

.fc2-host .st-btn-nuevo:hover { filter: brightness(.92); }

.fc2-host .st-btn-nuevo svg {
  width: 11px; height: 11px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. SHELL CONTAINER · root del módulo · fit-viewport
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-body);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. BODY · SmartView Kernel host + view container
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host .fc2-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  overflow: hidden;
  background: var(--bg-body);
}

/* SmartView Kernel host — el Kernel inyecta su sv-bar dentro.
   Si está vacío (no montado todavía) ocupa 0px. */
.fc2-host .fc2-sv-host {
  flex-shrink: 0;
  /* SV2-FC: barra full-bleed + pegada bajo la topbar (cancela padding 16/20 del body) */
  margin: -16px -20px 0;
}
.fc2-host .fc2-sv-host .sv2-bar {
  border-top: none;   /* unión limpia con la topbar (que ya trae border-bottom) */
}
.fc2-host .fc2-sv-host:empty {
  display: none;
}

/* View container (escritorio / bandeja) — toma el resto del alto */
.fc2-host .fc2-view-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. PLACEHOLDER · vistas no implementadas (Bandeja Sprint 2+)
   ═══════════════════════════════════════════════════════════════════════ */

.fc2-host .fc2-placeholder {
  background: var(--bg-card);
  border: .5px solid var(--border);
  border-radius: 12px;
  padding: 80px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(15, 23, 42, .04));
  margin: 0 auto;
  max-width: 640px;
}

.fc2-host .fc2-placeholder-ic {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--bbg);
  color: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.fc2-host .fc2-placeholder-ic svg {
  width: 26px; height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fc2-host .fc2-placeholder-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--tx-base);
  margin: 0;
  letter-spacing: -.2px;
}

.fc2-host .fc2-placeholder-desc {
  font-size: 13px;
  color: var(--tx-muted);
  max-width: 440px;
  line-height: 1.55;
  margin: 0;
}

.fc2-host .fc2-placeholder-sub {
  font-size: 11.5px;
  color: var(--tx-subtle, #94a3b8);
  margin: 0;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. RESPONSIVE · mobile / tablet
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .fc2-host .st-toggle-btn {
    min-width: 90px;
    padding: 0 10px;
  }
  .fc2-host .st-mod-name {
    font-size: 14px;
  }
  .fc2-host .st-btn-nuevo span {
    display: none;
  }
  .fc2-host .fc2-body {
    padding: 12px 14px;
  }
  .fc2-host .fc2-sv-host { margin: -12px -14px 0; }  /* SV2-FC full-bleed mobile */
}

@media (max-width: 640px) {
  .fc2-host .st-toggle-btn {
    min-width: 60px;
    padding: 0 8px;
  }
  .fc2-host .st-toggle-btn span {
    display: none;
  }
  .fc2-host .st-search-wrap.open .st-search-input {
    width: 120px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. SHELL v2.0 · view slots + badge dinámico (FC3-SHELL-V2)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── View slots (router del shell v2.0) ─────────────────────────────── */
.fc2-host .fc2-view-slot[hidden] {
  display: none;
}
.fc2-host .fc2-view-slot {
  /* el slot visible ocupa el alto disponible del body y deja que su hijo scrollee */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fc2-host .fc2-view-slot > * {
  flex: 1;
  min-height: 0;
}

/* ── Badge dinámico en pill Bandeja del topbar ──────────────────────── */
.fc2-host .st-toggle-btn {
  position: relative;
}

.fc2-host .st-toggle-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.3;
  background: var(--amber-bg, var(--lk-amber-soft));
  color: var(--amber-base, var(--lk-amber));
  display: inline-flex;
  align-items: center;
  min-width: 18px;
  justify-content: center;
}

.fc2-host .st-toggle-badge.is-red {
  background: var(--red-bg, var(--lk-red-soft));
  color: var(--red-base, var(--lk-red));
}