@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --azul: #a8791a;
  --azul-osc: #8a6414;
  --negro: #1a1a1a;
  --negro-suave: #2a2a2a;
  --dorado: #a8791a;
  --dorado-claro: #d8b34a;
  --verde: #1b8a5a;
  --verde-osc: #146b4a;
  --rojo: #c0392b;
  --gris: #f4f5f7;
  --texto: #222;
  --borde: #d8dce1;
}

* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--gris);
  color: var(--texto);
  margin: 0;
}

header.top {
  background: var(--negro);
  color: white;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header.top h1 { font-size: 18px; margin: 0; font-weight: 600; }

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marca img { height: 32px; width: 32px; border-radius: 50%; display: block; }
.marca .marca-nombre {
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--dorado-claro);
  font-size: 15px;
}
.marca .marca-sub {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  font-weight: 400;
}

header.top button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
header.top button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

.contenedor {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.tarjeta {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  margin-bottom: 16px;
}

/* Cada tabla ancha scrollea DENTRO de su propia caja. Antes el scroll vivía en .tarjeta, y eso
   arrastraba de lado todo lo demás que hubiera en la tarjeta —título, filtros, botones— así que
   se sentía como si se moviera la pantalla entera. Con el envoltorio, lo único que se desplaza
   es la tabla.
   `min-width: 0` es imprescindible: dentro de un contenedor flex o grid un hijo no se achica
   por debajo de su contenido, así que sin esto la caja crece con la tabla y no scrollea nada. */
.tabla-scroll {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: 14px; }

input, select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(168, 121, 26, .18);
}

/* Campos que se pueden dejar en blanco. Se marcan de dos formas a la vez para que se
   distingan de un vistazo, sin leer etiqueta por etiqueta: la palabra "opcional" en un chip
   y el campo en punteado y atenuado. Al hacerle foco vuelve a verse como cualquier otro
   campo, para que al escribir no parezca deshabilitado. */
.chip-opcional {
  font-weight: 400;
  font-size: 11px;
  background: var(--gris);
  color: #6b7280;
  border: 1px solid #e3e6ea;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
label.etiqueta-opcional { color: #5f6672; }
input.campo-opcional, select.campo-opcional, textarea.campo-opcional {
  border-style: dashed;
  border-color: #c3c9d1;
  background: #fafbfc;
}
/* El borde dorado del foco hay que repetirlo acá: "input:focus" y "input.campo-opcional" pesan
   lo mismo para el navegador, y como el segundo va después, ganaba él — el campo se quedaba con
   el borde gris mientras escribías, con el halo dorado alrededor. */
input.campo-opcional:focus, select.campo-opcional:focus, textarea.campo-opcional:focus {
  border-style: solid;
  border-color: var(--azul);
  background: white;
}

button {
  font-family: inherit;
}

button.primario {
  background: var(--azul);
  color: white;
  border: none;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 16px;
  transition: background .15s ease, transform .05s ease;
}
button.primario:hover { background: var(--azul-osc); }
button.primario:active { transform: scale(0.98); }

button.secundario {
  background: white;
  color: var(--azul);
  border: 1px solid var(--azul);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
button.secundario:hover { background: #fbf3e2; }
button.secundario:active { transform: scale(0.98); }

/* Distinto del resto (que son todos dorados) para que se reconozca de un vistazo entre
   los botones de filtro, sin importar en qué pestaña esté. */
button.exportar {
  background: var(--verde);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s ease, transform .05s ease;
}
button.exportar:hover { background: #146e48; }
button.exportar:active { transform: scale(0.98); }

/* Gris neutro (no dorado ni verde) para no competir con "Filtrar" ni "Exportar a Excel" —
   es una acción de "deshacer filtros", no una acción principal. */
button.limpiar-filtros {
  background: white;
  color: #5f5e5a;
  border: 1px solid #9a9a95;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s ease, transform .05s ease;
}
button.limpiar-filtros:hover { background: #f1f1ef; }
button.limpiar-filtros:active { transform: scale(0.98); }

button:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------
   Menú de acciones por fila (⋮)
   ---------------------------------------------------------------------------------------
   Reemplaza la hilera de botones que llevaban Socios y Usuarios: eran hasta cuatro por fila y
   hacían la columna de acciones más ancha que varias columnas de datos juntas.

   El botón usa el mismo lenguaje que .secundario —borde y texto dorados sobre blanco— para que
   se lea como algo que se toca sin inventar un estilo nuevo. Relleno sólido NO: en esta app ese
   peso está reservado para la acción principal de cada pantalla, y veinte filas serían veinte
   botones dorados compitiendo con el que importa. Abierto sí se rellena, para que se vea de
   cuál fila es el menú cuando hay muchas.

   34 px de lado: es el mínimo cómodo para un pulgar, y va igual en escritorio y en celular. */
.kebab {
  background: white;
  border: 1.5px solid var(--dorado);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  color: var(--dorado);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.kebab:hover { background: #faf4e6; }
.kebab.abierto { background: var(--dorado); color: white; }

/* El menú se posiciona con `fixed` y cuelga del <body>, NO de la celda. Es obligatorio: las
   tablas viven dentro de .tabla-scroll, que tiene overflow-x auto — y en cuanto un eje deja de
   ser `visible` el otro también deja de serlo, así que un menú absoluto dentro de la celda
   quedaría recortado por los cuatro lados. Colgando del body no lo recorta nadie.
   z-index por debajo de .overlay-modal (1000): el menú se cierra antes de abrir un modal, pero
   si alguna vez coinciden, el modal tiene que ganar. */
.menu-acciones {
  position: fixed;
  background: white;
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  min-width: 172px;
  padding: 4px;
  z-index: 900;
}
.menu-acciones button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--texto);
}
.menu-acciones button:hover { background: #faf4e6; color: var(--azul-osc); }
/* Eliminar va separado y en rojo: es la única irreversible, y pegada a "Desactivar" en una
   lista de cuatro se toca por error. */
.menu-acciones button.peligro { color: var(--rojo); }
.menu-acciones button.peligro:hover { background: #fdecea; }
.menu-acciones hr { border: none; border-top: 1px solid #eceef1; margin: 4px 0; }

.mensaje-error {
  background: #fdecea;
  color: var(--rojo);
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 12px;
}

/* El socio encontrado se marca con un filo al costado, no con una caja rellena. Es el mismo
   verde del descuento a propósito: en esta pantalla el verde significa UNA cosa —lo del socio,
   quién es y cuánto se le rebaja— y el dorado significa otra: lo que se aprieta.
   El "no es socio" de más abajo sí sigue siendo una caja: eso es una alerta, no un dato. */
.resultado-socio {
  border-left: 4px solid var(--verde);
  padding: 3px 0 3px 12px;
  margin-top: 16px;
}

.resultado-no-socio {
  border: 2px solid var(--rojo);
  background: #fdecea;
  padding: 16px;
  border-radius: 8px;
  margin-top: 16px;
}

/* Bloque de cálculo de la pantalla del bombero. El descuento se destaca con COLOR y el monto
   a cobrar con TAMAÑO, a propósito: si los dos fueran igual de grandes, en un celular al sol y
   con el cliente esperando se puede terminar cobrando la cifra equivocada. Antes todo el
   bloque heredaba .chico (13px gris) y el descuento se perdía entre el precio y el detalle. */
/* El selector de combustible se ve tocable a propósito: es la primera decisión de la pantalla
   del bombero. Usa el mismo lenguaje que los botones secundarios (borde y texto dorados sobre
   blanco), que ya está aprendido en el resto de la app.
   NO va relleno de dorado: la flecha del desplegable la dibuja el sistema operativo y en varios
   Android es gris oscuro fijo, así que sobre un fondo dorado se pierde. Y además competiría con
   el botón "Registrar", que es la acción final. */
/* Los dos botones de modo de carga. No usan `primario` porque ese es dorado sólido, igual que
   "Registrar" justo abajo: dos bloques dorados del mismo peso, y el que hay que apretar deja de
   destacar. Acá el elegido se marca con un relleno gris, que alcanza para verse y no compite. */
.btn-modo { flex: 1; margin-top: 0; padding: 10px; }
.btn-modo.activo { background: var(--gris); color: var(--texto); border-color: var(--borde); font-weight: 500; }

/* El cálculo se muestra como un recibo: valor, descuento y total, con la resta a la vista.
   Antes eran dos franjas de colores —una verde y una dorada— que competían entre sí y con el
   botón; el dorado aparecía en cuatro sitios y había dejado de significar nada.

   Que se vea la resta no es estética: es la respuesta a la pregunta que hace el socio en el
   surtidor ("¿cuánto me descontaron?"), y de paso pone los litros y el precio en la misma
   línea, que es lo que hay que contrastar contra la bomba. */
.recibo { margin-top: 18px; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.recibo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.recibo-valor { color: #555; }
.recibo-valor .rotulo { font-size: 13px; }
.recibo-valor .cifra { font-size: 17px; }
.recibo-descuento { margin-top: 5px; color: var(--verde-osc); }
.recibo-descuento .rotulo { font-size: 13px; }
.recibo-descuento strong { font-size: 28px; color: var(--verde); }
/* El total va más grande que el descuento y esa distancia NO se cierra: con las dos cifras del
   mismo tamaño, alguien va a cobrar los $820 del descuento en vez de los $19.180. El signo
   menos del descuento es la otra mitad de esa protección — un número con menos no se lee como
   un precio. */
.recibo-total { margin-top: 10px; padding-top: 11px; border-top: 2px solid var(--texto); }
.recibo-total .rotulo { font-weight: 500; }
.recibo-total strong { font-size: 34px; }
.calculo-detalle { font-size: 13px; color: #555; }

table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; vertical-align: middle; }
tr.nueva-maquina td { padding-top: 28px; border-top: 4px solid var(--borde); }
th { background: #f0f1f3; }

/* Los botones de una fila (Editar/Desactivar/Eliminar) viven en UNA celda, no en tres columnas:
   así la tabla es más angosta y en el celular la tarjeta no arrastra tres celdas sin etiqueta.
   Se separan con margen y no con flex para no sacar el <td> del layout de la tabla. */
td.acciones-fila button { margin-right: 6px; }
td.acciones-fila button:last-child { margin-right: 0; }

.app-layout {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}

/* La barra son DOS columnas: una tira angosta de iconos (una por sección, siempre visible) y
   el cuerpo, que muestra las pestañas de la sección elegida. Mostrar una sección a la vez es lo
   que la hace caber: con las tres desplegadas eran ~800 px y en un notebook no entraban.
   En móvil se vuelve una sola columna y manda el selector de pastillas — ver la media query. */
.sidebar {
  background: var(--negro);
  color: white;
  width: 220px;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
}

.sidebar-cuerpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-rail {
  width: 58px;
  flex-shrink: 0;
  background: #141414;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
}
.rail-logo { height: 30px; width: 30px; border-radius: 50%; display: block; margin-bottom: 8px; }

.rail-btn {
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.6);
  border-radius: 6px;
  padding: 8px 2px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  transition: background .15s ease, color .15s ease;
}
/* Los iconos son trazo, no relleno: heredan el color del botón y así el estado activo se
   resuelve con una sola propiedad en vez de tener que repintar cada SVG. */
.rail-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-btn:hover { background: rgba(255,255,255,.08); color: white; }
.rail-btn.activo { background: var(--dorado); color: white; }

.sidebar-logo {
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
/* El logo grande solo hace falta cuando NO está la tira de iconos, o sea en móvil: en
   escritorio ya lo muestra el rail y acá solo robaría el ancho que necesita el nombre. */
.sidebar-cuerpo .sidebar-logo img { display: none; }
.sidebar-logo img { height: 38px; width: 38px; border-radius: 50%; display: block; }
.sidebar-logo .marca-nombre { font-weight: 700; letter-spacing: .5px; color: var(--dorado-claro); font-size: 14px; line-height: 1.3; }
.sidebar-logo .marca-sub { font-size: 11px; color: rgba(255,255,255,.6); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  flex: 1;
  /* La barra mide 100vh fijo y adentro hay logo + 12 pestañas + 3 títulos + los dos botones del
     pie: cerca de 800 px. En un notebook (~650 px de alto útil) eso no cabe, y sin estas dos
     líneas la lista se desborda por abajo y se encima con "Registrar descuento" y "Cerrar
     sesión". `min-height: 0` es la que hace el trabajo: sin ella un hijo flex no se achica por
     debajo de su contenido y el desborde ocurre igual aunque haya overflow declarado. */
  min-height: 0;
  overflow-y: auto;
}
.sidebar-nav button {
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.75);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.sidebar-nav button:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-nav button.activo {
  background: var(--dorado);
  color: white;
  font-weight: 600;
}

/* Selector de sección (Socios/Caja): solo se muestra en mobile, ver media query abajo. */
.nav-selector-movil { display: none; }

.nav-seccion-titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--dorado-claro);
  text-transform: uppercase;
  padding: 14px 14px 6px;
}
.nav-seccion:first-child .nav-seccion-titulo { padding-top: 4px; }
/* Una sección a la vez, la que diga la tira de iconos. Antes esto pasaba solo en móvil (de ahí
   el nombre viejo de la clase, `activa-movil`); ahora vale también en escritorio y es lo que
   evita que la barra se desborde por abajo. */
.nav-seccion { display: none; flex-direction: column; gap: 2px; }
.nav-seccion.activa { display: flex; }

/* Dos botones seguidos al pie: el segundo se pega al primero en vez de sumar otros 12 px de
   margen, que en una pantalla baja es justo lo que sobra. */
.sidebar-logout + .sidebar-logout { margin-top: 0; }

.sidebar-logout {
  margin: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.8);
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease;
}
.sidebar-logout:hover { background: rgba(255,255,255,.08); }

.app-layout .contenedor {
  flex: 1;
  min-width: 0;
  max-width: none;
  margin-left: 220px;
  margin-right: 0;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Resumen del turno del cuadre: a la izquierda lo que se teclea, a la derecha lo que el
   sistema calcula con eso. Se apila en una columna en móvil (ver más abajo). */
.cuadre-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

/* Destaque breve de los selectores al llegar desde el botón "Abrir" del Historial: confirma a
   qué turno te trajo. Se apaga solo — la animación no se repite y no deja estilos pegados. */
@keyframes destacar-campo {
  from { border-color: var(--dorado); box-shadow: 0 0 0 3px rgba(168, 121, 26, 0.25); }
  to   { border-color: var(--borde); box-shadow: none; }
}
.destacado { animation: destacar-campo 2.5s ease-out 1; }
.oculto { display: none; }
.chico { font-size: 13px; color: #555; }

.skeleton {
  background: linear-gradient(90deg, #eaeaea 25%, #f4f4f4 37%, #eaeaea 63%);
  background-size: 400% 100%;
  animation: skeleton-anim 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skeleton-anim {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-linea { height: 14px; margin-bottom: 10px; }
.skeleton-linea:last-child { width: 70%; }
.skeleton-bloque { height: 140px; }

.overlay-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: fade-in .12s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: white;
  border-radius: 10px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.modal h3 { margin: 0 0 10px; font-size: 17px; }
/* pre-line: el texto del modal se escapa con escaparHtml (no puede traer <br>), así que los
   saltos de línea del mensaje son la única forma de listar varios ítems — sin esto, un aviso
   con una lista sale como un párrafo corrido. Los espacios siguen colapsando. */
.modal p { margin: 0; color: #444; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.modal-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.modal-botones button { margin-top: 0; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  padding: 8px 14px;
  border: 1px solid var(--borde);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tabs button.activo { background: var(--azul); color: white; border-color: var(--azul); }

@media (max-width: 640px) {
  .contenedor {
    padding: 12px;
  }

  header.top {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  header.top h1 {
    font-size: 15px;
  }
  header.top button {
    padding: 8px 14px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .cuadre-resumen {
    grid-template-columns: 1fr;
  }

  .tabs {
    gap: 6px;
  }
  .tabs button {
    padding: 8px 10px;
    font-size: 13px;
    flex: 1 1 auto;
  }

  /* En pantallas angostas las cifras bajan un punto para que la etiqueta y el monto quepan en
     la misma línea aunque la venta sea de seis dígitos. Bajan las DOS y en la misma proporción:
     encoger solo el total cerraría la distancia que impide cobrar el descuento por error. */
  .recibo-total strong { font-size: 28px; }
  .recibo-descuento strong { font-size: 22px; }

  button.primario, button.secundario {
    min-height: 44px;
  }

  .app-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: column;
    align-items: stretch;
  }
  /* Acá manda el selector de pastillas: la tira de iconos sobraría y robaría ancho. */
  .sidebar-rail { display: none; }
  .sidebar-cuerpo .sidebar-logo img { display: block; }
  .app-layout .contenedor {
    margin-left: 0;
  }
  .sidebar-logo {
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .sidebar-nav {
    flex-direction: column;
    padding: 0;
    gap: 0;
    /* Acá la barra no mide 100vh sino lo que necesite, así que no hay nada que scrollear — y
       dejarlo en auto crearía un scroll anidado sobre el de las pastillas de cada sección. */
    overflow-y: visible;
  }
  .sidebar-nav button {
    white-space: nowrap;
  }

  /* Selector de sección Socios/Caja: 2 pastillas siempre visibles, sin scroll. */
  .nav-selector-movil {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
  }
  .sidebar-nav .nav-selector-btn {
    flex: 1;
    padding: 8px 0;
    text-align: center;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.7);
    font-size: 13px;
    cursor: pointer;
  }
  .sidebar-nav .nav-selector-btn.activo {
    background: var(--dorado);
    color: white;
    font-weight: 600;
  }

  /* Solo la sección elegida arriba muestra su fila de pestañas, scrolleable aparte. */
  .nav-seccion-titulo { display: none; }
  .nav-seccion {
    display: none;
    flex-direction: row;
    gap: 6px;
    padding: 8px 12px 10px;
    overflow-x: auto;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .nav-seccion.activa { display: flex; }

  table.responsivo-movil, table.responsivo-movil thead, table.responsivo-movil tbody,
  table.responsivo-movil th, table.responsivo-movil td, table.responsivo-movil tr {
    display: block;
  }
  table.responsivo-movil { min-width: 0; width: 100%; }
  table.responsivo-movil thead tr { display: none; }
  table.responsivo-movil tr {
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    padding: 10px 12px;
  }
  /* grupo-inicio/grupo-fin hacen que todas las filas de una misma máquina se vean como una
     sola tarjeta (una tarjeta por máquina), en vez de una tarjeta suelta por combustible. */
  table.responsivo-movil tr.grupo-inicio {
    border-top: 1px solid var(--borde);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 10px;
  }
  table.responsivo-movil tr.grupo-fin {
    border-bottom: 1px solid var(--borde);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 10px;
  }
  table.responsivo-movil tr.nueva-maquina { margin-top: 28px; }
  table.responsivo-movil tr.nueva-maquina td { padding-top: 4px; border-top: none; }
  table.responsivo-movil td {
    border-bottom: none;
    white-space: normal;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    text-align: right;
  }
  table.responsivo-movil td::before {
    content: attr(data-etiqueta);
    font-weight: 600;
    color: #555;
    flex-shrink: 0;
    text-align: left;
  }
  table.responsivo-movil td:empty { display: none; }
  /* La celda de botones no lleva etiqueta: va como una barra abajo de la tarjeta, separada por
     una línea, y envuelve si no caben los tres a lo ancho del teléfono. */
  table.responsivo-movil td.acciones-fila {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--borde);
  }
  table.responsivo-movil td.acciones-fila button { margin-right: 0; }
}