/* ──────────────────────────────────────────────────────────────────────────
   El toque nuevo para TODA la web (17/10/2026, SOLO EN LOCAL, rama
   dashboard-nuevo).

   Xavi, tras el dashboard y Economía nuevos: «ahora mejoremos también el
   general de la web, todo; a ver si podemos darle un toque»; y luego:
   «modernizar la web con los cambios que hemos hecho al dashboard y a
   Economía, nada de la app».

   LAS ESQUINAS SIGUEN RECTAS. La web tiene una regla universal que las pone
   a cero («el sistema de formas», 11/9/2026: «la casa es cuadrada»), y el
   dashboard y Economía que Xavi ha visto y aprobado también salen cuadrados
   por ella. Redondear el resto haría que la web dejara de parecerse a lo que
   le ha gustado. Lo que se trae del dashboard es lo demás:
     · las tarjetas despegadas del fondo con una sombra suave, y que suben un
       pelo al pasar por encima si se pueden tocar;
     · los títulos de página grandes y cerrados, y las cifras de cabecera
       más grandes y con más peso;
     · la pastilla negra en los segmentados, la misma en todas las pantallas;
     · el botón principal con su sombra roja y el secundario en neutro;
     · las tablas con la cabecera en gris y la fila que se marca al pasar;
     · las ventanas con una sombra de verdad sobre el fondo desenfocado.
   Es solo una hoja que se carga la última: quitar su línea de index.html
   deja la web como estaba.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* El negro del dashboard (no el índigo de la tinta): Xavi, 17/10/2026,
     «cambia el azul oscuro por el negro, me gusta mucho más». */
  --wn-negro: #0e0e10;
  --wn-sombra: 0 1px 2px rgba(20,20,26,.04), 0 12px 32px rgba(20,20,26,.06);
  --wn-sombra-alta: 0 2px 4px rgba(20,20,26,.05), 0 18px 40px rgba(20,20,26,.11);
}
:root[data-tema="oscuro"] { --wn-negro: var(--text); --wn-sombra: none; --wn-sombra-alta: 0 18px 40px rgba(0,0,0,.45); }

/* ── Títulos de página ───────────────────────────────────────────────── */
.page-header { margin-bottom: 24px; align-items: center; }
/* Título, subtítulo, botón principal y «Ayuda» en la misma línea media
   (Xavi, 18/10/2026: «alineación vertical perfecta»). */
.page-header > .btn, .page-header > .ayuda-btn { align-self: center; }
.page-header h1, .page-title { font-size: 36px !important; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.page-subtitle { font-size: 13.5px; color: var(--text-soft); }
.section-title { font-size: 11px; letter-spacing: .09em; color: var(--text); }

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn { transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn-primary { box-shadow: 0 8px 20px rgba(239,35,60,.22); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(239,35,60,.28); }
.btn-ghost { color: var(--text); background: var(--surface); border: 1px solid var(--border-med); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(0) scale(.98); }

/* ── El segmentado: la pastilla negra en todas las pantallas ─────────── */
.seg-btn { font-weight: 600; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--wn-negro) !important; color: var(--surface) !important; box-shadow: 0 4px 12px rgba(20,20,26,.18) !important; }
.seg-btn.active * { color: inherit; }
.seg-btn.active .proy-tab-n { color: var(--surface); background: rgba(255,255,255,.18); }

/* ── Campos: el foco en tinta, como en el dashboard ──────────────────── */
.filter-input:focus, .filter-select:focus, .form-control:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 4px rgba(20,20,26,.08);
}

/* ── Tarjetas, paneles y tablas: despegadas con la sombra suave ──────── */
.table-wrap, .ux-tabla-wrap, .ux-cifras, .ux-barra,
.card, .form-card, .stat-card, .dash-widget, .builder-section, .veh-plegable, .pk, .pres-datos,
.ux-card, .gantt-section, .eco-panel, .eco-seccion, .pf-sec, .aj-seccion, .vf-bloque,
.it-card, .veh-card, .mf-card2, .proy-card, .tel-card, .crew-card, .td-widget, .fd-w, .fleet-proj-card,
.ficha-plantilla, .fichas-paso, .med-caja, .proy-cal-mini, .mo-kpis, .fd-cal, .cal-veh-wrap,
.td-cifras, .td-accesos, .tel-barra, .tel-mas, .aj-barra, .rvh, .med-deps, .ihh-dias, .ihx, .ihg-todo,
.fqr-arbol, .fqr-centro, .cal-mando, .pres-kpi {
  box-shadow: var(--wn-sombra) !important;
}
/* Lo que se toca sube un pelo al pasar por encima. */
.ux-card, .veh-card, .proy-card, .mf-card2, .tel-card, .crew-card, .fleet-proj-card, .pres-kpi, .ficha-plantilla, .med-caja {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.ux-card:hover, .veh-card:hover, .proy-card:hover, .mf-card2:hover, .tel-card:hover, .crew-card:hover,
.fleet-proj-card:hover, .pres-kpi:hover, .ficha-plantilla:hover, .med-caja:hover {
  transform: translateY(-2px);
  box-shadow: var(--wn-sombra-alta) !important;
}
.tabla th { background: var(--surface-2); font-size: 10.5px; letter-spacing: .09em; }
.tabla td { padding-top: 13px; padding-bottom: 13px; }
.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover { background: var(--surface-2); }

/* Las cifras de las cabeceras de cada sección, más protagonistas. */
.ux-cifra b { font-size: 30px; font-weight: 650; letter-spacing: -.04em; }

/* ── Ventanas ────────────────────────────────────────────────────────── */
.modal-overlay { background: rgba(10,10,14,.32); }
.modal { box-shadow: 0 30px 80px rgba(10,10,14,.28) !important; border: none !important; }
.modal-header h2 { font-size: 19px; letter-spacing: -0.025em; }