/* ──────────────────────────────────────────────────────────────────────────
   bulx · la web app con la marca nueva (18/10/2026, copia aparte).

   La marca del portfolio: negro #1D1F1C, amarillo #FEC833, blanco #FBFBFB,
   letra muy gruesa y cerrada, esquinas muy redondeadas y las tres celdas del
   panal. Esta hoja va la ÚLTIMA y viste lo que ya hay: no cambia ninguna
   pantalla por dentro.

   · Tokens: la web usa --blue como acento (era rojo). Aquí el acento de
     texto y selección es la tinta, y lo que se pulsa es amarillo con texto
     negro. El rojo queda solo para lo que avisa de un error.
   · Esquinas: style.css pone `*{border-radius:0!important}`; cualquier clase
     de aquí con !important le gana por especificidad.
   ────────────────────────────────────────────────────────────────────────── */
:root, :root[data-tema="claro"] {
  --bx-negro: #1D1F1C; --bx-negro-2: #2A2C28; --bx-amarillo: #FEC833; --bx-amarillo-2: #F2B705;
  --bx-amarillo-suave: #FFF3CC; --bx-blanco: #FBFBFB;
  --bg: #F1F1EE; --surface: #FFFFFF; --surface-2: #F6F6F3; --surface-sunk: #ECECE8;
  --border: #E4E4DF; --border-med: #D5D5CF; --border-strong: #A5A69F;
  --text: #1D1F1C; --text-2: rgba(29, 31, 28, .78); --text-soft: #7C7E78; --text-xsoft: rgba(124, 126, 120, .6);
  --blue: #1D1F1C; --blue-hover: #000000; --blue-light: rgba(254, 200, 51, .18); --acento-rgb: 29, 31, 28; --accent: #1D1F1C;
  --red: #D92D20; --red-dark: #B42318; --punch-red: #D92D20; --flag-red: #B42318;
  --bx-r-xl: 24px; --bx-r-l: 18px; --bx-r-m: 14px; --bx-r-s: 10px;
  --bx-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
:root[data-tema="oscuro"] {
  --bg: #121311; --surface: #1B1C1A; --surface-2: #232421; --surface-sunk: #0E0F0D;
  --border: rgba(251, 251, 251, .09); --border-med: rgba(251, 251, 251, .16); --border-strong: rgba(251, 251, 251, .3);
  --text: #F3F3F0; --text-2: rgba(243, 243, 240, .76); --text-soft: #9A9C96; --text-xsoft: rgba(154, 156, 150, .55);
  --blue: #FEC833; --blue-hover: #FFD24F; --blue-light: rgba(254, 200, 51, .14); --acento-rgb: 254, 200, 51; --accent: #FEC833;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #121311; --surface: #1B1C1A; --surface-2: #232421; --surface-sunk: #0E0F0D;
    --border: rgba(251, 251, 251, .09); --border-med: rgba(251, 251, 251, .16); --border-strong: rgba(251, 251, 251, .3);
    --text: #F3F3F0; --text-2: rgba(243, 243, 240, .76); --text-soft: #9A9C96; --text-xsoft: rgba(154, 156, 150, .55);
    --blue: #FEC833; --blue-hover: #FFD24F; --blue-light: rgba(254, 200, 51, .14); --acento-rgb: 254, 200, 51; --accent: #FEC833;
  }
}

/* ── Letra ─────────────────────────────────────────────────────────────── */
body, button, input, select, textarea { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important; }
body { background: var(--bg) !important; -webkit-font-smoothing: antialiased; }
.page-title, .dn h1, .ajx-cab h2 { font-weight: 900 !important; letter-spacing: -0.045em !important; }
h1, h2, h3, .modal-header h2, .modal-header h3 { letter-spacing: -0.03em; }

/* ── La barra lateral: el negro del logo ───────────────────────────────── */
.sidebar, :root[data-tema="claro"] .sidebar {
  --sbn-fondo: #1D1F1C; --sbn-borde: rgba(251, 251, 251, .06); --sbn-texto: rgba(251, 251, 251, .72); --sbn-medio: rgba(251, 251, 251, .45);
  --sbn-fuerte: #FBFBFB; --sbn-hover: rgba(251, 251, 251, .06); --sbn-activo: rgba(254, 200, 51, .12); --sbn-trama: transparent;
  background: #1D1F1C !important; border-right: 0 !important;
}
.sidebar .nav-item { border-radius: 12px !important; margin: 1px 10px !important; }
.sidebar .nav-item.active, .sidebar .nav-group-items .nav-item.active,
:root:not([data-tema="oscuro"]) .sidebar .nav-group-items .nav-item.active {
  background: rgba(254, 200, 51, .12) !important; color: #FEC833 !important; box-shadow: none !important;
}
.sidebar .nav-item.active .nav-icon { color: #FEC833 !important; }
.sidebar .nav-badge { border-radius: 999px !important; }
.sidebar .sidebar-user { border-top-color: rgba(251, 251, 251, .08) !important; }
.sidebar .sidebar-user-name { color: #FBFBFB !important; }
.sidebar .sidebar-user-role, .sidebar .nav-group-nombre, .sidebar .nav-label { color: rgba(251, 251, 251, .45) !important; }
.sidebar .sidebar-avatar, .sidebar .sidebar-user img { border-radius: 999px !important; }
/* El logo: la palabra bulx blanca con sus celdas (bulx.js la pone). */
.sidebar .sidebar-logo .logo-mark { width: auto !important; height: 30px !important; }
.sidebar .sidebar-logo .logo-mark img.bulx-palabra { width: 92px !important; height: auto !important; filter: none !important; }
.sidebar .sidebar-logo .logo-mark svg { display: none !important; }
.sidebar .logo-text .logo-title { display: none !important; }
.sidebar .logo-text .logo-sub { color: rgba(251, 251, 251, .5) !important; }
.sidebar.collapsed .sidebar-logo .logo-mark img.bulx-palabra { display: none !important; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn, .tg-btn, .fc-btn { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.btn-primary, .tg-btn:not(.tg-btn-sec) {
  background: #FEC833 !important; color: #1D1F1C !important; border-color: #FEC833 !important;
  box-shadow: 0 8px 20px -12px rgba(254, 200, 51, .95) !important;
}
.btn-primary:hover { background: #FFD24F !important; }
.btn-primary:disabled, .btn-primary[disabled] { background: #F2E3B5 !important; color: rgba(29, 31, 28, .5) !important; box-shadow: none !important; }
.btn-danger { color: #D92D20 !important; }

/* ── Campos ────────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
.form-control, .filter-input, .filter-select, .selector-boton, .busca-input, .invn-busca, .ajx-busca {
  border-radius: 12px !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus { border-color: #1D1F1C !important; box-shadow: 0 0 0 3px rgba(254, 200, 51, .45) !important; outline: none !important; }
:root[data-tema="oscuro"] input:focus, :root[data-tema="oscuro"] select:focus, :root[data-tema="oscuro"] textarea:focus { border-color: #FEC833 !important; }
input[type="checkbox"] { accent-color: #1D1F1C; }

/* ── Tarjetas, ventanas y listas: las esquinas del portfolio ───────────── */
.modal, .cta, .ms-modal, .menu-acc, .cat-dd, .notif-panel, .dlg, .toast, .toast-caja { border-radius: var(--bx-r-xl) !important; }
.table-wrap, #inv-vista-lista, .form-card, .stat-card, .stats-grid > *, .crew-card, .card,
.dn-tarjeta, .dn .dn-kpi, .tg-caja, .tg-kpi, .tg-tarjeta, .en-hero, .en .dn-tarjeta,
.invn-panel, .invn-ico, .invn-ult-ico, .ajx-tarjeta.aj-seccion, .ajx-grupo, .ajx-yo, .ajx-busca, .ajx-marca-vista,
.inv-card, .veh-card, .ux-card, .proy-card, .pres-card, .mp-bloque, .perfil-card, .filters-bar, .fc-cab, .pv-linea-caja,
.cta-filas, .cta-tarjeta, .seg-alta, .ajx-aviso, .aj-barra, .bulk-bar, .inv-bulk-bar, .pd-doc, .chat-panel, .chat-burbuja {
  border-radius: var(--bx-r-l) !important;
}
.table-wrap, #inv-vista-lista { overflow: hidden; }
.badge, .tg-pill, .cat-chip, .invn-pild, .chip, .pill, .ux-pill, .inv-chip, .ajx-color, .pres-chip, .proy-chip, .veh-chip,
.seg-on, .notif-punto, .nav-badge, .crew-ms, .crew-area, .crew-puesto, .ux-estado { border-radius: 999px !important; }
.ajx-op-ico, .dn-ico, .tg-ico, .hex-ico, .fc-badge { border-radius: 10px !important; }
.ajx-op-ico { clip-path: var(--bx-hex); border-radius: 0 !important; width: 30px !important; }
.ajx-op-ico.c-pizarra, .ajx-op-ico.c-azul, .ajx-op-ico.c-verde, .ajx-op-ico.c-violeta, .ajx-op-ico.c-naranja, .ajx-op-ico.c-ambar, .ajx-op-ico.c-cian, .ajx-op-ico.c-rojo { background: #1D1F1C !important; color: #FEC833 !important; }
:root[data-tema="oscuro"] .ajx-op-ico[class*="c-"] { background: #FEC833 !important; color: #1D1F1C !important; }

/* Lo seleccionado: tinta con amarillo (en claro) o amarillo (en oscuro). */
.invn-pild.activa, .seg-btn.active, .v-chips .on, .fc-zoom .on, .tg-tab.activa, .pbx-pestanas button.activa,
.ajx-op.activa .ajx-op-nom { color: inherit; }
.invn-pild.activa, .seg-btn.active, .pbx-pestanas button.activa { background: #1D1F1C !important; color: #FEC833 !important; border-color: #1D1F1C !important; }
:root[data-tema="oscuro"] .invn-pild.activa, :root[data-tema="oscuro"] .seg-btn.active { background: #FEC833 !important; color: #1D1F1C !important; }
.ajx-op.activa, .ajx-yo.activa { background: rgba(254, 200, 51, .16) !important; }

/* ── Los marcadores: hexágonos en vez de cuadraditos rojos ─────────────── */
.pn-eyebrow i, .login-punto, .hexito {
  display: inline-block; width: 12px !important; height: 10px !important; background: #FEC833 !important;
  clip-path: var(--bx-hex); border-radius: 0 !important;
}
.pn-eyebrow { color: var(--text-soft) !important; }

/* ── La entrada ────────────────────────────────────────────────────────── */
.login-marca { background: #1D1F1C !important; position: relative; overflow: hidden; }
:root:not([data-tema="oscuro"]) .login-marca { background: #1D1F1C !important; }
.login-marca::before, .login-marca::after { display: none !important; }
.login-marca .login-marca-tit, .login-marca h1 { color: #FBFBFB !important; font-weight: 900 !important; letter-spacing: -0.045em !important; }
.login-marca .login-marca-txt, .login-marca .login-marca-eyebrow { color: rgba(251, 251, 251, .7) !important; }
.bulx-panal-login { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-marca-cuerpo, .login-marca-pie { position: relative; z-index: 1; }
.login-logo, .login-logo-form { display: none !important; }
img.bulx-palabra-login { display: block; width: 116px; height: auto; margin-bottom: 22px; }
.login-marca-pie img.bulx-palabra-login { width: 84px; margin: 0; }
.login-btn, #btn-login { background: #FEC833 !important; color: #1D1F1C !important; border-radius: 999px !important; }
.login-ms { border-radius: 999px !important; }

/* ── El inicio: la tarjeta del año y las de cifras ────────────────────── */
.dn .dn-hero, .dn-ano, .dn .dn-tarjeta-negra { border-radius: var(--bx-r-xl) !important; }

/* ── Detalles que eran rojos y no avisan de nada ──────────────────────── */
.ajx-op.activa, .ajx-volver, .ajx-mas > summary, .seg-enlace:hover { --ax-azul: #1D1F1C; }
.ajx-tema.activa .ajx-tema-vista { outline-color: #FEC833 !important; }
.ajx-tarjeta .aj-check input[type="checkbox"]:checked, .ajx-interruptor:checked { background: #1D1F1C !important; }
:root[data-tema="oscuro"] .ajx-tarjeta .aj-check input[type="checkbox"]:checked { background: #FEC833 !important; }
.notif-btn .notif-punto { background: #FEC833 !important; color: #1D1F1C !important; }

/* ── Los testigos: hexágonos, no cuadraditos (Xavi: «ya no serán cuadrados
   ni rojos. Serán hexágonos y amarillos») ────────────────────────────────── */
.ux-estado i, .tel-estado i, .it-res i, .alert-dot, .cal-dot, .gantt-leg-dot, .cal-legend-dot, .chart-legend-dot,
.inv-chart-dot, .fleet-proj-dot, .veh-proximo-dot, .activo-dot::before, .tel-pill-dot, .proy-punto, .agenda-punto,
.drawer-punto, .proy-rail-punto, .bz-punto, .rvh-punto, .clv-punto, .gantt-punto, .offline-punto, .login-punto,
.dn-punto, i.dn-a-conf, i.dn-a-prev, i.dn-a-rodado, .fl-c-libre, .fl-c-fuera, .fl-c-taller, .invn-leyenda i, .invn-dep-pie i,
.fc-l-conf, .fc-l-prev, .fc-l-mant, .fc-l-fin, .dn-leyenda i, .en-leyenda i, .tg-punto, .mo-punto, .ux-punto {
  clip-path: var(--bx-hex) !important; border-radius: 0 !important; aspect-ratio: 8 / 7;
}
.fl-c-libre, .fl-c-fuera, .fl-c-taller { width: 12px !important; height: 11px !important; }
/* El rojo de acento era la marca, no un aviso: ahora es el amarillo. */
.dn-a-rodado, .fl-c-fuera, .fc-l-conf { background: #FEC833 !important; color: #1D1F1C !important; }
.fl-c-libre { background: #1D1F1C !important; }
:root[data-tema="oscuro"] .fl-c-libre { background: rgba(251, 251, 251, .8) !important; }
.fl-c-taller { background: #BDBDB7 !important; }

/* ── Más esquinas y el fondo de trabajo ───────────────────────────────── */
.main-scroll, .main-content, .content { background: var(--bg) !important; }
.dn-linea, .fleet-proj-card, .ux-barra, .fc-marco, .tg-vacio, .proy-cal-mini, .en-hero-der, .ux-cifras, .mo-kpis,
.dn-tarjeta, .dn-flota, .dn-rodaje, .dn-atencion, .dn-caja, .dn-panel, .dn-kpis > *, .dn-cifras > *, .en-cinta-pista > *,
.fc-tl, .fc-rejilla, .tl-marco, .gantt, .cal-mes, .pv-hito, .pd-pagina, .mo-tarjeta, .ux-tabla, .tabla-veh, .tabla-proyectos {
  border-radius: var(--bx-r-l) !important;
}
.dn-btn, .dn-btn-acento, .ux-acc, .fc-btn-primario, .pbi-btn, .veh-chip, .proy-tab, .en-btn { border-radius: 999px !important; }
.dn-btn-acento, .dn-btn-nuevo, .fc-btn-primario, .pbi-btn-primario, .ux-acc.fuerte {
  background: #FEC833 !important; color: #1D1F1C !important; border-color: #FEC833 !important;
  box-shadow: 0 8px 20px -12px rgba(254, 200, 51, .95) !important;
}
.dn-btn-acento svg, .dn-btn-nuevo svg { color: #1D1F1C !important; stroke: currentColor; }
.veh-chip.activo, .seg-btn.proy-tab.active, .activa.fc-zoom, .fc-zoom .activa { background: #1D1F1C !important; color: #FEC833 !important; }

/* ── El logo de la barra: la palabra, sin el nombre del cliente al lado ── */
.sidebar .logo-text { display: none !important; }

/* ── La entrada: fuera el foco rojo y el polvo; el panal hace de fondo ── */
.login-marca .lfx-foco, .login-marca .lfx-polvo { display: none !important; }

/* ── La retícula de la barra lateral: ahora un panal (bulx.js) ────────── */
.sidebar .sbr-capa { display: none !important; }
.sidebar > svg.bulx-panal-lateral { position: absolute !important; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 !important; }

/* Hoy, en los calendarios: amarillo, no rojo. */
.fc-hoy-col, .tl-hoy-col, .cal-hoy, .gantt-hoy { background-color: rgba(254, 200, 51, .1) !important; box-shadow: inset 2px 0 0 rgba(254, 200, 51, .85) !important; }
.agenda-dias, .agenda-fecha-dia { color: var(--text) !important; }
.login-marca .login-marca-tit, .login-marca h1, .login-marca * { text-shadow: none !important; }