* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #f4f5f7;
  color: #1f2430;
}

/* ---- Login ---- */
.vista-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: #fff;
  padding: 36px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  width: 320px;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .subtitulo { margin: 0 0 24px; color: #6b7280; font-size: 14px; }
.login-card label { display: block; font-size: 13px; margin-bottom: 6px; color: #374151; }
.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 18px;
}
.login-card button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.login-card button:hover { background: #1d4ed8; }
.error-msg { color: #dc2626; font-size: 13px; margin-top: 10px; }

/* ---- App shell ---- */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 220px;
  /* 21/10/2026 (reportado por el usuario: menu lateral se veia comprimido/
     cortado en laptops de pantalla mas angosta que el monitor original).
     Sin esto, al no haber flex-shrink:0 ni min-width, el navegador
     comprimia el sidebar por debajo de 220px cuando el viewport era
     angosto, aplastando los textos del menu ("Dashboard" -> "Da", etc.).
     flex-shrink:0 + min-width fijan el ancho real del sidebar siempre;
     quien cede espacio ahora es .main-content (ver mas abajo), con scroll
     horizontal propio si su contenido (tablas anchas) no entra. */
  flex-shrink: 0;
  min-width: 220px;
  background: #111827;
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  /* 20/10/2026 (pedido del usuario): antes el sidebar crecia con el alto
     de .main-content (flex row sin position fijo), asi que en pantallas
     largas (Dashboard con muchos bloques) el boton "Cerrar sesion" -- al
     final del flex, empujado por .nav-menu{flex:1} -- terminaba muy abajo
     de la pagina, lejos de la vista inicial. position:sticky con su
     propio alto de 100vh lo fija a la ventana: el sidebar ya no se estira
     con el contenido, y "Cerrar sesion" queda siempre visible cerca del
     area inicial (altura similar al bloque "Resumen Mensual de Stock" del
     Dashboard), sin tener que hacer scroll. overflow-y:auto es solo por
     seguridad si el menu alguna vez no entra en pantallas muy bajas. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid #1f2937;
  margin-bottom: 12px;
}
.sidebar-header strong { display: block; font-size: 15px; }
.usuario-nombre { display: block; font-size: 12px; color: #9ca3af; margin-top: 4px; }
.nav-menu { flex: 1; display: flex; flex-direction: column; }
.nav-item {
  padding: 10px 20px;
  color: #d1d5db;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.nav-item.activo { background: #1f2937; color: #fff; font-weight: 600; border-left: 3px solid #2563eb; }
.nav-item.deshabilitado { color: #4b5563; cursor: not-allowed; }
.btn-logout {
  margin: 12px 20px 0;
  padding: 8px;
  background: transparent;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #d1d5db;
  cursor: pointer;
  font-size: 13px;
}
.btn-logout:hover { background: #1f2937; }

.main-content {
  flex: 1;
  /* min-width:0 es necesario para que un hijo flex con flex:1 pueda
     encogerse por debajo del ancho de su contenido (de lo contrario el
     navegador usa min-width:auto = ancho del contenido, y es .sidebar el
     que terminaba cediendo espacio). overflow-x:auto contiene el scroll
     horizontal (por ejemplo, tablas anchas en pantallas angostas) dentro
     de esta columna, sin mover ni recortar el sidebar. */
  min-width: 0;
  overflow-x: auto;
  padding: 32px 40px;
}

/* 21/10/2026: breakpoint simple para laptops/tablets (<=900px de ancho de
   ventana). El sidebar reduce su ancho y pasa a mostrar solo los iconos
   (el texto de cada item queda disponible como tooltip nativo via
   title="" en el HTML) -- evita que el menu "coma" demasiado espacio en
   pantallas angostas, en vez de simplemente forzar scroll horizontal en
   todo momento. Por encima de 900px el comportamiento no cambia. */
@media (max-width: 900px) {
  .sidebar { width: 64px; min-width: 64px; padding: 20px 0; }
  .sidebar-header { padding: 0 10px 20px; text-align: center; }
  .sidebar-header strong,
  .usuario-nombre { display: none; }
  .nav-item { padding: 12px; justify-content: center; }
  .nav-item span.nav-item-texto { display: none; }
  .icon-nav { margin-right: 0; }
  .btn-logout { margin: 12px 10px 0; padding: 8px 4px; font-size: 11px; }
}

/* 21/10/2026 (pedido explicito del usuario: la presentacion tiene que
   verse "ejecutiva" en una laptop normal (1366-1440px de ancho de
   ventana), no apretada/amontonada -- ni depender de que la persona haga
   scroll para ver texto cortado. Este breakpoint reduce de forma pareja
   los paddings y tamaños de letra de toda la aplicacion (no solo el
   sidebar) para que quepa comodamente ese ~15-20% de ancho que gana una
   laptop frente al monitor original con el que se diseño el panel.
   Los graficos SVG ya se adaptan solos al ancho real de su contenedor
   (ver app.js, 21/10/2026) -- esta reduccion de padding les da ademas mas
   espacio disponible para dibujarse mas grandes, no menos. */
@media (max-width: 1500px) {
  .main-content { padding: 22px 24px; }
  .pantalla-header h2 { font-size: 19px; }
  .tabla th, .tabla td { padding: 8px 10px; font-size: 13px; }
  .dash-kpis { grid-template-columns: repeat(7, minmax(126px, 1fr)); gap: 8px; }
  .dash-kpi { padding: 11px 10px; }
  .dash-kpi-valor { font-size: 16px; }
  .dash-kpi-label { font-size: 10px; }
  .dash-kpi-icon { width: 28px; height: 28px; }
  .dash-proyecto-barra { padding: 11px 16px; }
  .dash-proyecto-barra-nombre { font-size: 17px; }
  .btn-primario, .btn-secundario { padding: 8px 13px; font-size: 13px; }
  .form-card, .reportes-filtros, .dash-grafico-card, .dash-tabla-card,
  .dash-alertas-card, .dash-resumen-mensual-card, .config-card { padding-left: 14px; padding-right: 14px; }
}
.pantalla-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pantalla-header h2 { margin: 0; font-size: 22px; }

/* Anotacion 12 (03/10/2026): botón "Actualizar" + indicador de última
   actualización, junto al selector de proyecto del Dashboard. */
.dash-header-acciones { display: flex; align-items: center; gap: 12px; }
.dash-ultima-actualizacion { font-size: 12px; color: #9ca3af; white-space: nowrap; }

.btn-primario {
  background: #2563eb; color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; cursor: pointer;
}
.btn-primario:hover { background: #1d4ed8; }
.btn-secundario {
  background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; cursor: pointer;
}
.btn-secundario:hover { background: #f3f4f6; }

.form-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 20px; margin-bottom: 20px; max-width: 420px;
}
.form-card label { display: block; font-size: 13px; margin-bottom: 6px; color: #374151; }
.form-card input,
.form-card select,
.form-card textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; margin-bottom: 14px; background: #fff; font-family: inherit;
}
.form-card textarea { resize: vertical; }
.form-card .label-checkbox {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151;
  margin-bottom: 16px; cursor: pointer;
}
.form-card .label-checkbox input { width: auto; margin: 0; }
.form-actions { display: flex; gap: 10px; }

/* Movimientos (06/10/2026): fila de botones para abrir Ajuste/Anular. */
.mov-acciones { display: flex; gap: 10px; margin-bottom: 18px; }

.nota-pantalla { color: #6b7280; font-size: 13px; margin: -10px 0 16px; }
/* Obs. 01 (lote de 15 observaciones, 03/10/2026): el margen negativo de
   arriba asume que .nota-pantalla siempre sigue a un input de formulario
   (que ya trae margin-bottom: 14px, dejando ~4px de separacion real).
   Cuando en vez de eso sigue a .form-actions (el envoltorio de los
   botones, sin margen inferior propio -- ver linea 128), ese mismo
   margen negativo la monta encima del boton Guardar/Cancelar (visto en
   Configuracion > Stock Minimo de Reposicion). Se corrige solo para ese
   caso, sin tocar el comportamiento ya validado en el resto de pantallas. */
.form-actions + .nota-pantalla { margin-top: 10px; }

.filtro-proyecto {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.filtro-proyecto label { font-size: 13px; color: #374151; }
.filtro-proyecto select {
  padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; min-width: 220px;
}

.tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
/* 21/10/2026 (reportado por el usuario: en Reportes una fila se veia en 2
   lineas porque era mas ancha que la pantalla). Sin white-space:nowrap,
   el navegador encoge cada columna al ancho disponible y envuelve el
   texto de la celda -- descuadrando esa fila respecto a las demas en vez
   de hacer scroll horizontal (que .main-content ya soporta). Las tablas
   de este aplicativo son datos tabulares cortos (codigos, fechas,
   montos), no parrafos, asi que nowrap es el comportamiento correcto en
   todas ellas. */
.tabla th, .tabla td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eef0f2; font-size: 14px; white-space: nowrap; }
.tabla th { background: #f9fafb; font-size: 12px; text-transform: uppercase; color: #6b7280; }
.celda-vacia { text-align: center; color: #9ca3af; padding: 24px; }

/* 19/10/2026: paginacion de la pantalla Alertas (50 por pagina). */
.alertas-paginacion {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 14px; padding: 10px 0;
}
.alertas-paginacion button:disabled { opacity: 0.45; cursor: not-allowed; }
#alertas-pag-info { font-size: 13px; color: #6b7280; }

.badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.activo { background: #dcfce7; color: #166534; }
.badge.inactivo { background: #fee2e2; color: #991b1b; }

.fila-accion { display: flex; gap: 8px; }
.link-accion { background: none; border: none; color: #2563eb; cursor: pointer; font-size: 13px; padding: 0; }
.link-accion.peligro { color: #dc2626; }

/* ---- Configuracion (menu de tarjetas) ---- */
.config-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.config-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 18px 20px; text-align: left; cursor: pointer; font-family: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.config-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-color: #2563eb; }
.config-card h3 { margin: 0 0 6px; font-size: 15px; color: #111827; }
.config-card p { margin: 0; font-size: 12px; color: #6b7280; }
.config-card.deshabilitado { cursor: not-allowed; opacity: 0.55; }
.config-card.deshabilitado:hover { box-shadow: none; border-color: #e5e7eb; }

.btn-volver-config {
  background: none; border: none; color: #2563eb; cursor: pointer;
  font-size: 13px; padding: 0; margin-bottom: 14px; display: inline-block;
}
.btn-volver-config:hover { text-decoration: underline; }

/* ---- Dashboard ---- */
.dash-subtitulo { font-size: 15px; color: #374151; margin: 0 0 10px; }
.dash-tabla { margin-bottom: 4px; }
.dash-selector-proyecto {
  padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 14px; min-width: 240px; background: #fff;
}

.dash-proyecto-header {
  display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dash-proyecto-barra { padding: 14px 20px; color: #fff; }
.dash-proyecto-barra-codigo { background: #111827; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; padding-bottom: 6px; }
.dash-proyecto-barra-nombre { background: #2563eb; font-size: 19px; font-weight: 600; padding-top: 10px; }

/* 7 tarjetas alineadas y proporcionalmente distribuidas en una sola linea
   (pedido explicito del usuario 03/10/2026) -- grid de 7 columnas iguales
   en vez de flex-wrap, asi nunca se van a una segunda fila; en pantallas
   angostas el bloque completo hace scroll horizontal en vez de apretujar
   las tarjetas. */
.dash-kpis {
  display: grid; grid-template-columns: repeat(7, minmax(162px, 1fr)); gap: 12px;
  margin-bottom: 28px; overflow-x: auto; padding-bottom: 2px;
}
.dash-kpi {
  background: #fff; border-radius: 10px; padding: 14px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
/* Anotacion 11 (03/10/2026): con 7 tarjetas en una sola fila, las etiquetas
   mas largas ("CAPACIDAD INSTALADA") se truncaban con ellipsis. Se permite
   que la etiqueta use hasta 2 lineas en vez de cortarse, y se reduce un
   poco el tamano de letra de la etiqueta y del valor para que el conjunto
   quede proporcional al ancho real de cada tarjeta. */
.dash-kpi-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; color: #6b7280;
  white-space: normal; line-height: 1.25; display: block;
}
.dash-kpi-valor { font-size: 18px; font-weight: 600; color: #111827; white-space: nowrap; }
.dash-kpi-pct { font-size: 12px; color: #6b7280; }
.dash-meter {
  width: 100%; height: 8px; border-radius: 999px; background: #e1e0d9; overflow: hidden; margin-top: 2px;
}
.dash-meter-fill { height: 100%; width: 0%; background: #2563eb; border-radius: 999px; transition: width 0.3s ease; }

/* 19/10/2026: esta tarjeta no tenia fondo propio (a diferencia de sus
   vecinas dash-tabla-card/dash-grafico-card) -- quedaba "flotando" sin
   tarjeta blanca. Se corrige para que luzca igual que el resto, y de paso
   evita que su titulo quede ilegible sobre el nuevo fondo oscuro del tema
   Dashboard. */
.dash-resumen-mensual-card {
  background: #fff; border-radius: 10px; padding: 16px 18px; margin-bottom: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dash-resumen-mensual-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dash-resumen-mensual-header .dash-subtitulo { margin: 0; }

.dash-tablas { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.dash-tabla-card { flex: 1 1 320px; min-width: 280px; }
.dash-fila-total td { font-weight: 600; background: #f9fafb; border-top: 2px solid #e5e7eb; }

/* 19/10/2026: tarjetas de "Estado de Cisternas" (reemplaza la tabla
   plana de saldo/capacidad/ocupacion, que no aportaba informacion
   nueva al usuario). */
.cisternas-cards { display: flex; flex-direction: column; gap: 14px; }
.cisterna-card {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px;
}
.cisterna-card-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.cisterna-card-header strong { font-size: 13.5px; color: #111827; }
.cisterna-card-link {
  font-size: 12px; color: #2563eb; text-decoration: none; white-space: nowrap;
}
.cisterna-card-link:hover { text-decoration: underline; }
.cisterna-card-sub { font-size: 12px; color: #6b7280; margin-top: 3px; }
.cisterna-card-stats {
  display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 12px; color: #374151;
}
.cisterna-card-stats span::before { content: "• "; color: #9ca3af; }

.dash-graficos { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.dash-grafico-card {
  flex: 1 1 380px; min-width: 300px; background: #fff; border-radius: 10px;
  padding: 16px 18px 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dash-grafico { width: 100%; overflow-x: auto; }
.dash-grafico svg { display: block; }

/* ---- Iconos (sprite, mismo estilo en todo el Dashboard, inspirado en el mockup del usuario) ---- */
.icon {
  width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px;
  color: #2563eb; flex-shrink: 0;
}

/* Iconos del sidebar: mas claros sobre fondo oscuro, blancos cuando el item esta activo */
.icon-nav { width: 16px; height: 16px; margin-right: 10px; color: #9ca3af; vertical-align: -3px; }
.nav-item.activo .icon-nav { color: #fff; }
.nav-item.deshabilitado .icon-nav { color: #4b5563; }

/* Icono "chip" circular de color, igual al estilo del mockup, usado en los KPI del Dashboard */
.dash-kpi-top { display: flex; align-items: center; gap: 10px; }
.dash-kpi-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dash-kpi-icon .icon { width: 17px; height: 17px; margin: 0; }
.dash-kpi-icon-azul    { background: #dbeafe; color: #2563eb; }
.dash-kpi-icon-verde   { background: #dcfce7; color: #16a34a; }
.dash-kpi-icon-ambar   { background: #fef3c7; color: #b45309; }
.dash-kpi-icon-teal    { background: #cffafe; color: #0891b2; }
.dash-kpi-icon-naranja { background: #ffedd5; color: #c2410c; }
.dash-kpi-icon-morado  { background: #ede9fe; color: #7c3aed; }
.dash-kpi-icon-rojo    { background: #fee2e2; color: #dc2626; }

/* ---- Alertas (panel por proyecto) ---- */
.dash-alertas-card {
  background: #fff; border-radius: 10px; padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 28px;
}
.dash-alertas-card-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; gap: 10px; }
.dash-alertas-card .dash-subtitulo { display: flex; align-items: center; margin: 0; }
.dash-alertas-card .dash-subtitulo .icon { color: #dc2626; }
.dash-alertas-resumen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-alertas-resumen li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.dash-alertas-resumen .badge { min-width: 26px; text-align: center; }
.dash-alertas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-alertas-lista li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* Obs. 14 (03/10/2026): cada fila lleva a su detalle en la pantalla Alertas. */
.dash-alerta-clickable { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: -4px -6px; transition: background 0.15s ease; }
.dash-alerta-clickable:hover { background: #f9fafb; }
.badge.alerta-saldo-bajo { background: #fef3c7; color: #92400e; }
.badge.alerta-capacidad-alta { background: #fee2e2; color: #991b1b; }
/* Migracion v2.12 (03/10/2026): STOCK_MINIMO_REPOSICION y SOBRELLENADO_EQUIPO
   reutilizan las 2 clases de arriba (mismo nivel de severidad); DESPACHO_INUSUAL
   es una anomalia de otro tipo (no de nivel de tanque), con su propio color. */
.badge.alerta-advertencia { background: #ffedd5; color: #c2410c; }
.badge.badge-neutro { background: #f3f4f6; color: #6b7280; }
.dash-sin-alertas { color: #6b7280; font-size: 14px; margin: 0; }

/* ---- Rendimiento de equipos: flag fuera de rango ---- */
.badge.rendimiento-ok { background: #dcfce7; color: #166534; }
.badge.rendimiento-alto { background: #fee2e2; color: #991b1b; }
.badge.rendimiento-sin-datos { background: #f3f4f6; color: #6b7280; }

/* ---- Reportes: filtros por columna + modo todos/rango + exportar ---- */
.btn-volver-reportes {
  background: none; border: none; color: #2563eb; cursor: pointer;
  font-size: 13px; padding: 0; margin-bottom: 14px; display: inline-block;
}
.btn-volver-reportes:hover { text-decoration: underline; }

.reportes-filtros {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px;
}
/* Compactado 03/10/2026 a pedido del usuario: todo el bloque de filtros de
   cada reporte (selects, modo todos/rango, fechas y botones) vive ahora en
   UNA sola fila flex que se ajusta al contenido, para robarle el minimo de
   espacio vertical posible a la tabla de resultados. Sigue envolviendo en
   pantallas angostas (flex-wrap), pero en una pantalla de escritorio normal
   entra completo en una linea. */
.reportes-filtros-fila {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 0;
}
.reportes-campo { display: flex; flex-direction: column; gap: 4px; flex: 0 1 150px; min-width: 110px; }
.reportes-campo-fecha { flex: 0 1 128px; min-width: 118px; }
.reportes-campo label { font-size: 11px; color: #6b7280; white-space: nowrap; }
.reportes-campo select, .reportes-campo input {
  padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; font-family: inherit; width: 100%;
}
.reportes-campo select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.reportes-campo input:disabled { background: #f3f4f6; color: #9ca3af; }
.reportes-modo-opcion { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #374151; white-space: nowrap; }
.reportes-modo-opcion input { width: auto; margin: 0; }
/* .reportes-acciones ahora vive COMO HIJO de .reportes-filtros-fila (no ya
   combinada con esa clase en el mismo elemento), asi que necesita su propio
   display:flex para que Filtrar/Exportar queden uno junto al otro;
   margin-left:auto la empuja al extremo derecho de la fila. */
.reportes-acciones { display: flex; align-items: flex-end; gap: 10px; margin-left: auto; }
.reportes-acciones button { white-space: nowrap; }
.reportes-resumen { font-size: 13px; color: #6b7280; margin: 0 0 10px; }

/* ---- Conciliacion Fisica (Anotacion 05) ---- */
.conc-form-card { max-width: 560px; }

/* Correccion 06/10/2026: "Anular Movimiento" combina una fila de filtros
   ancha (igual a Auditoria) con una tabla de resultados, asi que no puede
   quedar acotado a los 420px de .form-card -- eso apretaba el bloque de
   filtros en una columna angosta (parecia un cuadrado) y la tabla, al no
   caber, se desbordaba igual fuera de esa caja. */
#mov-anular-wrap { max-width: none; }
.conc-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 15px; }
.conc-cab-fecha { color: #6b7280; font-size: 13px; }
.conc-saldo-teorico { color: #374151; font-size: 14px; margin: 0 0 16px; }
.conc-form-card .tabla { margin-bottom: 16px; }
.conc-form-card .tabla input { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
.conc-historial-titulo { margin: 28px 0 12px; }
.badge.conc-normal { background: #dcfce7; color: #166534; }
.badge.conc-alerta { background: #fee2e2; color: #991b1b; }
.badge.conc-pendiente { background: #f3f4f6; color: #6b7280; }

/* ---- Auditoria / Validacion (Anotacion 06) ---- */
.aud-detalle-card { max-width: 640px; margin-top: 20px; }

/* 19/10/2026: cabecera del panel de detalle compartido de Alertas, con el
   boton Cerrar empujado al extremo derecho (pedido del usuario -- antes
   solo se podia "abandonar" el panel haciendo scroll manualmente). */
.aud-detalle-header-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.aud-detalle-header-fila h3 { margin: 0; }

/* 19/10/2026: pestañas Alertas / Historico de Despacho Inusual -- antes
   los 2 grupos estaban apilados en la misma pantalla y habia que hacer
   scroll completo para llegar al segundo. */
.ale-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.ale-tab-btn {
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; cursor: pointer; color: #374151;
}
.ale-tab-btn:hover { background: #f3f4f6; }
.ale-tab-btn.activo { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
.ale-tab-btn.activo:hover { background: #1d4ed8; }

/* Obs. (07/10/2026): el detalle de "Alertas" (#alertas-detalle-wrap,
   comparte .aud-detalle-card con el detalle de Auditoria) sumo la columna
   Kilometraje y una fila de totales -- la tabla ya no cabia en los 640px
   de .aud-detalle-card y se salia visualmente de la tarjeta blanca. Se le
   da mas ancho solo a este (por id, para no afectar Auditoria) y se envuelve
   la tabla en .tabla-scroll (scroll horizontal) como respaldo en pantallas
   angostas, en vez de dejar que la tabla sobresalga del bloque. */
#alertas-detalle-wrap { max-width: 920px; }
.tabla-scroll { overflow-x: auto; }
.tabla-scroll .tabla { min-width: 720px; }
/* 21/10/2026: el Dashboard usaba este envoltorio en el HTML pero nunca
   tuvo regla propia -- no causaba problemas porque .main-content ya
   contiene cualquier desborde (ver mas arriba), pero se deja explicito
   por claridad y por si en el futuro .main-content cambia. */
.dash-tabla-scroll { overflow-x: auto; }
.aud-detalle-lista { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0 0 6px; font-size: 14px; }
.aud-detalle-lista dt { color: #6b7280; }
.aud-detalle-lista dd { margin: 0; color: #111827; }
.aud-evidencias-lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
/* Obs. 08 (03/10/2026): cada evidencia ahora puede mostrar su imagen
   debajo del renglon de texto, asi que el <li> pasa de flex-row a block;
   la fila de texto+boton queda en su propio div (.aud-evidencia-fila). */
.aud-evidencia-fila { display: flex; align-items: center; gap: 8px; }
.aud-evidencia-imagen { margin-top: 8px; }
.aud-evidencia-img { max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid #e5e7eb; display: block; }

/* ---- Auditoria / Validacion -- Obs. 09 (lote de 15 observaciones, 03/10/2026) ---- */
.aud-validacion-acciones { display: flex; gap: 10px; margin: 4px 0 10px; }
.aud-validacion-masiva {
  display: flex; align-items: center; gap: 12px; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px;
}
.badge.aud-conforme { background: #dcfce7; color: #166534; }
.badge.aud-disconforme { background: #fee2e2; color: #991b1b; }
.badge.aud-pendiente-validacion { background: #f3f4f6; color: #6b7280; }

/* ---- Tema de color Dashboard (19/10/2026) ----
   Fondo marino oscuro + acentos celeste, a juego con la landing TerraFuel
   Track. Aprobado por el usuario tras revisar mockups (variante B, con la
   barra "PRY-A" en celeste). Escopado solo a la pantalla de Dashboard via
   :has(), para no afectar Reportes/Movimientos/Conciliacion/Auditoria/
   Alertas/Configuracion, que comparten clases globales como .btn-primario/
   .btn-secundario/.dash-meter-fill. Reversible: basta con borrar este bloque
   para volver al estilo anterior. */
#vista-app:has(#pantalla-dashboard:not([hidden])) { background: #0b1826; }
#vista-app:has(#pantalla-dashboard:not([hidden])) .sidebar { background: #081220; }
#vista-app:has(#pantalla-dashboard:not([hidden])) .nav-item.activo {
  background: #16304f; border-left-color: #22b8f0;
}
#vista-app:has(#pantalla-dashboard:not([hidden])) .btn-logout { border-color: #2a4566; color: #cbd5e1; }
#vista-app:has(#pantalla-dashboard:not([hidden])) .btn-logout:hover { background: #16304f; }

#pantalla-dashboard .pantalla-header h2 { color: #fff; }
#pantalla-dashboard .dash-ultima-actualizacion { color: #93a5bd; }

#pantalla-dashboard .dash-proyecto-barra-codigo { background: #1596c2; }
#pantalla-dashboard .dash-proyecto-barra-nombre { background: #22b8f0; }

#pantalla-dashboard .btn-primario { background: #22b8f0; color: #06202e; font-weight: 600; }
#pantalla-dashboard .btn-primario:hover { background: #0ea0d8; }
#pantalla-dashboard .btn-secundario { background: #16304f; color: #e5e7eb; border-color: #2a4566; }
#pantalla-dashboard .btn-secundario:hover { background: #1c3a5e; }

#pantalla-dashboard .dash-kpi,
#pantalla-dashboard .dash-tabla-card,
#pantalla-dashboard .cisterna-card,
#pantalla-dashboard .dash-grafico-card {
  background: #fff; color: #1f2430;
}
#pantalla-dashboard .dash-tabla-card table,
#pantalla-dashboard .dash-tabla-card th,
#pantalla-dashboard .dash-tabla-card td,
#pantalla-dashboard .cisterna-card-sub,
#pantalla-dashboard .cisterna-card-stats,
#pantalla-dashboard .dash-kpi-valor { color: #1f2430; }
#pantalla-dashboard .dash-kpi-label,
#pantalla-dashboard .dash-kpi-pct { color: #6b7280; }
#pantalla-dashboard .dash-meter-fill { background: #22b8f0; }
#pantalla-dashboard .dash-kpi-icon-azul { background: #d6f1fb; color: #0ea0d8; }
#pantalla-dashboard .cisterna-card-link { color: #0ea0d8; }