/* === DOM Digital · Theme overrides
 *  Tipografía: Cinzel (display) + Josefin Sans (body) + JetBrains Mono (data)
 *  Paleta: Trust teal + professional blue (recomendación ui-ux-pro-max real estate)
 *
 *  Carga este archivo DESPUÉS de los estilos de la página para que sus tokens
 *  se sobrescriban globalmente.
 */

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* === Tokens nuevos === */
:root {
  /* Tipografía */
  --font-display: 'Cinzel', 'Times New Roman', Georgia, serif;
  --font-body: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', ui-monospace, monospace;

  /* Paleta — Trust teal + Professional blue (real estate luxury) */
  --brand: #0F766E;          /* teal-700 — primary trust */
  --brand-soft: #CCFBF1;     /* teal-100 — chips, hover bg */
  --brand-deep: #134E4A;     /* teal-900 — body ink */
  --secondary: #14B8A6;      /* teal-500 — accent */
  --cta: #0369A1;            /* sky-700 — CTA buttons (Contact / Action) */
  --cta-soft: #DBEAFE;       /* sky-100 */

  --bg: #F0FDFA;             /* teal-50 — main background, more mint than gray */
  --paper: #ffffff;
  --line: #CCFBF1;           /* teal-100 — bordes suaves teal-tinted */
  --line-strong: #99F6E4;    /* teal-200 — bordes con más presencia */

  --ink: #134E4A;            /* teal-900 — texto principal (16:1 sobre blanco, AAA) */
  --muted: #475569;          /* slate-600 — texto secundario (7:1, AAA) */
  --muted-2: #64748B;        /* slate-500 — texto terciario (5:1, AA) */

  /* Estados — todos validados WCAG AA texto normal sobre blanco/mint */
  --alarm: #B91C1C;          /* red-700 — 6.3:1 ✓ AAA */
  --alarm-soft: #FEE2E2;
  --warn: #92400E;           /* amber-800 — 7.4:1 ✓ AAA */
  --warn-soft: #FEF3C7;
  --ok: #047857;             /* emerald-700 — 5.8:1 ✓ AA */
  --ok-soft: #D1FAE5;
  --info: #0369A1;           /* sky-700 — 5.9:1 ✓ AA */
  --info-soft: #DBEAFE;
  /* Secondary teal-500 falla contraste para texto — usar SOLO como fondo decorativo */

  /* Sidebar tokens (override) */
  --sidebar-bg: #ffffff;
  --sidebar-border: var(--line);
  --sidebar-ink: var(--ink);
  --sidebar-muted: var(--muted);
  --sidebar-hover: var(--bg);
  --sidebar-active: var(--brand);
  --sidebar-accent-cert: #1e40af;
  --sidebar-accent-bol: #c2410c;
  --sidebar-accent-contrib: var(--brand);
  --sidebar-accent-sys: #6b21a8;
}

/* === Aplicar tipografía global === */
body {
  font-family: var(--font-body) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  background: var(--bg);
  color: var(--ink);
}

/* Headings — Cinzel solo en h1/h2 grandes para no sobrecargar tablas */
h1 {
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand-deep);
}
h2, h3 {
  font-family: var(--font-body) !important;
  font-weight: 600;
  color: var(--brand-deep);
  letter-spacing: -0.01em;
}

/* Brand del nav — tipografía display sobria */
nav.nav .brand {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 14px;
  color: var(--brand-deep);
}

/* === Typography fine-tuning === */
.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  letter-spacing: 0.005em;
}
.mono, code, pre, .cmd-block {
  font-family: var(--font-mono);
}

/* === Botones — usar nueva paleta === */
.btn {
  background: var(--brand);
  color: white;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.btn:hover { background: var(--brand-deep); }
.btn.outline {
  background: white;
  color: var(--brand);
  border-color: var(--line-strong);
}
.btn.outline:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.btn.cta { background: var(--cta); }
.btn.cta:hover { background: #075985; }
.btn.danger { background: var(--alarm); }

/* === Cards más teal-tinted === */
section {
  background: var(--paper);
  border-color: var(--line);
}
section header {
  border-bottom-color: var(--line);
  background: linear-gradient(to bottom, #ffffff, #fafafa);
}

/* === Tablas más limpias === */
table.std th {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--muted);
  letter-spacing: 0.06em;
  font-size: 10.5px;
  font-weight: 700;
}
table.std td { color: var(--ink); }
table.std tbody tr:hover { background: var(--bg); }

/* === KPIs heredan === */
.kpi {
  background: var(--paper);
  border-color: var(--line);
}
.kpi .label {
  font-family: var(--font-mono);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.kpi .val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: -0.02em;
}
.kpi .sub { color: var(--muted-2); }
.kpi.alarm { background: linear-gradient(135deg, var(--alarm-soft), #fef9f9); border-color: #fecaca; }
.kpi.warn { background: linear-gradient(135deg, var(--warn-soft), #fffdf5); border-color: #fde68a; }
.kpi.ok { background: linear-gradient(135deg, var(--ok-soft), #f0fdf4); border-color: #86efac; }
.kpi.info { background: linear-gradient(135deg, var(--info-soft), #f0f9ff); border-color: #93c5fd; }

/* === Sidebar adaptado === */
nav.nav {
  background: var(--sidebar-bg);
  border-right-color: var(--line);
}
nav.nav .nav-links > a:hover,
nav.nav .nav-group-items a:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
nav.nav .nav-links > a.active,
nav.nav .nav-group-items a.active {
  background: var(--brand-soft);
  border-left-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}

/* === Tenant chip — armonizado === */
nav.nav .right .tenant-avatar {
  background: var(--brand);
}
.tenant-dropdown .item.active {
  background: var(--brand-soft);
}
.tenant-dropdown .item .check { color: var(--brand); }

/* === Hub cards (admin/health) === */
.hub-card {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 14px;
}
.hub-card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.10);
}
.hub-card .icon {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

/* === Project cards === */
.proj-card {
  background: var(--paper);
  border-color: var(--line);
}
.proj-card:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.10);
}
.proj-card .proj-name { color: var(--brand-deep); }
.proj-card .btn-mini.primary {
  background: var(--cta);
  border-color: var(--cta);
}

/* === Pills tenant — re-tonificadas con paleta más coherente === */
.tenant-pill.crillon { background: #DBEAFE; color: #1E3A8A; }   /* Crillón sigue azul institucional */
.tenant-pill.ice { background: #CCFBF1; color: #134E4A; }        /* ICE = teal (alineado con brand) */
.tenant-pill.vcm { background: #FEE2E2; color: #7F1D1D; }
.tenant-pill.westminster { background: #F1F5F9; color: #334155; }
.tenant-pill.ipq { background: #FEF3C7; color: #78350F; }
.tenant-pill.cdi { background: #E0E7FF; color: #3730A3; }
.tenant-pill.comaser { background: #FCE7F3; color: #831843; }
.tenant-pill.icm { background: #DBEAFE; color: #1E3A8A; }

/* === Mantener Crillón shield SVG fill original (es identidad de marca) === */
nav.nav .brand .shield path[fill="#01466D"] { fill: #01466D !important; }

/* === Estado pills más sobrios === */
.estado-pill.activo { background: var(--ok-soft); color: #065F46; }
.estado-pill.fusionado { background: var(--warn-soft); color: #78350F; }
.estado-pill.subdividido { background: var(--cta-soft); color: #1E3A8A; }
.estado-pill.re_rolado { background: #E0E7FF; color: #3730A3; }
.estado-pill.copropiedad_origen { background: #FCE7F3; color: #831843; }
.estado-pill.vendido_holding { background: var(--brand-soft); color: var(--brand-deep); }
.estado-pill.vendido_tercero { background: var(--alarm-soft); color: #7F1D1D; }
.estado-pill.inactivo_otro { background: #F1F5F9; color: #334155; }

/* === Eyebrow / subtitulos === */
.subnav { color: var(--muted); }
.subnav a { color: var(--brand); }
.subnav a:hover { color: var(--brand-deep); }

/* === Tabs === */
.tabs a {
  font-family: var(--font-body);
  color: var(--muted);
  font-weight: 500;
}
.tabs a:hover { color: var(--brand); }
.tabs a.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* === Forms === */
input, select, textarea {
  font-family: var(--font-body);
  border-color: var(--line-strong);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
}

/* === Dashboard ejecutivo === */
.exec-card .label {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.exec-card .val {
  font-family: var(--font-mono);
  color: var(--brand-deep);
}
.exec-section-title {
  font-family: var(--font-mono);
  color: var(--brand);
  letter-spacing: 0.14em;
}

/* === Print: forzar tipografía system para evitar problemas con fuentes web === */
@media print {
  * { font-family: -apple-system, system-ui, sans-serif !important; }
  .mono, code, pre, [class*='mono'] { font-family: 'SF Mono', monospace !important; }
}