/* ──────────────────────────────────────────────────────────────────────────
   El sistema de toda la web, unificado (18/10/2026, SOLO EN LOCAL).

   Xavi: «refactorización global… unificar el sistema de diseño, la paleta,
   la jerarquía visual en TODAS las pantallas». Las capas de cada sección
   (dashboard, Economía, Tecnología, barra lateral, chat, calendarios) ya
   siguen estas reglas; esta hoja, la última que se carga, pone las que son
   de toda la web para que ninguna pantalla se quede atrás:

     · Fondos neutros (#F8FAFC / #FFFFFF), bordes finos #E5E7EB y sombra
       suave; fuera la retícula del fondo y el resplandor rojo de la esquina
       (adorno que, con las tarjetas encima, hacía efecto moiré).
     · El rojo, solo para la acción principal, lo urgente y las alertas.
     · Sin rayas: lo que quedaba rayado (ITV, taller, seguro en el calendario
       de casillas que aún usa algún widget) pasa a gris plano.
     · Texto secundario con contraste AA (el gris de la casa ya da ~6:1).
   Quitar su línea de index.html deja la web como estaba con las capas.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root:not([data-tema="oscuro"]) {
  --bg: #F8FAFC;
  --border: #E5E7EB;
  --border-med: #D1D5DB;
  --border-strong: #9CA3AF;
  --surface-2: #F3F4F6;
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, .05);
}
:root[data-tema="oscuro"] { --sombra-sm: none; }

/* ── Fondos sin adorno ────────────────────────────────────────────────── */
.main-scroll, #main-scroll { background-image: none !important; background-color: var(--bg) !important; }
.main::before, .main::after { background-image: none !important; display: none !important; }
.sidebar .sbr-capa { display: none !important; }
/* El suelo cuadriculado detrás de la Vito: patrón de adorno. */
.fl-piso, .fl-fondo { display: none !important; }

/* ── Tarjetas: blanco, borde fino, sombra suave ───────────────────────── */
.card, .form-card, .stat-card, .dash-widget, .builder-section, .table-wrap, .ux-tabla-wrap, .ux-cifras, .ux-barra,
.ux-card, .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, .med-caja, .pres-kpi, .dn-tarjeta, .dn-linea, .tg-caja, .tg-kpi {
  border-color: var(--border);
}

/* ── Sin rayas (moiré): ITV, taller y seguro en gris plano ─────────────── */
.cal-veh-td-day.cal-event-mantenimiento .cal-cell-inner,
.cal-veh-td-day.cal-event-itv .cal-cell-inner,
.cal-veh-td-day.cal-event-seguro .cal-cell-inner,
.cal-veh-td-day.cal-event-mantenimiento.cal-run-solo .cal-cell-inner,
.cal-veh-td-day.cal-event-seguro.cal-run-solo .cal-cell-inner,
.cal-day-repair .cal-cell-inner {
  background-image: none !important;
  background-color: var(--surface-2) !important;
}

/* ── El rojo, solo donde toca ─────────────────────────────────────────── */
/* «En uso» / «En marcha» no es una alarma: en tinta, como en IT. */
.ux-estado.uso { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-med) !important; }
.ux-estado.uso::before, .ux-estado.uso i { background: var(--text) !important; }
/* Los enlaces de «ver más» son navegación, no una acción: en tinta. */
.pcm-ver { color: var(--text) !important; }
.pcm-ver:hover { text-decoration: underline; }

/* Borrar en cada fila: una acción peligrosa, pero no la principal. Gris en
   reposo y rojo solo al pasar por encima (en las ventanas de confirmar
   sigue siendo rojo). */
td .btn-danger.btn-sm, .ux-card .btn-danger.btn-sm, .ux-fila .btn-danger.btn-sm {
  color: var(--text-2) !important; background: transparent !important; border-color: var(--border) !important; box-shadow: none !important;
}
td .btn-danger.btn-sm:hover, .ux-card .btn-danger.btn-sm:hover, .ux-fila .btn-danger.btn-sm:hover {
  color: #B91C1C !important; background: #FEF2F2 !important; border-color: #FECACA !important;
}

/* Estados que no son alarmas: en uso, en rodaje, kit → tinta. */
.badge-en_uso, .badge-proyecto { color: var(--text) !important; background: var(--surface-2) !important; border-color: var(--border-med) !important; }
.badge-en_uso::before, .badge-proyecto::before { background: var(--text) !important; }
.inv-kit { color: #fff !important; background: var(--text) !important; }
.inv-fila.banda-uso > td.inv-c-sel { border-left-color: var(--text) !important; }
/* Un kit se marca en tinta, no en rojo: no es una alarma. */
.inv-fila.es-kit > td.inv-c-sel { box-shadow: inset 3px 0 0 var(--text) !important; }
.veh-fila.banda-uso > td:first-child { border-left-color: var(--text) !important; }
.fleet-proj-card.active-proj { border-left-color: var(--text) !important; }
.fleet-proj-dot, .fleet-proj-progress-fill { background: var(--text) !important; }
.fleet-link { color: var(--text) !important; text-decoration: underline; text-underline-offset: 2px; }

/* Avisos (no urgencias): ámbar. */
.badge-enviado { color: #B45309 !important; background: #FFFBEB !important; border-color: #FDE68A !important; }
.veh-aviso-chip { color: #B45309 !important; background: #FFFBEB !important; border-color: #FDE68A !important; }
:root[data-tema="oscuro"] .badge-enviado, :root[data-tema="oscuro"] .veh-aviso-chip { color: #FCD34D !important; background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; }

/* Filtros activos: la pastilla negra de la casa, no el rojo. */
.pres-chip.active { color: var(--surface) !important; background: var(--wn-negro, #0e0e10) !important; border-color: var(--wn-negro, #0e0e10) !important; }

/* ── Medidas y peso ───────────────────────────────────────────────────────
   Las cajas con contenido salían como bloques negros: ahora una fila clara
   con una raya de tinta a la izquierda, que es lo que las distingue. */
.med-fila.med-padre > td { background: #F8FAFC !important; color: var(--text) !important; border-color: var(--border) !important; }
.med-fila.med-padre > td:first-child { box-shadow: inset 3px 0 0 var(--text) !important; }
.med-fila.med-padre .med-art, .med-fila.med-padre .med-texto, .med-fila.med-padre .med-nombre, .med-fila.med-padre td b { color: var(--text) !important; }
.med-fila.med-padre .med-sub, .med-fila.med-padre .med-sub *, .med-fila.med-padre .med-cod, .med-fila.med-padre .med-suma, .med-fila.med-padre .med-firma { color: var(--text-soft) !important; }
.med-fila.med-padre .med-caja { color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border-med) !important; }
.med-fila.med-padre:hover > td { background: #F1F5F9 !important; }
:root[data-tema="oscuro"] .med-fila.med-padre > td { background: rgba(255,255,255,.04) !important; }
:root[data-tema="oscuro"] .med-fila.med-padre:hover > td { background: rgba(255,255,255,.07) !important; }
/* Lo que falta por medir es un aviso, no una alarma. */
.med-falta { color: #B45309 !important; }
:root[data-tema="oscuro"] .med-falta { color: #FCD34D !important; }

/* ── Fichas QR ────────────────────────────────────────────────────────────
   La plantilla elegida y la categoría elegida se marcan en tinta; el «+»
   de cada artículo y el contador, también. El rojo se queda en «Imprimir». */
.ficha-plantilla.active { border-color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--text) !important; background: var(--surface) !important; }
.np-nodo.sel { color: var(--surface) !important; background: var(--wn-negro, #0e0e10) !important; }
.np-nodo.sel .np-nodo-btn, .np-nodo.sel .np-nodo-nom, .np-nodo.sel .np-nodo-chev { color: var(--surface) !important; }
.np-nodo.sel .np-nodo-n { color: var(--surface) !important; background: rgba(255,255,255,.18) !important; }
.np-nodo-n { color: var(--text-2) !important; background: var(--surface-2) !important; }
.fqr-item-mas { color: var(--text) !important; }
.fqr-pill { color: var(--text) !important; background: var(--surface-2) !important; }
:root[data-tema="oscuro"] .np-nodo.sel { color: var(--bg) !important; background: var(--text) !important; }
:root[data-tema="oscuro"] .np-nodo.sel .np-nodo-n, :root[data-tema="oscuro"] .np-nodo.sel .np-nodo-btn, :root[data-tema="oscuro"] .np-nodo.sel .np-nodo-nom { color: var(--bg) !important; }

/* ── Salidas y revisiones ────────────────────────────────────────────────
   Los dos botones grandes llevaban el icono sobre una baldosa roja de
   adorno: en neutro. Se quedan en rojo los vehículos sin parte de salida y
   la cifra «sin fichar», que sí piden algo. */
.rev-accion-ico { color: var(--text) !important; background: var(--surface-2) !important; }

/* ── Tareas / ITV ─────────────────────────────────────────────────────────
   «No la pasó» / «No apto» es una respuesta, no una alarma: gris, rojo al
   pasar por encima. La lista elegida, en la pastilla negra; un solo botón
   rojo por pantalla («+ Nueva Lista»); el día bloqueado por taller, gris.
   Se quedan en rojo: «sin cita» (ITV caducada sin cita) y el tinte de las
   filas con la fecha ya pasada. */
.itv-noapto { color: var(--text-2) !important; background: var(--surface) !important; border-color: var(--border-med) !important; }
.itv-noapto:hover { color: #B91C1C !important; background: #FEF2F2 !important; border-color: #FECACA !important; }
.flt-proj-item.active { color: var(--surface) !important; background: var(--wn-negro, #0e0e10) !important; border-left-color: var(--wn-negro, #0e0e10) !important; }
.flt-proj-item.active * { color: inherit !important; }
.flt-proj-item.active .flt-proj-item-count { color: var(--surface) !important; background: rgba(255,255,255,.18) !important; border-color: transparent !important; }
.flt-proj-item-count { color: var(--text-2) !important; background: var(--surface-2) !important; border-color: var(--border) !important; }
:root[data-tema="oscuro"] .flt-proj-item.active { color: var(--bg) !important; background: var(--text) !important; border-left-color: var(--text) !important; }
#page-flota-tasks .flt-body .btn-primary.btn-sm { color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--border-med) !important; box-shadow: none !important; }
#page-flota-tasks .flt-body .btn-primary.btn-sm:hover { border-color: var(--text) !important; }
.itv-bloq-tipo:not(.itv-bloq-itv) { color: var(--text-2) !important; background: var(--surface-2) !important; border-color: var(--border-med) !important; }

/* ── Mantenimiento ────────────────────────────────────────────────────────
   La pestaña activa, subrayada en tinta. Se quedan en rojo «ITV vencidas»,
   el contador de vencimientos y las píldoras «Vencida hace…». */
.mo-tab.active { border-bottom-color: var(--text) !important; color: var(--text) !important; }

/* ── Presupuestos ─────────────────────────────────────────────────────────
   Las cinco tarjetas de cifra llevaban un trazo rojo arriba y algunas un
   borde rojo (la variante «blue» es el rojo de la casa). Ahora cada una
   con el color de su estado: borrador gris, enviado ámbar, aceptado verde,
   rechazado rojo (ese sí es malo) y «Todos» en tinta. La elegida se marca
   con borde de tinta. El subproyecto («Cámara», «Producción») pierde la
   raya roja. */
.pres-kpi::after { background: var(--text-soft) !important; }
.pres-kpi.gray::after { background: #94A3B8 !important; }
.pres-kpi.blue::after { background: #D97706 !important; }
.pres-kpi.green::after { background: #16A34A !important; }
.pres-kpi.red::after { background: #DC2626 !important; }
.pres-kpi:not(.active) { border-color: var(--border) !important; }
.pres-kpi.active { border-color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--text), var(--wn-sombra, none) !important; }
.pres-kpi.active::after { background: var(--text) !important; }
.pres-sub { border-left-color: var(--border-strong) !important; }
/* El editor: la barra de arriba sin raya roja («Editar» sigue en rojo). */
.pd-barra { border-left-color: var(--text) !important; }

/* ── La ficha del cliente ─────────────────────────────────────────────────
   Fuera el resplandor rojo detrás del nombre y la raya roja; las cifras y
   los documentos se marcan en tinta. */
.pf-cab { border-left-color: var(--text) !important; }
.pf-cab::before { background-image: none !important; }
.pf-cifra::after { background: var(--text) !important; }
.pf-pres::before { background: var(--text) !important; }

/* ── Proyectos (ficha) ────────────────────────────────────────────────────
   Se queda en rojo «terminó hace…» (fuera de plazo). Lo demás: la marca de
   «Sin grupo» en tinta; «Enviados» en ámbar como en Presupuestos (la
   variante «blue» es el rojo de la casa); «Suelto» en gris; en Transporte,
   las cifras sin raya roja y «Incompleto…» como aviso, en ámbar. */
.eqf-sueltas-tit::before { background: var(--text) !important; }
.badge.badge-blue { color: #B45309 !important; background: #FFFBEB !important; border-color: #FDE68A !important; }
.badge.badge-blue::before { background: #D97706 !important; }
.fz-op-eti { color: var(--text-2) !important; }
.mt-cifras { border-left-color: var(--text) !important; }
.mt-sello, .mt-pend { color: #B45309 !important; }
:root[data-tema="oscuro"] .badge.badge-blue, :root[data-tema="oscuro"] .mt-sello, :root[data-tema="oscuro"] .mt-pend { color: #FCD34D !important; }
:root[data-tema="oscuro"] .badge.badge-blue { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; }

/* ── Vehículos ────────────────────────────────────────────────────────────
   Se quedan en rojo los avisos de documentación (ITV vencida), su punto,
   la fecha de ITV caducada y «terminó hace…». Lo demás, en tinta: la
   marca de «Flota en proyectos», la cita de ITV, la cabecera y los títulos
   de sección de la ficha, la pestaña activa, la tarjeta de información y
   el historial del QR. «Eliminar» en la ficha: gris, rojo al pasar. */
#veh-flota-resumen::before { background: var(--text) !important; }
.veh-doc-linea.veh-cita, .veh-doc-linea.veh-cita em { color: var(--text-2) !important; }
#veh-ficha-view .page-header { border-left-color: var(--text) !important; }
#veh-ficha-view .page-header::before { background: var(--text) !important; }
.veh-tab.active { border-bottom-color: var(--text) !important; color: var(--text) !important; }
.veh-info-card::after { background: var(--text) !important; }
.vqr-hist-que { color: var(--text-2) !important; }
#veh-ficha-view .btn-danger { color: var(--text-2) !important; background: var(--surface) !important; border-color: var(--border-med) !important; box-shadow: none !important; }
#veh-ficha-view .btn-danger:hover { color: #B91C1C !important; background: #FEF2F2 !important; border-color: #FECACA !important; }
#veh-ficha-view .page-header > div::before, #veh-ficha-view .veh-tab-content .page-header *::before { background: var(--text) !important; }

/* ── Inventario ───────────────────────────────────────────────────────────
   Un kit no es una alarma: en la cuadrícula, borde y etiqueta en tinta. En
   la ficha, la línea de la cabecera y la raya del kit en tinta; la pieza
   que limita cuántos kits completos hay y lo que falta por pesar o medir,
   en ámbar (son avisos). */
.inv-card.es-kit { border-color: var(--text) !important; }
.inv-card-kit { color: var(--surface) !important; background: var(--text) !important; }
.mat-top { border-bottom-color: var(--border) !important; }
.kit-cabeza { border-left-color: var(--text) !important; }
.kit-tarjeta.limita { border-color: #FDE68A !important; background: #FFFBEB !important; }
.kit-limita { color: #92400E !important; background: #FEF3C7 !important; }
.mf-firma.mf-sin { color: #B45309 !important; }
:root[data-tema="oscuro"] .kit-tarjeta.limita { border-color: rgba(245,158,11,.3) !important; background: rgba(245,158,11,.08) !important; }
:root[data-tema="oscuro"] .kit-limita, :root[data-tema="oscuro"] .mf-firma.mf-sin { color: #FCD34D !important; background: rgba(245,158,11,.14) !important; }

/* ── Economía y dashboard ─────────────────────────────────────────────────
   Una tendencia a la baja no es una alarma: ámbar. Siguen en rojo los
   cobros vencidos y su contador, y lo facturado (la cifra clave). */
.dn-chip.dn-chip-mal { color: #B45309 !important; background: #FEF3C7 !important; }
:root[data-tema="oscuro"] .dn-chip.dn-chip-mal { color: #FCD34D !important; background: rgba(245,158,11,.14) !important; }
.mf-cifra.incompleta span { color: #B45309 !important; } :root[data-tema="oscuro"] .mf-cifra.incompleta span { color: #FCD34D !important; }
/* Ajustes › Power BI y Excel: ver powerbi.css. */

/* La cifra de avisos de la campana (18/10/2026). La regla de «testigos de
   7 px» de style.css también la cogía y la dejaba en 17×7: el «9+» no cabía
   y se veía un cuadradito rojo metido detrás del botón. Es una etiqueta con
   número, no un testigo. */
.notif-btn .notif-punto {
  width: auto !important; height: 18px !important; min-width: 18px; padding: 0 5px;
  top: -7px; right: -7px; z-index: 2;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--red);
  border: 2px solid var(--surface); border-radius: 999px !important;
}