/* ============================================================
   TERRANOVA · Sistema de Administración Residencial v3.0
   Design System — Dark Green / Gold / White
   ============================================================ */

:root {
  --green-950: #030d08;
  --green-900: #071312;
  --green-800: #0d1f18;
  --green-700: #122b1e;
  --green-600: #1a4a2e;
  --green-500: #1e6b3c;
  --green-400: #25874b;
  --green-300: #34a85f;
  --green-200: #6dbf85;
  --green-100: #d4edda;
  --gold-800:  #6b5018;
  --gold-700:  #8a6820;
  --gold:      #c9a84c;
  --gold-light:#e5c96b;
  --gold-pale: #fdf6e3;
  --navy:      #0a1628;
  --white:     #ffffff;
  --off-white: #f5f7f4;
  --surface:   #ffffff;
  --surface-2: #f3f6f2;
  --surface-3: #eef2ec;
  --border:    #dfe8df;
  --border-2:  #c5d4c5;
  --text-1:    #0d1f18;
  --text-2:    #3a5244;
  --text-3:    #7a9a86;
  --text-4:    #b0c4b5;
  --danger:    #b91c1c;
  --danger-bg: #fff1f0;
  --danger-border: rgba(185,28,28,.2);
  --success:   #15803d;
  --success-bg:#f0fdf4;
  --warn:      #b45309;
  --warn-bg:   #fffbeb;
  --warn-border: rgba(180,83,9,.2);
  --info:      #1d4ed8;
  --info-bg:   #eff6ff;
  --purple:    #6d28d9;
  --purple-bg: #f5f3ff;
  --teal:      #0e7490;
  --teal-bg:   #ecfeff;
  --sidebar-w: 272px;
  --topbar-h:  68px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --shadow-xs: 0 1px 3px rgba(10,26,15,.06);
  --shadow-sm: 0 2px 10px rgba(10,26,15,.08);
  --shadow:    0 4px 20px rgba(10,26,15,.10);
  --shadow-lg: 0 12px 40px rgba(10,26,15,.14);
  --shadow-xl: 0 24px 64px rgba(10,26,15,.18);
  --font:      'Inter', system-ui, sans-serif;
  --font-serif:'Playfair Display', Georgia, serif;
  --transition: .18s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--off-white);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ─────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: linear-gradient(180deg, #091810 0%, #071410 40%, #050e09 100%);
  border-right: 1px solid rgba(201,168,76,.14);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Terranova brand */
.brand-terranova {
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(201,168,76,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(201,168,76,.055) 0%, transparent 100%);
  flex-shrink: 0;
}
.tn-logo-img {
  width: 190px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: drop-shadow(0 3px 14px rgba(201,168,76,.28));
}

/* Nav group */
.nav-group {
  flex: 1;
  padding: 10px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-group-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: rgba(201,168,76,.38);
  text-transform: uppercase;
  padding: 12px 8px 5px;
  margin-top: 4px;
}

/* Nav button */
.nav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(210,235,218,.55);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
  position: relative;
  white-space: nowrap;
}
.nav:hover {
  background: rgba(201,168,76,.07);
  color: rgba(210,235,218,.88);
}
.nav.active {
  background: linear-gradient(90deg, rgba(30,107,60,.65) 0%, rgba(21,75,42,.4) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.18), 0 2px 12px rgba(0,0,0,.18);
}
.nav.active::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; height: 64%;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 0 3px 3px 0;
}
.nav-icon { width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; }
.nav-icon svg { width: 15px; height: 15px; }
.nav.active .nav-icon { opacity: 1; }
.nav-soon { opacity: .5; cursor: default; }
.nav-soon:hover { background: transparent; color: rgba(210,235,218,.55); }
.nav-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 6px;
  background: rgba(201,168,76,.2);
  color: var(--gold);
  border-radius: 20px;
  border: 1px solid rgba(201,168,76,.3);
}

/* Closure widget */
.closure {
  margin: 4px 10px 8px;
  background: rgba(201,168,76,.05);
  border: 1px solid rgba(201,168,76,.16);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.closure-header { display: flex; align-items: center; gap: 7px; }
.closure-badge {
  width: 20px; height: 20px;
  background: var(--green-400);
  border-radius: 5px;
  display: grid; place-items: center;
  color: white; flex-shrink: 0;
}
.closure-title {
  font-size: 10px; font-weight: 700;
  letter-spacing: .6px; color: rgba(201,168,76,.8);
  text-transform: uppercase;
}
.closure-month { font-size: 12.5px; font-weight: 600; color: rgba(210,235,218,.8); }
.closure-hash {
  font-size: 9.5px; font-family: 'Courier New', monospace;
  color: rgba(255,255,255,.28); word-break: break-all;
}
.closure-btn {
  background: rgba(30,107,60,.4) !important;
  border: 1px solid rgba(201,168,76,.18) !important;
  border-radius: 7px !important;
  padding: 7px 10px !important;
  font-size: 11.5px !important;
  color: rgba(201,168,76,.85) !important;
  justify-content: center;
  margin-top: 2px;
}
.closure-btn:hover { background: rgba(30,107,60,.65) !important; }

/* Operator brand */
.operator-brand {
  margin: 0 10px 8px;
  padding: 9px 14px;
  border: 1px solid rgba(201,168,76,.09);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.015);
  flex-shrink: 0;
  gap: 4px;
}
.operator-logo-img {
  width: 110px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  filter: brightness(1.18) contrast(1.1) drop-shadow(0 1px 4px rgba(0,0,0,.3));
}

/* Mobile overlay */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 199; }

/* ══════════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════════ */
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--text-2); border-radius: 2px; }
.topbar h1 { font-size: 19px; font-weight: 800; color: var(--text-1); letter-spacing: -.3px; }
.topbar-meta { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.dot { color: var(--border-2); }
.controls { display: flex; gap: 7px; align-items: center; }
.ctrl-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.ctrl-btn:hover { border-color: var(--border-2); box-shadow: var(--shadow-xs); }
.ctrl-month { color: var(--green-500); border-color: rgba(30,107,60,.22); background: rgba(30,107,60,.04); }
.ctrl-month:hover { background: rgba(30,107,60,.08); }
.ctrl-closure { color: var(--gold-700); border-color: rgba(201,168,76,.3); background: var(--gold-pale); }
.ctrl-closure:hover { background: #faefd0; }

/* ══════════════════════════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════════════════════════ */
.view { display: none; }
.view.active { display: block; padding: 24px; animation: fadeUp .22s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── KPI Grids ───────────────────────────────────────────── */
.kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* KPI Card */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi.gold-accent::after  { background: linear-gradient(90deg, var(--gold-700), var(--gold-light)); }
.kpi.red-accent::after   { background: linear-gradient(90deg, var(--danger), #ef4444); }
.kpi.navy-accent::after  { background: linear-gradient(90deg, #3730a3, #6366f1); }
.kpi.teal-accent::after  { background: linear-gradient(90deg, var(--teal), #22d3ee); }
.kpi.purple-accent::after{ background: linear-gradient(90deg, var(--purple), #a855f7); }
.kpi:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.kpi-top { display: flex; justify-content: space-between; align-items: flex-start; }
.kpi-label { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .7px; }
.kpi-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.kpi-icon.green  { background: var(--success-bg); color: var(--success); }
.kpi-icon.gold   { background: var(--gold-pale);  color: var(--gold-700); }
.kpi-icon.red    { background: var(--danger-bg);  color: var(--danger); }
.kpi-icon.navy   { background: #eef2ff; color: #3730a3; }
.kpi-icon.teal   { background: var(--teal-bg); color: var(--teal); }
.kpi-icon.purple { background: var(--purple-bg); color: var(--purple); }

.kpi-value { font-size: 26px; font-weight: 800; color: var(--text-1); letter-spacing: -.5px; line-height: 1; }
.kpi-sub   { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.trend {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 20px;
}
.trend.up   { background: var(--success-bg); color: var(--success); }
.trend.down { background: var(--danger-bg);  color: var(--danger); }
.trend.warn { background: var(--warn-bg);    color: var(--warn); }
.trend.neutral { background: var(--surface-2); color: var(--text-3); }

/* ── Chart grid ─────────────────────────────────────────── */
.chart-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-grid-eq{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-wrap   { position: relative; height: 220px; }
.chart-wrap.tall { height: 280px; }
.chart-wrap.short { height: 160px; }

/* ── Card ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px;
}
.card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.card-title  { font-size: 14.5px; font-weight: 700; color: var(--text-1); }
.card-sub    { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.card h3     { font-size: 14.5px; font-weight: 700; margin-bottom: 16px; color: var(--text-1); }
.wide        { grid-column: span 2; }
.stack       { display: flex; flex-direction: column; gap: 18px; }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
thead { background: var(--surface-2); }
th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--surface-2); }
.td-primary { font-weight: 600; color: var(--text-1) !important; }
.td-amount  { font-weight: 700; color: var(--text-1) !important; font-variant-numeric: tabular-nums; }
.td-danger  { font-weight: 700; color: var(--danger) !important; }
.td-success { font-weight: 700; color: var(--success) !important; }
.td-warn    { font-weight: 600; color: var(--warn) !important; }
.td-muted   { color: var(--text-3) !important; font-size: 12px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-success  { background: var(--success-bg); color: var(--success); }
.badge-danger   { background: var(--danger-bg);  color: var(--danger); }
.badge-warn     { background: var(--warn-bg);     color: var(--warn); }
.badge-neutral  { background: var(--surface-2);   color: var(--text-2); }
.badge-navy     { background: #eef2ff; color: #3730a3; }
.badge-teal     { background: var(--teal-bg); color: var(--teal); }
.badge-purple   { background: var(--purple-bg); color: var(--purple); }
.badge-gold     { background: var(--gold-pale); color: var(--gold-700); }

/* ── Buttons ─────────────────────────────────────────────── */
.primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--green-500) 0%, var(--green-400) 100%);
  border: 0; border-radius: var(--radius); color: white;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 3px 12px rgba(30,107,60,.32);
  transition: all var(--transition);
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(30,107,60,.42); }
.primary:active { transform: none; }

.btn-gold {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold) 100%);
  border: 0; border-radius: var(--radius); color: white;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 3px 12px rgba(138,104,32,.3);
  transition: all var(--transition);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(138,104,32,.4); }

.ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: white; color: var(--text-2);
  font-family: var(--font); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
}
.ghost:hover { border-color: var(--border-2); background: var(--surface-2); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm); background: var(--danger-bg);
  color: var(--danger); font-family: var(--font);
  font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all var(--transition);
}
.btn-danger:hover { background: #fee2e2; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Forms ───────────────────────────────────────────────── */
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.formgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
label { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 11.5px; font-weight: 600; color: var(--text-2); letter-spacing: .1px; }
input, select, textarea {
  height: 42px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 13px; font-family: var(--font); font-size: 13px;
  color: var(--text-1); background: var(--surface); outline: none;
  transition: border-color .14s, box-shadow .14s;
}
textarea { height: auto; padding: 10px 13px; resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { border-color: var(--green-400); box-shadow: 0 0 0 3px rgba(30,107,60,.1); }
input::placeholder { color: var(--text-4); }
select option { background: white; }

/* ── Progress bar ────────────────────────────────────────── */
.progress-wrap { background: var(--surface-3); border-radius: 20px; height: 8px; overflow: hidden; }
.progress-bar  {
  height: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--green-500), var(--green-300));
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.progress-bar.gold   { background: linear-gradient(90deg, var(--gold-700), var(--gold-light)); }
.progress-bar.danger { background: linear-gradient(90deg, var(--danger), #ef4444); }
.progress-bar.navy   { background: linear-gradient(90deg, #3730a3, #6366f1); }

/* ── Alert cards ─────────────────────────────────────────── */
.alert-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius); margin-bottom: 8px;
  font-size: 13px; line-height: 1.4;
}
.alert-card.danger { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.alert-card.warn   { background: var(--warn-bg);   border: 1px solid var(--warn-border);   color: var(--warn); }
.alert-card.info   { background: var(--info-bg);   border: 1px solid rgba(29,78,216,.15);   color: var(--info); }
.alert-card.success{ background: var(--success-bg);border: 1px solid rgba(21,128,61,.18);   color: var(--success); }
.alert-icon { font-size: 16px; flex-shrink: 0; }

/* ── Flow table ──────────────────────────────────────────── */
.flow-table { display: flex; flex-direction: column; gap: 0; }
.flow-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.flow-row:last-child { border-bottom: 0; }
.flow-row span { color: var(--text-2); font-weight: 500; }
.flow-row b    { font-weight: 700; color: var(--text-1); }
.flow-positive b { color: var(--success); }
.flow-negative b { color: var(--danger); }
.flow-balance  b { color: var(--green-500); font-size: 15px; }
.flow-row.total { border-top: 2px solid var(--border-2); border-bottom: 0; margin-top: 4px; padding-top: 12px; }
.flow-row.total span { font-weight: 700; color: var(--text-1); }

/* ── Goal card ───────────────────────────────────────────── */
.goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition);
}
.goal-card:hover { box-shadow: var(--shadow-sm); }
.goal-header { display: flex; justify-content: space-between; align-items: flex-start; }
.goal-name { font-size: 14px; font-weight: 700; color: var(--text-1); }
.goal-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.goal-nums { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.goal-nums b { color: var(--text-1); font-weight: 700; }
.goal-pct { font-size: 22px; font-weight: 800; color: var(--green-500); }
.goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Supplier card ───────────────────────────────────────── */
.supplier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-xs);
}
.supplier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Weather widget ──────────────────────────────────────── */
.weather-card {
  background: linear-gradient(135deg, #0d2e1a 0%, #061810 60%, #091f12 100%);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-xl);
  padding: 22px;
  color: white;
  position: relative;
  overflow: hidden;
}
.weather-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(201,168,76,.08) 0%, transparent 70%);
  border-radius: 50%;
}
.weather-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.weather-location { font-size: 12px; font-weight: 600; color: rgba(201,168,76,.7); letter-spacing: .5px; text-transform: uppercase; }
.weather-condition { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 3px; }
.weather-temp { font-size: 52px; font-weight: 300; line-height: 1; color: white; }
.weather-icon { font-size: 42px; }
.weather-details { display: flex; gap: 18px; margin-bottom: 18px; }
.weather-detail { font-size: 12px; color: rgba(255,255,255,.55); }
.weather-detail strong { color: rgba(255,255,255,.85); display: block; font-size: 13.5px; }
.weather-divider { height: 1px; background: rgba(255,255,255,.08); margin-bottom: 16px; }
.weather-forecast { display: flex; gap: 0; }
.weather-day {
  flex: 1; text-align: center; padding: 8px 4px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.weather-day:last-child { border-right: 0; }
.wd-name  { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500; }
.wd-icon  { font-size: 20px; margin: 5px 0; }
.wd-temp  { font-size: 12px; color: rgba(255,255,255,.8); font-weight: 600; }
.wd-rain  { font-size: 10.5px; color: #60a5fa; margin-top: 2px; }
.wd-rec   { font-size: 9px; font-weight: 700; letter-spacing: .3px; margin-top: 3px; padding: 2px 5px; border-radius: 3px; }
.wd-rec.ok   { background: rgba(34,197,94,.25); color: #86efac; }
.wd-rec.skip { background: rgba(239,68,68,.2); color: #fca5a5; }

/* Irrigation summary */
.irrig-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.irrig-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.irrig-stat .is-val { font-size: 22px; font-weight: 800; color: var(--green-500); }
.irrig-stat .is-lab { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* ── Map container ───────────────────────────────────────── */
.map-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.map-svg-wrap { width: 100%; overflow: hidden; }
.map-svg-wrap svg { width: 100%; height: auto; display: block; }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--border); }
.map-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Map stats */
.map-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }

/* ── Rondines placeholder ────────────────────────────────── */
.coming-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 64px 32px; text-align: center;
}
.cs-icon { font-size: 56px; opacity: .4; }
.cs-title { font-size: 22px; font-weight: 700; color: var(--text-1); }
.cs-desc  { font-size: 14px; color: var(--text-3); max-width: 480px; line-height: 1.6; }
.cs-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  text-align: left; width: 100%; max-width: 480px;
}
.cs-feature {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 12.5px; color: var(--text-2);
  display: flex; gap: 8px; align-items: center;
}

/* ── Section divider ─────────────────────────────────────── */
.section-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 18px; color: var(--text-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.section-sep::before, .section-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Section analysis ────────────────────────────────────── */
.section-analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.sa-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.sa-name { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.sa-row  { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); padding: 3px 0; }
.sa-row b{ color: var(--text-1); font-weight: 600; }

/* ── Piefake ─────────────────────────────────────────────── */
.pieFake {
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(var(--green-400) 0 40%, var(--gold) 40% 62%, var(--danger) 62% 78%, #6366f1 78%);
  flex-shrink: 0; box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.pie-wrap { display: flex; align-items: center; gap: 20px; }
.pie-legend { display: flex; flex-direction: column; gap: 8px; }
.pie-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.pie-dot  { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

/* ── Reports page ────────────────────────────────────────── */
.report-hero {
  background: linear-gradient(135deg, #071510 0%, #0d2418 100%);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-xl);
  padding: 28px;
  color: white;
  margin-bottom: 18px;
}
.report-hero-title { font-family: var(--font-serif); font-size: 22px; color: var(--gold-light); margin-bottom: 4px; }
.report-hero-sub   { font-size: 13px; color: rgba(255,255,255,.5); }
.report-actions    { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.closure-list { display: flex; flex-direction: column; gap: 10px; }
.closure-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.ci-folio { font-size: 13px; font-weight: 700; color: var(--text-1); min-width: 140px; }
.ci-meta  { font-size: 12px; color: var(--text-3); flex: 1; }
.ci-hash  { font-size: 10px; font-family: monospace; color: var(--text-4); max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ── Utility ─────────────────────────────────────────────── */
.danger  { color: var(--danger)  !important; }
.success { color: var(--success) !important; }
.warn    { color: var(--warn)    !important; }
.muted   { color: var(--text-3)  !important; }
.bold    { font-weight: 700 !important; }
.mt-0    { margin-top: 0 !important; }
.mt-4    { margin-top: 4px !important; }
.mt-12   { margin-top: 12px !important; }
.mb-0    { margin-bottom: 0 !important; }
.text-sm { font-size: 12px; }
.mono    { font-family: 'Courier New', monospace; }

/* ── Report print content ────────────────────────────────── */
#print-report { display: none; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
  .kpi-grid-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1200px) {
  .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .chart-grid-2 { grid-template-columns: 1fr; }
  .chart-grid-3 { grid-template-columns: 1fr 1fr; }
  .goals-grid   { grid-template-columns: 1fr 1fr; }
  .supplier-grid{ grid-template-columns: 1fr 1fr; }
  .irrig-summary{ grid-template-columns: repeat(2, 1fr); }
  .map-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .section-analysis-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: -100%; transition: left .25s ease; box-shadow: var(--shadow-xl); }
  .sidebar.open { left: 0; }
  .sidebar-overlay.open { display: block; }
  .hamburger { display: flex; }
  .view.active { padding: 16px; }
  .topbar { padding: 0 16px; }
  .formgrid { grid-template-columns: 1fr; }
  .formgrid-3 { grid-template-columns: 1fr; }
  .kpi-grid-5, .kpi-grid-4, .grid { grid-template-columns: 1fr 1fr; }
  .chart-grid-3 { grid-template-columns: 1fr; }
  .goals-grid { grid-template-columns: 1fr; }
  .supplier-grid { grid-template-columns: 1fr; }
  .irrig-summary { grid-template-columns: 1fr 1fr; }
  .section-analysis-grid { grid-template-columns: 1fr; }
  .cs-features { grid-template-columns: 1fr; }
  .map-stats-grid { grid-template-columns: 1fr 1fr; }
  .aging-grid { grid-template-columns: 1fr 1fr; }
  .amenity-grid, .asset-grid, .doc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .aging-grid { grid-template-columns: 1fr; }
  .agreement-card { grid-template-columns: 1fr; }
  .cal-day { aspect-ratio: 1 / 1; min-height: 56px; padding: 4px; }
  .cal-num { font-size: 11px; }
  .kpi-grid-5, .kpi-grid-4, .grid { grid-template-columns: 1fr; }
  .wide { grid-column: span 1; }
  .chart-grid-eq { grid-template-columns: 1fr; }
  .irrig-summary { grid-template-columns: 1fr 1fr; }
  .map-stats-grid { grid-template-columns: 1fr 1fr; }
  .ctrl-btn span { display: none; }
  .ctrl-btn { padding: 8px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   v4.0 — NEW MODULES
══════════════════════════════════════════════════════════════ */

/* ── Premium card enhancement ────────────────────────────── */
.card { transition: box-shadow .22s ease, transform .22s ease; }
.card:hover { box-shadow: var(--shadow); }

.kpi { transition: box-shadow .22s ease, transform .22s ease, border-color .22s; }

/* Status dot (animated) */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.status-dot.live { background: var(--success); box-shadow: 0 0 0 0 rgba(21,128,61,.6); animation: pulse 2s infinite; }
.status-dot.warn { background: var(--warn); }
.status-dot.danger { background: var(--danger); }
.status-dot.neutral { background: var(--text-4); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(21,128,61,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(21,128,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); }
}

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--text-1); color: white; padding: 6px 10px; border-radius: 6px;
  font-size: 11px; white-space: nowrap; z-index: 100;
  box-shadow: var(--shadow);
}

/* ── CALENDAR (Amenidades) ───────────────────────────────── */
.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2) 0%, white 100%);
}
.cal-title { font-size: 16px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 10px; }
.cal-nav-btn {
  background: white; border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center;
  color: var(--text-2); transition: all .14s;
}
.cal-nav-btn:hover { background: var(--surface-2); border-color: var(--border-2); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--border); gap: 1px; padding: 1px;
}
.cal-head {
  background: var(--surface-2); padding: 10px 0; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: var(--text-3);
  text-transform: uppercase;
}
.cal-day {
  background: white; aspect-ratio: 1.1 / 1; padding: 8px;
  cursor: pointer; transition: background .14s, transform .14s;
  display: flex; flex-direction: column; gap: 3px; min-height: 70px;
  position: relative;
}
.cal-day:hover { background: var(--surface-2); }
.cal-empty { background: var(--surface-3); cursor: default; }
.cal-empty:hover { background: var(--surface-3); }
.cal-day.today { background: var(--gold-pale); }
.cal-day.today .cal-num { color: var(--gold-700); font-weight: 800; }
.cal-day.selected { background: var(--success-bg); box-shadow: inset 0 0 0 2px var(--green-500); }
.cal-num { font-size: 12px; font-weight: 600; color: var(--text-2); }
.cal-events { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; overflow: hidden; }
.cal-event {
  font-size: 9.5px; font-weight: 600;
  padding: 1px 5px; border-radius: 3px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event.aprobada    { background: var(--success-bg); color: var(--success); }
.cal-event.solicitada  { background: var(--warn-bg);    color: var(--warn); }
.cal-event.rechazada   { background: var(--danger-bg);  color: var(--danger); }
.cal-event.cancelada   { background: var(--surface-2);  color: var(--text-3); text-decoration: line-through; }
.cal-event.concluida   { background: var(--info-bg);    color: var(--info); }
.cal-more { font-size: 9px; color: var(--text-3); padding: 1px 5px; }

/* Amenity card */
.amenity-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  box-shadow: var(--shadow-xs); transition: all .22s;
  position: relative; overflow: hidden;
}
.amenity-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.amenity-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green-500), var(--gold));
}
.amenity-card.inactive::before { background: var(--text-4); }
.amenity-card.soon::before { background: linear-gradient(90deg, var(--gold-700), var(--gold-light)); }
.amenity-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.amenity-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.amenity-desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.amenity-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; font-size: 12px; }
.amenity-meta-item { color: var(--text-3); }
.amenity-meta-item strong { color: var(--text-1); display: block; font-weight: 700; }

/* Reservation row */
.res-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  margin-bottom: 8px; background: white; transition: all .14s;
}
.res-row:hover { border-color: var(--green-300); box-shadow: var(--shadow-xs); }
.res-time { font-weight: 700; color: var(--green-500); font-size: 13px; }
.res-info { display: flex; flex-direction: column; gap: 2px; }
.res-name { font-weight: 600; color: var(--text-1); font-size: 13px; }
.res-sub { font-size: 11.5px; color: var(--text-3); }
.res-folio { font-family: monospace; font-size: 10px; color: var(--text-4); }

/* ── SEMÁFORO (Presupuesto) ──────────────────────────────── */
.semaphore {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 4px 8px; background: var(--text-1); border-radius: 20px;
}
.sem-light {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.sem-light.active.red    { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.sem-light.active.yellow { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.sem-light.active.green  { background: #22c55e; box-shadow: 0 0 6px #22c55e; }

.budget-row td { vertical-align: middle; }
.budget-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.bs-ok       { background: var(--success-bg); color: var(--success); }
.bs-warn     { background: var(--warn-bg);    color: var(--warn); }
.bs-over     { background: var(--danger-bg);  color: var(--danger); }
.bs-noplan   { background: var(--surface-2);  color: var(--text-3); }

/* ── AGING BUCKETS (CxC) ─────────────────────────────────── */
.aging-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.aging-bucket {
  border-radius: var(--radius-lg); padding: 18px;
  border: 1px solid var(--border); background: var(--surface);
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.aging-bucket:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.aging-bucket::after {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px;
}
.aging-bucket.b-current::after { background: var(--success); }
.aging-bucket.b-30::after      { background: var(--warn); }
.aging-bucket.b-60::after      { background: #f97316; }
.aging-bucket.b-90::after      { background: var(--danger); }
.ab-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .7px; padding-left: 8px; }
.ab-value { font-size: 24px; font-weight: 800; color: var(--text-1); margin-top: 6px; padding-left: 8px; }
.ab-sub   { font-size: 12px; color: var(--text-3); margin-top: 4px; padding-left: 8px; }

/* Risk meter */
.risk-meter {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--surface-2);
}
.risk-bar {
  flex: 1; height: 8px; background: var(--surface-3);
  border-radius: 20px; overflow: hidden;
}
.risk-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success) 0%, var(--warn) 50%, var(--danger) 100%);
  border-radius: 20px;
  transition: width .6s ease;
}

/* ── RESERVE FUND ────────────────────────────────────────── */
.reserve-hero {
  background: linear-gradient(135deg, #0d2418 0%, #061712 100%);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--radius-xl);
  padding: 28px; color: white;
  position: relative; overflow: hidden;
}
.reserve-hero::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 70%);
  border-radius: 50%;
}
.rh-label { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: rgba(201,168,76,.7); text-transform: uppercase; }
.rh-value { font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: var(--gold-light); margin: 8px 0; line-height: 1; }
.rh-sub   { font-size: 13px; color: rgba(255,255,255,.55); }
.rh-progress { margin-top: 18px; }
.rh-progress-wrap { background: rgba(255,255,255,.1); border-radius: 20px; height: 10px; overflow: hidden; margin-top: 8px; }
.rh-progress-bar  { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 20px; transition: width .8s ease; }
.rh-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.rh-meta b { color: var(--gold-light); font-weight: 700; }

/* ── ASSETS ──────────────────────────────────────────────── */
.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.asset-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  position: relative; overflow: hidden;
  transition: all .22s;
}
.asset-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.asset-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.asset-card.ok::after      { background: var(--success); }
.asset-card.due::after     { background: var(--warn); }
.asset-card.overdue::after { background: var(--danger); }
.asset-name { font-size: 14px; font-weight: 700; color: var(--text-1); margin-bottom: 4px; }
.asset-loc  { font-size: 11.5px; color: var(--text-3); margin-bottom: 10px; }
.asset-meta { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 12px; }
.asset-meta div { display: flex; justify-content: space-between; }
.asset-meta span { color: var(--text-3); }
.asset-meta b { color: var(--text-1); font-weight: 600; }

/* ── DOCUMENTS ───────────────────────────────────────────── */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: white;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .14s;
}
.doc-row:hover { border-color: var(--green-300); box-shadow: var(--shadow-xs); }
.doc-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--gold-pale); color: var(--gold-700);
  display: grid; place-items: center; flex-shrink: 0; font-size: 18px;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-weight: 600; font-size: 13.5px; color: var(--text-1); margin-bottom: 2px; }
.doc-meta { font-size: 11px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.doc-meta .mono { font-family: monospace; font-size: 10px; }

/* ── COMMUNICATIONS ──────────────────────────────────────── */
.comm-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  border-left: 4px solid var(--green-400);
  margin-bottom: 12px; transition: all .14s;
}
.comm-card:hover { box-shadow: var(--shadow-xs); }
.comm-card.imp-alta   { border-left-color: var(--danger); background: linear-gradient(90deg, var(--danger-bg) 0%, white 30%); }
.comm-card.imp-media  { border-left-color: var(--warn); }
.comm-card.imp-baja   { border-left-color: var(--text-3); }
.comm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.comm-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.comm-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.comm-body { font-size: 13px; color: var(--text-2); line-height: 1.55; margin: 8px 0; }
.comm-foot { display: flex; gap: 10px; font-size: 11px; flex-wrap: wrap; align-items: center; }

/* ── AGREEMENTS / ASAMBLEAS ─────────────────────────────── */
.agreement-card {
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 10px; display: grid;
  grid-template-columns: 100px 1fr auto; gap: 14px; align-items: center;
}
.ag-date { font-size: 11px; color: var(--text-3); font-weight: 600; }
.ag-topic { font-weight: 700; font-size: 13.5px; color: var(--text-1); margin-bottom: 2px; }
.ag-text { font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.ag-meta { font-size: 11px; color: var(--text-3); display: flex; gap: 12px; flex-wrap: wrap; }

/* ── SANCTIONS ───────────────────────────────────────────── */
.sanction-row td b { font-weight: 700; color: var(--text-1); }
.sanction-folio { font-family: monospace; font-size: 11px; color: var(--text-3); }

/* ── Modal-like detail panel ─────────────────────────────── */
.detail-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px;
  border-left: 4px solid var(--green-500);
  margin-bottom: 16px;
}
.detail-panel h3 { margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════
   ACCORDION SIDEBAR NAV
══════════════════════════════════════════════════════════════ */
.nav-section { display: flex; flex-direction: column; }
.nav-section-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(201,168,76,.75);
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--transition);
  margin-top: 6px;
}
.nav-section-hdr span:nth-child(2) { flex: 1; }
.nav-section-hdr:hover { color: var(--gold); background: rgba(201,168,76,.06); }
.nav-section-hdr.open { color: var(--gold-light); background: rgba(201,168,76,.08); }
.nav-chevron {
  width: 13px; height: 13px;
  transition: transform var(--transition);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.nav-section-hdr.open .nav-chevron { transform: rotate(180deg); }
.nav-section-items {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 4px;
}
.nav-section-items.open { display: flex; }
.nav-child {
  padding-left: 24px !important;
  font-size: 12.5px !important;
}
.nci {
  display: inline-block;
  font-size: 8px;
  color: rgba(201,168,76,.4);
  flex-shrink: 0;
  margin-right: 2px;
}
.nav-child.active .nci { color: var(--gold); }
.nav-child:hover .nci { color: rgba(201,168,76,.75); }
/* Operator label */
.operator-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(201,168,76,.45);
  text-align: center;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════
   DIAGNÓSTICO EJECUTIVO
══════════════════════════════════════════════════════════════ */
.diag-card { border-top: 3px solid var(--green-500); }
.diag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.diag-col {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px 15px;
  border: 1px solid var(--border);
}
.diag-sano   { border-left: 3px solid var(--success); }
.diag-atencion { border-left: 3px solid var(--warn); }
.diag-gasto  { border-left: 3px solid var(--danger); }
.diag-calles { border-left: 3px solid var(--teal); }
.diag-prov   { border-left: 3px solid var(--purple); }
.diag-accion { border-left: 3px solid var(--gold); }
.diag-hdr {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--text-1);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.diag-item {
  font-size: 12px;
  color: var(--text-2);
  padding: 5px 0;
  line-height: 1.5;
  border-bottom: 1px dashed var(--border);
}
.diag-item:last-child { border-bottom: 0; }
@media (max-width: 1100px) {
  .diag-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .diag-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   v11 SPLASH PREMIUM (5.5 seg — full presence)
══════════════════════════════════════════════════════════════ */
.splash-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0d2418 0%, #030d08 65%, #000 100%);
  overflow: hidden;
  transition: opacity .55s ease;
  min-height: 100vh;
  padding: 24px;
}
.splash-overlay.splash-fade { opacity: 0; pointer-events: none; }
.splash-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,.05) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridMove 40s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 80px 80px; } }
.splash-bg-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(201,168,76,.10) 0%, transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(30,107,60,.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(201,168,76,.14) 0%, transparent 65%);
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.05); } }
.splash-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 560px;
  padding: 56px 64px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 120px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  animation: splashIn 1s cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes splashIn { from { opacity:0; transform:translateY(28px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.splash-logo-wrap {
  width: 320px; height: 170px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 14px;
}
.splash-logo-halo {
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.18) 0%, rgba(201,168,76,.05) 40%, transparent 70%);
  filter: blur(12px);
  z-index: 1;
}
.splash-logo {
  max-width: 320px; max-height: 170px;
  width: auto; height: auto;
  filter: drop-shadow(0 0 32px rgba(201,168,76,.5)) drop-shadow(0 8px 24px rgba(0,0,0,.4));
  animation: logoFloat 3.2s ease-in-out infinite;
  position: relative; z-index: 3;
}
@keyframes logoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.015); } }
.splash-logo-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(201,168,76,.3) 0%, transparent 70%);
  filter: blur(28px);
  animation: glowPulse 2.5s ease-in-out infinite;
  z-index: 2;
}
.splash-bg-lines {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.splash-line {
  position: absolute;
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.18) 50%, transparent 100%);
  animation: lineScan 6s linear infinite;
  opacity: 0;
}
.splash-line:nth-child(1) { top: 18%; animation-delay: 0s; }
.splash-line:nth-child(2) { top: 35%; animation-delay: 1.2s; }
.splash-line:nth-child(3) { top: 52%; animation-delay: 2.4s; }
.splash-line:nth-child(4) { top: 71%; animation-delay: 3.6s; }
.splash-line:nth-child(5) { top: 88%; animation-delay: 4.8s; }
@keyframes lineScan {
  0% { transform: translateX(-100%); opacity: 0; }
  10%, 70% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.splash-particles {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.splash-particles span {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(201,168,76,.4);
  box-shadow: 0 0 12px rgba(201,168,76,.6);
  animation: particleFloat 8s linear infinite;
  opacity: 0;
}
.splash-particles span:nth-child(1)  { left: 10%; bottom: -10px; animation-delay: 0s;   animation-duration: 7s; }
.splash-particles span:nth-child(2)  { left: 22%; bottom: -10px; animation-delay: 1.5s; animation-duration: 8s; }
.splash-particles span:nth-child(3)  { left: 33%; bottom: -10px; animation-delay: 3s;   animation-duration: 6s; }
.splash-particles span:nth-child(4)  { left: 45%; bottom: -10px; animation-delay: 4.5s; animation-duration: 7.5s; }
.splash-particles span:nth-child(5)  { left: 57%; bottom: -10px; animation-delay: .8s;  animation-duration: 8.5s; }
.splash-particles span:nth-child(6)  { left: 68%; bottom: -10px; animation-delay: 2.3s; animation-duration: 6.5s; }
.splash-particles span:nth-child(7)  { left: 79%; bottom: -10px; animation-delay: 3.8s; animation-duration: 7s; }
.splash-particles span:nth-child(8)  { left: 90%; bottom: -10px; animation-delay: 5.3s; animation-duration: 8s; }
.splash-particles span:nth-child(9)  { left: 15%; bottom: -10px; animation-delay: 6s;   animation-duration: 6s; }
.splash-particles span:nth-child(10) { left: 50%; bottom: -10px; animation-delay: 7s;   animation-duration: 7s; }
.splash-particles span:nth-child(11) { left: 75%; bottom: -10px; animation-delay: 4s;   animation-duration: 7.5s; }
.splash-particles span:nth-child(12) { left: 28%; bottom: -10px; animation-delay: 5.5s; animation-duration: 6.5s; }
@keyframes particleFloat {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: .7; }
  100% { transform: translateY(-110vh) scale(1.4); opacity: 0; }
}
.splash-status-meta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.splash-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #25874b;
  box-shadow: 0 0 10px rgba(37,135,75,.8);
  animation: pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.7); } }
.splash-status { transition: opacity .25s ease; }
.splash-tagline {
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 600; letter-spacing: 5.5px;
  color: rgba(201,168,76,.65);
  text-transform: uppercase;
  margin-top: 18px; margin-bottom: 46px;
  text-align: center;
}
.splash-bar-wrap {
  width: 100%; display: flex; align-items: center; gap: 18px;
}
.splash-bar {
  flex: 1; height: 9px;
  background: rgba(255,255,255,.07);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.splash-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  width: 0%;
  transition: width .65s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 18px rgba(201,168,76,.7), 0 0 4px rgba(229,201,107,.9);
  animation: barShine 2s linear infinite;
  position: relative;
}
.splash-bar-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation: barSweep 1.6s linear infinite;
}
@keyframes barShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes barSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.splash-percent {
  font-size: 14px; font-weight: 800;
  color: var(--gold-light); min-width: 48px; text-align: right;
  letter-spacing: .8px;
  font-variant-numeric: tabular-nums;
}
.splash-status {
  margin-top: 22px;
  font-size: 14.5px;
  color: rgba(255,255,255,.78);
  letter-spacing: .4px;
  min-height: 22px;
  transition: opacity .35s ease, transform .35s ease;
  text-align: center;
  font-weight: 500;
}
.splash-operator {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(201,168,76,.14);
  width: 100%;
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(201,168,76,.45); text-align: center;
  line-height: 1.7;
}
.splash-operator b { color: rgba(201,168,76,.75); letter-spacing: 3px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   v7.0 / v8.0 LOGIN SCREEN — PREMIUM
══════════════════════════════════════════════════════════════ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at top, #0d2418 0%, #030d08 50%, #000 100%);
  min-height: 100vh;
  overflow: hidden;
}
.login-side-decor {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(201,168,76,.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(30,107,60,.08) 0%, transparent 40%);
  pointer-events: none;
}
.login-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 20px;
  padding: 44px 48px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  backdrop-filter: blur(20px);
  position: relative; z-index: 2;
}
.login-card-premium {
  max-width: 480px;
  padding: 56px 56px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(201,168,76,.22);
  animation: loginIn .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes loginIn { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.login-card-top {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  margin-bottom: 24px;
}
.login-logo-wrap {
  width: 260px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  position: relative;
}
.login-logo-wrap::before {
  content: ""; position: absolute; inset: -30px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.18) 0%, rgba(201,168,76,.04) 45%, transparent 75%);
  filter: blur(14px);
  z-index: 0;
}
.login-logo-wrap-pro {
  width: 240px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  position: relative;
}
.login-logo-wrap-pro::before {
  content: ""; position: absolute; inset: -38px;
  background: radial-gradient(ellipse at center, rgba(201,168,76,.25) 0%, rgba(201,168,76,.06) 50%, transparent 78%);
  filter: blur(18px);
  z-index: 0;
}
.login-logo, .login-logo-pro {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 14px 36px rgba(201,168,76,.4)) drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.login-logo-pro { max-width: 240px; max-height: 130px; }
.login-subtitle, .login-title-pro {
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 600;
  color: var(--gold-light);
  letter-spacing: .6px;
  margin-bottom: 6px;
  text-align: center;
}
.login-title-pro { font-size: 17px; }
.login-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent);
  margin: 12px auto;
}
.login-operator-pro {
  font-size: 11px; letter-spacing: 1.4px;
  color: rgba(255,255,255,.5);
  text-align: center; line-height: 1.6;
}
.login-operator-pro b { color: var(--gold); letter-spacing: 2px; }
.login-operator-pro span { font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(201,168,76,.4); }
.login-operator {
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: rgba(201,168,76,.45);
  margin-bottom: 28px;
}
.login-form { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.login-label { display: flex; flex-direction: column; gap: 7px; }
.login-label span { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: rgba(201,168,76,.65); text-transform: uppercase; }
.login-input {
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(201,168,76,.22);
  border-radius: 11px;
  color: #fff; font-size: 14.5px;
  padding: 0 16px;
  height: 48px;
  outline: none; width: 100%;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.login-input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.login-input::placeholder { color: rgba(255,255,255,.28); }
.login-btn {
  margin-top: 10px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--green-900); font-weight: 800; font-size: 14.5px;
  border: none; border-radius: 12px;
  height: 52px; padding: 0 18px;
  cursor: pointer; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 10px 28px rgba(201,168,76,.32);
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.login-btn:hover { opacity: .96; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(201,168,76,.42); }
.login-btn:active { transform: translateY(0); }
.login-forgot {
  background: none; border: none; color: rgba(201,168,76,.5); font-size: 12px;
  cursor: pointer; text-align: center; padding: 4px;
}
.login-forgot:hover { color: var(--gold-light); }
.login-demo-note {
  margin-top: 20px; padding: 10px 14px;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 8px; font-size: 11.5px; color: rgba(255,255,255,.45);
  text-align: center;
}
.login-demo-note b { color: rgba(201,168,76,.85); }
.login-demo-badge {
  background: rgba(201,168,76,.2); color: var(--gold);
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 4px; margin-right: 6px;
}
.login-error {
  color: #fca5a5; font-size: 12px; text-align: center;
  padding: 8px; background: rgba(185,28,28,.2); border-radius: 8px;
}

/* ── MODAL PREMIUM ────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 8888;
  background: rgba(3,13,8,.7);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface); border-radius: 18px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  width: 100%; max-width: 600px; max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-box.modal-danger { border-top: 3px solid var(--danger); }
.modal-box.modal-info { border-top: 3px solid var(--info); }
.modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; font-size: 13.5px; color: var(--text-2); }
.modal-footer {
  padding: 12px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ── USER BADGE ───────────────────────────────────────────── */
.user-badge {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 40px; cursor: pointer;
  transition: background var(--transition);
}
.user-badge:hover { background: var(--surface-3); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-500); color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-info { display: flex; flex-direction: column; }
.user-name { font-size: 12px; font-weight: 700; color: var(--text-1); line-height: 1.2; }
.user-role { font-size: 10px; font-weight: 600; color: var(--text-3); line-height: 1.2; }
.ctrl-logout {
  background: rgba(185,28,28,.08) !important;
  color: var(--danger) !important;
  border-color: rgba(185,28,28,.2) !important;
}
.ctrl-logout:hover { background: rgba(185,28,28,.16) !important; }

/* ── CRM DETAIL MODAL ─────────────────────────────────────── */
.crm-detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.crm-detail-col { background: var(--surface-2); border-radius: 10px; padding: 14px; }
.crm-section-hdr { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.crm-field { font-size: 12px; color: var(--text-2); padding: 3px 0; border-bottom: 1px dashed var(--border); }
@media (max-width: 700px) { .crm-detail-grid { grid-template-columns: 1fr; } }

/* ── BADGE EXTRAS ─────────────────────────────────────────── */
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--surface-3); color: var(--text-3); border: 1px solid var(--border-2); }

/* ── TOPBAR CONTROLS RESPONSIVE ───────────────────────────── */
@media (max-width: 600px) {
  .user-info { display: none; }
  .user-badge { padding: 4px; }
}

/* ══════════════════════════════════════════════════════════════
   v8.0 — CENTRO DE VALIDACIÓN
══════════════════════════════════════════════════════════════ */
.val-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.val-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-xs);
}
.val-card.val-critica { border-left: 4px solid var(--danger); background: linear-gradient(180deg, #fff 0%, var(--danger-bg) 100%); }
.val-card.val-advertencia { border-left: 4px solid var(--warn); background: linear-gradient(180deg, #fff 0%, var(--warn-bg) 100%); }
.val-card.val-informativa { border-left: 4px solid var(--info); background: linear-gradient(180deg, #fff 0%, var(--info-bg) 100%); }
.val-card-hdr { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.val-mod-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.val-mod-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.val-mod-count { font-size: 11px; color: var(--text-3); }
.val-items { display: flex; flex-direction: column; gap: 10px; }
.val-item { background: rgba(255,255,255,.6); border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); }
.val-item-lvl { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 5px; }
.val-item-msg { font-size: 12.5px; color: var(--text-1); line-height: 1.4; }
.val-item-fix { font-size: 11.5px; color: var(--text-3); margin-top: 4px; font-style: italic; }
.val-ignore-btn { font-size: 10.5px !important; padding: 4px 9px !important; margin-top: 6px !important; }
.nav-validation-pill {
  display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════
   v8.0 — FICHA 360
══════════════════════════════════════════════════════════════ */
.f360-wrap { display: flex; flex-direction: column; gap: 14px; }
.f360-summary-bar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 100%);
  border-radius: var(--radius); padding: 14px;
  color: var(--gold-light);
}
.f360-sb-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.f360-sb-item b { font-family: var(--font-serif); font-size: 17px; color: var(--gold-light); }
.f360-sb-item span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(229,201,107,.6); margin-top: 2px; }
.f360-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.f360-tab {
  background: none; border: none;
  padding: 9px 13px; font-size: 12px; font-weight: 600;
  color: var(--text-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.f360-tab:hover { color: var(--text-1); background: var(--surface-2); border-radius: 6px 6px 0 0; }
.f360-tab.active { color: var(--green-500); border-bottom-color: var(--gold); }
.f360-panels { min-height: 240px; }
.f360-panel { display: none; padding-top: 14px; }
.f360-panel.active { display: block; animation: f360FadeIn .3s ease; }
@keyframes f360FadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.f360-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.f360-field { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; background: var(--surface-2); border-radius: 8px; }
.f360-field label { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.f360-field div { font-size: 13px; color: var(--text-1); font-weight: 600; }
.f360-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.f360-table th { background: var(--surface-2); padding: 8px 10px; text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
.f360-table td { padding: 8px 10px; border-bottom: 1px dashed var(--border); color: var(--text-2); }
.f360-table tr:hover td { background: var(--surface-2); }
.f360-summary { background: var(--info-bg); border-left: 3px solid var(--info); padding: 10px 12px; border-radius: 6px; font-size: 12.5px; color: var(--info); margin-bottom: 10px; }
.f360-contacts { display: flex; flex-direction: column; gap: 8px; }
.f360-contact-card { padding: 11px 13px; background: var(--surface-2); border-radius: 8px; border-left: 3px solid var(--gold); }
.f360-contact-name { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 3px; }
.f360-contact-meta { font-size: 11.5px; color: var(--text-2); margin-bottom: 3px; }
.f360-contact-perms { font-size: 11px; color: var(--text-3); }
.f360-obs-block { padding: 14px; background: var(--surface-2); border-radius: 8px; font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* Hacer el modal-box más ancho cuando contiene una ficha 360 */
.modal-box:has(.f360-wrap) { max-width: 920px; }

/* ══════════════════════════════════════════════════════════════
   v8.0 — CHART INSIGHTS (Qué nos dice + Recomendación)
══════════════════════════════════════════════════════════════ */
.chart-insight {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.chart-insight-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.chart-insight-row:last-child { margin-bottom: 0; }
.chart-insight-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.tag-tells { background: var(--info-bg); color: var(--info); }
.tag-rec   { background: rgba(201,168,76,.15); color: var(--gold-800); }

/* ══════════════════════════════════════════════════════════════
   v11 RESPONSIVE — Splash + Login en móvil
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .splash-overlay { padding: 14px; }
  .splash-content {
    max-width: 92vw;
    padding: 36px 24px 30px;
    border-radius: 18px;
  }
  .splash-logo-wrap {
    width: 240px;
    height: 130px;
    margin-bottom: 8px;
  }
  .splash-logo {
    max-width: 240px;
    max-height: 130px;
  }
  .splash-tagline {
    font-size: 11px;
    letter-spacing: 3.5px;
    margin-top: 12px;
    margin-bottom: 32px;
  }
  .splash-bar { height: 8px; }
  .splash-bar-wrap { gap: 12px; }
  .splash-percent { font-size: 13px; min-width: 42px; }
  .splash-status {
    font-size: 13px;
    margin-top: 16px;
    min-height: 20px;
  }
  .splash-operator {
    font-size: 9px;
    letter-spacing: 1.8px;
    margin-top: 30px;
    padding-top: 16px;
  }
  .login-card-premium {
    max-width: 92vw;
    padding: 38px 26px 28px;
  }
  .login-logo-wrap-pro {
    width: 200px;
    height: 110px;
  }
  .login-logo-pro {
    max-width: 200px;
    max-height: 110px;
  }
  .login-title-pro {
    font-size: 15px;
  }
  .login-operator-pro {
    font-size: 10px;
  }
  .login-input { height: 46px; font-size: 14px; }
  .login-btn { height: 50px; font-size: 14px; }
}
@media (max-width: 380px) {
  .splash-content { padding: 28px 18px 24px; }
  .splash-logo-wrap { width: 200px; height: 110px; }
  .splash-logo { max-width: 200px; max-height: 110px; }
  .login-logo-wrap-pro { width: 180px; height: 100px; }
  .login-logo-pro { max-width: 180px; max-height: 100px; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT — v10 PREMIUM EDITORIAL
══════════════════════════════════════════════════════════════ */
@page {
  size: A4;
  margin: 18mm 18mm 20mm 18mm;
}
@media print {
  /* hide UI */
  .sidebar, .topbar, .primary, .btn-gold, .ghost, .btn-danger,
  .operator-brand, .hamburger, .controls, .sidebar-overlay,
  .login-overlay, .modal-overlay, .splash-overlay,
  nav, .nav-section, .closure { display: none !important; }
  body > * { display: none !important; }
  #print-report { display: block !important; }
  /* base */
  html, body { background: #fff !important; color: #0d1f18 !important; font-size: 11pt; }
  /* page breaks */
  .rp-section, .rr-section, .rp-table, .rr-goal, .rp-grid, .rp-kpi {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .rp-section + .rp-section,
  .rr-section + .rr-section { page-break-before: auto; }
  .rp-h2, .rr-h2 { page-break-after: avoid; }
  table { page-break-inside: auto; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr { page-break-inside: avoid; }
  /* contrast on white paper */
  .rp-narrative, .rp-alert, .rr-msg { color: #0d1f18 !important; }
  .rp-alert.info { background: #eff6ff !important; color: #1e40af !important; border-left: 3px solid #1d4ed8 !important; }
  .rp-alert.warn { background: #fffbeb !important; color: #92400e !important; border-left: 3px solid #b45309 !important; }
  .rp-alert.danger { background: #fff1f0 !important; color: #991b1b !important; border-left: 3px solid #b91c1c !important; }
  .rp-alert.success { background: #f0fdf4 !important; color: #166534 !important; border-left: 3px solid #15803d !important; }
  /* charts: hide canvas (use printable HTML/SVG bars instead) */
  .rp-canvas-only, .chart-wrap canvas, .chart-insight { display: none !important; }
  .print-only { display: block !important; }
  /* no shadows */
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
}
.print-only { display: none; }


/* ============================================================
   FINAL QA OVERRIDES — Branding, reports and print hierarchy
   Generated audit patch
   ============================================================ */

/* Logo clarity and hierarchy */
.splash-logo-wrap{
  width:min(72vw,520px)!important;
  height:320px!important;
  margin-bottom:22px!important;
}
.splash-logo{
  max-width:min(72vw,520px)!important;
  max-height:320px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  image-rendering:-webkit-optimize-contrast;
  filter:drop-shadow(0 0 42px rgba(201,168,76,.58)) drop-shadow(0 14px 38px rgba(0,0,0,.55))!important;
}
.splash-logo-wrap::after{
  content:"";
  position:absolute;
  inset:20px 10px;
  border-radius:34px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.05), rgba(201,168,76,.07), transparent 72%);
  z-index:0;
}
.splash-tagline{
  margin-top:4px!important;
  font-size:15px!important;
  letter-spacing:.26em!important;
}
.login-card-premium{
  width:min(94vw,520px)!important;
  padding:44px 48px 40px!important;
}
.login-logo-wrap-pro{
  width:min(82vw,430px)!important;
  height:300px!important;
  margin:0 auto 18px!important;
}
.login-logo-pro{
  max-width:min(82vw,430px)!important;
  max-height:300px!important;
  object-fit:contain!important;
  image-rendering:-webkit-optimize-contrast;
  filter:drop-shadow(0 16px 40px rgba(201,168,76,.38)) drop-shadow(0 8px 18px rgba(0,0,0,.5))!important;
}
.login-title-pro{
  font-size:22px!important;
  letter-spacing:.035em!important;
}
.brand-terranova{
  padding:18px 18px 16px!important;
  min-height:168px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.tn-logo-img{
  width:230px!important;
  max-height:150px!important;
  object-fit:contain!important;
  image-rendering:-webkit-optimize-contrast;
  filter:drop-shadow(0 6px 18px rgba(201,168,76,.35))!important;
}
.operator-brand{
  padding:14px!important;
}
.operator-logo-img{
  width:150px!important;
  max-height:64px!important;
  object-fit:contain!important;
  opacity:1!important;
  filter:brightness(1.08) contrast(1.08) drop-shadow(0 2px 8px rgba(0,0,0,.32))!important;
}

/* Charts should not float alone in oversized empty cards */
.chart-card, .card:has(canvas){
  min-height:unset!important;
}
.chart-wrap{
  min-height:280px;
}
.chart-insight, .insight-box, .chart-note{
  border-left:4px solid var(--gold);
  background:linear-gradient(180deg,#fffdf5,#f7f3e6);
  color:var(--text-1)!important;
  padding:14px 16px;
  border-radius:12px;
  margin-top:14px;
  font-size:13px;
  line-height:1.55;
}

/* Report editorial quality */
#print-report .rp-page,
#print-report .rr-page,
#print-report .admin-report,
#print-report .ac-report,
#print-report .resident-report{
  max-width:980px;
  margin:0 auto;
  background:#fff;
  color:#0d1f18;
}
#print-report .rp-header,
#print-report .rr-header{
  border-bottom:2px solid #c9a84c;
  padding-bottom:18px;
  margin-bottom:22px;
}
#print-report img[src*="logo-terranova"]{
  max-width:190px!important;
  max-height:150px!important;
  object-fit:contain!important;
}
#print-report img[src*="logo-cgo"]{
  max-width:135px!important;
  max-height:54px!important;
  object-fit:contain!important;
}
#print-report .rp-section,
#print-report .rr-section{
  border:1px solid #dfe8df;
  border-radius:16px;
  padding:20px 22px;
  margin:18px 0;
  background:#fff;
}
#print-report .rp-h2,
#print-report .rr-h2{
  font-family:var(--font-serif, Georgia, serif);
  font-size:19px;
  color:#0d1f18;
  border-bottom:1px solid #e7ecdf;
  padding-bottom:10px;
  margin:0 0 16px;
}
#print-report table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
#print-report th{
  background:#0d1f18!important;
  color:#fff!important;
  padding:9px 10px;
  text-align:left;
}
#print-report td{
  padding:9px 10px;
  border-bottom:1px solid #e3eadf;
  color:#0d1f18!important;
}
#print-report .rp-footer,
#print-report .rr-footer{
  margin-top:28px;
  padding-top:12px;
  border-top:1px solid #d9dfd6;
  color:#5d7464;
  font-size:10px;
  text-align:center;
}

/* Print-safe output */
@page{
  size: Letter;
  margin:18mm 16mm 18mm 16mm;
}
@media print{
  html,body{
    background:#fff!important;
    color:#0d1f18!important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  body > *{display:none!important;}
  #print-report{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }
  #print-report .rp-page,
  #print-report .rr-page,
  #print-report .admin-report,
  #print-report .ac-report,
  #print-report .resident-report{
    max-width:none!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    box-shadow:none!important;
  }
  #print-report .rp-section,
  #print-report .rr-section,
  #print-report .rp-grid,
  #print-report .rr-goal,
  #print-report table,
  #print-report tr{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  #print-report .rp-section,
  #print-report .rr-section{
    margin:11mm 0!important;
    padding:8mm!important;
    border:1px solid #d4ded0!important;
    border-radius:8px!important;
  }
  #print-report .rp-h2,
  #print-report .rr-h2{
    color:#0d1f18!important;
    font-size:15pt!important;
  }
  #print-report .rp-alert,
  #print-report .rr-msg,
  #print-report .rp-narrative{
    color:#0d1f18!important;
    background:#f7faf5!important;
    border-left:3px solid #c9a84c!important;
  }
  #print-report canvas{
    max-width:100%!important;
  }
  .print-only{display:block!important;}
}