/* ═══════════════════════════════════════════════════════════
   Compasia — Gestión Náutica · Top-Nav Layout
   ═══════════════════════════════════════════════════════════ */

/* ─── VARIABLES ───────────────────────────────────────────── */
:root {
  --navy:         #0f2744;
  --navy-dark:    #081a30;
  --navy-mid:     #163658;
  --accent:       #2563eb;
  --accent-dark:  #1d4ed8;
  --accent-glow:  rgba(37,99,235,.18);
  --primary-color: #2563eb;
  --danger:       #ef4444;
  --danger-dark:  #dc2626;
  --success:      #10b981;
  --warning:      #f59e0b;
  --bg:           #f0f4f8;
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --border:       #e2e8f0;
  --text:         #1e293b;
  --text-muted:   #64748b;
  --radius:       12px;
  --radius-sm:    8px;
  --nav-h:        62px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:    0 16px 40px rgba(0,0,0,.16);
  --transition:   all 0.22s ease;
}

/* ─── MODO TESORERÍA — Naranja #F37021 ────────────────────── */
body.modo-tesoreria {
  --navy:          #2d1c0e;
  --navy-dark:     #1a0f07;
  --navy-mid:      #3e2a18;
  --accent:        #F37021;
  --accent-dark:   #d4601a;
  --accent-glow:   rgba(243,112,33,.25);
  --primary-color: #F37021;
  --bg:            #fdf6ef;
  --surface:       #ffffff;
  --surface-2:     #fef8f0;
  --border:        #e8cdb8;
  --text:          #2d1a0e;
  --text-muted:    #7d5a46;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.4s ease, color 0.4s ease;
}

/* ─── APP SHELL ───────────────────────────────────────────── */
.app-hidden { display: none !important; }
.app-shell  { min-height: 100vh; width: 100%; max-width: 100%; overflow-x: hidden; }

/* ─── TOP NAV ─────────────────────────────────────────────── */
/*
 * Layout flex: izquierda fija (200px) + centro elástico (flex:1) + derecha auto.
 * El centro con justify-content:center posiciona las tabs en el medio real.
 *   [ Compasia 200px ] [──── Tabs centrados flex:1 ────] [ Botones auto ]
 */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  width: 100%;
  box-sizing: border-box;
  background-color: #0f2744;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
body.modo-tesoreria .topnav {
  background-color: #F37021;
  border-bottom-color: rgba(0,0,0,.12);
  box-shadow: 0 2px 20px rgba(243,112,33,.40);
}

/* ─── MODE SELECTOR SEGMENTADO ────────────────────────────── */
.mode-selector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.mode-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
}
.mode-option svg { flex-shrink: 0; transition: opacity 0.25s ease; opacity: .55; }
.mode-option:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); }
.mode-option:hover svg { opacity: .85; }

/* Operativo activo — azul */
.mode-option.mode-active[data-modo="gestion"] {
  background: rgba(37,99,235,.38);
  color: #fff;
  box-shadow: 0 1px 6px rgba(37,99,235,.4);
}
.mode-option.mode-active[data-modo="gestion"] svg { opacity: 1; }

/* Financiero activo — sobre fondo naranja usa oscuro */
.mode-option.mode-active[data-modo="tesoreria"] {
  background: rgba(0,0,0,.20);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.mode-option.mode-active[data-modo="tesoreria"] svg { opacity: 1; color: #fff; }

/* Header naranja: ajuste de contraste para todos los elementos */
body.modo-tesoreria .mode-selector {
  background: rgba(0,0,0,.20);
  border-color: rgba(0,0,0,.15);
}
body.modo-tesoreria .mode-option {
  color: rgba(255,255,255,.75);
}
body.modo-tesoreria .mode-option:hover {
  background: rgba(0,0,0,.12);
  color: #fff;
}


/* ─── PRIMARY COLOR — overrides en modo Tesorería ────────── */
body.modo-tesoreria .btn-primary {
  color: #2d1a0e;
  box-shadow: 0 2px 8px rgba(243,112,33,.35);
}
body.modo-tesoreria .btn-primary:hover {
  box-shadow: 0 4px 14px rgba(243,112,33,.50);
}
body.modo-tesoreria .sub-tab-btn.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}
body.modo-tesoreria .tab-btn.active {
  background: rgba(0,0,0,.18);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
body.modo-tesoreria .tab-btn.active::after {
  background: #fff;
}

/* ─── TESORERÍA PLACEHOLDER PANELS ───────────────────────── */
.gastos-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
  gap: 12px;
  padding: 40px;
}
.gastos-placeholder svg { opacity: .35; }
.gastos-placeholder h3 { font-size: 16px; font-weight: 700; color: var(--text); opacity: .7; }
.gastos-placeholder p  { font-size: 13px; }

/* Balance Real — sección exclusiva del modo Tesorería */
.balance-real-section {
  display: none;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 32px 40px;
  margin-top: 28px;
  text-align: center;
  color: var(--text-muted);
}
.balance-real-section .balance-real-icon { opacity: .4; margin-bottom: 12px; }
.balance-real-section h3 { font-size: 16px; font-weight: 700; color: var(--text); opacity: .75; margin-bottom: 6px; }
.balance-real-section p  { font-size: 13px; }
body.modo-tesoreria .balance-real-section { display: block; }
body.modo-tesoreria .reportes-gestion-section { display: none; }

/* Transición suave en cards y superficies clave al cambiar modo */
.card, .sub-nav, .btn-primary, .btn-secondary, .modal-box {
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.sub-tab-btn { transition: color .18s, border-color .18s, background-color .18s; }

/* Transición del selector de módulo y botones del header */
.mode-selector {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.mode-option {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-guarderia {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

/* ── Animación de entrada de pestañas al cambiar módulo ─── */
@keyframes tabSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* se aplica solo cuando el contenedor NO está en estado tabs-switching */
.topnav-tabs:not(.tabs-switching) .tab-btn {
  animation: tabSlideIn 0.22s ease forwards;
}

/* ── Zona izquierda: Logo ───────────────────────────────── */
.topnav-brand {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
/* ── Logo del Header — chip blanco 40×40 con logo centrado ──────────────── */
.logo-container,
.brand-logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-logo-img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* ── Logo del Login — imagen integrada (logo + wordmark) centrada ───────── */
.login-logo-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 0.75rem;          /* logo + lema bien pegados — bloque unido */
  background: transparent;
  border: none;
}
.login-logo-img {
  display: block;
  width: 200px;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Tagline bajo el logo del Login — gana al selector legacy .login-logo-area p */
.login-logo-area .login-tagline {
  margin: 0;
  text-align: center;
  font-family: inherit;         /* sans-serif del proyecto */
  font-size: 17px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0;
  text-transform: none;
}

.brand-name {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.4px;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}

/* ── Zona central: Tabs ─────────────────────────────────── */
.topnav-tabs {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 10%;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.topnav-tabs.tabs-switching {
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
}
.tab-btn {
  display: flex;
  align-items: center;
  padding: 8px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255,255,255,.50);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: .2px;
  position: relative;
}
.tab-btn:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
.tab-btn.active {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14%;
  right: 14%;
  height: 3px;
  background: #fff;
  border-radius: 99px;
  opacity: 1;
}

/* ── Zona derecha: Acciones ─────────────────────────────── */
.topnav-user {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}
.user-email {
  font-size: 12px;
  color: rgba(255,255,255,.48);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-logout-top {
  padding: 7px 16px;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.btn-logout-top:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.28);
}

/* Guarderia profile button */
.btn-guarderia {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
  max-width: 220px;
}
.btn-guarderia span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  display: inline-block;
}
.btn-guarderia:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
}

/* Section separator inside tab-inicio */
.section-sep {
  height: 1px;
  background: var(--border);
  margin: 36px 0 28px;
}

/* ─── INICIO SECTION CARDS ────────────────────────────────── */
.inicio-section {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 24px 24px 20px;
  margin-bottom: 24px;
}
.inicio-section .card {
  box-shadow: none;
  margin-bottom: 0;
}
.inicio-section .panel-header {
  padding-bottom: 0;
  margin-bottom: 16px;
}
.inicio-section .section-toolbar {
  margin-bottom: 12px;
}
.inicio-section .pagination {
  padding-top: 12px;
  padding-bottom: 0;
}

/* ─── PAGINATION ──────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 0 4px;
}
.pagination .btn { min-width: 110px; justify-content: center; }
.pagin-info {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 120px;
  text-align: center;
}

/* ─── TWO-COLUMN GRID (Categorias + Formas de Pago) ──────── */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .two-col-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ─── TAB CONTENT ─────────────────────────────────────────── */
.tab-content {
  padding-top: var(--nav-h);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.tab-panel {
  display: none;
  padding: 28px 32px;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
  animation: panelFadeIn .2s ease;
}
.tab-panel.active { display: block; }

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── SUB-NAVEGACIÓN (dentro de Inicio) ──────────────────── */
.sub-nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 26px;
  padding-bottom: 0;
}
.sub-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .18s, border-color .18s, background .18s;
  white-space: nowrap;
}
.sub-tab-btn:hover {
  color: var(--text);
  background: var(--bg);
}
.sub-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: none;
}

/* ─── SUB-PANELES ─────────────────────────────────────────── */
.sub-tab-panel {
  display: none;
  animation: panelFadeIn .18s ease;
}
.sub-tab-panel.active { display: block; }

/* ─── PANEL HEADER ────────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.panel-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
}
.panel-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
/* Bloque "Filtros" + bajada, justo encima del toolbar */
.filter-label-block {
  margin-bottom: 6px;
}
.filter-title-label {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 2px;
}
.filter-hint {
  font-size: 11px;
  color: #475569;
  margin: 0;
}

/* Botón pill para acciones de filtro */
.btn-filter {
  background: var(--surface-2);
  color: var(--text-muted);
  border: none;
  border-radius: 99px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: var(--transition);
}
.btn-filter:hover {
  background: #e2e8f0;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.btn-filter.is-active {
  background: #e2e8f0;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.btn-filter.is-active:hover {
  background: #cbd5e1;
}
.btn-filter-x {
  margin-left: 5px;
  font-size: 11px;
  opacity: .65;
  font-style: normal;
}

/* ─── TOOLBAR ─────────────────────────────────────────────── */
.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* ── FILTER BAR ─────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.filter-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.filter-group input,
.filter-group select {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: var(--transition);
}
.filter-group input:focus,
.filter-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── CLIENTES SELECT BAR ──────────────────────────────────── */
.clientes-select-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 14px;
  border: none;
  border-radius: 99px;
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  background-size: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  min-width: 150px;
  font-family: inherit;
}
.filter-select:hover {
  background-color: #e2e8f0;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.filter-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
body.modo-tesoreria .filter-select:focus {
  box-shadow: 0 0 0 3px rgba(243,112,33,.20);
}
.filter-select:not(:has(option[value=""]:checked)) {
  background-color: #eff6ff;
  color: var(--accent);
  font-weight: 600;
}

/* tbody fade transition */
#tablaClientes tbody { transition: opacity 0.18s ease; }

/* ── DROPDOWN ──────────────────────────────────────────────── */
.dropdown-wrap {
  position: relative;
}
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  z-index: 200;
  overflow: hidden;
  animation: dropIn .15s ease;
}
.dropdown-menu.open { display: block; }
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.dropdown-item:hover { background: var(--bg); }
.dropdown-item-add {
  color: var(--accent);
  font-weight: 600;
}
.dropdown-item-add:hover { background: #eff6ff; }
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.dropdown-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
}
.dropdown-method-row .btn-icon {
  padding: 2px 5px;
  font-size: 12px;
  opacity: .65;
}
.dropdown-method-row .btn-icon:hover { opacity: 1; }

/* ── CONFIG CARD ───────────────────────────────────────────── */
.config-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}

/* ── PASSWORD FIELD ────────────────────────────────────────── */
.password-field {
  position: relative;
  display: flex;
  align-items: center;
}
.password-field input {
  flex: 1;
  padding-right: 40px;
}
.btn-eye {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.btn-eye svg { width: 16px; height: 16px; pointer-events: none; }
.btn-eye:hover { color: var(--text); }

/* ── CONFIG DIVIDER & WARNINGS ─────────────────────────────── */
.config-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0 16px;
}
.config-password-warning {
  font-size: 12px;
  color: var(--warning);
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.config-success {
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
}

/* ── CONFIG SECTION HEADER ────────────────────────────────── */
.config-section-header { margin-bottom: 12px; }
.config-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.search-icon svg { width: 14px; height: 14px; }
.search-wrap-cli {
  min-width: 200px;
  flex: 0 1 200px;
}
.search-input {
  width: 100%;
  padding: 9px 14px 9px 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: var(--transition);
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ─── STATS GRID ──────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  transition: var(--transition);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(37,99,235,.04) 100%);
  pointer-events: none;
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* KPI border-top colors */
.kpi-blue    { border-top-color: #3b82f6; }
.kpi-indigo  { border-top-color: #6366f1; }
.kpi-amber   { border-top-color: #f59e0b; }
.kpi-emerald { border-top-color: #10b981; }
.kpi-red     { border-top-color: #ef4444; }
.kpi-teal    { border-top-color: #14b8a6; }
.kpi-orange  { border-top-color: #f97316; }

.kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kpi-icon { font-size: 22px; opacity: .22; line-height: 1; }

/* ─── KPI TOOLTIP (Morosidad) ─────────────────────────────── */
.kpi-has-tooltip {
  position: relative;
  cursor: default;
  overflow: visible !important;
}
.kpi-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 300;
  min-width: 300px;
  max-width: 380px;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  overflow: hidden;
}
.kpi-has-tooltip:hover .kpi-tooltip:not([data-empty="true"]) {
  display: block;
}
.kpi-tooltip-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin: 0;
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
/* Área scrollable con thead sticky */
.kpi-tooltip-scroll {
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Scrollbar fino */
.kpi-tooltip-scroll::-webkit-scrollbar { width: 4px; }
.kpi-tooltip-scroll::-webkit-scrollbar-track { background: transparent; }
.kpi-tooltip-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}
.kpi-tooltip-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.kpi-tooltip table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kpi-tooltip thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.kpi-tooltip td {
  padding: 5px 10px;
  color: var(--text);
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
}
.kpi-tooltip tbody tr:last-child td { border-bottom: none; }
.kpi-tooltip .tt-badge-impaga  { color: #b45309; font-weight: 600; font-size: 11px; }
.kpi-tooltip .tt-badge-parcial { color: #c2410c; font-weight: 600; font-size: 11px; }
.kpi-tooltip-more {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 5px 10px 6px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.stat-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
}
.stat-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.8px;
}
.stat-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ─── CHARTS ──────────────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  margin-bottom: 24px;
}
.chart-wrap {
  padding: 8px 12px 16px;
  position: relative;
  height: 260px;
}

/* ── PROYECCIÓN WIDGET ────────────────────────────────────── */
.proyeccion-card {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 20px 28px;
  margin-bottom: 20px;
  color: #fff;
}
.proyeccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.proyeccion-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .85;
}
.proyeccion-periodo {
  font-size: 13px;
  opacity: .55;
  font-weight: 500;
}
.proyeccion-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  align-items: center;
}
.proyeccion-sep {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.15);
  margin: 0 28px;
}
.proyeccion-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proyeccion-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .55;
}
.proyeccion-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.proyeccion-sub { font-size: 11px; opacity: .45; }
.proyeccion-eficacia { display: flex; flex-direction: column; gap: 6px; }
.proyeccion-pct {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  transition: color .4s ease;
}
.eficacia-bar-track {
  height: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 99px;
  overflow: hidden;
}
.eficacia-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease, background .4s ease;
}
@media (max-width: 640px) {
  .proyeccion-body { grid-template-columns: 1fr; gap: 16px; }
  .proyeccion-sep { display: none; }
}

/* ─── CARD ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 20px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* Secciones de inicio con scroll horizontal si el contenido no cabe */
.inicio-section { overflow-x: hidden; }
.card h3 {
  padding: 16px 20px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  border-bottom: 1px solid var(--border);
}

/* ─── TABLE ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  padding: 11px 18px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Tabla paginada (sin scroll, tamaño fijo por página) ─── */
.table-scroll-wrap {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ─── PAGINADOR ──────────────────────────────────────────── */
.paginador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px 4px;
}
.pag-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pag-btn:hover:not(:disabled) {
  background: #fff4ee;
  border-color: #F37021;
  color: #F37021;
  box-shadow: 0 0 0 3px rgba(243,112,33,.12);
}
.pag-btn:active:not(:disabled) {
  background: #fde9d8;
}
.pag-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.pag-info {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 110px;
  text-align: center;
  font-weight: 500;
}
.table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(226,232,240,.6);
  vertical-align: middle;
  transition: background .15s;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:nth-child(even) td { background: rgba(248,250,252,.7); }
.table tbody tr:hover td { background: #eff6ff !important; }

.empty-row {
  text-align: center;
  color: var(--text-muted);
  padding: 44px !important;
  font-style: italic;
  font-size: 13px;
}

/* ─── BADGES ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.badge-green   { background: #dcfce7; color: #15803d; }
.badge-blue    { background: #dbeafe; color: #1d4ed8; }
.badge-yellow  { background: #fef9c3; color: #a16207; }
.badge-gray    { background: #f1f5f9; color: #475569; }
.badge-red     { background: #fee2e2; color: #b91c1c; }
.badge-orange  { background: #ffedd5; color: #c2410c; }
.badge-violet  { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }
.badge-parcial { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* ── CUOTA MONTO DETAIL ───────────────────────────────────── */
.cuota-monto-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.4;
}
.cuota-monto-total   { color: var(--text-muted); }
.cuota-monto-pagado  { color: #15803d; }
.cuota-monto-resta   { color: var(--text-muted); }
.cuota-monto-resta.resta-pendiente { color: #c2410c; font-weight: 600; }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .1px;
  font-family: inherit;
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.28); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 4px 14px rgba(37,99,235,.38); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--surface-2); border-color: #cbd5e1; }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); }
.btn-full  { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; }
.btn-sky   { background: #87CEEB; color: #1a3a4a; box-shadow: 0 2px 8px rgba(135,206,235,.35); }
.btn-sky:hover   { background: #6bbcd9; box-shadow: 0 4px 14px rgba(135,206,235,.5); }
.btn-steel { background: #4682B4; color: #fff;    box-shadow: 0 2px 8px rgba(70,130,180,.35); }
.btn-steel:hover { background: #3a6d96; box-shadow: 0 4px 14px rgba(70,130,180,.5); }

.btn-action-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .13s, color .13s, border-color .13s;
}
.btn-action-outline:hover {
  background: rgba(15,39,68,.05);
  color: var(--text);
  border-color: rgba(0,0,0,.07);
}
.btn-action-outline.delete:hover {
  background: rgba(239,68,68,.06);
  color: var(--danger);
  border-color: transparent;
}
.btn-action-outline.success { color: var(--success); }
.btn-action-outline.success:hover { background: rgba(16,185,129,.07); border-color: transparent; }
.btn-action-outline.accent  { color: var(--accent); }
.btn-action-outline.accent:hover  { background: rgba(37,99,235,.06); color: var(--accent-dark); border-color: transparent; }
.btn-svg { width: 14px; height: 14px; display: block; pointer-events: none; flex-shrink: 0; }

/* ─── MODALS ──────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,26,48,.55);
  backdrop-filter: blur(3px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: overlayFadeIn .2s ease;
}
.modal-overlay.open { display: flex; }
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: modalScaleIn .22s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid rgba(255,255,255,.8);
}
.modal.modal-sm { max-width: 400px; }
@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.modal-header h3 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: var(--transition);
}
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ─── FORMS ───────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.form-row   { display: flex; gap: 14px; }
.form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-group textarea { resize: vertical; min-height: 64px; }

/* ─── LOGIN ───────────────────────────────────────────────── */
.login-screen {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark) 0%, #0d1f3a 50%, #091627 100%);
  padding: 16px;
}
.login-card {
  background: var(--surface);
  border-radius: 18px;
  width: 100%;
  max-width: 400px;
  padding: 44px 40px;
  box-shadow: 0 32px 64px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.06);
  animation: modalScaleIn .3s ease;
}
.login-logo-area {
  text-align: center;
  margin-bottom: 34px;
}
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--accent);
  filter: drop-shadow(0 0 12px rgba(37,99,235,.5));
}
.login-logo svg { width: 52px; height: 52px; }
.login-logo-area h1 {
  font-size: 23px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -.5px;
}
.login-logo-area p {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.login-error {
  background: #fee2e2;
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 12px;
  border-left: 3px solid var(--danger);
}

/* ─── LOADING STATES ──────────────────────────────────────── */
.error-row { color: var(--danger) !important; font-style: normal !important; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
.spinner-sm {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
}

/* ─── REGISTRAR PAGO ──────────────────────────────────────── */
.pago-info-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pago-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.pago-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.pago-info-val { font-size: 13px; color: var(--text); text-align: right; }
.pago-info-monto {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.3px;
}

/* ─── TOAST ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #16a34a; }
.toast-error   { background: var(--danger); }
.toast-warning { background: #d97706; }
.toast-info    { background: #2563eb; }

/* ─── IMPORT MODE TOGGLE ───────────────────────────────────── */
.import-mode-btn {
  padding: 5px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 20px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.import-mode-btn.import-mode-active {
  background: var(--accent);
  color: #fff;
}

/* ─── MULTISELECT COPROPIETARIOS ──────────────────────────── */
.badge-titular {
  display: inline-block;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.multiselect-wrapper {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  min-height: 40px;
  padding: 4px 8px;
  cursor: text;
  transition: var(--transition);
}
.multiselect-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.multiselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.multiselect-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(37,99,235,.25);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.multiselect-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
  opacity: 0.65;
  transition: opacity .15s;
}
.multiselect-tag-remove:hover { opacity: 1; }
.multiselect-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100%;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  padding: 2px 0 !important;
  min-width: 140px;
}
.multiselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 180px;
  overflow-y: auto;
  z-index: 300;
}
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.multiselect-option:hover    { background: var(--surface-2); }
.multiselect-option.selected { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.multiselect-check { width: 14px; font-size: 11px; color: var(--accent); flex-shrink: 0; }
.multiselect-empty { padding: 10px 14px; color: var(--text-muted); font-size: 13px; font-style: italic; }

/* ─── FILTRO ACTIVOS / TODOS / BAJAS ─────────────────────────── */
.cli-filter-btns {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.cli-filter-btn {
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.cli-filter-btn:last-child { border-right: none; }
.cli-filter-btn:hover { background: var(--bg); color: var(--text); }
.cli-filter-btn.active {
  background: var(--accent);
  color: #fff;
}
.cli-filter-btn[data-filter="bajas"].active {
  background: #c2410c;
}

/* ─── FILAS INTERACTIVAS (doble clic) ───────────────────────── */
.cli-row-interactive { cursor: pointer; }
.cli-row-interactive:not(.cli-inactivo-deuda):hover td { background: var(--bg); }

/* ─── FILAS DE CLIENTES DADOS DE BAJA ───────────────────────── */
.cli-inactivo td { opacity: 0.65; }
.cli-inactivo-deuda td { background: #fff1f2 !important; }
.cli-inactivo-deuda td:first-child { border-left: 3px solid var(--danger); }
.btn-icon.success {
  color: var(--success);
  border-color: transparent;
  background: transparent;
}
.btn-icon.success:hover { background: #dcfce7; }
.btn-icon.accent {
  color: var(--accent);
  border-color: transparent;
  background: transparent;
}
.btn-icon.accent:hover { background: #eff6ff; color: var(--accent-dark); }

/* ─── NOTAS EN CUENTA CORRIENTE ──────────────────────────────── */
.cc-notas-section {
  border-top: 1px solid var(--border);
  margin: 0 24px 16px;
  padding-top: 14px;
}
.cc-notas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cc-notas-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.cc-nota-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 6px;
}
.cc-nota-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cc-nota-fecha {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.cc-nota-contenido {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.4;
}

/* ─── TOOLTIP DATOS TÉCNICOS EMBARCACION ─────────────────────── */
.emb-nombre-cell { white-space: nowrap; }
.emb-eslora-cell { white-space: nowrap; color: var(--text-muted); font-size: 13px; }
.cama-badge { background: #e8f4fd; color: #1565c0; border: 1px solid #90caf9; border-radius: 4px; padding: 1px 6px; font-size: 12px; font-weight: 600; letter-spacing: .5px; }
.cama-libre { color: var(--text-muted); }
.emb-tech-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  cursor: default;
  vertical-align: middle;
  overflow: visible;
}
.emb-tech-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  min-width: 190px;
  z-index: 9999;
  white-space: normal;
  pointer-events: none;
}
.emb-tech-icon:hover .emb-tech-tooltip,
.emb-tech-icon:focus .emb-tech-tooltip { display: flex; flex-direction: column; gap: 5px; }
.emb-tech-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-bottom: 2px;
}
.emb-tech-row {
  font-size: 12px;
  color: var(--text);
  display: block;
}
.emb-tech-row b { color: var(--text-muted); font-weight: 600; }

/* ─── PROPIETARIOS EN TABLA ───────────────────────────────── */
.prop-titular { font-weight: 700; }
.prop-copropietarios {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.4;
}

/* ─── CLIENTE 360° ────────────────────────────────────────── */
.modal-360 { max-width: 780px; }
.c360-body { padding: 20px 24px; }

.c360-header-strip {
  display: flex;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.c360-kpi-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  padding-right: 20px;
  border-right: 1px solid var(--border);
}
.c360-kpi-val {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.c360-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
}
.c360-kpi-side {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  flex: 1;
}
.c360-kpi-sm {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.c360-kpi-meta {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.c360-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.c360-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c360-card-full { grid-column: 1 / -1; }
.c360-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.c360-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0;
}

/* Embarcaciones */
.c360-emb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.c360-emb-row:last-child { border-bottom: none; }
.c360-emb-info { display: flex; flex-direction: column; gap: 1px; }
.c360-emb-mat { font-size: 11px; color: var(--text-muted); }

/* Movimientos */
.c360-movs-list { display: flex; flex-direction: column; gap: 0; }
.c360-mov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.c360-mov-row:last-child { border-bottom: none; }
.c360-mov-row.c360-mov-pago { background: none; }
.c360-mov-info { display: flex; flex-direction: column; gap: 1px; }
.c360-mov-concepto { font-weight: 500; color: var(--text); }
.c360-mov-fecha { font-size: 11px; color: var(--text-muted); }
.c360-mov-monto { font-weight: 700; font-size: 13px; white-space: nowrap; }
.c360-link-btn { font-size: 12px; margin-top: auto; }

/* Botón WhatsApp — outline, sin relleno sólido */
.btn-wa {
  background: transparent;
  color: #16a34a;
  border: 1.5px solid #22c55e;
}
.btn-wa:hover  { background: rgba(34,197,94,.05); border-color: #16a34a; }
.btn-wa:active { background: rgba(34,197,94,.08); }
.wa-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Notas */
.c360-nota-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.c360-nota-row:last-child { border-bottom: none; }
.c360-nota-fecha { font-size: 11px; color: var(--text-muted); white-space: nowrap; padding-top: 2px; }
.c360-nota-texto { flex: 1; color: var(--text); line-height: 1.4; }

/* ─── CUENTA CORRIENTE ────────────────────────────────────── */
.modal-cc { max-width: 720px; }
.cc-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.cc-kpi {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
  border: 1px solid var(--border);
}
.cc-kpi-debe  { background: #fff5f5; border-color: #fca5a5; }
.cc-kpi-haber { background: #f0fdf4; border-color: #86efac; }
.cc-kpi-saldo { background: var(--surface-2); }
.cc-kpi-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.cc-kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
}
.cc-row-pago td { background: rgba(240,253,244,.5) !important; }
.cc-row-pago:hover td { background: #dcfce7 !important; }
.cc-row-apertura td { background: rgba(241,245,249,.6) !important; font-style: italic; }
.cc-row-apertura:hover td { background: #e2e8f0 !important; }
.cc-print-header { display: none; }

/* ─── PRINT ───────────────────────────────────────────────── */
@media print {
  body > * { display: none !important; }
  #modalCuentaCorriente { display: block !important; position: static !important; background: none !important; padding: 0 !important; }
  #modalCuentaCorriente .modal-cc { box-shadow: none !important; border: none !important; max-width: 100% !important; animation: none !important; }
  #modalCuentaCorriente .modal-body { padding: 0 !important; }
  .no-print { display: none !important; }
  .cc-print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--navy);
    font-size: 14px;
    color: var(--navy);
  }
  .cc-print-header strong { font-size: 17px; }
  .table th, .table td { padding: 7px 10px !important; font-size: 11px !important; }
  .cc-summary { gap: 8px; }
  .cc-kpi { padding: 10px 12px; }
  .cc-kpi-val { font-size: 15px; }
  @page { margin: 1.5cm; }
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */

/* ≤1100px — selector más compacto, el grid sigue simétrico */
@media (max-width: 1100px) {
  .mode-option { padding: 5px 10px; font-size: 11px; }
}

/* ≤900px — labels del selector ocultos, tabs más compactos */
@media (max-width: 900px) {
  .topnav { padding: 0 12px; }
  .topnav-user { gap: 6px; }
  .tab-btn { padding: 8px 10px; font-size: 12.5px; }
  .btn-guarderia { max-width: 130px; padding: 6px 10px; font-size: 12px; }
  .mode-option .mode-option-label { display: none; }
  .mode-option { padding: 6px 10px; }
}

/* ≤768px — layout de contenido apilado */
@media (max-width: 768px) {
  .topnav { padding: 0 10px; }
  .tab-panel { padding: 18px 16px; }
  .panel-header { flex-direction: column; align-items: flex-start; }
  .form-row { flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .table th:nth-child(n+4),
  .table td:nth-child(n+4) { display: none; }
  .btn-guarderia span { display: none; }
  .btn-guarderia { padding: 7px 10px; max-width: none; }
}

/* ≤540px — pantallas muy pequeñas */
@media (max-width: 540px) {
  .topnav { padding: 0 8px; }
  .stats-grid { grid-template-columns: 1fr; }
  .tab-btn { padding: 6px 7px; font-size: 11px; }
  .topnav-brand .brand-name { font-size: 14px; }
}

/* ─── CAJA DIARIA ────────────────────────────────────────── */

.caja-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 768px) {
  .caja-stats { grid-template-columns: 1fr; gap: 10px; }
}

.caja-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.caja-stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.caja-stat-ingresos .caja-stat-icon { background: #dcfce7; color: #16a34a; }
.caja-stat-egresos  .caja-stat-icon { background: #fee2e2; color: #dc2626; }
.caja-stat-saldo    .caja-stat-icon { background: #dbeafe; color: #2563eb; }

.caja-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.caja-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1;
}

/* Montos coloreados en la tabla */
.caja-monto-ingreso { color: #16a34a; }
.caja-monto-egreso  { color: #dc2626; }

/* Descripción truncada */
.td-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── LABEL HINT ─────────────────────────────────────────── */
.label-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ─── DETALLE DE CUOTA (breakdown IVA) ───────────────────── */
.cuota-breakdown {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.cuota-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.cuota-breakdown-row span:first-child { color: var(--text-muted); }
.cuota-breakdown-row span:last-child  { font-weight: 600; }
.cuota-breakdown-divider {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.cuota-breakdown-total {
  font-size: 16px;
}
.cuota-breakdown-total span { color: var(--text) !important; font-weight: 800 !important; }
.cuota-breakdown-nota {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ─── MONTO COMO LINK EN TABLA CUOTAS ────────────────────── */
.cuota-monto-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cuota-monto-link:hover { color: var(--accent-dark); }

/* ─── MODAL DETALLE EMBARCACION ───────────────────────────── */
.detalle-section {
  margin-bottom: 20px;
}
.detalle-section:last-child { margin-bottom: 0; }
.detalle-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.detalle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}
.detalle-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.detalle-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detalle-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.detalle-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.detalle-notas {
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  white-space: pre-wrap;
  min-height: 40px;
}
@media (max-width: 540px) {
  .detalle-grid, .detalle-grid-3 { grid-template-columns: 1fr; }
}

/* ─── AI ANÁLISIS INTELIGENTE ────────────────────────────── */
.ai-card {
  background: rgba(243, 112, 33, 0.05);
  border: 1px solid rgba(243, 112, 33, 0.28);
  border-radius: var(--radius);
  padding: 14px 18px 10px;
  margin-bottom: 16px;
}
.ai-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-icon-wrap {
  width: 38px; height: 38px;
  background: rgba(243, 112, 33, 0.12);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #F37021;
  flex-shrink: 0;
}
.ai-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.ai-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.ai-btn-analizar {
  margin-left: auto;
  flex-shrink: 0;
}
.ai-card-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(243, 112, 33, 0.15);
}
.ai-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.ai-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
.ai-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(243,112,33,.3);
  border-top-color: #F37021;
  border-radius: 50%;
  animation: ai-spin .7s linear infinite;
  flex-shrink: 0;
}
.ai-puntos {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ai-punto {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.ai-punto::before {
  content: '▸';
  color: #F37021;
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.ai-error {
  font-size: 13px;
  color: #dc2626;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   DASHBOARD HOME — Fase 1
   ═══════════════════════════════════════════════════════════ */

/* ─── Bienvenida ────────────────────────────────────────── */
.dash-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}
.dash-welcome-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
  text-transform: capitalize;
}
.dash-welcome-date {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
  text-transform: capitalize;
}

/* ─── Encabezado de sección ─────────────────────────────── */
.dash-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border);
}
.dash-section-header--navy {
  color: var(--navy);
  margin-top: 32px;
}
body.modo-tesoreria .dash-section-header--navy {
  color: var(--accent-dark);
}
.dash-section-icon { flex-shrink: 0; }

/* ─── Grid KPI (4 columnas) ─────────────────────────────── */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .dash-kpi-grid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Tarjeta KPI ───────────────────────────────────────── */
.dash-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dash-kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dash-kpi-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dash-kpi-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-kpi-icon--blue   { background: rgba(37,99,235,.10);  color: #2563eb; }
.dash-kpi-icon--green  { background: rgba(34,197,94,.12);  color: #16a34a; }
.dash-kpi-icon--purple { background: rgba(139,92,246,.12); color: #7c3aed; }
.dash-kpi-icon--navy   { background: rgba(15,39,68,.10);   color: #0f2744; }
body.modo-tesoreria .dash-kpi-icon--navy { background: rgba(243,112,33,.12); color: #d4601a; }

/* Card RENA — variante acción dentro del grid */
.dash-kpi-card--rena {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 55%, rgba(37,99,235,.05));
  justify-content: space-between;
}
body.modo-tesoreria .dash-kpi-card--rena {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 55%, rgba(243,112,33,.05));
}

/* Valor KPI tamaño medio (para texto, no número grande) */
.dash-kpi-value--md {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.dash-kpi-info { flex: 1; min-width: 0; }
.dash-kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-kpi-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.dash-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Barra de progreso ─────────────────────────────────── */
.dash-kpi-progress-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.dash-kpi-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: #22c55e;
  transition: width 0.6s cubic-bezier(.4,0,.2,1), background 0.3s ease;
}

/* ─── Grid Prefectura (3 columnas) ──────────────────────── */
.dash-pref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .dash-pref-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .dash-pref-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Tarjeta Prefectura ────────────────────────────────── */
.dash-pref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
  transition: box-shadow 0.2s ease;
}
.dash-pref-card:hover { box-shadow: var(--shadow-md); }

.dash-pref-card--action {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 60%, rgba(37,99,235,.04));
}
body.modo-tesoreria .dash-pref-card--action {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 60%, rgba(243,112,33,.04));
}

.dash-pref-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dash-pref-card-header svg { flex-shrink: 0; }

/* ─── Lista estado de flota ─────────────────────────────── */
.dash-fleet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-fleet-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-fleet-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-fleet-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
}
.dash-fleet-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ─── Alertas ───────────────────────────────────────────── */
.dash-alertas-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.dash-alert svg { flex-shrink: 0; }
.dash-alert--ok {
  background: rgba(34,197,94,.10);
  color: #15803d;
  border: 1px solid rgba(34,197,94,.25);
}
.dash-alert--warn {
  background: rgba(245,158,11,.10);
  color: #92400e;
  border: 1px solid rgba(245,158,11,.30);
}
.dash-alert--error {
  background: rgba(239,68,68,.08);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,.25);
}
.dash-alert-loading {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* ─── Texto descriptor en card acción ───────────────────── */
.dash-pref-action-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

/* ─── Responsivo general del dashboard ─────────────────── */
@media (max-width: 480px) {
  .dash-welcome-title { font-size: 18px; }
  .dash-kpi-value     { font-size: 22px; }
  .dash-fleet-count   { font-size: 17px; }
}


/* ─── Configuración: Campo de Capacidad ─────────────────── */
.config-capacidad-card {
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(37,99,235,.02));
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.modo-tesoreria .config-capacidad-card {
  background: linear-gradient(135deg, rgba(243,112,33,.06), rgba(243,112,33,.02));
}

.config-capacidad-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.config-capacidad-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.config-capacidad-input {
  width: 110px;
  padding: 10px 14px;
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* quitar flechas nativas */
  -moz-appearance: textfield;
}
.config-capacidad-input::-webkit-outer-spin-button,
.config-capacidad-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.config-capacidad-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.config-capacidad-unit {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ═══ MÓDULO ANÁLISIS ════════════════════════════════════════════════════════ */

.analisis-subpanel { display: none; }
.analisis-subpanel.active { display: block; }

/* Tooltip rows (top-3 categorías) */
.kpi-tooltip-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.kpi-tooltip-row:last-child { border-bottom: none; }

/* Balance General */
.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
@media (max-width: 760px) {
  .balance-grid { grid-template-columns: 1fr; }
}
.balance-col h3 { margin-top: 0; }
.balance-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.balance-row:last-child { border-bottom: none; }
.balance-row.balance-total {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  padding-top: 12px;
  border-top: 2px solid var(--border);
  margin-top: 6px;
}
.balance-activos .balance-total { color: #16a34a; }
.balance-pasivos .balance-total { color: #dc2626; }
.balance-neto { margin-top: 16px; }
.balance-neto .balance-total { font-size: 18px; }

/* Resumen AI */
.ai-resumen-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}
.ai-resumen-toolbar .filter-select { min-width: 240px; }

.ai-resumen-card { padding: 22px; }
.ai-resumen-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--text-muted);
}
.ai-resumen-bloque { margin-bottom: 16px; }
.ai-resumen-bloque:last-child { margin-bottom: 0; }
.ai-resumen-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ai-resumen-bloque p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* ═══ BARRA DE FILTROS — Minimalista, labels arriba ═════════════════════════ */

.fin-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Cada campo lleva su propio label encima — se logra envolviendo el <select>
   y el rango en pseudo-grupos. Como el HTML existente no trae labels
   explícitos, los agregamos vía ::before sobre cada input. */
.fin-filter-bar > .filter-select,
.fin-filter-bar > .fin-rango {
  position: relative;
  margin-top: 16px;     /* deja espacio para el label flotante */
}
.fin-filter-bar > .filter-select::before,
.fin-filter-bar > .fin-rango > label {
  position: absolute;
  top: -16px;
  left: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;          /* slate-400 */
}
.fin-filter-bar > .filter-select::before { content: 'Período'; }

.fin-filter-bar .filter-select {
  min-width: 180px;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13.5px;
  color: #1e293b;
  transition: border-color .18s, box-shadow .18s;
}
.fin-filter-bar .filter-select:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.fin-filter-bar .fin-rango {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-left: none;
}
.fin-filter-bar .fin-rango label {
  /* los dos labels Desde/Hasta no los ubicamos con absolute — solo el primero */
  position: static;
  top: auto;
  left: auto;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  font-weight: 500;
}
.fin-filter-bar .fin-rango > label:first-of-type {
  position: absolute;
  top: -16px;
  left: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
/* Ocultamos el texto "Desde" inline — el label flotante ya dice "Rango" */
.fin-filter-bar .fin-rango > label:first-of-type { display: none; }
.fin-filter-bar .fin-rango::before {
  content: 'Rango';
  position: absolute;
  top: -16px;
  left: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
/* El label "Hasta" queda visible como separador inline suave */
.fin-filter-bar .fin-rango > label:not(:first-of-type) {
  font-size: 12px;
  color: #cbd5e1;
  margin: 0 2px;
}

.fin-filter-bar .fin-rango input[type="date"] {
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13.5px;
  background: #ffffff;
  color: #1e293b;
  font-family: inherit;
  transition: border-color .18s, opacity .18s, box-shadow .18s;
}
.fin-filter-bar .fin-rango input[type="date"]:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}
.fin-filter-bar .fin-rango input[type="date"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f8fafc;
  border-style: dashed;
}

/* Botón Aplicar — hereda color del tema (naranja en módulo financiero) */
.fin-filter-bar .btn-aplicar-filtros {
  margin-left: auto;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.fin-filter-bar .btn-aplicar-filtros:hover {
  box-shadow: 0 2px 8px var(--accent-glow);
}
.fin-filter-bar .btn-aplicar-filtros:active { transform: translateY(1px); }

.fin-toolbar {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}
.fin-toolbar > .fin-filter-bar { flex: 1 1 560px; }

/* ═══ AI RESUMEN — Estética mejorada ══════════════════════════════════════════ */

.ai-resumen-card {
  position: relative;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(236,72,153,0.04));
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.ai-resumen-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #6366f1, #ec4899);
}

.ai-resumen-bloque {
  position: relative;
  padding: 14px 16px 14px 52px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ai-resumen-bloque:last-child { margin-bottom: 0; }
.ai-resumen-bloque:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.ai-resumen-bloque::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 14px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.ai-resumen-bloque[data-tipo="situacion"]::before {
  background-color: rgba(59,130,246,0.12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
}
.ai-resumen-bloque[data-tipo="insight"]::before {
  background-color: rgba(245,158,11,0.14);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/></svg>");
}
.ai-resumen-bloque[data-tipo="sugerencia"]::before {
  background-color: rgba(16,185,129,0.14);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.ai-resumen-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ai-resumen-bloque[data-tipo="situacion"]  .ai-resumen-label { color: #3b82f6; }
.ai-resumen-bloque[data-tipo="insight"]    .ai-resumen-label { color: #b45309; }
.ai-resumen-bloque[data-tipo="sugerencia"] .ai-resumen-label { color: #059669; }

.ai-resumen-bloque p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.ai-resumen-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.ai-resumen-meta .ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-muted, #f1f5f9);
  font-weight: 600;
}

/* ═══ BALANCE GENERAL — Redesign profesional ═════════════════════════════════ */

.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
}
@media (max-width: 820px) {
  .balance-grid { grid-template-columns: 1fr; }
}

.balance-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.balance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.06);
}

.balance-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}
.balance-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.balance-card-activos .balance-card-icon {
  background: #dbeafe;      /* celeste claro */
  color: #1e40af;           /* azul náutico */
}
.balance-card-pasivos .balance-card-icon {
  background: #fee2e2;
  color: #991b1b;
}
.balance-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;           /* slate-800 */
  letter-spacing: -0.01em;
}
.balance-card-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;           /* slate-500 */
}

.balance-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  flex: 1;
}
.balance-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.balance-list li:last-child { border-bottom: none; }
.balance-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #475569;           /* slate-600 */
}
.balance-item-label svg { color: #94a3b8; }
.balance-item-value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

.balance-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.balance-card-activos .balance-card-footer {
  background: #dbeafe;
  color: #1e40af;
}
.balance-card-pasivos .balance-card-footer {
  background: #fee2e2;
  color: #991b1b;
}
.balance-card-footer > span:last-child { font-variant-numeric: tabular-nums; }

/* Patrimonio Neto — hero card */
.balance-neto-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 22px 28px;
  border-radius: 18px;
  background: #f1f5f9;           /* fondo neutro por defecto */
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.balance-neto-hero.is-positive {
  background: #e0f2fe;           /* celeste claro (sky-100) */
  border-color: #bae6fd;
}
.balance-neto-hero.is-negative {
  background: #fce7f3;           /* rosa claro (pink-100) */
  border-color: #fbcfe8;
}
.balance-neto-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,0.6);
  color: #0369a1;                /* azul náutico */
}
.balance-neto-hero.is-negative .balance-neto-icon { color: #be185d; }
.balance-neto-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.balance-neto-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.balance-neto-sub {
  font-size: 12px;
  color: #94a3b8;
}
.balance-neto-value {
  margin-left: auto;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0c4a6e;                /* azul náutico profundo */
  font-variant-numeric: tabular-nums;
}
.balance-neto-hero.is-negative .balance-neto-value { color: #9f1239; }
@media (max-width: 560px) {
  .balance-neto-hero { flex-wrap: wrap; }
  .balance-neto-value { margin-left: 0; font-size: 26px; }
}

/* Botones — suavizado global */
.btn,
.btn-primary,
.btn-secondary,
.btn-filter,
.btn-aplicar-filtros,
.btn-steel {
  border-radius: 10px;
}
.btn-icon,
.btn-icon-danger {
  border-radius: 10px;
}

/* ═══ MODAL MORA (Generar Ingresos) ══════════════════════════════════════════ */

.mora-alert {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.mora-alert-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mora-alert-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fde68a;
  color: #b45309;
}
.mora-alert-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #78350f;
}
.mora-alert-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #92400e;
}

.mora-list-wrap {
  margin-top: 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 10px 12px;
}
.mora-list-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
}
.mora-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 132px;
  overflow-y: auto;
}
.mora-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #fed7aa;
}
.mora-list-row:last-child { border-bottom: none; }
.mora-list-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mora-list-cliente {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mora-list-concepto {
  font-size: 11.5px;
  color: #78716c;
}
.mora-list-monto {
  font-size: 13px;
  font-weight: 700;
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mora-list-more {
  text-align: center;
  padding: 6px 0 0;
  font-size: 11.5px;
  color: #92400e;
  font-style: italic;
}

.mora-interes { margin-top: 14px; }
.mora-interes label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #78350f;
  margin-bottom: 6px;
}
.mora-interes-input {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 180px;
}
.mora-interes-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid #fed7aa;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #78350f;
  background: #fff;
}
.mora-interes-input input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
}
.mora-interes-input span {
  font-size: 14px;
  font-weight: 700;
  color: #92400e;
}
.mora-interes-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #92400e;
  line-height: 1.45;
}

/* ═══ DASHBOARD DE SALUD — KPI Cards premium ════════════════════════════════ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
  margin-bottom: 22px;
}
@media (max-width: 960px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kpi-grid { grid-template-columns: 1fr; gap: 14px; } }

.kpi-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  padding: 28px 28px 26px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: visible;
}
.kpi-card:hover {
  transform: translateY(-2px);
  border-color: #e2e8f0;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 12px 28px rgba(15, 23, 42, 0.08);
}

.kpi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.kpi-card-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #64748b;         /* slate-500 */
  letter-spacing: 0.01em;
}

.kpi-card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.kpi-card[data-tone="emerald"] .kpi-card-icon { background: #d1fae5; color: #059669; }
.kpi-card[data-tone="rose"]    .kpi-card-icon { background: #ffe4e6; color: #e11d48; }
.kpi-card[data-tone="amber"]   .kpi-card-icon { background: #fef3c7; color: #d97706; }
.kpi-card[data-tone="sky"]     .kpi-card-icon { background: #e0f2fe; color: #0284c7; }
.kpi-card[data-tone="indigo"]  .kpi-card-icon { background: #e0e7ff; color: #4f46e5; }
.kpi-card[data-tone="slate"]   .kpi-card-icon { background: #f1f5f9; color: #475569; }

.kpi-card-value {
  font-size: 34px;
  font-weight: 700;
  color: #0f172a;         /* slate-900 */
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}
.kpi-card-sub {
  display: none;          /* aclaraciones movidas a tooltips */
}
.kpi-card-sub.kpi-subtle-visible {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}

/* Tooltip — refinado y clickable-friendly */
.kpi-has-tooltip { cursor: help; }
.kpi-has-tooltip .kpi-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  max-width: 260px;
  background: #0f172a;
  color: #f8fafc;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}
.kpi-has-tooltip .kpi-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
.kpi-has-tooltip:hover .kpi-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.kpi-tooltip .kpi-tooltip-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.kpi-tooltip .kpi-tooltip-row:last-child { border-bottom: none; }
.kpi-tooltip .kpi-tooltip-empty {
  margin: 0;
  color: #cbd5e1;
  font-style: italic;
}


/* ═══ BARRA DE FILTROS V2 — Compacta, una sola franja ═══════════════════════ */

:root { --fin-ctrl-h: 36px; }

.fin-filter-bar-v2 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 14px;
}

.fin-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}
.fin-field-grow { flex: 1 1 200px; min-width: 180px; }
.fin-field-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;         /* slate-400 */
  padding-left: 2px;
}
.fin-field-select {
  height: var(--fin-ctrl-h);
  padding: 0 30px 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
  transition: border-color .18s, box-shadow .18s;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.fin-field-select:focus,
.fin-field .search-input:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

/* Buscador dentro del fin-field */
.fin-field .search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  height: var(--fin-ctrl-h);
}
.fin-field .search-wrap .search-icon {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  display: flex;
}
.fin-field .search-input {
  width: 100%;
  height: var(--fin-ctrl-h);
  padding: 0 10px 0 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  color: #1e293b;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}

/* Botón Aplicar — compacto, ícono + texto corto */
.fin-filter-bar-v2 .btn-aplicar-filtros {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--fin-ctrl-h);
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background-color .18s, transform .1s;
}
.fin-filter-bar-v2 .btn-aplicar-filtros svg { flex-shrink: 0; }
.fin-filter-bar-v2 .btn-aplicar-filtros:hover { box-shadow: none; }
.fin-filter-bar-v2 .btn-aplicar-filtros:active { transform: translateY(1px); }

/* Acciones inline en la misma franja (Exportar, Generar Ingresos) */
.fin-filter-bar-v2 .fin-spacer {
  flex: 1 1 auto;
  min-width: 4px;
}
.fin-filter-bar-v2 .fin-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--fin-ctrl-h);
}
.fin-filter-bar-v2 .fin-inline-actions > .btn,
.fin-filter-bar-v2 .fin-inline-actions .dropdown-toggle {
  height: var(--fin-ctrl-h);
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: 8px;
}
.fin-filter-bar-v2 .btn-generar-ingresos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Legacy — ya no se usa, pero por si queda algún markup viejo */
.fin-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* ═══ GRÁFICOS DE EVOLUCIÓN — Panel de Salud ════════════════════════════════ */

.analisis-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}
@media (max-width: 900px) { .analisis-charts-grid { grid-template-columns: 1fr; } }

.analisis-chart-card {
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
}
.analisis-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.analisis-chart-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.analisis-chart-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #94a3b8;
}
.analisis-chart-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
}
.analisis-chart-badge-rose    { background: #ffe4e6; color: #be123c; }
.analisis-chart-badge-emerald { background: #d1fae5; color: #047857; }

.analisis-chart-wrap {
  position: relative;
  height: 220px;
}