/* ──────────────────────────────────────────────────────────────────────────
   LA PARTE DE ABAJO DEL DASHBOARD · con el aspecto de Bulx      (18/10/2026)

   El dashboard nuevo (`dn`) ya es Bulx de cintura para arriba: «La semana» y
   «Proyectos 2026» son tarjetas redondas y limpias. De ahí hacia abajo no, y
   el motivo es que esos tres bloques son PRESTADOS: `dn` los envuelve en una
   tarjeta suya pero por dentro siguen siendo el marcado viejo.

     · Calendario de producción → `.gantt-*`, de antes del rediseño
     · Proyectos                → `.dn-tabla`, a medio hacer
     · Material más alquilado   → `.topmat-*`, de antes también

   Esto es una CAPA sobre ese marcado prestado. No toca `app.js`: quitar el
   <link> de index.html devuelve el dashboard a como estaba, y el día que
   alguien reescriba esos widgets, esto no estorba.

   Todo va bajo `#page-dashboard` para no tocar el gantt ni el ranking en las
   otras pantallas donde también salen.
   ────────────────────────────────────────────────────────────────────────── */

#page-dashboard {
  --db-tinta: #1D1F1C;
  --db-am: #FEC833;
}

/* ══ 1 · Las pestañas y los filtros, en píldora ═══════════════════════════
   Es el cambio que más se nota: tres bloques con tres maneras distintas de
   enseñar lo mismo —unos botones cuadrados, unas pestañas subrayadas y unas
   pastillas— pasan a tener la misma, que es la de Bulx. */
#page-dashboard .dn-pills,
#page-dashboard .topmat-tabs,
#page-dashboard .gantt-legend {
  display: flex;
  flex-wrap: wrap;          /* cinco pestañas no caben en una línea */
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 0 !important;
  border-radius: 999px !important;
}
#page-dashboard .dn-pills > *,
#page-dashboard .topmat-tab {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 15px;
  border: 0 !important;
  border-radius: 999px !important;
  background: none;
  color: var(--text-2);
  font: 600 12.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#page-dashboard .dn-pills > *::after,
#page-dashboard .topmat-tab::after { display: none !important; }
#page-dashboard .dn-pills > *:hover,
#page-dashboard .topmat-tab:hover { color: var(--text); }
/* OJO con `--blue`: en Bulx CLARO vale #1D1F1C, casi negro. Usarlo aquí
   dejaba la píldora activa negra sobre negro y el texto desaparecía. El
   amarillo de la casa es `--bx-amarillo`, que sí existe en los dos temas. */
#page-dashboard .dn-pills > .activa,
#page-dashboard .dn-pills > .active,
#page-dashboard .topmat-tab.active {
  background: var(--text);
  color: var(--bx-amarillo, #FEC833);
}
#page-dashboard .topmat-tab.active .topmat-n { color: var(--bx-amarillo, #FEC833); opacity: .75; }
/* El contador que llevan dentro las pestañas del ranking (Cámara 10) */
#page-dashboard .topmat-tab .topmat-n {
  margin-inline-start: 6px;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}

/* La leyenda del calendario no se pulsa: es una leyenda. Se queda en píldora
   pero sin fondo, que si no parece que se puede filtrar por ahí. */
#page-dashboard .gantt-legend { background: none; padding: 0; gap: 16px; }
#page-dashboard .gantt-leg-lbl {
  font: 600 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--text-soft);
}
#page-dashboard .gantt-leg-dot { width: 8px; height: 8px; border-radius: 999px !important; }

/* El botón redondo de buscar, de cuadrado a redondo de verdad */
#page-dashboard .dn-redondo {
  width: 36px; height: 36px;
  border-radius: 999px !important;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}
#page-dashboard .dn-redondo:hover { background: var(--surface-2); color: var(--text); }

/* ══ 2 · El calendario de producción ══════════════════════════════════════ */
#page-dashboard .gantt-controls {
  gap: 14px;
  margin-bottom: 14px;
}
#page-dashboard .calendar-title {
  font: 800 15px/1 Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
  text-transform: none;
}
#page-dashboard .cal-nav {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px !important;
  background: var(--surface);
  color: var(--text-2);
}
#page-dashboard .cal-nav:hover { background: var(--surface-2); color: var(--text); }

/* La rejilla: el gris de los festivos más suave y la raya de hoy del color de
   la casa. Antes el fin de semana pesaba más que los propios rodajes. */
#page-dashboard .gantt-scroll { border-radius: var(--bx-r-m, 14px) !important; overflow: auto; }
#page-dashboard .g-weekend { background: var(--surface-2) !important; }
#page-dashboard .gantt-today-line { background: var(--bx-amarillo, #FEC833) !important; opacity: .8; }
#page-dashboard .g-today .gd-num {
  background: var(--text) !important;
  color: var(--bx-amarillo, #FEC833) !important;
  border-radius: 999px !important;
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
}
#page-dashboard .gantt-day-hdr { border-color: var(--border) !important; }
#page-dashboard .gd-wd {
  font: 600 9.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: .06em;
  color: var(--text-xsoft);
}
#page-dashboard .gd-num { font: 700 11.5px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Las barras de cada rodaje: redondas y con el texto que se lee. */
#page-dashboard .gantt-bar {
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: none !important;
}
#page-dashboard .gantt-bar-txt {
  font: 700 10.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
}
#page-dashboard .gantt-bar.b-itv { background: var(--red, #D92D20) !important; color: #fff !important; }
#page-dashboard .gantt-punto { border-radius: 999px !important; }

/* La columna de la izquierda: el nombre del vehículo y qué le pasa. */
#page-dashboard .gantt-group-label,
#page-dashboard .gantt-event-label { background: var(--surface) !important; }
#page-dashboard .gantt-group-txt {
  font: 700 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .12em;
  color: var(--text-xsoft);
}
#page-dashboard .gantt-lbl-txt { font: 600 12.5px/1.25 Inter, system-ui, sans-serif; }
#page-dashboard .gantt-event-row:hover .gantt-event-label { background: var(--surface-2) !important; }

/* ══ 3 · La tabla de proyectos ════════════════════════════════════════════ */
#page-dashboard .dn-tabla-cab { padding: 20px 22px 14px; gap: 12px; }
#page-dashboard .dn-tabla { font-size: 13px; }
#page-dashboard .dn-tabla th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font: 700 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-xsoft);
}
#page-dashboard .dn-tabla td { padding: 13px 14px; border-bottom: 1px solid var(--border); }
#page-dashboard .dn-tabla tr:last-child td { border-bottom: 0; }
/* Las filas, como tarjetas al pasar por encima: es lo que hace Bulx en vez de
   pintarlas de un gris plano. */
#page-dashboard .dn-tabla tbody tr { transition: background .14s; }
#page-dashboard .dn-tabla tbody tr:hover { background: var(--surface-2); }
#page-dashboard .dn-punto { width: 9px; height: 9px; border-radius: 999px !important; }

/* El estado, en pastilla y no en texto suelto */
#page-dashboard .dn-estado {
  display: inline-flex; align-items: center;
  padding: 4px 11px;
  border-radius: 999px !important;
  background: var(--surface-2);
  font: 600 11.5px/1 Inter, system-ui, sans-serif;
  color: var(--text-2);
}
#page-dashboard .dn-estado-marcha { background: rgba(254, 200, 51, .28); color: #1D1F1C; }
#page-dashboard .dn-estado-proximos { background: var(--surface-2); color: var(--text-2); }

/* ══ 4 · Material más alquilado ═══════════════════════════════════════════ */
#page-dashboard .topmat-cuerpo { padding-top: 4px; }
#page-dashboard .topmat-lista { display: grid; gap: 4px; }
#page-dashboard .topmat-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border: 0 !important;
  border-radius: var(--bx-r-m, 14px) !important;
  transition: background .14s;
}
#page-dashboard .topmat-fila:hover { background: var(--surface-2); }

/* El puesto, en hexágono: es el sello de Bulx y además se distingue de los
   números de la fila, que antes se confundían con la cifra de días. */
#page-dashboard .topmat-pos {
  flex: 0 0 auto;
  width: 22px; height: 19px;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--text-2);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  border-radius: 0 !important;
  font: 800 10.5px/1 Inter, system-ui, sans-serif;
}
/* El podio, en el amarillo de la casa */
#page-dashboard .topmat-fila.podio .topmat-pos { background: var(--bx-amarillo, #FEC833); color: #1D1F1C; }

#page-dashboard .topmat-nombre { font: 600 12.5px/1.3 Inter, system-ui, sans-serif; }
#page-dashboard .topmat-cat { font-size: 11px; color: var(--text-soft); }
#page-dashboard .topmat-dias {
  font: 800 13px/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
#page-dashboard .topmat-veces { font-size: 10.5px; color: var(--text-xsoft); }

/* La barra de debajo: fina, redonda y del color de la casa. Antes era una
   línea gris de borde a borde que competía con el nombre. */
#page-dashboard .topmat-barra {
  height: 4px;
  border-radius: 999px !important;
  background: var(--surface-2);
  overflow: hidden;
}
#page-dashboard .topmat-barra-fill {
  height: 100%;
  border-radius: 999px !important;
  /* El del podio en amarillo y el resto en gris: si TODAS las barras van en
     negro a lo ancho, la lista se lee como un código de barras. */
  background: var(--border-strong, var(--text-soft));
}
#page-dashboard .topmat-fila.podio .topmat-barra-fill { background: var(--bx-amarillo, #FEC833); }

/* ══ 5 · Los títulos de los bloques prestados ═════════════════════════════
   Venían con el rótulo en mayúsculas y un cuadradito delante, que es el
   idioma viejo. En Bulx el título es un título. */
#page-dashboard .dn-prestado .section-title {
  display: flex; align-items: center; gap: 10px;
  font: 800 15px/1.2 Inter, system-ui, sans-serif !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--text) !important;
}
#page-dashboard .dn-prestado .section-title::before {
  content: '';
  width: 13px; height: 11px;
  flex: 0 0 auto;
  background: var(--bx-amarillo, #FEC833);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
/* El cuadradito viejo, si lo trae en el marcado, sobra. */
#page-dashboard .dn-prestado .section-title > .ux-cuadro,
#page-dashboard .dn-prestado .section-title > i:first-child { display: none; }

/* El nombre del material es largo de por sí («Arri LMB-5 4x5.65" Clipon
   Matbox (3 FILTER STAGES)») y sin `min-width: 0` el flex no lo deja encoger:
   empujaba la columna de días fuera de la tarjeta. */
/* No basta con la fila: `min-width: auto` es el valor por defecto de CADA
   eslabón flex, así que mientras uno solo de la cadena pueda crecer, la fila
   entera se sale de la tarjeta y el nombre nunca llega a recortarse. Medido:
   la columna de días acababa 164 px fuera. */
#page-dashboard .dn-prestado,
#page-dashboard .dn-prestado .dash-widget,
#page-dashboard .topmat-cuerpo,
#page-dashboard .topmat-lista,
#page-dashboard .topmat-fila { min-width: 0; max-width: 100%; }
#page-dashboard .topmat-fila { overflow: hidden; }
#page-dashboard .topmat-cuerpo { flex: 1 1 auto; }
#page-dashboard .topmat-nombre,
#page-dashboard .topmat-cat {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-dashboard .topmat-cifras { flex: 0 0 auto; text-align: end; }

/* Las pestañas del ranking son cinco y caben en dos líneas: que el carril se
   ajuste a ellas en vez de estirarse de lado a lado. */
#page-dashboard .topmat-tabs { width: fit-content; max-width: 100%; }