:root {
  --navy-bg: #0b1420;
  --navy-card: #131e2e;
  --navy-card-2: #1a2740;
  --gold: #d9a441;
  --gold-light: #f0c76b;
  --text: #eef2f7;
  --text-dim: #9aa7bb;
  --green: #3ecf8e;
  --red: #e5615a;
  --border: #22314a;
  --violet: #9b8cf0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--navy-bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  background: var(--navy-card);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Agencia / usuario / Salir — antes estaban fijos arriba de cada pantalla
   (.topbar .user); pasan a vivir al fondo del Menú (sidebar en compu, menú
   desplegable en celu) para no ocupar lugar en cada pantalla — pedido de
   Daniel 15/09/2026 (continuación 19). */
.sidebar-user {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.sidebar-user-agencia { color: var(--text); font-weight: 600; }
.sidebar-user-nombre { color: var(--text-dim); margin-top: 2px; }
.sidebar-user-logout { display: inline-block; color: var(--gold-light); margin-top: 8px; }

.brand {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-light);
  padding: 0 10px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.brand span { color: var(--text); font-weight: 400; font-size: 12px; display: block; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--navy-card-2); color: var(--text); }
.nav-item.active { background: var(--gold); color: #17202e; font-weight: 600; }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Menú desplegable en celu (ver breakpoint 700px más abajo) — en compu no se ve. */
.mobile-topbar { display: none; }
.menu-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 8px;
  line-height: 0;
  cursor: pointer;
}
.menu-toggle:hover { background: var(--navy-card-2); }

.main { flex: 1; padding: 28px 34px; max-width: 1200px; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px;
}
.topbar h1 { font-size: 22px; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.card .label { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.card .value { font-size: 26px; font-weight: 700; margin-top: 6px; }
.card .sub { font-size: 12px; color: var(--green); margin-top: 4px; }

/* Dashboard: tarjetas de a 3 por línea, todas clickeables (llevan a su
   sección correspondiente) — pedido de Daniel 15/09/2026 (continuación 16,
   reemplaza el layout de 2 columnas de la continuación 15). */
.dashboard-cards { grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
a.card { display: block; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
a.card:hover { border-color: var(--gold); background: var(--navy-card-2); }

/* Los 2 gráficos de torta van en la misma fila, con la leyenda (el detalle
   de cada segmento) debajo del círculo en vez de al costado. */
.dashboard-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; align-items: start; }
.chart-panel { margin-bottom: 0; }
.donut-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.donut { width: 150px; height: 150px; min-width: 150px; border-radius: 50%; position: relative; }
.donut::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; background: var(--navy-card); }
.donut-legend { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text); }
.donut-legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .pct { color: var(--text-dim); }
@media (max-width: 700px) {
  .dashboard-cards { gap: 10px; }
  .dashboard-cards .card { padding: 12px; }
  .dashboard-cards .value { font-size: 17px; }
  .dashboard-cards .label { font-size: 10px; }
  .dashboard-cards .sub { font-size: 10px; }

  /* Las 2 tortas se achican pero se mantienen una al lado de la otra
     (antes se apilaban debajo de los 900px) para que el dashboard entero
     entre de una en la pantalla del celu — pedido de Daniel 15/09/2026
     (continuación 17). */
  .dashboard-charts-row { gap: 10px; }
  .dashboard-charts-row .chart-panel { padding: 12px; }
  .dashboard-charts-row .chart-panel h2 { font-size: 12.5px; margin-bottom: 6px; line-height: 1.25; }
  .dashboard-charts-row .donut-wrap { margin-bottom: 10px; }
  .dashboard-charts-row .donut { width: 84px; height: 84px; min-width: 84px; }
  .dashboard-charts-row .donut::after { inset: 15px; }
  .dashboard-charts-row .donut-legend { font-size: 10.5px; }
  .dashboard-charts-row .donut-legend li { gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
  .dashboard-charts-row .donut-legend .swatch { width: 8px; height: 8px; }
}
@media (max-width: 380px) {
  .dashboard-cards { gap: 8px; }
  .dashboard-cards .card { padding: 10px; }
  .dashboard-cards .value { font-size: 15px; }
  .dashboard-charts-row .donut { width: 72px; height: 72px; min-width: 72px; }
  .dashboard-charts-row .donut::after { inset: 13px; }
}

.panel {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.panel h2 { margin-top: 0; font-size: 16px; color: var(--gold-light); }

/* Badge del menú (cantidad de matches pendientes) y cartel de alerta para
   los matches — pedido de Daniel 15/09/2026 (continuación 27): "tiene que
   haber otra forma más contundente de avisar el match, se me pasó por
   alto". Reutiliza el rojo que ya existe (--red) para que se distinga
   claramente del dorado normal de la marca/estado activo. */
.nav-badge {
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 20px; min-width: 18px; height: 18px; display: flex; align-items: center;
  justify-content: center; padding: 0 5px; margin-left: auto;
}
.alerta-match {
  border: 1px solid var(--red);
  background: rgba(229,97,90,.10);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.alerta-match-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 700; color: var(--red); font-size: 15px; margin-bottom: 8px;
}
.alerta-match-header .btn { margin-left: auto; }
.alerta-match p { margin: 6px 0 2px; font-size: 13px; }
.alerta-match ul { margin: 0 0 4px; padding-left: 20px; font-size: 14px; }

/* Checklist de la Toma técnica (44 puntos): cada punto colapsado a una
   sola línea ("Motor - desplegable"), sin las columnas/títulos de tabla
   de antes. Comentario y Costo quedan ocultos por default y solo se
   despliegan si la calificación es Regular o Malo (ver actualizarPuntoCheck
   en templates/tomas/form.html) — pedido de Daniel 15/09/2026 (continuación
   28): "reducir las tarjetas de los puntos, sacar títulos". */
.puntos-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 20px;
}
.punto-check {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.punto-check-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.punto-check-label { font-size: 14px; }
.punto-check-fila select {
  max-width: 150px;
  padding: 6px 8px;
}
.punto-check-detalle {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.punto-check-detalle input { font-size: 13px; padding: 8px 10px; }
@media (max-width: 700px) {
  .puntos-check-grid { grid-template-columns: 1fr; gap: 2px; }
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; }
tr:hover td { background: var(--navy-card-2); }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge.disponible { background: rgba(62,207,142,.15); color: var(--green); }
.badge.por_ingresar { background: rgba(217,164,65,.18); color: var(--gold-light); }
.badge.en_reparacion { background: rgba(229,97,90,.15); color: var(--red); }
.badge.vendido { background: rgba(154,167,187,.18); color: var(--text-dim); }
.badge.buscando { background: rgba(217,164,65,.18); color: var(--gold-light); }
.badge.resuelto { background: rgba(62,207,142,.15); color: var(--green); }
.badge.cancelado { background: rgba(154,167,187,.18); color: var(--text-dim); }
.badge.senado { background: rgba(155,140,240,.18); color: var(--violet); }

.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  padding: 7px 14px; border-radius: 20px; font-size: 13px; background: var(--navy-card);
  border: 1px solid var(--border); color: var(--text-dim);
}
.tab.active { background: var(--gold); color: #17202e; border-color: var(--gold); font-weight: 600; }

.btn {
  display: inline-block; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer;
}
.btn-primary { background: var(--gold); color: #17202e; }
.btn-secondary { background: var(--navy-card-2); color: var(--text); border: 1px solid var(--border); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

form label { display: block; font-size: 13px; color: var(--text-dim); margin: 12px 0 4px; }
form input, form select, form textarea {
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--navy-bg); color: var(--text); font-size: 14px;
}
form textarea { min-height: 80px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }

/* Buscador compartido (Stock: Disponible/Por ingresar/En reparación, y Red
   de Agencieros) por Marca/Modelo/Versión/Año/Km/Rango de precio — pedido
   de Daniel 15/09/2026 (continuación 17), ver templates/partials/buscador.html. */
.buscador-grid { display: flex; flex-wrap: wrap; gap: 0 14px; }
.buscador-grid .campo { flex: 1 1 150px; min-width: 120px; }
.buscador-grid .campo-chica { flex: 0 1 130px; min-width: 100px; }
.buscador-grid label { margin-top: 0; }
.buscador-acciones { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 700px) {
  .buscador-grid .campo, .buscador-grid .campo-chica { flex: 1 1 45%; }
}

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash.success { background: rgba(62,207,142,.15); color: var(--green); border: 1px solid var(--green); }
.flash.error { background: rgba(229,97,90,.15); color: var(--red); border: 1px solid var(--red); }

.stat-row { display: flex; gap: 24px; flex-wrap: wrap; }
.stat-row .stat { min-width: 140px; }
.stat .n { font-size: 24px; font-weight: 700; }
.stat .l { font-size: 12px; color: var(--text-dim); }

.hero-search {
  background: linear-gradient(135deg, var(--navy-card), var(--navy-card-2));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  margin-bottom: 24px;
}
.hero-search h1 { color: var(--gold-light); font-size: 26px; margin-bottom: 6px; }
.hero-search p { color: var(--text-dim); margin-top: 0; }
.select-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.select-row select, .select-row input[type="text"] {
  min-width: 160px; padding: 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--navy-bg); color: var(--text); font-size: 14px;
}
.select-row input[type="text"]::placeholder { color: var(--text-dim); }
.select-row .autocomplete-wrap { min-width: 160px; }
.select-row .autocomplete-wrap input[type="text"] { width: 100%; min-width: 0; }

/* --- Desplegable propio de autocompletar (Año/Marca/Modelo en Consulta de
   precios y en Toma/Stock/Pedidos/Red) — reemplaza <input list>+<datalist>
   nativo, que en iOS Safari se confunde con las sugerencias del teclado. */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 2px;
  background: var(--navy-card); border: 1px solid var(--border); border-radius: 8px;
  max-height: 240px; overflow-y: auto; box-shadow: 0 10px 24px rgba(0,0,0,.4);
}
.autocomplete-item { padding: 10px 12px; font-size: 14px; color: var(--text); cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--navy-card-2); }

.price-result { text-align: center; padding: 20px; }
.price-result .amount { font-size: 42px; font-weight: 800; color: var(--gold-light); }
.price-result .meta { color: var(--text-dim); }
.actions-row { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } .layout { flex-direction: column; } .sidebar { width: 100%; } }

.stub-box {
  border: 1px dashed var(--border); border-radius: 12px; padding: 40px; text-align: center; color: var(--text-dim);
}

/* --- Paso 2: Fotos + Inspección visual de chapa --- */
.vista-card h2 { margin-bottom: 12px; }
.vista-imgwrap {
  position: relative; cursor: crosshair; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--navy-bg); line-height: 0;
}
.vista-imgwrap img { width: 100%; display: block; }
.marcador-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
}
.marcador-dot.g-leve { background: var(--green); }
.marcador-dot.g-moderado { background: #f2c94c; }
.marcador-dot.g-grave { background: var(--red); }
.dot-chip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot-chip.g-leve { background: var(--green); }
.dot-chip.g-moderado { background: #f2c94c; }
.dot-chip.g-grave { background: var(--red); }
.marcador-form {
  background: var(--navy-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin-top: 12px;
}
.marcador-list { list-style: none; padding: 0; margin: 12px 0 0; font-size: 12.5px; color: var(--text-dim); }
.marcador-list li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.marcador-list li:last-child { border-bottom: none; }
.btn-link {
  background: none; border: none; color: var(--red); cursor: pointer; font-size: 11.5px;
  padding: 0; margin-left: 8px; text-decoration: underline;
}
.vista-card form.reemplazar-foto, .vista-card form.subir-foto-form {
  margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.vista-card input[type="file"] { width: auto; padding: 6px; font-size: 12px; }

/* --- Tabla responsive (Paso 1 · Toma técnica: Punto/Calificación/Costo/
   Comentario) --- en pantallas chicas esta tabla de 4 columnas se cortaba:
   Costo y Comentario quedaban fuera de la pantalla sin forma cómoda de
   verlos. En vez de habilitar solo un scroll horizontal (que en la práctica
   seguía siendo difícil de notar/usar en el celu), cada fila pasa a ser una
   tarjeta apilada, con el nombre de la columna arriba de cada valor. */
@media (max-width: 700px) {
  .tabla-responsive thead,
  .tabla-responsive .fila-header { display: none; }
  .tabla-responsive, .tabla-responsive tbody, .tabla-responsive tr, .tabla-responsive td {
    display: block; width: 100%;
  }
  .tabla-responsive tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 12px; background: var(--navy-bg);
  }
  .tabla-responsive td { border-bottom: none; padding: 6px 0; }
  .tabla-responsive td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-dim); margin-bottom: 3px;
  }
}

/* --- Tarjetas de vehículo simplificadas --- en vez de la tarjeta genérica
   de arriba (una línea por columna, con su etiqueta VEHÍCULO/AÑO/ESTADO/...
   arriba de cada valor), estas tablas muestran en el celu todo junto en un
   renglón ("Lifan X50 1.5 VVT - 2018 - $16.000.000 - Disponible") y la
   tarjeta entera es clickeable (ver tr[data-href] en base.html) — pedido de
   Daniel 15/09/2026 (continuación 19). En compu no cambia nada: la tabla
   normal ya muestra todo en una sola línea por fila. .fila-compacta es el
   td con el resumen (oculto en compu); .fila-vehiculo-propio son las filas
   con ficha propia (clickeables); .fila-accion es una acción que tiene que
   seguir viéndose en el celu aunque el resto de la fila se resuma (ej.
   "Cerrar" en Red de Agencieros). */
.fila-compacta { display: none; }
.tabla-vehiculos tr[data-href] { cursor: pointer; }
.tabla-vehiculos tr[data-href]:hover td { background: var(--navy-card-2); }
@media (max-width: 700px) {
  .tabla-vehiculos .fila-vehiculo-propio td:not(.fila-compacta) { display: none; }
  .tabla-red-compacta td:not(.fila-compacta):not(.fila-accion) { display: none; }
  .tabla-vehiculos .fila-compacta,
  .tabla-red-compacta .fila-compacta {
    display: block; font-size: 14px; line-height: 1.5; padding: 2px 0 6px;
  }
  .tabla-vehiculos .fila-compacta .badge,
  .tabla-red-compacta .fila-compacta .badge { margin-right: 6px; }
  .tabla-red-compacta .fila-accion { display: block; padding-top: 2px; }

  /* Se saca el marco de tarjeta (borde + fondo propio) de las filas de
     vehículo para ganar lugar y que la foto y el texto se vean más
     grandes — queda solo una línea divisoria fina entre uno y el
     siguiente, como una lista — pedido de Daniel 15/09/2026 (continuación
     22). Las demás tablas (Tomas, Financiación, Pedidos, etc.) no cambian,
     siguen con la tarjeta con borde de siempre. */
  .tabla-vehiculos .fila-vehiculo-propio {
    border: none; border-radius: 0; background: none;
    padding: 12px 0; margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }
  .tabla-vehiculos .fila-vehiculo-propio:last-child { border-bottom: none; }
}

/* Banco de pedidos: mismo criterio de tarjeta simplificada en el celu que
   Stock/Red — una sola línea con Cliente - Teléfono · Vehículo buscado, y
   la fila entera clickeable a la ficha completa del pedido (ahí quedaron
   el resto de los datos y los botones Resuelto/Cancelar) — pedido de
   Daniel 15/09/2026 (continuación 25). En compu no cambia nada, sigue la
   tabla completa de siempre con sus columnas y botones.*/
.tabla-pedidos-compacta tr[data-href] { cursor: pointer; }
.tabla-pedidos-compacta tr[data-href]:hover td { background: var(--navy-card-2); }
.tabla-financiacion tr[data-href] { cursor: pointer; }
.tabla-financiacion tr[data-href]:hover td { background: var(--navy-card-2); }
@media (max-width: 700px) {
  .tabla-pedidos-compacta td:not(.fila-compacta) { display: none; }
  .tabla-pedidos-compacta .fila-compacta {
    display: block; font-size: 14px; line-height: 1.5; padding: 2px 0 6px;
  }
  .tabla-pedidos-compacta .fila-compacta .badge { margin-right: 6px; }
}

/* Panel de Agencias (18/09/2026): mismo criterio de tarjeta simplificada
   que Stock -- en el celu, una sola tarjeta por agencia con 4 líneas
   (Nombre / Ubicación / Stock-Ventas-Créditos / Actividad-Alta-Estado,
   sin los títulos en mayúscula de la tabla genérica) y sin el marco propio
   de .tabla-responsive (border+fondo+margen) para ganar ancho en la
   pantalla chica -- pedido de Daniel 18/09/2026 ("hay 3 espacios
   contenedores que se pueden eliminar"). La fila entera es clickeable a
   la ficha de detalle (tr[data-href], ver base.html) tanto en compu como
   en el celu -- ahí quedaron Teléfono y Contacto de referencia. */
.tabla-agencias-compacta tr[data-href] { cursor: pointer; }
.tabla-agencias-compacta tr[data-href]:hover td { background: var(--navy-card-2); }
@media (max-width: 700px) {
  .tabla-agencias-compacta td:not(.fila-compacta) { display: none; }
  .tabla-agencias-compacta tr {
    border: none; border-radius: 0; background: none; padding: 0; margin-bottom: 0;
  }
  .tabla-agencias-compacta .fila-compacta {
    display: block; padding: 10px 0; border-bottom: 1px solid var(--border);
  }
  .tabla-agencias-compacta tr:last-child .fila-compacta { border-bottom: none; }
  .fila-agencia-nombre { font-size: 15px; font-weight: 600; }
  .fila-agencia-linea { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
  .fila-agencia-linea .badge { margin-left: 4px; }
  /* El panel que envuelve esta tabla pierde su padding lateral en el celu
     (uno de los "3 contenedores" que achicaban el ancho útil junto con
     .main y la tarjeta de .tabla-responsive) -- solo en esta pantalla. */
  .panel-agencias { padding: 16px 8px; }
}

/* --- Foto principal en los listados --- miniatura del vehículo al lado de
   sus datos (columna aparte en compu, dentro del renglón resumido en el
   celu). Mientras no hay foto real cargada se usa una de las 2 fotos de
   muestra, alternando (ver foto_principal en database.py) — pedido de
   Daniel 15/09/2026 (continuación 21), para poder habilitar la imagen ya
   mismo y no esperar a cargar fotos de a una. */
.foto-mini {
  width: 56px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); background: var(--navy-bg); display: block;
}
.tabla-vehiculos .foto-cell { width: 66px; }
.fila-compacta-inner { display: flex; align-items: center; gap: 10px; }
.fila-compacta-inner .foto-mini { width: 64px; height: 46px; flex-shrink: 0; }
.fila-compacta-texto { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .tabla-vehiculos .foto-cell { display: none; }
  /* Con la tarjeta sin borde hay más lugar: la foto y el texto crecen
     (pedido de Daniel 15/09/2026, continuación 22). */
  .fila-compacta-inner { gap: 12px; }
  .fila-compacta-inner .foto-mini { width: 92px; height: 66px; border-radius: 8px; }
  .tabla-vehiculos .fila-compacta { font-size: 16px; }
}

/* --- Menú desplegable en celu --- en compu el sidebar queda fijo y visible
   como siempre (hay lugar de sobra); en celu ocupaba media pantalla, así
   que pasa a ser un menú que se despliega con el botón ☰ de arriba y se
   cierra solo al elegir una opción (ver templates/base.html). */
@media (max-width: 700px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--navy-card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 101;
  }
  .mobile-topbar .mobile-brand { font-size: 17px; font-weight: 700; color: var(--gold-light); }

  .layout { flex-direction: column; }

  .sidebar {
    position: fixed;
    top: 49px; /* alto aproximado de .mobile-topbar */
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    transition: max-height .2s ease, padding .2s ease;
    z-index: 100;
  }
  .sidebar.open {
    max-height: calc(100vh - 49px);
    overflow-y: auto;
    padding: 12px;
  }
  .sidebar .brand { display: none; } /* el nombre ya está en .mobile-topbar */

  .main { padding: 18px 16px; }
}

/* --- Galería de fotos del vehículo (Stock) --- */
.foto-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.foto-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); line-height: 0; }
.foto-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.foto-item form { position: absolute; top: 4px; right: 4px; margin: 0; }
.foto-item .btn-eliminar-foto {
  background: rgba(11,20,32,.75); color: var(--red); border: none; border-radius: 6px;
  width: 22px; height: 22px; font-size: 13px; cursor: pointer; line-height: 1;
}
.foto-upload-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.foto-upload-form input[type="file"] { width: auto; padding: 6px; font-size: 12px; }