/* ==========================================================================
   Parque Sur — Sistema de Mantenciones y Flota
   Hoja de estilos corporativa. Se apoya en Bootstrap 5.3 y lo especializa.
   ========================================================================== */

:root {
  /* Marca */
  --ps-blue:        #1857A3;
  --ps-blue-dark:   #0E3F7A;
  --ps-blue-deep:   #0A2E5C;
  --ps-blue-soft:   #E8F0FE;
  --ps-yellow:      #FBBC0B;
  --ps-yellow-dark: #D79B00;

  /* Tinta y superficies */
  --ink:            #0F172A;
  --ink-2:          #1E293B;
  --muted:          #5B6779;
  --line:           #E4E9F0;
  --line-strong:    #CBD5E1;
  --bg:             #F4F6FA;
  --surface:        #FFFFFF;

  /* Estado (siempre acompañado de etiqueta de texto, nunca color solo) */
  --ok:             #14532D;   --ok-bg:      #E7F6EA;   --ok-mark:      #0CA30C;
  --info:           #12407A;   --info-bg:    #E8F0FE;   --info-mark:    #1857A3;
  --warn:           #6B4A00;   --warn-bg:    #FEF3D0;   --warn-mark:    #D79B00;
  --danger:         #8C1D18;   --danger-bg:  #FDE7E7;   --danger-mark:  #D03B3B;
  --neutral:        #3F4A5A;   --neutral-bg: #EEF1F5;   --neutral-mark: #94A3B8;

  /* Elevación */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --sh-2: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px rgba(15, 23, 42, .06);
  --sh-3: 0 12px 32px rgba(10, 46, 92, .16);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-2);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Cifras alineadas verticalmente: crítico en tablas de plata */
.table, .kpi, .money, .num, input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; }
h5 { font-size: 1.02rem; }

a { color: var(--ps-blue); text-decoration: none; transition: color .12s ease; }
a:hover { color: var(--ps-blue-dark); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 3px solid rgba(24, 87, 163, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Barra de navegación
   ========================================================================== */

.ps-navbar {
  background: linear-gradient(100deg, var(--ps-blue-deep) 0%, var(--ps-blue-dark) 45%, var(--ps-blue) 100%);
  box-shadow: var(--sh-3);
  padding: .4rem 1.25rem !important;
  min-height: 62px;
}

.brand-box { display: flex; align-items: center; }
.brand-box img { height: 36px; width: auto; display: block; }

.ps-main-nav { display: flex; align-items: center; gap: 2px; }

.ps-navbar .nav-link {
  color: rgba(255, 255, 255, .88) !important;
  border-radius: var(--r-sm);
  padding: .45rem .8rem !important;
  font-weight: 600;
  font-size: .89rem;
  white-space: nowrap !important;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  transition: background .15s ease, color .15s ease;
}

.ps-navbar .nav-link:hover,
.ps-navbar .nav-link:focus,
.ps-navbar .nav-link.show {
  background: rgba(255, 255, 255, .16);
  color: #fff !important;
}

/* Sección activa: subrayado amarillo de marca */
.ps-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
}
.ps-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: -.4rem;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--ps-yellow);
}

.ps-navbar .dropdown-menu {
  border-radius: var(--r-md);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: var(--sh-2);
  padding: .4rem;
  margin-top: 8px;
  background: var(--surface);
  min-width: 258px;
}

.ps-navbar .dropdown-item {
  padding: .5rem .75rem;
  font-size: .885rem;
  font-weight: 500;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  border-radius: var(--r-sm);
}

.ps-navbar .dropdown-item i { width: 18px; text-align: center; opacity: .85; }
.ps-navbar .dropdown-item:hover { background: var(--ps-blue-soft); color: var(--ps-blue-dark); }
.ps-navbar .dropdown-item.fw-bold { font-weight: 700; }
.ps-navbar .dropdown-divider { margin: .35rem .25rem; border-color: var(--line); }

.user-pill {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-weight: 600;
  font-size: .84rem;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.3;
}
.user-pill span { opacity: .8; font-weight: 400; font-size: .78rem; }
.user-pill > div { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* En pantallas medianas el nombre del usuario y el buscador ceden espacio
   antes que los botones: «Salir» nunca debe quedar cortado */
@media (max-width: 1650px) {
  .user-pill > div { max-width: 120px; }
  #buscador-global { flex: 0 1 190px; }
}
@media (max-width: 1400px) {
  .user-pill span { display: none; }
  #buscador-global { flex: 0 1 150px; }
}

.btn-logout {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  border-radius: 999px;
  padding: .35rem .85rem;
  font-weight: 600;
  font-size: .82rem;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease;
}
.btn-logout:hover { background: var(--danger-mark); border-color: var(--danger-mark); color: #fff; }

/* ==========================================================================
   Buscador global (Ctrl+K)
   ========================================================================== */

/* Se encoge antes que el resto de la barra para que nunca corte «Salir» */
#buscador-global { position: relative; flex: 0 1 250px; min-width: 130px; }

.buscador-caja .input-group-text {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .75);
}
.buscador-caja .form-control {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .85rem;
}
.buscador-caja .form-control::placeholder { color: rgba(255, 255, 255, .6); }
.buscador-caja .form-control:focus {
  background: rgba(255, 255, 255, .18);
  border-color: var(--ps-yellow);
  box-shadow: none;
  color: #fff;
}

.buscar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 430px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  z-index: 1080;
  padding: .35rem;
}
.buscar-dropdown.abierto { display: block; }

.buscar-grupo {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .5rem .6rem .25rem;
}

.buscar-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none !important;
}
.buscar-item:hover, .buscar-item.activo { background: var(--ps-blue-soft); }
.buscar-item i { color: var(--ps-blue); font-size: 1rem; flex: 0 0 18px; text-align: center; }
.buscar-titulo { font-weight: 600; font-size: .875rem; line-height: 1.3; }
.buscar-sub { font-size: .77rem; color: var(--muted); }
.buscar-vacio { padding: 1rem .75rem; font-size: .85rem; color: var(--muted); text-align: center; }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  font-size: .82rem;
  margin-bottom: .85rem;
  padding: 0;
  background: transparent;
}
.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--line-strong); padding: 0 .2rem; }
.breadcrumb-item a { color: var(--muted); }
.breadcrumb-item a:hover { color: var(--ps-blue); }
.breadcrumb-item.active { color: var(--ink-2); font-weight: 600; }

/* ==========================================================================
   Encabezados ordenables y filtro de tabla
   ========================================================================== */

th.ordenable { cursor: pointer; user-select: none; }
th.ordenable:hover { background: #EEF3FA !important; color: var(--ps-blue-dark) !important; }

.orden-icono { margin-left: .3rem; opacity: .35; font-size: .8em; }
.orden-icono.activo { opacity: 1; color: var(--ps-blue); }

.filtro-tabla {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .8rem;
}
.filtro-tabla .input-group { width: 290px; }
.filtro-cuenta { font-size: .8rem; color: var(--muted); }

/* ==========================================================================
   Pestañas
   ========================================================================== */

.nav-tabs { border-bottom: 1px solid var(--line); gap: .15rem; }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .875rem;
  padding: .55rem .95rem;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--ps-blue); background: #F7F9FC; border-bottom-color: var(--line-strong); }
.nav-tabs .nav-link.active { color: var(--ps-blue-dark); background: transparent; border-bottom-color: var(--ps-yellow); }

/* ==========================================================================
   Encabezado de página
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}

.page-head h2 {
  margin: 0 0 .15rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.4rem;
}
.page-head h2 i { color: var(--ps-blue); font-size: 1.25rem; }
.page-head p { margin: 0; color: var(--muted); font-size: .89rem; }
.page-head > .d-flex { flex-shrink: 0; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.card, .card-custom {
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.card-body { padding: 1.15rem 1.25rem; }

.card .card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.card .card-title i { color: var(--ps-blue); }

.accent-card { border-top: 3px solid var(--ps-yellow); }

/* ==========================================================================
   Tarjetas KPI
   La cifra va en tinta; la identidad la lleva el punto de color + el rótulo.
   ========================================================================== */

.kpi-card .card-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1.05rem 1.2rem;
}

.kpi-card > .card-body > span {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* Punto de identidad delante del rótulo */
.kpi-card > .card-body > span::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neutral-mark);
  flex: 0 0 8px;
}
.kpi-card.kpi-total  > .card-body > span::before { background: var(--ps-yellow); }
.kpi-card.kpi-ok     > .card-body > span::before { background: var(--ok-mark); }
.kpi-card.kpi-info   > .card-body > span::before { background: var(--info-mark); }
.kpi-card.kpi-alerta > .card-body > span::before { background: var(--danger-mark); }

.kpi {
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink) !important;   /* la cifra siempre en tinta, no en color de serie */
  letter-spacing: -0.02em;
}

.kpi-pie { font-size: .78rem; color: var(--muted); margin-top: .1rem; }

/* Variante compacta, para cuando son ocho cifras juntas y no cuatro.
   La cifra baja de tamaño y su pie se le pone AL LADO en vez de debajo: la
   tarjeta ocupa la mitad de alto y el panel entero se lee de una mirada, sin
   que ninguna cifra grite más fuerte que las otras. Se hace con grid para no
   tocar el HTML, que es el mismo de las tarjetas de siempre. */
.kpi-card.kpi-compacta > .card-body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "rotulo rotulo"
    "cifra  pie";
  align-items: baseline;
  column-gap: .5rem;
  row-gap: .1rem;
  padding: .7rem .9rem;
}
.kpi-card.kpi-compacta > .card-body > span { grid-area: rotulo; font-size: .7rem; }
.kpi-card.kpi-compacta > .card-body > span::before { width: 7px; height: 7px; flex: 0 0 7px; }
.kpi-card.kpi-compacta .kpi { grid-area: cifra; font-size: 1.45rem; line-height: 1.1; }
.kpi-card.kpi-compacta .kpi-pie { grid-area: pie; margin-top: 0; font-size: .74rem; }

/* Rótulos del panel: separan las máquinas de la plata sin meter otra caja.
   El de arriba nombra la columna; el de adentro parte la plata entre cobros y
   pagos. Van sobre el fondo, no dentro de una tarjeta, para que se lean como
   encabezado y no como un dato más. */
.rotulo-panel {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: .5rem;
  margin-bottom: .85rem;
  border-bottom: 2px solid var(--line-strong);
}

.rotulo-fila {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

/* Barra de ocupación de la flota. Una sola pieza partida en tres: cuánta
   máquina está produciendo y cuánta no. Cuatro cifras sueltas obligaban a hacer
   la división en la cabeza; acá la proporción se ve sola. Cada tramo es un
   enlace a su listado. */
.barra-flota {
  display: flex;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--viz-grid);
}
.barra-flota .seg { display: block; height: 100%; transition: filter .15s; }
.barra-flota .seg:hover { filter: brightness(1.12); }
.barra-flota .seg-obra  { background: var(--info-mark); }
.barra-flota .seg-libre { background: var(--ok-mark); }
.barra-flota .seg-fuera { background: var(--danger-mark); }
.barra-flota .seg-vacio { background: var(--viz-grid); }

.leyenda-flota {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1rem;
  font-size: .8rem;
}
.leyenda-flota a {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.leyenda-flota a:hover { text-decoration: underline; }
.leyenda-flota .punto {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  background: var(--neutral-mark);
}
.leyenda-flota .p-obra  { background: var(--info-mark); }
.leyenda-flota .p-libre { background: var(--ok-mark); }
.leyenda-flota .p-fuera { background: var(--danger-mark); }

/* Barras de cobros y pagos. Lo que importa acá es la comparación —cuánto me
   deben contra cuánto debo— y cuatro cifras alineadas obligaban a restarlas
   mentalmente. Todas se miden contra el mismo tope, así que sus largos se
   pueden comparar entre sí. */
.barra-plata {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) 1.4fr auto;
  align-items: center;
  gap: .1rem .75rem;
  padding: .38rem 0;
  color: var(--ink);
  text-decoration: none;
}
.barra-plata + .barra-plata { border-top: 1px solid var(--line); }
.barra-plata .rotulo { font-size: .78rem; color: var(--muted); }
.barra-plata .rotulo b { color: var(--ink); }
.barra-plata .pista {
  height: 14px;
  border-radius: 4px;
  background: var(--viz-grid);
  overflow: hidden;
}
.barra-plata .relleno { display: block; height: 100%; transition: filter .15s; }
.barra-plata:hover .relleno { filter: brightness(1.12); }
.barra-plata .monto { font-size: .92rem; font-weight: 700; white-space: nowrap; }
.barra-plata .es-cobro-ep { background: var(--info-mark); }
.barra-plata .es-cobro    { background: var(--ok-mark); }
.barra-plata .es-pago-oc  { background: var(--ps-yellow); }
.barra-plata .es-pago     { background: var(--danger-mark); }

/* El "+" que despliega el detalle de una fila. El icono se da vuelta solo con
   el estado que Bootstrap ya escribe en el botón, sin javascript propio. */
.abrir-clientes .bi-dash-square { display: none; }
.abrir-clientes[aria-expanded="true"] .bi-plus-square { display: none; }
.abrir-clientes[aria-expanded="true"] .bi-dash-square { display: inline-block; }

/* Lo que se abre bajo una fila: se lee como parte de ella, no como otra tabla. */
.lista-clientes {
  list-style: none;
  margin: 0;
  padding: .45rem 0 .6rem 2.6rem;
  background: #F7F9FC;
  font-size: .88rem;
}
.lista-clientes li {
  padding: .18rem 0;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.lista-clientes .bi { color: var(--muted); font-size: .8rem; }
tr.sin-hover:hover > td { background: transparent; }

/* ==========================================================================
   Medidor (barra de magnitud de una sola tonalidad)
   ========================================================================== */

.meter {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #EDF1F7;
  overflow: hidden;
  min-width: 66px;
  flex: 1 1 auto;
}

.meter > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ps-blue);
}

.meter.meter-ok   > i { background: var(--ok-mark); }
.meter.meter-warn > i { background: var(--warn-mark); }
.meter.meter-bajo > i { background: var(--danger-mark); }

.meter-row { display: flex; align-items: center; gap: .6rem; width: 132px; }
.meter-row .meter-val { font-size: .84rem; font-weight: 600; color: var(--ink-2); min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Bloque «pagado a la fecha»
   ========================================================================== */

.pagado-item {
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: #F7F9FC;
  border: 1px solid var(--line);
  height: 100%;
}
.pagado-item.pagado-total { background: var(--ps-blue-soft); border-color: #CBDDFA; }

.pagado-cifra {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Gráfico de perfil de vencimientos
   Dos series categóricas validadas contra daltonismo y contraste.
   El color nunca comunica solo: siempre hay leyenda y tabla de detalle.
   ========================================================================== */

:root {
  --serie-leasing: #2a78d6;
  --serie-credito: #eb6834;
  --viz-grid: #EDF1F7;
}

.viz-leyenda {
  display: flex;
  gap: 1.2rem;
  font-size: .82rem;
  color: var(--ink-2);
  margin-bottom: .9rem;
}
.viz-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }

.viz-punto {
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 10px;
}

.viz-grafico {
  position: relative;
  display: flex;
  gap: .6rem;
  padding-top: .25rem;
}

.viz-eje-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 210px;
  font-size: .7rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.viz-barras {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  flex: 1 1 auto;
  height: 210px;
  /* Líneas de referencia recesivas, detrás de las barras */
  background-image: linear-gradient(var(--viz-grid) 1px, transparent 1px);
  background-size: 100% 50%;
  background-position: 0 -1px;
  border-bottom: 1px solid var(--line-strong);
}

.viz-col {
  flex: 1 1 0;
  min-width: 6px;
  max-width: 40px;          /* marcas delgadas: no barras gruesas que dominen la lectura */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: default;
  outline-offset: 2px;
}

.viz-pila {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(100% - 16px);
}

.viz-seg {
  border-radius: 3px 3px 0 0;      /* extremo redondeado arriba */
  min-height: 2px;
  transition: filter .12s ease;
}
/* 2px de separación entre segmentos apilados: se ve la superficie entre ambos */
.viz-seg-credito { background: var(--serie-credito); margin-bottom: 2px; }
.viz-seg-leasing { background: var(--serie-leasing); border-radius: 0; }
/* Si el mes solo tiene leasing, ese segmento lleva el extremo redondeado */
.viz-seg-leasing:first-child { border-radius: 3px 3px 0 0; }

.viz-col:hover .viz-seg, .viz-col:focus .viz-seg { filter: brightness(1.12); }

.viz-etiqueta {
  height: 16px;
  font-size: .66rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

.viz-tooltip {
  position: absolute;
  bottom: calc(100% - 195px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  padding: .5rem .65rem;
  font-size: .78rem;
  box-shadow: var(--sh-2);
  pointer-events: none;
  z-index: 5;
  min-width: 150px;
}
.viz-tip-titulo { font-weight: 700; margin-bottom: .3rem; }
.viz-tip-fila {
  display: flex;
  align-items: center;
  gap: .4rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.viz-tip-fila span { flex: 1 1 auto; opacity: .85; }
.viz-tip-total { border-top: 1px solid rgba(255,255,255,.2); margin-top: .3rem; padding-top: .3rem; }

@media print {
  .viz-seg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* --------------------------------------------------------------------------
   Uso del horómetro

   Reutiliza el gráfico de arriba con una sola serie: horas trabajadas por mes.
   Los estados de uso no se distinguen solo por color — cada uno lleva su texto
   en la etiqueta, porque el color no comunica por sí solo.
   -------------------------------------------------------------------------- */

:root {
  --serie-horas: #2a78d6;
  --uso-intenso: #d98324;
  --uso-normal: #2e8b57;
  --uso-bajo: #7a8899;
}

.viz-seg-horas { background: var(--serie-horas); }
/* El mes en curso va rayado: se distingue del cerrado sin depender del color */
.viz-seg-parcial {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.45) 0 3px, transparent 3px 6px);
}
/* Un mes sin horas deja su hueco marcado: si no, se leería como un mes que falta */
.viz-col-vacio .viz-pila { border-bottom: 2px dotted var(--line-strong); }

/* Comparación dentro de un tipo: una fila por máquina */
.uso-fila {
  display: grid;
  grid-template-columns: 7rem 1fr 5.5rem;
  align-items: center;
  gap: .6rem;
  padding: .28rem 0;
}
.uso-pista {
  position: relative;
  height: 15px;
  background: var(--viz-grid);
  border-radius: 3px;
  overflow: hidden;
}
.uso-barra {
  height: 100%;
  border-radius: 3px;
  background: var(--serie-horas);
  min-width: 2px;
}
.uso-barra.es-intenso     { background: var(--uso-intenso); }
.uso-barra.es-subutilizada { background: var(--uso-bajo); }

/* La marca del "normal" del tipo, para leer cada barra contra la referencia */
.uso-marca {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--ink-2);
  opacity: .55;
}

.uso-valor {
  text-align: right;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

@media print {
  .uso-barra { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ==========================================================================
   Tablas
   ========================================================================== */

.table { margin-bottom: 0; --bs-table-bg: transparent; }

.table > thead > tr > th {
  background: #F7F9FC !important;
  color: var(--muted) !important;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong) !important;
  border-top: none;
  padding: .7rem .75rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  vertical-align: middle;
  padding: .68rem .75rem;
  border-color: var(--line);
  font-size: .885rem;
}

.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr:hover > * { background-color: #F7FAFF; }

/* La primera columna suele ser el código del equipo: no debe partirse en dos líneas */
.table > tbody > tr > td:first-child { white-space: nowrap; }

.table-responsive { border-radius: var(--r-md); }

/* Fila de totales */
.table tfoot td, .table .fila-total td {
  background: #F7F9FC;
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--line-strong);
}

/* ==========================================================================
   Chips de estado — el color nunca va solo, siempre con su etiqueta
   ========================================================================== */

.badge {
  font-weight: 600;
  font-size: .755rem;
  padding: .34em .7em;
  border-radius: 999px;
  letter-spacing: .01em;
}

.status-disponible            { background: var(--ok-bg);      color: var(--ok); }
.status-arrendado,
.status-activo                { background: var(--info-bg);    color: var(--info); }
.status-mantencion,
.status-pendiente             { background: var(--warn-bg);    color: var(--warn); }
.status-panne                 { background: var(--danger-bg);  color: var(--danger); }
.status-baja,
.status-terminado,
.status-finalizado            { background: var(--neutral-bg); color: var(--neutral); }

.badge-ok     { background: var(--ok-bg);     color: var(--ok); }
.badge-warn   { background: var(--warn-bg);   color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

/* Bootstrap: suavizar los badges duros que ya usan los templates */
.badge.bg-secondary { background: var(--neutral-bg) !important; color: var(--neutral) !important; }
.badge.bg-info      { background: var(--info-bg) !important;    color: var(--info) !important; }
.badge.bg-warning   { background: var(--warn-bg) !important;    color: var(--warn) !important; }
.badge.bg-success   { background: var(--ok-bg) !important;      color: var(--ok) !important; }
.badge.bg-danger    { background: var(--danger-bg) !important;  color: var(--danger) !important; }
.badge.bg-light     { background: var(--neutral-bg) !important; color: var(--neutral) !important; }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: .48rem 1rem;
  font-size: .885rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .32rem .68rem; font-size: .8rem; }

.btn-ps, .btn-primary {
  background: var(--ps-yellow);
  border-color: var(--ps-yellow);
  color: #16202E;
  box-shadow: 0 1px 2px rgba(215, 155, 0, .3);
}
.btn-ps:hover, .btn-primary:hover, .btn-primary:focus {
  background: var(--ps-yellow-dark);
  border-color: var(--ps-yellow-dark);
  color: #0B1220;
}

.btn-ps-blue {
  background: var(--ps-blue);
  border-color: var(--ps-blue);
  color: #fff;
}
.btn-ps-blue:hover { background: var(--ps-blue-dark); border-color: var(--ps-blue-dark); color: #fff; }

.btn-outline-primary { color: var(--ps-blue); border-color: var(--line-strong); }
.btn-outline-primary:hover { background: var(--ps-blue); border-color: var(--ps-blue); color: #fff; }
.btn-outline-secondary { color: var(--muted); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background: #F1F5F9; border-color: var(--line-strong); color: var(--ink); }
.btn-outline-danger { color: var(--danger); border-color: #F0CFCD; }
.btn-outline-danger:hover { background: var(--danger-mark); border-color: var(--danger-mark); color: #fff; }
.btn-outline-success { color: var(--ok); border-color: #C6E7CD; }
.btn-outline-success:hover { background: var(--ok-mark); border-color: var(--ok-mark); color: #fff; }

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-label {
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink-2);
  margin-bottom: .3rem;
}
.form-label.required::after { content: " *"; color: var(--danger-mark); font-weight: 700; }

.form-control, .form-select {
  border-radius: var(--r-sm);
  border-color: var(--line-strong);
  padding: .5rem .75rem;
  font-size: .89rem;
  color: var(--ink);
  background-color: var(--surface);
}
.form-control::placeholder { color: #A3AEBF; }
.form-control:focus, .form-select:focus {
  border-color: var(--ps-blue);
  box-shadow: 0 0 0 .2rem rgba(24, 87, 163, .14);
}
.form-control:disabled, .form-control[readonly] { background: #F4F6FA; color: var(--muted); }
.form-text { font-size: .79rem; color: var(--muted); }

.form-check-input:checked { background-color: var(--ps-blue); border-color: var(--ps-blue); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(24, 87, 163, .14); }

/* ==========================================================================
   Alertas
   ========================================================================== */

.alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  font-size: .89rem;
  font-weight: 500;
  box-shadow: var(--sh-1);
}
.alert-success { background: var(--ok-bg);      color: var(--ok);      border-left-color: var(--ok-mark); }
.alert-info    { background: var(--info-bg);    color: var(--info);    border-left-color: var(--info-mark); }
.alert-warning { background: var(--warn-bg);    color: var(--warn);    border-left-color: var(--warn-mark); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-left-color: var(--danger-mark); }

/* ==========================================================================
   Panel de alertas del dashboard
   ========================================================================== */

.dashboard-alert { border-top: 3px solid var(--warn-mark); }

.dashboard-alert h6 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 1.1rem 0 .5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dashboard-alert h6:first-of-type { margin-top: 0; }

.alerta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  background: #F7F9FC;
  border-left: 3px solid var(--neutral-mark);
  margin-bottom: .4rem;
  font-size: .86rem;
}
.alerta-item.es-vencido { background: var(--danger-bg); border-left-color: var(--danger-mark); }
.alerta-item.es-proximo { background: var(--warn-bg);   border-left-color: var(--warn-mark); }

/* ==========================================================================
   Agenda del día mecánico — prioridades
   ========================================================================== */

.priority-alta, .priority-media, .priority-baja {
  border-left: 3px solid var(--neutral-mark) !important;
  background: #F7F9FC !important;
  border-radius: var(--r-sm) !important;
  font-size: .86rem;
}
.priority-alta  { border-left-color: var(--danger-mark) !important; }
.priority-media { border-left-color: var(--warn-mark) !important; }
.priority-baja  { border-left-color: var(--ok-mark) !important; }

/* ==========================================================================
   Utilidades
   ========================================================================== */

.small-muted { font-size: .79rem; color: var(--muted); }

.text-primary { color: var(--ps-blue) !important; }
.text-muted   { color: var(--muted) !important; }

.mono { font-family: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; font-size: .84rem; }
code  { color: var(--ink-2); background: #F1F5F9; padding: .1rem .35rem; border-radius: 4px; font-size: .84em; }

/* Estado vacío */
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.vacio i { font-size: 2rem; opacity: .35; display: block; margin-bottom: .6rem; }
.vacio p { margin: 0; font-size: .89rem; }

.footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  font-size: .82rem;
}

/* ==========================================================================
   Impresión — informes y estados de pago salen limpios
   ========================================================================== */

@media print {
  .ps-navbar, .footer, .btn, .alert-dismissible .btn-close, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0 !important; }
  .card, .card-custom { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  .table > thead > tr > th { background: #eee !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .page-head { border-bottom: 2px solid #000; }
}

/* ==========================================================================
   Pantalla de ingreso
   Los archivos del logo miden 4875 px de ancho: sin un tamaño definido aquí,
   la imagen se dibuja completa y empuja la página a lo ancho.
   ========================================================================== */

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(24px, 6vh, 72px) 20px;
  min-height: calc(100vh - 130px);   /* deja el pie de página abajo, no flotando */
}

.login-brand-panel {
  min-width: 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--ps-blue-deep), var(--ps-blue));
  box-shadow: var(--sh-3);
  color: #fff;
}

/* El logo es la versión pensada para ir sobre azul, por eso el panel lo es. */
.login-logo {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-bottom: 24px;
}

/* El color va explícito: la regla general de los títulos los pinta en tinta
   oscura, que sobre el panel azul queda ilegible. */
.login-brand-panel h1 {
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .5rem;
}

.login-brand-panel p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
}

.login-box { min-width: 0; }

.login-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

@media (max-width: 900px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
  }
  .login-brand-panel { text-align: center; }
  .login-logo { margin-inline: auto; max-width: 280px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
  .ps-main-nav { gap: 0; margin-top: .5rem; }
  .ps-navbar .nav-link.active::after { display: none; }
  .page-head { flex-direction: column; align-items: stretch; }
  .kpi { font-size: 1.8rem; }
}

/* El menú del usuario: solo el círculo, sin la flechita que lo ensancha. */
.dropdown-toggle-no-caret::after { display: none !important; }
.ps-navbar .dropdown-toggle-no-caret { opacity: .9; transition: opacity .15s ease; }
.ps-navbar .dropdown-toggle-no-caret:hover { opacity: 1; }