:root {
  /* Tema "Claro Moderno" (por defecto). El botón de la barra lateral
     permite cambiar a "Azul Profesional" (oscuro, ver bloque
     html[data-theme="dark"] más abajo) -- la elección se guarda en el
     navegador (localStorage) y se aplica antes de pintar la página
     mediante templates/_tema.html. */
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #eef1f6;
  --line: #e2e7ee;
  --text: #17212f;
  --text-muted: #64748b;
  --accent: #2a78d6;
  --accent-2: #1d5fae;
  --accent-soft: rgba(42, 120, 214, 0.10);
  --danger: #dc3545;
  --danger-soft: rgba(220, 53, 69, 0.08);
  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.08);

  /* La barra lateral se mantiene oscura en ambos temas (es la marca) --
     estos colores no cambian con el interruptor claro/oscuro. */
  --sidebar-bg: #0a1119;
  --sidebar-line: #233247;
  --sidebar-text: #f0f4fa;
  --sidebar-text-muted: #7c90a8;
  --sidebar-tag-bg: #182740;
  --sidebar-hover-bg: #182740;
  --sidebar-width: 250px;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

html[data-theme="dark"] {
  /* Tema "Azul Profesional" (oscuro) -- valores originales, sin cambios. */
  --bg: #0c1420;
  --panel: #121d2e;
  --panel-2: #182740;
  --line: #233247;
  --text: #f0f4fa;
  --text-muted: #7c90a8;
  --accent: #2a78d6;
  --accent-2: #5598e7;
  --accent-soft: rgba(42, 120, 214, 0.16);
  --danger: #e34948;
  --danger-soft: rgba(227, 73, 72, 0.14);
  --success: #1baf7a;
  --success-soft: rgba(27, 175, 122, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

body {
  /* Antes esto era una cuadrícula (líneas cada 48px) cubriendo toda la
     app -- el dueño la describió como "cuadriculado" y "fome". Se
     reemplaza por un degradé radial casi imperceptible, mismo fondo
     oscuro de base pero sin la sensación de grilla técnica. */
  background-image: radial-gradient(1200px 640px at 12% -8%, rgba(42, 120, 214, 0.07), transparent 60%);
  background-attachment: fixed;
  background-color: var(--bg);
  opacity: 1;
}

body::before { content: none; }

/* ---------- Scrollbars a juego con el tema oscuro ----------
   Por defecto el navegador dibuja su propia barra de scroll (gris clara
   sobre fondo blanco), que desentona fuerte con el tema oscuro — se nota
   sobre todo en paneles con scroll propio como el kanban de Órdenes de
   trabajo o las tablas anchas. Se deja una barra delgada, oscura y con
   esquinas redondeadas en vez de ocultarla del todo, para no perder la
   posibilidad de arrastrarla con el mouse (el scroll con rueda/trackpad/
   teclado sigue funcionando igual en cualquiera de los dos casos). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--line);
  border-radius: 8px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.app {
  /* Antes 1180px -- en monitores anchos eso dejaba franjas enormes de
     espacio vacío a los costados sin usar (el sidebar ya ocupa su ancho
     fijo aparte; esto es el límite del contenido dentro de shell-main).
     Se subió a 1500px a pedido del taller, para que la tabla de Listado
     (Operativo) entre sin tener que hacer scroll horizontal en pantallas
     normales -- de paso le da más aire a cualquier otra tabla/dashboard
     ancho del resto del sistema. */
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ---------- Barra lateral fija (navegación entre módulos) ---------- */

.shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
  padding: 20px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--sidebar-line);
  margin-bottom: 8px;
}

.sidebar-brand h1 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--sidebar-text);
}

.sidebar-brand h1 span { color: var(--accent); }

.sidebar-brand p {
  font-size: 10.5px;
  color: var(--sidebar-text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.tema-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 10px;
  background: var(--sidebar-tag-bg);
  border: 1px solid var(--sidebar-line);
  border-radius: 6px;
  color: var(--sidebar-text-muted);
  font-size: 11.5px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}

.tema-toggle-btn:hover {
  color: var(--sidebar-text);
  border-color: var(--accent);
}

.tema-toggle-btn span:first-child { font-size: 13px; line-height: 1; }

.sidebar-modulo { border-bottom: 1px solid var(--sidebar-line); }

.sidebar-modulo-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: none;
  border: none;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}

.sidebar-modulo.activo > .sidebar-modulo-header { color: var(--accent); }

.sidebar-modulo-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--sidebar-text-muted);
  background: var(--sidebar-tag-bg);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.sidebar-modulo.activo .sidebar-modulo-tag { background: var(--accent); color: #fff; }

.sidebar-modulo-nombre { flex: 1; }

.sidebar-chevron {
  color: var(--sidebar-text-muted);
  font-size: 11px;
  transition: transform .15s;
  flex-shrink: 0;
}

.sidebar-modulo.activo .sidebar-chevron { transform: rotate(180deg); color: var(--accent); }

.sidebar-submenu { max-height: 0; overflow: hidden; transition: max-height .18s ease; }

.sidebar-modulo.activo .sidebar-submenu { max-height: 400px; }

.sidebar-subitem {
  display: block;
  padding: 8px 20px 8px 46px;
  font-size: 12.5px;
  color: var(--sidebar-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.sidebar-subitem:hover { color: var(--sidebar-text); background: var(--sidebar-hover-bg); }

.sidebar-subitem.activo {
  border-left-color: var(--accent);
  color: var(--sidebar-text);
  background: var(--sidebar-hover-bg);
  font-weight: 600;
}

.shell-main { flex: 1; min-width: 0; }

/* ---------- Responsive: barra lateral en celular/tablet ----------
   En desktop el botón hamburguesa y el fondo oscuro no se ven -- la barra
   lateral se comporta exactamente igual que siempre (fija, en flujo,
   siempre visible). Recién debajo de 900px (ver breakpoint ya usado en el
   resto del archivo para los otros cambios grandes de layout) la barra
   deja de ocupar espacio fijo y pasa a un panel que se desliza por encima
   del contenido (position: fixed + transform), abierto/cerrado por el
   botón (ver script al final de _sidebar.html). */

.sidebar-toggle-btn {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 19px;
    cursor: pointer;
    z-index: 300;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 16, 0.6);
    z-index: 240;
  }
  .sidebar-backdrop.visible { display: block; }

  body.sidebar-bloqueada { overflow: hidden; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  }
  .sidebar.sidebar-visible { transform: translateX(0); }

  /* Solo las páginas con barra lateral (.shell-main > .app) necesitan el
     espacio extra arriba para el botón hamburguesa -- las páginas sueltas
     sin sidebar (login, seguimiento, migración de datos) no lo usan y no
     deben perder ese espacio de arriba porque sí. */
  .shell-main .app { padding: 72px 16px 60px; }
  .app { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 480px) {
  .sidebar { width: 84vw; }
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border-radius: 4px;
  padding: 4px 8px;
  letter-spacing: 0.06em;
}

.brand-text h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
  line-height: 1;
}

.brand-text h1 span {
  color: var(--accent);
  margin-left: 8px;
}

.brand-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  display: inline-block;
  text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #1a1204;
}
.btn-primary:hover { background: var(--accent-2); }

.btn-secundario {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-secundario:hover { border-color: var(--text-muted); }

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-soft); }

/* ---------- Summary ---------- */

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}

.summary-card--warn {
  border-color: rgba(209, 67, 67, 0.4);
}

.summary-card--positivo {
  border-color: rgba(76, 175, 109, 0.4);
}

.summary-card--positivo .summary-value {
  color: var(--success);
}

/* Tarjetas resumen que además son un link (ej. CxC/CxP del Panel Principal
   llevando al detalle en Finanzas) -- mismo look que las demás, pero con
   affordance de que se puede pinchar (cursor, hover, "Ver detalle →"). */
.summary-card--clic {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.summary-card--clic:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.summary-card--clic .summary-sub {
  color: var(--accent-2);
  font-size: 11.5px;
}

.summary-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.summary-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
}

.summary-card--warn .summary-value {
  color: var(--danger);
}

.summary-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.summary-sub--danger {
  color: var(--danger);
}

/* ---------- Tarjetas de gráficos (dashboards) ---------- */

.chart-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.chart-grid--par {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .chart-grid, .chart-grid--par { grid-template-columns: 1fr; }
}

.chart-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}

.chart-card h3 {
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 3px;
}

.chart-card .chart-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.chart-leyenda {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.chart-leyenda span { display: flex; align-items: center; gap: 6px; }

.chart-leyenda i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* ---------- Tooltip interactivo de gráficos (hover) ---------- */

.chart-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
  font-size: 12px;
  min-width: 120px;
  max-width: 260px;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.08s ease-out;
}

.chart-tooltip--visible {
  opacity: 1;
}

.chart-tooltip-title {
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text);
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 2px 0;
}

.chart-tooltip-row + .chart-tooltip-row {
  margin-top: 1px;
}

.chart-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-tooltip-label {
  color: var(--text-muted);
  font-size: 11px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-tooltip-value {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  font-family: var(--font-mono);
  white-space: nowrap;
}

svg .chart-hit {
  fill: transparent;
  cursor: pointer;
}

svg rect[data-tt] {
  cursor: pointer;
  transition: opacity 0.08s ease-out;
}

svg rect[data-tt]:hover,
svg rect[data-tt].chart-hover {
  opacity: 0.78;
}

svg .chart-punto-hover {
  transition: r 0.08s ease-out, opacity 0.08s ease-out;
}

.kpi-delta {
  font-size: 12px;
  margin-top: 2px;
}

.kpi-delta--up { color: var(--success); }
.kpi-delta--down { color: var(--danger); }

/* ---------- Toolbar ---------- */

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.toolbar input[type="text"],
.toolbar input[type="date"],
.toolbar select {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
}

.toolbar .campo-rango {
  align-items: center;
}
.toolbar .campo-rango input[type="date"] {
  flex: 1;
  min-width: 0;
}

#buscar, #buscar-bodega { flex: 1; min-width: 220px; }

.toggle-critico {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}

.contador-badge {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 700;
}

/* ---------- Operativo: tablero por estado ---------- */

/* El tablero se "escapa" del ancho centrado de .app (max-width: 1180px)
   para aprovechar todo el ancho de la pantalla y que las columnas quepan
   lo más posible en una sola línea, sin scroll horizontal. */
.op-kanban-wrap {
  /* Antes esto se estiraba a 100vw con el hack de left:50%/margin:-50vw
     para ganar ancho extra -- pero esa cuenta se hace contra el viewport
     completo, y como esta pantalla tiene una barra lateral fija que corre
     el contenido, el resultado quedaba desalineado (ver nota sobre
     op-kanban-fade más abajo). Se saca el hack: el tablero usa el mismo
     ancho que el resto del contenido (toolbar, tarjetas resumen, etc.),
     que ya es bastante ancho, y así todas las coordenadas calzan. */
  position: relative;
}

.op-kanban {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  align-items: start;
  scroll-behavior: smooth;
}

/* Indicador de que el tablero sigue para el lado — dos franjas con
   degradado + flecha que solo se muestran cuando efectivamente hay más
   columnas ocultas hacia ese lado (ver updateKanbanFades() en operativo.js).
   No cambia el tablero en sí (sigue siendo una fila con scroll horizontal),
   solo lo hace evidente para que no se sienta "cortado" sin explicación.
   Van con position:fixed y coordenadas puestas por JS (no CSS puro) porque
   #op-kanban se estira con el hack de vw de arriba, y ese hack calcula el
   50% contra el viewport completo en vez de contra el layout real (que
   tiene la barra lateral corriendo el contenido) — position:fixed medido
   con getBoundingClientRect() es la única forma de que la franja quede
   pegada exactamente al borde real del tablero, mismo patrón que usa el
   tooltip de los gráficos (ver charts.js: chartTooltipMove). */
.op-kanban-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 20;
  display: flex;
  align-items: center;
}

.op-kanban-fade--visible {
  opacity: 1;
}

.op-kanban-fade--izq {
  justify-content: flex-start;
  background: linear-gradient(90deg, var(--bg) 12%, transparent);
}

.op-kanban-fade--der {
  justify-content: flex-end;
  background: linear-gradient(270deg, var(--bg) 12%, transparent);
}

.op-kanban-fade span {
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  padding: 0 8px;
}

.op-columna {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex: 1 1 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
}

.op-columna h3 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.op-columna-count {
  background: var(--panel-2);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px;
  color: var(--text);
}

.op-columna-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.op-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 0.15s, opacity 0.15s, background-color 0.15s;
}

.op-card:hover {
  border-color: var(--accent);
}

/* Colores por prioridad: todo el recuadro queda teñido (no solo un borde),
   para distinguir la urgencia de un vistazo sin tener que leer nada. Van de
   más calmo (baja) a más intenso (urgente). */
.op-card--baja {
  background: var(--panel-2);
  border-color: var(--line);
}
.op-card--media {
  background: rgba(245, 166, 35, 0.10);
  border-color: rgba(245, 166, 35, 0.35);
}
.op-card--alta {
  background: var(--accent-soft);
  border-color: rgba(232, 114, 12, 0.55);
}
.op-card--urgente {
  background: var(--danger-soft);
  border-color: var(--danger);
}
.op-card--urgente .op-card-cliente { color: var(--danger); }

/* Convertidores de torque "de región": teñido naranjo aparte de la escala
   de prioridad de arriba -- marca que, una vez reparado, hay que
   despacharlo de vuelta al cliente (no es solo "listo para retirar en
   el mesón"). */
.op-card--regional {
  background: rgba(230, 126, 34, 0.14);
  border-color: rgba(230, 126, 34, 0.55);
}

.op-card-origen-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--text-muted);
  white-space: nowrap;
}
.op-card-origen-badge--cliente_directo { color: var(--accent-2); border-color: var(--accent-2); }
.op-card-origen-badge--desde_ot_auto { color: var(--accent); border-color: var(--accent); }

.badge-regional {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #e67e22;
  border: 1px solid rgba(230, 126, 34, 0.55);
  border-radius: 4px;
  padding: 1px 6px;
}

.op-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.op-columna.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.op-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.op-card-ot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.op-card-cliente {
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 2px;
}

/* Marca/modelo del vehículo: línea propia, sin recortar — se pidió
   explícito que se lea completo aunque eso implique una tarjeta un poco
   más alta (se permite envolver a una segunda línea si el nombre es muy
   largo, en vez de cortarlo con "…"). */
.op-card-equipo-nombre {
  font-size: 12px;
  color: var(--accent-2);
  margin-bottom: 2px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Patente / año / color: línea aparte más abajo, para que se alcancen a
   leer siempre (antes la patente no se veía y el modelo se cortaba). */
.op-card-equipo-detalle {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: normal;
  overflow-wrap: break-word;
}

.op-card-valor {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
}

.op-card-descripcion {
  font-size: 12.5px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.op-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

@media (max-width: 900px) {
  .op-columna { flex: 0 0 78vw; min-width: 78vw; max-height: none; }
}

/* ---------- Operativo: badges de prioridad, secciones del detalle, checklist, tiempos ---------- */

.badge-prioridad {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.badge-prioridad--baja { color: var(--text-muted); background: var(--panel-2); }
.badge-prioridad--media { color: var(--accent-2); background: var(--accent-soft); }
.badge-prioridad--alta { color: var(--danger); background: var(--danger-soft); }
.badge-prioridad--urgente { color: #fff; background: var(--danger); }

.op-seccion {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

.op-seccion h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 0 0 12px 0;
  color: var(--accent-2);
}

.op-seccion-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.op-checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.op-checklist-row:last-child { border-bottom: none; }
.op-checklist-row .op-checklist-item { flex: 1; }
.op-checklist-row .op-checklist-meta { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.op-checklist-row select { width: auto; }

/* ---------- Operativo: resumen cliente/auto + botones de acceso (rediseño OT) ---------- */

.op-resumen-cliente-auto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.op-resumen-bloque h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent-2);
  margin: 0 0 8px 0;
}

.op-resumen-fila {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 2px 0;
}
.op-resumen-fila span { color: var(--text-muted); }
.op-resumen-fila strong { text-align: right; }

@media (max-width: 760px) {
  .op-resumen-cliente-auto { grid-template-columns: 1fr; }
}

.op-botones-acceso {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 6px 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Chips de conceptos sugeridos (ej. motivo de garantía): clic para
   agregarlos al campo de texto en vez de tener que escribirlos siempre. */
.chips-sugeridos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Pagos de una OT: cabecera con botón + tabla de abonos. */
.op-pagos {
  margin: 10px 0 18px 0;
}
.op-pagos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.op-pagos-head h4 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.btn-chico {
  padding: 4px 10px;
  font-size: 12.5px;
}

/* Acciones secundarias de la OT (ver historial, copiar link, vista
   imprimible): antes eran links amarillos arriba de todo, lo que parecía
   una alerta. Ahora van abajo del recuadro de valor/pagos, como botones
   chicos en fila prolija — mismo estilo que el resto de acciones
   secundarias de la app, no un aviso. */
.op-acciones-secundarias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.op-equipamiento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
  margin: 10px 0 18px 0;
}

.op-equipamiento-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.op-equipamiento-item input { width: auto; }

.op-equipamiento-item--lectura {
  color: var(--text-muted);
}
.op-equipamiento-item--lectura.marcado {
  color: var(--text);
  font-weight: 600;
}
.op-equipamiento-item--lectura span {
  width: 14px;
  display: inline-block;
  color: var(--success);
}
.op-equipamiento-item--lectura:not(.marcado) span {
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .op-equipamiento-grid { grid-template-columns: repeat(2, 1fr); }
}

.op-fotos-secciones {
  margin: 10px 0;
}

.op-fotos-seccion-titulo {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 18px 0 8px;
}

.op-fotos-seccion-titulo:first-child {
  margin-top: 0;
}

.op-fotos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 14px;
}

@media (max-width: 760px) {
  .op-fotos-grid { grid-template-columns: repeat(2, 1fr); }
}

.op-foto-tile {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.op-foto-tile--lista {
  cursor: pointer;
}

.op-foto-tile-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}

.op-foto-tile-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-foto-tile-titulo {
  font-size: 12px;
  font-weight: 600;
}

.op-foto-tile-titulo--pendiente {
  color: var(--danger);
}

.op-foto-tile-titulo--lista::before {
  content: "✓ ";
  color: var(--success);
}

.op-foto-tile-responsable {
  font-size: 11px;
  color: var(--text-muted);
}

.op-foto-tile-responsable::before {
  content: "Por: ";
}

.op-foto-tile-borrar {
  font-size: 11px;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.op-foto-zoom-modal {
  max-width: min(92vw, 900px);
}

.op-foto-zoom-contenedor {
  width: 100%;
  max-height: 75vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border-radius: 8px;
}

.op-foto-zoom-contenedor img {
  max-width: 100%;
  max-height: 75vh;
  cursor: zoom-in;
  transition: max-width 0.15s ease, max-height 0.15s ease;
}

.op-foto-zoom-contenedor img.op-foto-zoom-activo {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.tabla tbody tr[data-ver-garantia],
.tabla tbody tr[data-ver-orden] {
  cursor: pointer;
}

.op-tiempos-lista {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.op-tiempos-lista li { padding: 3px 0; }

.op-resumen-linea {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 4px 0;
}
.op-resumen-linea strong { color: var(--text); }
.op-resumen-linea--utilidad {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.op-resumen-linea--utilidad strong { color: var(--success); }

.op-divisor {
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}

/* Pestañas dentro de la ventana de una OT: "OT" (info + valor) y "Costos"
   (ítems cargados + utilidad estimada). */
.op-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.op-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 4px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.op-tab:hover { color: var(--text); }
.op-tab.activo {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.op-tab-panel + .op-tab-panel { margin-top: 0; }

.campo-inline-check {
  display: flex;
  align-items: center;
  gap: 12px;
}
.campo-inline-check input[type="number"],
.campo-inline-check input[type="text"] { flex: 1; }
.check-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Selector con más especificidad que ".campo input" (que fuerza
   width:100% a cualquier input dentro de un .campo) -- sin esto, un
   checkbox suelto dentro de un .campo (sin un input de texto al lado
   compitiendo por el espacio, como si pasa en .campo-inline-check) se
   estira casi al ancho completo de la fila en vez de quedar del
   tamaño normal de un checkbox. */
.check-inline input[type="checkbox"] { width: auto; flex: 0 0 auto; }

.op-garantia-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.op-garantia-card .op-garantia-meta { color: var(--text-muted); font-size: 11.5px; margin-top: 4px; }

/* ---------- Table ---------- */

.tabla-wrap {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  overflow: hidden;
  overflow-x: auto;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.tabla th.num, .tabla td.num { text-align: right; }

.tabla tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }

.tabla tbody tr {
  cursor: pointer;
  transition: background 0.1s ease;
}

.tabla tbody tr:hover { background: rgba(255,255,255,0.02); }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.paginacion-botones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.paginacion-actual {
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.paginacion-botones .btn {
  padding: 7px 14px;
  font-size: 13px;
}

.paginacion-botones .btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.codigo-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  color: var(--accent-2);
}

.nombre-producto { font-weight: 600; }
.subtexto { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }

.badge-critico {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 4px;
  padding: 2px 6px;
  vertical-align: middle;
}

.badge-urgencia {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.badge-urgencia--critico { color: var(--danger); background: var(--danger-soft); }
.badge-urgencia--proximo { color: var(--accent-2); background: var(--accent-soft); }

.badge-origen {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--panel-2);
}

.vacio-inline { color: var(--text-muted); font-size: 12.5px; }

.fila-con-error { background: var(--danger-soft); }

.mono { font-family: var(--font-mono); }

.vacio {
  text-align: center;
  color: var(--text-muted);
  padding: 32px !important;
}

/* ---------- Modal ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 11, 0.65);
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 50;
}

.modal-overlay.abierto { display: flex; }

.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  padding: 22px;
}

.modal-ancho { max-width: 820px; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 19px;
  margin: 0;
  letter-spacing: 0.01em;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }

.campo { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.campo label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.campo input, .campo select, .campo textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 11px;
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  min-width: 0;
}

.campo textarea { resize: vertical; }

.campo input[readonly] {
  color: var(--text-muted);
  background: var(--panel);
  cursor: not-allowed;
}

.campo-rango {
  display: flex;
  align-items: center;
  gap: 6px;
}
.campo-rango input { width: 0; flex: 1; }
.campo-rango span { color: var(--text-muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; min-width: 0; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; min-width: 0; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

.id-sistema-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-2);
  background: var(--accent-soft);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  margin: -4px 0 14px;
}

.campo-select-mas {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.campo-select-mas select { flex: 1; min-width: 0; }
.campo-select-mas .btn-link { white-space: nowrap; flex-shrink: 0; }

.ayuda {
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0 18px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.modal-actions--start { justify-content: flex-start; }

.op-fotos-filtro-envio {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 11px;
  font-family: var(--font-body);
  font-size: 13px;
  max-width: 260px;
}
.modal-actions--split { justify-content: space-between; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------- Detalle ---------- */

.detalle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* El formulario para registrar un movimiento va debajo de las dos columnas
   (info + historial), a todo el ancho del modal, en vez de apilado dentro
   de la columna izquierda — así el modal queda bastante más bajo y hay
   menos que scrollear para llegar al botón de guardar. */
.detalle-form-movimiento {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 4px;
}
.detalle-form-movimiento .subtitulo { margin-top: 14px; }

.subtitulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 18px 0 10px;
}

.detalle-foto {
  margin-bottom: 16px;
}
.detalle-foto-preview {
  width: 100%;
  max-width: 260px;
  height: 160px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
}
.detalle-foto-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detalle-foto-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
}

#detalle-ficha {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13.5px;
}

#detalle-ficha dt { color: var(--text-muted); }
#detalle-ficha dd { margin: 0; font-weight: 500; }

#crd-ficha {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13.5px;
}
#crd-ficha dt { color: var(--text-muted); }
#crd-ficha dd { margin: 0; font-weight: 500; }

.historial-lista {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Generar rendición: acordeón de gastos con boletas parciales
   (Migración 25) ---------- */
.cr-lista-gastos {
  /* Sin max-height/overflow propio a propósito: antes quedaba "atrapado" un
     scroll interno de altura fija y, al desplegar un gasto con el formulario
     de boleta completo (sobre todo con "Gastos por OT", que agrega el campo
     de OT), el contenido de esa tarjeta no alcanzaba a verse ni con scroll.
     Ahora crece libre y el que scrollea es el modal completo (ver
     .modal-overlay, que ya tiene overflow-y: auto), así que siempre se
     puede bajar hasta el botón "Agregar boleta". */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-gasto {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.cr-gasto-resumen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
}

.cr-gasto-resumen input[type="checkbox"] {
  flex: none;
}

.cr-gasto-fecha { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }
.cr-gasto-monto { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.cr-gasto-estado { flex: 1; font-size: 12px; white-space: nowrap; text-align: right; }
.cr-gasto-estado--listo { color: var(--success); }
.cr-gasto-estado--pendiente { color: var(--accent-2); }
.cr-gasto-chevron { color: var(--text-muted); transition: transform 0.15s ease; }
.cr-gasto--abierto .cr-gasto-chevron { transform: rotate(180deg); }

.cr-gasto-detalle {
  border-top: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-boletas-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cr-boleta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
}

.cr-boleta-item .cr-boleta-doc { font-family: var(--font-mono); white-space: nowrap; }
.cr-boleta-item .cr-boleta-rubro { flex: 1; color: var(--text-muted); }
.cr-boleta-item .cr-boleta-monto { font-family: var(--font-mono); white-space: nowrap; }
.cr-boleta-item button { flex: none; }
.cr-boleta-item input[type="checkbox"] { flex: none; }
.cr-boleta-item--rendida { opacity: 0.65; }
.cr-boleta-estado { flex: none; font-size: 11.5px; color: var(--success); white-space: nowrap; }

.cr-form-boleta {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-form-boleta .grid-2, .cr-form-boleta .grid-3 { gap: 8px; }
.cr-form-boleta .campo { margin: 0; }
.cr-form-boleta label { font-size: 11.5px; }

.cr-gasto-cerrar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.mov-item {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mov-tipo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.mov-tipo--entrada { color: var(--success); background: var(--success-soft); }
.mov-tipo--salida { color: var(--danger); background: var(--danger-soft); }
.mov-tipo--perdida { color: var(--accent-2); background: var(--accent-soft); }

.mov-detalle { flex: 1; color: var(--text-muted); font-size: 12px; }
.mov-fecha { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  /* En pantallas angostas hay más pestañas que ancho disponible (ej.
     Operativo: Dashboard/Órdenes/Garantías/Clientes/Reportes) -- en vez de
     que se corten o se apilen rompiendo el subrayado, se dejan deslizar
     horizontalmente (patrón estándar de tabs en mobile). */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 4px;
  margin-right: 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab:hover { color: var(--text); }

.tab.activo {
  color: var(--accent-2);
  border-bottom-color: var(--accent);
}

.sub-tabs {
  margin-bottom: 14px;
}

.sub-tabs .tab {
  font-size: 12px;
  padding: 6px 4px;
  margin-right: 14px;
}

.bodega-intro {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  flex: 1;
}

.campo-ubicacion {
  display: flex;
  gap: 10px;
  align-items: center;
}

.campo-ubicacion select { flex: 1; }

.btn-link {
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.btn-link--peligro { color: var(--danger, #c0392b); margin-left: 10px; }

.ayuda-inline {
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.ayuda-inline--bloqueado {
  color: var(--danger);
  background: var(--danger-soft);
  padding: 8px 10px;
  border-radius: 6px;
  margin: 0 0 12px;
  font-size: 12.5px;
}

.ayuda-inline--error {
  color: var(--danger);
}

.ayuda-inline--bloqueado .btn-link {
  color: var(--danger);
  text-decoration: underline;
  margin-left: 4px;
}

.respaldo-local-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.respaldo-local-fila:last-child {
  border-bottom: none;
}

.disco-desglose {
  margin-top: 6px;
}
.disco-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.disco-fila:last-child {
  border-bottom: none;
}

.estado-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.estado-pill--libre { color: var(--success); background: var(--success-soft); }
.estado-pill--ocupada { color: var(--accent-2); background: var(--accent-soft); }

.estado-pill--pendiente { color: var(--text-muted); background: var(--panel-2); }

.fac-linea-row {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 0.7fr 0.9fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.fac-linea-row:last-child { border-bottom: none; }
.fac-linea-row .campo { margin-bottom: 0; }
/* Cada campo de la línea con una columna FIJA y explícita (en vez de dejar
   que el navegador las ubique solo, "auto") -- se detectó que el
   auto-posicionamiento de CSS Grid combinado con "display:contents" (en
   .fn-modo-producto / .fn-modo-gasto-general, ver factura_nueva.js) hacía
   que "Producto" terminara saltando a la columna del botón "Quitar" y el
   resto de los campos se apilara desordenado -- quedaba "corrido" en vez
   de en una sola línea. Fijar la columna de cada campo a mano elimina esa
   ambigüedad y garantiza que Producto/Marca/Cantidad/Precio (o
   Descripción/Rubro/Monto en modo Gasto general) queden siempre en fila. */
.fac-linea-row .fn-linea-producto-campo,
.fac-linea-row .fn-linea-descripcion-gg-campo { grid-column: 1; }
.fac-linea-row .fn-linea-marca-campo,
.fac-linea-row .fn-linea-rubro-gg-campo { grid-column: 2; }
.fac-linea-row .fn-linea-cantidad-campo,
.fac-linea-row .fn-linea-monto-gg-campo { grid-column: 3; }
.fac-linea-row .fn-linea-precio-campo { grid-column: 4; }
/* Misma fila fac-linea-row, ahora para "Agregar factura internacional" (ver
   filaLineaFacturaInternacional en finanzas.js) -- solo 3 campos (sin modo
   Gasto general, así que sin display:contents de por medio), pero se fijan
   igual las columnas por prolijidad y para no repetir el mismo bug si el
   día de mañana se le agrega un modo alternativo. fi-linea-calculo es el
   resultado del prorrateo en vivo (% y costo final en pesos) mostrado bajo
   los 3 campos, sin invadir la columna del botón "Quitar".*/
.fac-linea-row .fi-linea-producto-campo { grid-column: 1; }
.fac-linea-row .fi-linea-cantidad-campo { grid-column: 2; }
.fac-linea-row .fi-linea-costo-campo { grid-column: 3; }
.fac-linea-row .fi-linea-calculo { grid-column: 1 / 5; font-size: 0.85em; color: var(--text-muted); }
/* Interruptor "Repuesto / Gasto general" de cada línea de factura -- a
   propósito NO tiene clase "campo" (para que no le pegue la regla
   ".campo input { width:100% }" de más abajo, que estiraba cada radio a
   todo el ancho de la fila dejándolo gigante, apilado y con el texto
   empujado fuera de la vista). */
.pfr-linea-modo-campo { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pfr-linea-modo-campo input[type="radio"] { width: auto; flex: 0 0 auto; }
/* Texto/código tal como lo leyó la IA en una foto de factura, mostrado
   junto al producto que quedó asignado (ver pfd-lineas en finanzas.js y
   afp-tbody-lineas en alerta_facturas_pendientes.js) -- para que un match
   automático equivocado salte a la vista al comparar contra el producto
   asignado, en vez de quedar escondido. */
.pfd-linea-leido {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-top: 2px;
}
.fila-grupo-mes td {
  background: var(--panel-2);
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--text-muted);
  text-transform: capitalize;
}
.fac-linea-quitar {
  background: none;
  border: 1px solid var(--line);
  color: var(--danger);
  border-radius: 6px;
  padding: 9px 10px;
  cursor: pointer;
  font-size: 13px;
  height: fit-content;
  /* Siempre en la última columna del grid, sin importar cuántos campos
     tenga la fila antes (Repuesto/Gasto general tienen distinta cantidad
     de campos, ver fac-linea-row) -- así el botón de quitar queda
     consistentemente pegado al borde derecho en cualquier modo. */
  grid-column: -1;
}
.fac-linea-quitar:hover { background: var(--danger-soft); }

.fac-linea-subtotal {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted);
  margin: -4px 0 4px;
}

.fac-total-linea {
  text-align: right;
  font-size: 15px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fac-total-linea strong { color: var(--accent-2); font-size: 17px; }

.campo-autocomplete { position: relative; }

.autocomplete-resultados {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.autocomplete-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.autocomplete-activo { background: var(--accent-soft); }
.autocomplete-item .autocomplete-item-meta {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}
.autocomplete-sin-resultados {
  padding: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
}

/* Facturas pendientes de revisión (WhatsApp): tarjetas de la bandeja y
   layout foto + datos del detalle. */
.wap-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
}
.wap-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.wap-card-info { flex: 1; min-width: 0; }
.wap-card-info strong { display: block; }
.wapd-layout {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wapd-foto { flex: 0 0 260px; }
.wapd-datos { flex: 1; min-width: 320px; }

.topbar-acciones {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sesion-usuario {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* ---------- Campanita de notificaciones (ver _notificaciones.html) ---------- */

.notif-bell {
  position: relative;
  display: inline-flex;
}
.notif-bell-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
}
.notif-bell-btn:hover {
  border-color: var(--accent);
}
.notif-bell-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
.notif-bell-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.notif-bell-panel h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text);
}
.notif-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.notif-item:last-child {
  margin-bottom: 0;
}
.notif-item-ot a {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}
.notif-item-ot a:hover {
  text-decoration: underline;
}
.notif-item-texto {
  margin: 4px 0;
  font-size: 13px;
  color: var(--text);
}
.notif-item-meta {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Sugerencias de diagnóstico (ver opdi-sugerencias-*) ---------- */

.op-sugerencia-diagnostico,
.op-prueba-ruta-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.op-sugerencia-texto {
  margin: 0 0 6px 0;
  /* Los mensajes de WhatsApp (pruebas de ruta / sugerencias de diagnóstico
     mandadas por un mecánico) suelen venir con saltos de línea y viñetas
     ("· funcionamiento de marchas (ok)") que el mecánico escribió a
     propósito para que se lea ordenado -- por default un <p> colapsa esos
     saltos de línea y todo queda pegado en una sola línea. pre-line
     preserva los saltos de línea del texto tal cual se guardó, pero sigue
     colapsando espacios/tabs de más (a diferencia de pre-wrap), así que un
     mensaje escrito normal (sin saltos) se sigue viendo igual que antes. */
  white-space: pre-line;
}
.op-sugerencia-foto {
  position: relative;
  display: inline-block;
  cursor: zoom-in;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.op-sugerencia-foto img {
  display: block;
  max-width: 180px;
  max-height: 130px;
  object-fit: cover;
}
.op-sugerencia-foto-zoom {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- Dashboard ---------- */

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dash-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.dash-panel--ancho { grid-column: 1 / -1; }

.dash-titulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.dash-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.dash-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 13px;
}

.dash-item-nombre { font-weight: 600; }
.dash-item-detalle { color: var(--text-muted); font-size: 12px; }
.dash-item-valor { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }

.dash-bodega-resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dash-bodega-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}

.dash-bodega-stat .valor {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-2);
}

.dash-bodega-stat .label {
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ---------- Rotación (Módulo 8) ---------- */

.rot-tendencia-chart {
  width: 100%;
  min-height: 200px;
  position: relative;
}

.rot-svg {
  width: 100%;
  height: 260px;
  display: block;
}

.rot-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: var(--panel-2, #1b1f2a);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.08s ease;
  min-width: 150px;
}

.rot-tooltip.visible { opacity: 1; }

.rot-tooltip-titulo {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.rot-tooltip-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rot-tooltip-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rot-tooltip-valor {
  margin-left: auto;
  font-weight: 600;
  font-family: "IBM Plex Mono", monospace;
}

.rot-tendencia-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.rot-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.rot-leyenda-item .rot-leyenda-cantidad {
  color: var(--text);
  font-weight: 600;
  font-family: "IBM Plex Mono", monospace;
}

.rot-leyenda-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.tendencia-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tendencia--subiendo { background: rgba(126, 208, 140, 0.15); color: #7ED08C; }
.tendencia--bajando { background: rgba(227, 111, 111, 0.15); color: #E36F6F; }
.tendencia--estable { background: rgba(138, 147, 166, 0.15); color: #8A93A6; }

@media (max-width: 760px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-bodega-resumen { grid-template-columns: 1fr 1fr; }
}

/* ---------- Reportes (Módulo 11) ---------- */

#vista-reportes .dash-panel .bodega-intro {
  margin: 6px 0 14px;
}

#vista-reportes .dash-panel select {
  margin-right: 8px;
  margin-bottom: 8px;
}

.reportes-botones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reportes-rango {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.reportes-rango input { margin-left: 6px; }

.reportes-contador {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  margin: 2px 0 10px;
}

/* ---------- Aviso global: facturas pendientes de recepción ---------- */
/* Visible en cualquier módulo (ver alerta_facturas_pendientes.js) — a
   diferencia del badge de "Pendientes de WhatsApp" (que solo se veía
   dentro de Facturas), este flota sobre toda la app hasta que se resuelvan
   todas las facturas pendientes. */

.afp-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
}

.afp-flotante button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--danger, #d9534f);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  animation: afp-pulso 1.8s ease-in-out infinite;
}

.afp-flotante-icono { font-size: 18px; }

@keyframes afp-pulso {
  0%, 100% { box-shadow: 0 6px 24px rgba(217, 83, 79, 0.35); }
  50% { box-shadow: 0 6px 28px rgba(217, 83, 79, 0.75); }
}

/* Mismo botón flotante que el de facturas pendientes (arriba), reusado
   para el aviso de Operativo (sugerencias de diagnóstico + pruebas de
   ruta sin revisar, ver notificaciones.js). Se apila ARRIBA del de
   facturas (bottom más alto) para que, en el caso de un admin que puede
   ver ambos a la vez, no queden uno encima del otro. */
.notif-flotante { bottom: 88px; }

/* Aviso de facturas rechazadas (solo Finanzas/admin, ver afrSondear en
   alerta_facturas_pendientes.js) -- se apila arriba de los dos anteriores
   por la misma razón (un admin puede llegar a ver los tres a la vez). */
.afr-flotante { bottom: 156px; }
.afr-flotante button { background: var(--advertencia, #d98c2c); }

/* Historial de una factura pendiente de recepción (creada / rechazada /
   corregida / aprobada) -- ver abrirDetalleFacturaPendiente en
   finanzas.js y afpAbrirDetalle en alerta_facturas_pendientes.js. */
.pfd-historial, .afp-historial {
  font-size: 12.5px;
  color: var(--text-muted);
  padding-left: 18px;
  margin: 4px 0 12px;
}
.pfd-historial li, .afp-historial li { margin-bottom: 4px; }

.pfr-plazos-rapidos {
  display: flex;
  gap: 8px;
}
.pfr-plazos-rapidos .btn {
  padding: 8px 12px;
  font-size: 12.5px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar-acciones { flex-wrap: wrap; }
  .wapd-datos { min-width: 0; }
  .notif-bell-panel { width: min(340px, calc(100vw - 32px)); right: -8px; }
}

@media (max-width: 760px) {
  .summary { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .detalle-grid { grid-template-columns: 1fr; }
  .tabla { min-width: 720px; }
  .fac-linea-row { grid-template-columns: 1fr; }
  .brand-text h1 { font-size: 19px; }
  .brand-sub { font-size: 11.5px; }
  .brand { gap: 10px; }
  .wapd-foto { flex: 1 1 100%; }
}

/* ---------- Estado de Resultados (Finanzas) ---------- */
/* Vista tipo "hoja impresa": una tarjeta clara flotando sobre el fondo
   oscuro del sistema, en vez de una tabla con grilla completa -- el papel
   de verdad no tiene una línea bajo cada renglón, solo algunos hairlines
   donde corresponde (subtotales/totales) y jerarquía tipográfica. */

.er-papel-wrap { display: flex; justify-content: center; padding: 8px 0 40px; }

.er-papel {
  width: 100%;
  max-width: 760px;
  background: #f7f5ef;
  color: #262420;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04);
  padding: 44px 48px 36px;
  font-family: var(--font-body);
}

.er-papel-encabezado {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(38,36,32,0.15);
}
.er-papel-encabezado h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  font-size: 20px;
}
.er-papel-encabezado p { margin: 0; color: #6b6558; font-size: 13px; }

.er-seccion-titulo {
  margin: 26px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8a8271;
  text-transform: uppercase;
}
.er-seccion-titulo:first-child { margin-top: 0; }

.er-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 4px;
  cursor: default;
  transition: background 0.12s ease;
}
.er-fila[data-clicable="1"] { cursor: pointer; }
.er-fila[data-clicable="1"]:hover,
.er-fila[data-clicable="1"]:focus-visible { background: rgba(38,36,32,0.06); outline: none; }
.er-fila .er-label { font-size: 14px; }
.er-fila .er-monto {
  font-family: var(--font-mono);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.er-fila.er-vacio .er-label { color: #9a9384; font-style: italic; }

.er-fila.er-subtotal { border-top: 1px solid rgba(38,36,32,0.18); margin-top: 4px; padding-top: 10px; }
.er-fila.er-subtotal .er-label, .er-fila.er-subtotal .er-monto { font-weight: 600; }

.er-fila.er-total {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(38,36,32,0.08);
  border-radius: 6px;
  border-top: none;
}
.er-fila.er-total .er-label, .er-fila.er-total .er-monto { font-weight: 700; font-size: 15px; }

.er-negativo { color: #a03a34; }
.er-pct { font-size: 12px; color: #8a8271; font-weight: 400; margin-left: 6px; }

.er-aviso-sin-clasificar {
  margin-top: 18px;
  font-size: 13px;
  color: #8a5a1f;
  background: rgba(196, 130, 30, 0.12);
  border: 1px solid rgba(196, 130, 30, 0.28);
  border-radius: 6px;
  padding: 10px 14px;
}

/* Modal de detalle: lista de transacciones que componen una línea */
.erd-items { list-style: none; margin: 12px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.erd-items li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.erd-items li:last-child { border-bottom: none; }
.erd-items .erd-item-fecha { color: var(--text-muted); font-size: 11px; }
.erd-total-fila {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line); font-weight: 700;
}
.erd-formula { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 10px; }

@media print {
  .sidebar, .sidebar-toggle-btn, .sidebar-backdrop,
  .topbar, .tabs, #er-toolbar-no-print, #er-toolbar-no-print-2,
  .toast, .notif-bell-panel { display: none !important; }
  .shell-main .app { padding: 0; }
  .er-papel-wrap { padding: 0; }
  .er-papel { box-shadow: none; max-width: none; }
}