/* ==========================================================================
   FinControl — capa de marca sobre Metronic 8.2.3 (demo1)
   Se carga DESPUÉS de style.bundle.css. No editar style.bundle.css.
   Mobile first: estilos base = celular; ajustes con @media (min-width).
   Breakpoints del tema: 576 / 768 / 992 / 1200 / 1400.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de marca
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --fc-primary: #1B4DB1;
  --fc-primary-rgb: 27, 77, 177;
  --fc-primary-dark: #0F2E6B;
  --fc-primary-light: #E8EFFC;
  --fc-secondary: #7DA2E8;
  --fc-accent: #0EA5E9;
  --fc-success: #16A34A;
  --fc-warning: #F59E0B;
  --fc-danger: #DC2626;
  --fc-text: #0F172A;
  --fc-muted: #64748B;
  --fc-border: #E2E8F0;
  --fc-bg: #F5F8FC;
  --fc-surface: #FFFFFF;

  /* Tonos derivados para gráficas y textos con contraste AA */
  --fc-chart-4: #3B6FD8;
  --fc-chart-5: #A9C2F2;
  --fc-success-text: #15803D;
  --fc-warning-text: #B45309;
  --fc-danger-text: #B91C1C;
  --fc-accent-text: #0369A1;
  /* --fc-muted (#64748B) queda en 4.47:1 sobre --fc-bg; para texto se usa este tono */
  --fc-muted-text: #5B6B80;

  --fc-bottom-nav-height: 64px;
}

[data-bs-theme=dark] {
  --fc-primary: #4C7DF0;
  --fc-primary-rgb: 76, 125, 240;
  --fc-primary-dark: #2F5FD0;
  --fc-primary-light: #16264A;
  --fc-secondary: #7DA2E8;
  --fc-accent: #38BDF8;
  --fc-success: #22C55E;
  --fc-warning: #FBBF24;
  --fc-danger: #F87171;
  --fc-text: #E2E8F0;
  --fc-muted: #94A3B8;
  --fc-border: #1E293B;
  --fc-bg: #0B1220;
  --fc-surface: #111A2E;

  --fc-chart-4: #6F97F3;
  --fc-chart-5: #2F4A80;
  --fc-success-text: #4ADE80;
  --fc-warning-text: #FBBF24;
  --fc-danger-text: #FCA5A5;
  --fc-accent-text: #7DD3FC;
  --fc-muted-text: #94A3B8;
}

/* --------------------------------------------------------------------------
   2. Mapeo de tokens a variables de Metronic / Bootstrap
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-primary: var(--fc-primary);
  --bs-primary-rgb: var(--fc-primary-rgb);
  --bs-primary-active: var(--fc-primary-dark);
  --bs-primary-light: var(--fc-primary-light);
  --bs-primary-inverse: #FFFFFF;
  --bs-primary-clarity: rgba(var(--fc-primary-rgb), 0.2);
  --bs-primary-bg-subtle: var(--fc-primary-light);
  --bs-primary-text-emphasis: var(--fc-primary-dark);
  --bs-text-primary: var(--fc-primary);
  --bs-link-color: var(--fc-primary);
  --bs-link-color-rgb: var(--fc-primary-rgb);
  --bs-link-hover-color: var(--fc-primary-dark);
  --bs-component-active-bg: var(--fc-primary);
  --bs-component-checked-bg: var(--fc-primary);
  --bs-component-hover-color: var(--fc-primary);

  --bs-app-bg-color: var(--fc-bg);
  --bs-app-blank-bg-color: var(--fc-bg);
  --bs-app-sidebar-light-bg-color: var(--fc-surface);
  --bs-app-sidebar-light-menu-link-bg-color-active: var(--fc-primary-light);
  --bs-app-header-minimize-bg-color: var(--fc-surface);
}

[data-bs-theme=dark] {
  --bs-body-bg: var(--fc-bg);
  --bs-card-bg: var(--fc-surface);
  /* Blanco sobre #4C7DF0 da 3.8:1; texto oscuro da 4.9:1 (AA) */
  --bs-primary-inverse: #0B1220;
}
[data-bs-theme=dark] .bg-fc-hero { background: linear-gradient(135deg, #0F2E6B 0%, #1B4DB1 100%); }
[data-bs-theme=dark] .fc-logo-mark { color: #0B1220; }
[data-bs-theme=dark] .fc-bottom-nav .active,
[data-bs-theme=dark] .fc-bottom-nav .active i { color: #7DA2E8; }

body { background-color: var(--fc-bg); color: var(--fc-text); }
.card { --bs-card-bg: var(--fc-surface); border-color: var(--fc-border); }
.text-fc-muted { color: var(--fc-muted-text) !important; }
.text-fc-primary-dark { color: var(--fc-primary-dark) !important; }
[data-bs-theme=dark] .text-fc-primary-dark { color: #A9C2F2 !important; }
.bg-fc-primary-light { background-color: var(--fc-primary-light) !important; }
.text-fc-danger { color: var(--fc-danger-text) !important; }
.text-fc-success { color: var(--fc-success-text) !important; }
.text-fc-warning { color: var(--fc-warning-text) !important; }

/* Encabezado con el azul oscuro de marca (callouts, PDF-like) */
.bg-fc-hero {
  background: linear-gradient(135deg, var(--fc-primary-dark) 0%, var(--fc-primary) 100%);
  color: #fff;
}
.bg-fc-hero .text-white-75 { color: rgba(255, 255, 255, .8) !important; }

/* --------------------------------------------------------------------------
   3. Badges de estatus
   -------------------------------------------------------------------------- */
.badge-fc {
  font-weight: 600;
  padding: .45em .75em;
  border-radius: .5rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-fc-prospecto { color: var(--fc-muted-text); background: rgba(100, 116, 139, .12); }
.badge-fc-analisis { color: var(--fc-accent-text); background: rgba(14, 165, 233, .12); }
.badge-fc-propuesta { color: var(--fc-warning-text); background: rgba(245, 158, 11, .14); }
.badge-fc-activo { color: var(--fc-success-text); background: rgba(22, 163, 74, .12); }
.badge-fc-inactivo { color: var(--fc-danger-text); background: transparent; border-color: rgba(220, 38, 38, .45); }
.badge-fc-vencido { color: #fff; background: var(--fc-danger); }
[data-bs-theme=dark] .badge-fc-vencido { color: #1F0A0A; }

/* --------------------------------------------------------------------------
   4. Layout: header, banner, bottom nav, FAB, barras fijas
   -------------------------------------------------------------------------- */
.fc-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.fc-logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--fc-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
}
.fc-logo-text { font-weight: 800; font-size: 1.35rem; color: var(--fc-text); letter-spacing: -.3px; }
.fc-logo-text span { color: var(--fc-primary); }
[data-kt-app-sidebar-minimize=on] .app-sidebar:not(:hover) .fc-logo-text { display: none; }

.fc-header-title {
  font-size: 1.15rem; font-weight: 700; color: var(--fc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw;
}

.app-header { padding-top: env(safe-area-inset-top); }

.fc-demo-banner {
  background: var(--fc-primary-light);
  color: var(--fc-primary-dark);
  font-size: .95rem; font-weight: 600;
  text-align: center; padding: .4rem 1rem;
}
[data-bs-theme=dark] .fc-demo-banner { color: #C7D7F8; }

/* Barra de navegación inferior (solo < 992px) */
.fc-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 105;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--fc-bottom-nav-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fc-surface);
  border-top: 1px solid var(--fc-border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
}
.fc-bottom-nav a,
.fc-bottom-nav button {
  flex: 1 1 0; min-width: 44px; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; padding: 6px 2px;
  color: var(--fc-muted-text); font-size: 11px; font-weight: 600; text-decoration: none;
}
.fc-bottom-nav i { font-size: 22px; color: inherit; }
.fc-bottom-nav .active { color: var(--fc-primary); }
.fc-bottom-nav .active i { color: var(--fc-primary); }

.app-main { padding-bottom: calc(var(--fc-bottom-nav-height) + env(safe-area-inset-bottom)); }

/* Botón flotante (FAB) */
.fc-fab {
  position: fixed; z-index: 104;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(var(--fc-bottom-nav-height) + 16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(var(--fc-primary-rgb), .35);
}
.fc-fab i { font-size: 26px; }
/* Que el FAB no tape el final de la lista */
body:has(.fc-fab) .app-main { padding-bottom: calc(var(--fc-bottom-nav-height) + 88px + env(safe-area-inset-bottom)); }
.fc-fab-menu { bottom: calc(var(--fc-bottom-nav-height) + 80px + env(safe-area-inset-bottom)) !important; }

/* Barra de acciones fija inferior (wizard en móvil) */
.fc-actionbar {
  position: fixed; left: 0; right: 0; z-index: 104;
  bottom: calc(var(--fc-bottom-nav-height) + env(safe-area-inset-bottom));
  display: flex; gap: .75rem; padding: .75rem 16px;
  background: var(--fc-surface); border-top: 1px solid var(--fc-border);
}
.fc-actionbar .btn { flex: 1 1 0; }
.fc-actionbar-spacer { height: 76px; }

@media (min-width: 992px) {
  .fc-bottom-nav, .fc-fab, .fc-fab-menu { display: none !important; }
  .app-main, body:has(.fc-fab) .app-main { padding-bottom: 0; }
  .fc-actionbar {
    position: static; padding: 0; border: 0; background: transparent;
    justify-content: space-between;
  }
  .fc-actionbar .btn { flex: 0 0 auto; }
  .fc-actionbar-spacer { display: none; }
}

/* --------------------------------------------------------------------------
   5. Formularios y áreas táctiles
   -------------------------------------------------------------------------- */
.form-control, .form-select, .select2-container .select2-selection { font-size: 16px; }
.form-label { font-weight: 600; color: var(--fc-text); }
.invalid-feedback { font-size: .95rem; }

@media (pointer: coarse) {
  .btn, .form-control, .form-select, .page-link, .nav-link { min-height: 44px; }
  .btn:not(.d-block):not(.fc-option-card) { display: inline-flex; align-items: center; justify-content: center; }
  .btn.btn-icon { min-width: 44px; }
  .form-check-input { width: 1.5rem; height: 1.5rem; }
}

@media (min-width: 992px) {
  .form-control, .form-select, .select2-container .select2-selection { font-size: 1.1rem; }
}

/* --------------------------------------------------------------------------
   6. Listas: filas como cards en móvil, pestañas deslizables
   -------------------------------------------------------------------------- */
.fc-card-list { display: flex; flex-direction: column; gap: .75rem; }
.fc-row-card {
  background: var(--fc-surface); border: 1px solid var(--fc-border);
  border-radius: .85rem; padding: 1rem;
}
.fc-row-card .fc-row-card-meta { color: var(--fc-muted-text); font-size: .95rem; }

.fc-tabs-scroll {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fc-tabs-scroll::-webkit-scrollbar { display: none; }
.fc-tabs-scroll .nav-item { scroll-snap-align: start; flex: 0 0 auto; }
.fc-tabs-scroll .nav-link { white-space: nowrap; }

/* Tabla con scroll horizontal interno y primera columna fija */
.fc-table-sticky { max-height: 520px; overflow: auto; }
.fc-table-sticky table { min-width: 560px; }
.fc-table-sticky th:first-child,
.fc-table-sticky td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--fc-surface);
}
.fc-table-sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--fc-surface); }
.fc-table-sticky thead th:first-child { z-index: 3; }
.fc-table-sticky tr.fc-row-retiro td { background: var(--fc-primary-light); font-weight: 700; }

.table thead th { color: var(--fc-muted-text); }
.table.fc-table-alt tbody tr:nth-child(even) td { background-color: rgba(var(--fc-primary-rgb), .04); }

/* --------------------------------------------------------------------------
   7. KPI cards y gráficas
   -------------------------------------------------------------------------- */
.fc-kpi { height: 100%; }
.fc-kpi-icon {
  width: 44px; height: 44px; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fc-primary-light); color: var(--fc-primary);
}
.fc-kpi-icon i { font-size: 24px; color: inherit; }
.fc-kpi .fc-kpi-value { font-size: 1.6rem; font-weight: 800; color: var(--fc-text); line-height: 1.2; word-break: break-word; }
.fc-kpi .fc-kpi-label { color: var(--fc-muted-text); font-weight: 600; font-size: .95rem; }
.fc-kpi-faltante { border: 2px solid var(--fc-danger); }
.fc-kpi-faltante .fc-kpi-icon { background: rgba(220, 38, 38, .12); color: var(--fc-danger); }
.fc-kpi-faltante.fc-kpi-ambar { border-color: var(--fc-warning); }
.fc-kpi-faltante.fc-kpi-ambar .fc-kpi-icon { background: rgba(245, 158, 11, .14); color: var(--fc-warning-text); }
.fc-kpi-faltante.fc-kpi-cubierto { border-color: var(--fc-success); }
.fc-kpi-faltante.fc-kpi-cubierto .fc-kpi-icon { background: rgba(22, 163, 74, .12); color: var(--fc-success-text); }

@media (min-width: 1200px) {
  .fc-kpi .fc-kpi-value { font-size: 1.85rem; }
}

.fc-chart { min-height: 260px; }
@media (min-width: 992px) { .fc-chart { min-height: 380px; } }
.fc-chart-sm { min-height: 260px; }

.apexcharts-tooltip { color: var(--fc-text); }
.apexcharts-text, .apexcharts-legend-text { fill: var(--fc-muted); color: var(--fc-muted) !important; }

/* Mini simulador */
.fc-slider-value { font-size: 1.35rem; font-weight: 800; color: var(--fc-primary); }
.noUi-target { margin: 1rem 12px 1.5rem; }
.noUi-connect { background: var(--fc-primary); }
.noUi-horizontal .noUi-handle { width: 30px; height: 30px; right: -15px; top: -8px; border-radius: 50%; }

/* --------------------------------------------------------------------------
   8. Wizard (stepper compacto en móvil)
   -------------------------------------------------------------------------- */
.fc-stepper-compact .progress { height: 8px; background: var(--fc-primary-light); }
.fc-stepper-compact .progress-bar { background: var(--fc-primary); }
.stepper.stepper-links .stepper-nav .stepper-item.current:after,
.stepper.stepper-links .stepper-nav .stepper-item.completed:after { background-color: var(--fc-primary); }
.stepper.stepper-links .stepper-nav .stepper-item.current .stepper-title { color: var(--fc-primary); }
.stepper.stepper-links .stepper-nav .stepper-item .stepper-title a { color: inherit; text-decoration: none; }

.fc-option-card { cursor: pointer; }
.btn-check:checked + .fc-option-card { border-color: var(--fc-primary) !important; background: var(--fc-primary-light); }

/* --------------------------------------------------------------------------
   9. Timeline, agenda y empty states
   -------------------------------------------------------------------------- */
.fc-timeline-icon-completado { color: var(--fc-success) !important; }
.fc-agenda-vencido { border-left: 4px solid var(--fc-danger) !important; }
.fc-agenda-proximo { border-left: 4px solid var(--fc-warning) !important; }
.fc-agenda-completado { border-left: 4px solid var(--fc-success) !important; }

.fc-empty { text-align: center; padding: 2rem 1rem; }
.fc-empty img { max-width: 180px; width: 60%; }

/* Callout "El costo de esperar" */
.fc-callout {
  border-radius: 1rem; padding: 1.25rem;
  background: var(--fc-primary-light); border: 1px dashed var(--fc-primary);
}

/* Utilidades que Metronic no trae */
.min-w-0 { min-width: 0 !important; }
.gap-x-5 { column-gap: 1.25rem !important; }
.gap-y-1 { row-gap: .25rem !important; }

/* Evitar scroll horizontal de página */
html, body { overflow-x: hidden; }
.app-container { padding-left: 16px !important; padding-right: 16px !important; }
@media (min-width: 992px) {
  .app-container { padding-left: 30px !important; padding-right: 30px !important; }
}

/* Cabecera de perfil (ficha del cliente) */
.fc-avatar {
  width: 64px; height: 64px; border-radius: 1rem;
  background: var(--fc-primary-light); color: var(--fc-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem; flex-shrink: 0;
}
.fc-avatar-sm { width: 40px; height: 40px; font-size: 1rem; border-radius: .7rem; }
@media (min-width: 768px) { .fc-avatar:not(.fc-avatar-sm) { width: 88px; height: 88px; font-size: 2rem; } }

@media print {
  .app-header, .app-sidebar, .fc-bottom-nav, .fc-fab, .fc-actionbar, .app-toolbar, .fc-demo-banner, .app-footer { display: none !important; }
}