/* ============================================================
   CONEKTA DESIGN SYSTEM — overlay unificado
   Mezcla: topbar + accent de Finanzas + sidebar/cards de Mi Portal
   Aplicar DESPUÉS de los <style> internos para que gane el cascade.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Identidad Conekta */
  --c-primary:          #1B2A5B;
  --c-primary-dark:     #0F172A;
  --c-accent:           #F7941D;
  --c-accent-light:     #FDBA5C;
  --c-accent-bg:        #FFF7EB;

  /* Backgrounds */
  --c-bg-main:          #F5F7FA;
  --c-bg-card:          #FFFFFF;
  --c-bg-sidebar:       #FFFFFF;
  --c-bg-input:         #F8FAFC;
  --c-bg-hover:         #F1F5F9;

  /* Texto */
  --c-text-primary:     #0F172A;
  --c-text-secondary:   #475569;
  --c-text-muted:       #94A3B8;
  --c-text-on-dark:     #FFFFFF;

  /* Bordes / sombras */
  --c-border:           #E2E8F0;
  --c-border-soft:      #F1F5F9;
  --c-shadow-sm:        0 1px 2px rgba(15,23,42,.04);
  --c-shadow-md:        0 4px 12px rgba(15,23,42,.06);
  --c-shadow-lg:        0 10px 25px rgba(15,23,42,.08);

  /* Estados (sólidos + pastel) */
  --c-success:          #10B981;  --c-success-bg: #D1FAE5;  --c-success-soft: #ECFDF5;
  --c-info:             #3B82F6;  --c-info-bg:    #DBEAFE;  --c-info-soft:    #EFF6FF;
  --c-warning:          #F59E0B;  --c-warning-bg: #FEF3C7;  --c-warning-soft: #FFFBEB;
  --c-danger:           #EF4444;  --c-danger-bg:  #FEE2E2;  --c-danger-soft:  #FEF2F2;

  /* Pasteles para íconos circulares */
  --c-pastel-lavender:  #EDE9FE;  --c-pastel-lavender-fg: #7C3AED;
  --c-pastel-peach:     #FFEDD5;  --c-pastel-peach-fg:    #EA580C;
  --c-pastel-mint:      #D1FAE5;  --c-pastel-mint-fg:     #059669;
  --c-pastel-coral:     #FFE4E6;  --c-pastel-coral-fg:    #E11D48;
  --c-pastel-sky:       #E0F2FE;  --c-pastel-sky-fg:      #0284C7;
}

/* === Base tipográfica === */
body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* === Sidebar: blanco aireado (estilo Mi Portal) === */
.sidebar,
aside.sidebar,
.app-sidebar,
.side-nav {
  background: var(--c-bg-sidebar) !important;
  border-right: 1px solid var(--c-border) !important;
  color: var(--c-text-primary) !important;
}

.sidebar *,
aside.sidebar *,
.app-sidebar *,
.side-nav * {
  color: inherit;
}

.sidebar .sidebar-header,
aside.sidebar .sidebar-header {
  border-bottom: 1px solid var(--c-border-soft) !important;
}

.sidebar .nav-section-title,
.sidebar .nav-section,
.sidebar .sidebar-section-title {
  color: var(--c-text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.sidebar .nav-item,
.sidebar a.nav-item,
.sidebar-nav .nav-item,
.sidebar li > a {
  color: var(--c-text-secondary) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: background .15s ease, color .15s ease !important;
}

.sidebar .nav-item:hover,
.sidebar-nav .nav-item:hover {
  background: var(--c-bg-hover) !important;
  color: var(--c-text-primary) !important;
}

.sidebar .nav-item.active,
.sidebar-nav .nav-item.active,
.sidebar a.nav-item.active,
.sidebar .nav-item.is-active {
  background: var(--c-info-bg) !important;
  color: var(--c-info) !important;
  font-weight: 600 !important;
}

/* === Topbar: cambiar a blanco con shadow suave (cuando aplique) === */
.topbar,
header.topbar,
.app-topbar {
  background: var(--c-bg-card) !important;
  border-bottom: 1px solid var(--c-border-soft) !important;
  box-shadow: var(--c-shadow-sm) !important;
}

/* === Module switcher: pills naranjas para módulo activo === */
.module-switcher {
  background: var(--c-bg-input) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

.module-tab {
  border-radius: 6px !important;
  padding: 8px 14px !important;
  color: var(--c-text-secondary) !important;
  font-weight: 500 !important;
  transition: all .15s ease !important;
}

.module-tab:hover {
  color: var(--c-text-primary) !important;
  background: var(--c-bg-card) !important;
}

.module-tab.active {
  background: var(--c-accent) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* === Cards: airy + soft shadow === */
.card,
.dashboard-card,
.stat-card,
.summary-item,
.kpi-card {
  background: var(--c-bg-card) !important;
  border-radius: 16px !important;
  box-shadow: var(--c-shadow-md) !important;
  border: 1px solid var(--c-border-soft) !important;
}

/* === Botones === */
.btn-primary,
button.btn-primary,
.btn.btn-primary {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--c-accent-light) !important;
  border-color: var(--c-accent-light) !important;
}

.btn-ghost,
.btn.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text-secondary) !important;
  border-radius: 8px !important;
}

.btn-ghost:hover {
  background: var(--c-bg-hover) !important;
  color: var(--c-text-primary) !important;
}

.btn-danger,
.btn.btn-danger {
  background: var(--c-danger) !important;
  border-color: var(--c-danger) !important;
  color: #FFFFFF !important;
}

/* === Inputs === */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--c-bg-input) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: var(--c-text-primary) !important;
  font-family: inherit !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(247,148,29,.18) !important;
  background: #FFF !important;
}

/* === Tablas === */
table.data-table,
table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

table.data-table thead th,
table.table thead th {
  background: var(--c-bg-input) !important;
  color: var(--c-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--c-border) !important;
}

table.data-table tbody td,
table.table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--c-border-soft) !important;
}

table.data-table tbody tr:hover,
table.table tbody tr:hover {
  background: var(--c-bg-hover) !important;
}

/* === Badges / Tags === */
.badge,
.tag,
.chip,
.type-badge,
.category-badge,
.status-badge {
  padding: 4px 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

.badge-success, .badge.success,
.type-badge.ingreso { background: var(--c-success-bg) !important; color: var(--c-success) !important; }
.badge-danger, .badge.danger,
.type-badge.egreso { background: var(--c-danger-bg) !important; color: var(--c-danger) !important; }
.badge-info, .badge.info { background: var(--c-info-bg) !important; color: var(--c-info) !important; }
.badge-warning, .badge.warning { background: var(--c-warning-bg) !important; color: var(--c-warning) !important; }

/* === Modales: estilo limpio === */
.modal-overlay {
  background: rgba(15,23,42,.5) !important;
  backdrop-filter: blur(4px) !important;
}

.modal {
  background: var(--c-bg-card) !important;
  border-radius: 16px !important;
  box-shadow: var(--c-shadow-lg) !important;
  border: none !important;
}

.modal-header {
  border-bottom: 1px solid var(--c-border-soft) !important;
  padding: 20px 24px !important;
}

.modal-body { padding: 24px !important; }

.modal-footer {
  border-top: 1px solid var(--c-border-soft) !important;
  padding: 16px 24px !important;
  background: transparent !important;
}

/* === Body bg === */
body {
  background: var(--c-bg-main) !important;
  color: var(--c-text-primary) !important;
}

/* === Stat cards con círculo pastel (clase utility opcional) === */
.c-stat-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-stat-icon.lavender { background: var(--c-pastel-lavender); color: var(--c-pastel-lavender-fg); }
.c-stat-icon.peach    { background: var(--c-pastel-peach);    color: var(--c-pastel-peach-fg); }
.c-stat-icon.mint     { background: var(--c-pastel-mint);     color: var(--c-pastel-mint-fg); }
.c-stat-icon.coral    { background: var(--c-pastel-coral);    color: var(--c-pastel-coral-fg); }
.c-stat-icon.sky      { background: var(--c-pastel-sky);      color: var(--c-pastel-sky-fg); }

/* === Bandas de evaluación pastel === */
.c-band {
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 600;
  text-align: center;
}
.c-band.excelente { background: var(--c-success-soft); color: var(--c-success); }
.c-band.bueno     { background: var(--c-info-soft);    color: var(--c-info); }
.c-band.aceptable { background: var(--c-warning-soft); color: var(--c-warning); }
.c-band.riesgo    { background: #FFEDD5;               color: #EA580C; }
.c-band.critico   { background: var(--c-danger-soft);  color: var(--c-danger); }

/* ============================================================
   LOGO: fix para logo BLANCO sobre sidebar blanco
   El sidebar antes era navy → ahora blanco. El png es blanco
   sobre transparente, así que se vuelve invisible. Lo invertimos.
   ============================================================ */
.sidebar img[src*="conekta-logo-white"],
.sidebar img.sidebar-logo-img,
aside.sidebar img[src*="conekta-logo-white"],
aside.sidebar img.sidebar-logo-img,
.sidebar .brand img,
aside.sidebar .brand img {
  filter: invert(1) hue-rotate(180deg) saturate(0) brightness(.18) !important;
}

/* ============================================================
   CONEKTARH OVERRIDE — fuerza tema claro y unifica el diseño
   ConektaRH usa body.dark-theme con glass-panel translúcidos
   ============================================================ */
body.dark-theme {
  background: var(--c-bg-main) !important;
  background-image: none !important;
  color: var(--c-text-primary) !important;
  overflow: auto !important;
}

body.dark-theme .glass-panel {
  background: var(--c-bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--c-border-soft) !important;
  border-radius: 16px !important;
  box-shadow: var(--c-shadow-md) !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: var(--c-text-primary) !important;
}

body.dark-theme .text-muted,
body.dark-theme .text-secondary {
  color: var(--c-text-muted) !important;
}

body.dark-theme .highlight,
body.dark-theme .accent {
  color: var(--c-accent) !important;
}

body.dark-theme .sidebar,
body.dark-theme aside.sidebar {
  background: var(--c-bg-sidebar) !important;
  border-right: 1px solid var(--c-border) !important;
  color: var(--c-text-primary) !important;
  backdrop-filter: none !important;
  box-shadow: var(--c-shadow-sm) !important;
}

body.dark-theme .sidebar a,
body.dark-theme .sidebar li,
body.dark-theme .sidebar .nav-item,
body.dark-theme .sidebar .menu-item {
  color: var(--c-text-secondary) !important;
}

body.dark-theme .sidebar a:hover,
body.dark-theme .sidebar .nav-item:hover {
  background: var(--c-bg-hover) !important;
  color: var(--c-text-primary) !important;
}

body.dark-theme .sidebar a.active,
body.dark-theme .sidebar .nav-item.active,
body.dark-theme .sidebar .menu-item.active {
  background: var(--c-info-bg) !important;
  color: var(--c-info) !important;
}

body.dark-theme .logo-container,
body.dark-theme .sidebar-header {
  border-bottom: 1px solid var(--c-border-soft) !important;
}

body.dark-theme button,
body.dark-theme .btn {
  color: var(--c-text-primary) !important;
}

body.dark-theme .btn-primary,
body.dark-theme button.btn-primary {
  background: var(--c-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
}

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background: var(--c-bg-input) !important;
  color: var(--c-text-primary) !important;
  border: 1.5px solid var(--c-border) !important;
}

body.dark-theme table,
body.dark-theme .data-table {
  background: var(--c-bg-card) !important;
  color: var(--c-text-primary) !important;
}

body.dark-theme table th,
body.dark-theme .data-table th {
  background: var(--c-bg-input) !important;
  color: var(--c-text-muted) !important;
}

body.dark-theme table td,
body.dark-theme .data-table td {
  border-bottom: 1px solid var(--c-border-soft) !important;
  color: var(--c-text-primary) !important;
}

body.dark-theme .neon-border:hover {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px rgba(247,148,29,.18) !important;
}

body.dark-theme .stat-card,
body.dark-theme .kpi-card,
body.dark-theme .info-box {
  background: var(--c-bg-card) !important;
  color: var(--c-text-primary) !important;
}