/* =========================================================
   ServicioTec — Parche tipográfico y de suavizado visual
   Fuente condensada: Barlow Condensed (títulos, tablas, botones, KPIs)
   Fuente de lectura : Inter (párrafos, formularios, textos largos)
   Cargar SIEMPRE después de styles.css
   ========================================================= */

:root {
  --font-cond: 'Barlow Condensed', 'Roboto Condensed', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Suavizado de color: grises cálidos en lugar de negros puros */
  --text:       #1f2937;
  --text-muted: #6b7280;
  --border:     #e8ebef;
  --surface-2:  #f6f7f9;

  /* Radios más amables */
  --radius:     16px;
  --radius-sm:  10px;

  /* Sombras suaves */
  --shadow:     0 2px 6px rgba(15,23,42,.06), 0 10px 30px rgba(15,23,42,.05);
  --shadow-lg:  0 16px 40px rgba(15,23,42,.16);
}

html[data-theme="oscuro"] {
  --text:       #e5e7eb;
  --text-muted: #9aa5b1;
  --border:     #2b3442;
}

body {
  font-family: var(--font-body);
  line-height: 1.55;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Títulos y marca: condensada ---------- */
h1, h2, h3, h4, h5, h6,
.brand, .page-title, .card-title, .section-title,
.metric-value, .kpi-value, .stat-value {
  font-family: var(--font-cond);
  letter-spacing: .005em;
  font-weight: 600;
  color: var(--text);
}
h1 { font-size: 1.72rem; line-height: 1.2; }
h2 { font-size: 1.42rem; line-height: 1.25; }
h3 { font-size: 1.18rem; line-height: 1.3; }
.metric-value, .kpi-value, .stat-value { font-weight: 700; letter-spacing: 0; }

/* ---------- Tablas: condensada + más aire ---------- */
table, .table, .data-table { font-family: var(--font-cond); font-size: 15px; line-height: 1.35; }
table th, .table th {
  font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  font-size: 12px; color: var(--text-muted);
  padding: 8px 10px !important;
}
table td, .table td { padding: 8px 10px !important; }
table tbody tr { transition: background .15s ease; }
table tbody tr:hover { background: rgba(2,132,199,.045); }

/* Los importes y números tabulares se alinean mejor */
td, th, .metric-value, .kpi-value, .stat-value, .money, .num {
  font-variant-numeric: tabular-nums;
}

/* ---------- Botones: condensada, más padding, esquinas suaves ---------- */
.btn, button, input[type="submit"], input[type="button"], .badge, .chip, .tag, .pill {
  font-family: var(--font-cond);
  letter-spacing: .02em;
}
.btn, button, input[type="submit"], input[type="button"] {
  font-weight: 600;
  font-size: 15px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  transition: background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:hover, button:hover { box-shadow: 0 2px 8px rgba(15,23,42,.10); }
.btn:active, button:active { transform: translateY(1px); }
.btn-sm { font-size: 13.5px; padding: 6px 11px; }

.badge, .chip, .tag, .pill {
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  font-size: 11.5px; border-radius: 999px; padding: 3px 10px;
}

/* ---------- Navegación lateral ---------- */
.nav-link { font-family: var(--font-cond); font-size: 15.5px; letter-spacing: .015em; }
.nav-section { font-family: var(--font-cond); letter-spacing: .1em; }

/* ---------- Tarjetas y superficies ---------- */
.card, .panel, .box, .metric, .kpi, .company-banner, .mobile-card {
  border-radius: var(--radius);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.card, .panel, .box { padding: 18px; }

/* ---------- Formularios: cuerpo legible (Inter) ---------- */
input, select, textarea, label, .form-label, p, li, .muted, .help, small {
  font-family: var(--font-body);
}
input, select, textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 9px 12px;
  font-size: 14.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(2,132,199,.14);
}
label, .form-label { font-weight: 500; color: var(--text-muted); }

/* ---------- Textos largos siempre en Inter ---------- */
p, .text, .desc, .descripcion, .notas, .observaciones, .contenido {
  font-family: var(--font-body);
  line-height: 1.62;
}

/* ---------- Móvil: un punto más de tamaño en la condensada ---------- */
@media (max-width: 820px) {
  table, .table, .data-table { font-size: 15px; }
  .mobile-card, .mobile-card * { font-family: var(--font-cond); }
  .mobile-card p, .mobile-card .desc { font-family: var(--font-body); }
  .btn, button { font-size: 15px; }
}

/* ---------- Impresión / PDF: mantener la condensada compacta ---------- */
@media print {
  body, table, .table { font-family: var(--font-cond), Arial, sans-serif; }
  p, td.desc { font-family: var(--font-body), Arial, sans-serif; }
  .card, .panel, .box { box-shadow: none; }
}