/* ============================================================
   Paleta L'TOKE — los mismos colores exactos del buscador de
   precios que Hernan ya usa (~/Downloads/LTOKE Buscador NUEVO.html):
   navy #1E2D40 + rojo #C0141B. Vale para toda la app, la del
   taller y el panel de Hernan, para que sea una sola marca.
   ============================================================ */
:root {
  --bg-dark: #1E2D40;      /* navy de la marca */
  --bg-darker: #141E2B;
  --surface: #EEF2F5;
  --card: #FFFFFF;
  --border: #D7E0E6;
  --ink: #1C2733;
  --ink-soft: #64707B;
  --on-dark: #FFFFFF;
  --on-dark-soft: #C9D5E3;
  /* El acento de la marca es el rojo. Se sigue llamando --blue
     porque asi se llama en todas las plantillas; cambiarle el
     nombre no valia el riesgo de romper algo. */
  --blue: #C0141B;
  --blue-hover: #9E1015;
  --blue-light: #FDEAEA;
  --green: #1E8E5A;
  --green-light: #E7F5EE;
  --amber: #B4790A;
  --amber-light: #FBF1DE;
  --red: #C0141B;
  --red-light: #FDEAEA;
  --indigo: #1E2D40;
  --indigo-light: #E8EDF3;
  --whatsapp: #25D366;
  --whatsapp-hover: #1FB659;
}

.phone h1, .phone h2, .phone h3, .phone h4 { font-family: 'Space Grotesk', system-ui, sans-serif; }
.phone .price-lg { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.2px; }

/* ---- Logo de la marca ---- */
.brand-img { display:block; height:auto; }
.phone-brand .brand-img { width:112px; }           /* header navy de la app */
.brand-img-grande { width:190px; margin:0 auto 4px; }  /* pantallas de entrada */
.sidebar-brand .brand-img { width:118px; }         /* panel de Hernan */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Public Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', system-ui, sans-serif; margin: 0; text-wrap: balance; }
a { color: var(--blue); text-decoration: none; touch-action: manipulation; }
a:hover { color: var(--blue-hover); }
button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
button, a, .btn, .btn-outline, .btn-sm { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: inherit; }

/* Quien pide menos movimiento en su sistema, no ve las animaciones de
   entrada/salida (fade, slide, pop) de tienda.css/tuttilitario.css ni
   ninguna otra transición del sitio -- vale para toda la app, no solo
   para una plantilla. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; border-radius: 11px; border: none;
  background: var(--blue); color: white; font-weight: 700; font-size: 15px;
}
.btn:hover { background: var(--blue-hover); }
.btn-outline {
  background: transparent; border: 1.5px solid var(--border); color: var(--ink); font-weight: 600; font-size: 13.5px; padding: 13px;
}
.btn-sm { width: auto; padding: 9px 16px; font-size: 13px; }
.btn-disabled { background: oklch(0.9 0.006 90); color: oklch(0.6 0.008 90); }

/* ---- Menu de "..." por fila (Dashboard, 2026-09-07) ----
   <details> nativo: sin JS para abrir/cerrar, solo para cerrarlo al
   tocar afuera (ver el script de panel_dashboard.html). */
.menu-fila { position: relative; display: inline-block; }
.menu-fila > summary {
  /* "display:inline-block" (no el list-item de por defecto) para que
     no le quede ningun triangulito nativo -- ni el viejo de
     ::-webkit-details-marker ni el ::marker mas nuevo, que
     "list-style:none" solo no alcanzaba para sacar en todos los
     navegadores (se veia en el celular, aunque no en la compu). */
  display: inline-block; list-style: none; cursor: pointer; padding: 4px 9px; border-radius: 7px;
  color: var(--ink-soft); font-size: 17px; font-weight: 700; line-height: 1;
}
.menu-fila > summary::-webkit-details-marker { display: none; }
.menu-fila > summary::marker { content: ""; }
.menu-fila > summary:hover, .menu-fila[open] > summary { background: var(--surface); color: var(--ink); }
.menu-fila-contenido {
  /* position:fixed (no absolute) y a proposito -- el menu vive dentro
     de .panel-card, que tiene overflow:hidden para redondear las
     esquinas de la tabla. Con "absolute" quedaba cortado en cualquier
     fila que no estuviera pegada arriba del todo. La posicion real
     (top/left) la calcula el script de panel_dashboard.html en base a
     donde esta el boton "..." de esa fila. */
  /* z-index alto a proposito (2026-09-08): panel_clientes.html tiene un
     mapa de Leaflet arriba de la tabla, y los "panes" internos de
     Leaflet llegan a z-index:700 (los controles de zoom, a 1000) -- sin
     esto el menu podia quedar tapado por el mapa si se abria cerca. */
  position: fixed; z-index: 1200;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20,30,50,.14); min-width: 200px; padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.menu-fila-contenido form { margin: 0; }
.menu-fila-contenido a, .menu-fila-contenido button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px;
  border: none; background: none; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.menu-fila-contenido a:hover, .menu-fila-contenido button:hover { background: var(--surface); }
.menu-fila-contenido button.rojo { color: var(--red); }

.field {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 14.5px; background: var(--card); color: var(--ink); outline: none;
}
.field:focus { border-color: var(--blue); }
.label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; display: block; }

.badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.badge-ok { background: var(--green-light); color: var(--green); }
.badge-wait { background: var(--amber-light); color: var(--amber); }
.badge-danger { background: var(--red-light); color: var(--red); }
.badge-info { background: var(--indigo-light); color: var(--indigo); }
.badge-blue { background: var(--blue-light); color: var(--blue); }

.chip {
  padding: 8px 13px; border-radius: 18px; font-size: 12.5px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--card); color: var(--ink-soft);
  white-space: nowrap; display: inline-block;
}
.chip-active { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }

/* --- mobile client shell --- */
.phone {
  font-family: 'Public Sans', system-ui, sans-serif;
  /* height (no min-height) para que el hijo .phone-body pueda scrollear
     adentro y la barra de abajo quede fija al pie de la pantalla.

     100dvh, no solo 100vh (2026-09-08, bug real reportado por Hernan:
     "en la version de celular la parte de abajo a veces se pierde o no
     aparece"): en el celular de verdad, la barra del navegador
     (direccion/pestañas) aparece y desaparece al scrollear, y 100vh se
     calcula SIEMPRE contra la pantalla completa (barra escondida) -- con
     la barra visible, 100vh mide mas alto que lo que en realidad se ve,
     y la barra de abajo (.phone-nav/.phone-footer) queda empujada fuera
     de la pantalla. 100dvh sigue el alto visible real en cada momento.
     Se deja 100vh primero como respaldo para navegadores viejos que no
     entienden dvh -- el que sí lo entiende usa la segunda declaracion. */
  width: 100%; max-width: 430px; margin: 0 auto; background: var(--surface);
  /* 2026-09-13: fijo contra los 4 bordes de la pantalla en vez de
     height:100dvh. En el iPhone, con la app abierta desde la pantalla
     de inicio, 100dvh mide la pantalla MENOS la barra de arriba (hora,
     bateria), asi que quedaba una franja gris debajo de la barra de
     abajo y los botones no llegaban al pie. top/bottom:0 toma el alto
     real, y tambien sigue a la barra del navegador cuando aparece. */
  position: fixed; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
}
.phone-header {
  background: var(--bg-dark); padding: 20px; display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.phone-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 35%, #E4444C 50%, var(--blue) 65%, transparent);
  opacity: .85;
}
/* Logo centrado (2026-09-08, pedido de Hernan) -- .phone-brand ocupa todo
   el ancho del header (hereda align-items:stretch de .phone-header, que
   es flex-column), asi que centrar su contenido con justify-content
   alcanza sin tocar cada plantilla: esta regla vale para las 9 pantallas
   que usan .phone-brand (Inicio, Catalogo, Pedidos, login, registro...). */
.phone-brand { display: flex; align-items: center; justify-content: center; gap: 9px; }
.phone-brand span { font-weight: 700; font-size: 16px; color: var(--on-dark); }
.phone-brand-logo { height: 34px; width: 34px; flex: none; background: #fff; border-radius: 9px; box-shadow: 0 1px 3px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.phone-back {
  padding: 16px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); background: var(--card);
}
/* flex:1 + min-height:0 = ocupa todo el alto que sobra y scrollea adentro,
   dejando la barra de abajo pegada al pie. (Antes tenia max-height:70vh,
   que cortaba la pantalla a media altura y dejaba un hueco gris debajo
   de la barra.) */
.phone-body { flex: 1; min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
/* aire al final para que el boton flotante del carrito no tape la ultima tarjeta */
.phone-body:has(~ .phone-nav) { padding-bottom: 78px; }
/* padding-bottom con env(safe-area-inset-bottom): en un celular con
   barra de gestos abajo (sin botón físico), esa franja se suma al
   padding fijo en vez de tapar el texto -- max() se queda con el que
   sea más grande, así en un celular sin esa franja no cambia nada. */
.phone-footer { padding: 16px 20px max(26px, calc(16px + env(safe-area-inset-bottom))); border-top: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.phone-nav { display: flex; justify-content: space-around; padding: 12px 10px max(16px, calc(6px + env(safe-area-inset-bottom))); border-top: 1px solid var(--border); background: var(--card); }
.navitem { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.navitem.active { color: var(--blue); }

.phone-searchwrap { background: var(--bg-darker); padding: 0 20px 14px; }
.phone-searchbox {
  display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px;
  padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow .15s;
}
.phone-searchbox:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 3px var(--blue-light); }
.phone-searchbox input { border: none; outline: none; flex: 1; font-size: 15px; color: var(--ink); background: transparent; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(20,30,50,.06); }
.card-row { display: flex; gap: 12px; }
.thumb {
  position: relative; overflow: hidden;
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 9px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.thumb-lg { position: relative; overflow: hidden; }
.thumb-lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card); }

/* Carrusel de fotos en la ficha del producto (2026-09-08, pedido de
   Hernan: productos con mas de una foto -- despues pidio que la foto
   se vea "bien grande" y que los botones para pasarlas sean "mas
   notorios", ver mas abajo .pf-galeria-grande / .pf-flecha). Los
   puntitos y las flechas solo aparecen si, despues de intentar cargar
   las candidatas, quedo mas de una en pie -- ver el script en
   producto.html. Van sobre un fondo oscuro semitransparente propio
   (no solo blanco/semitransparente) porque la mayoria de las fotos
   del catalogo tienen fondo blanco -- sin ese fondo, los puntitos
   blancos casi no se veian. */
.pf-puntos {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
  background: rgba(20,20,20,.45); padding: 5px 9px; border-radius: 20px;
}
.pf-puntos span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); }
.pf-puntos span.pf-punto-activo { background: #fff; }

/* Flechas para pasar de foto -- antes solo se podia tocar la imagen
   entera (poco obvio). Ocultas por defecto (`hidden`, ver producto.html);
   el `[hidden]` explicito de abajo es necesario porque `.pf-flecha` ya
   trae su propio `display: flex` con la misma especificidad que la
   regla `[hidden]` del navegador -- mismo cuidado que ya se documento
   para la barra en lote de Stock. */
.pf-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(20,20,20,.5); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; padding: 0;
}
.pf-flecha:hover { background: rgba(20,20,20,.72); }
.pf-flecha-izq { left: 10px; }
.pf-flecha-der { right: 10px; }
.pf-flecha[hidden] { display: none; }

/* Foto grande de la ficha de producto en el celular (2026-09-08,
   reemplaza el thumb chico de 130px al lado del precio -- pedido de
   Hernan de que "se vea bien grande la imagen"). Mismo criterio visual
   que ".t-ficha-foto" de tienda.css (fondo blanco, object-fit:contain
   para no recortar el repuesto), pero como clase propia porque esta
   pantalla no carga tienda.css en todos los casos y el tamaño/proporcion
   es distinto (cuadrado a lo ancho del celular, no una columna de grilla). */
/* "padding-top:100%" en vez de "aspect-ratio:1/1" (2026-09-09, bug real
   reportado por Hernan con captura: en su celular la foto se veia
   chiquita, flotando en un rectangulo apaisado en vez de llenar un
   cuadrado -- aspect-ratio no se estaba resolviendo en su navegador).
   Este truco (viejo, de antes de que aspect-ratio existiera como
   propiedad CSS) funciona en cualquier navegador: un padding-top en
   porcentaje siempre se calcula sobre el ANCHO del contenedor, nunca
   sobre su alto, así que "padding-top:100%" da un cuadrado perfecto
   sin depender de esa propiedad mas nueva. Como la caja queda sin
   alto propio (todo su alto es el padding), ya no puede centrar al
   ícono placeholder con flex -- por eso el <svg> pasa a centrarse solo,
   con position:absolute (ver regla de abajo). Las fotos, flechas y
   puntitos ya eran position:absolute de antes, no les cambia nada. */
.pf-galeria-grande {
  position: relative; width: 100%; padding-top: 100%;
  border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  overflow: hidden;
}
.pf-galeria-grande > svg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.pf-galeria-grande .pf-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; padding: 16px;
}

/* Solo dentro de .phone (la app del taller) -- el panel usa las mismas
   clases .card/.thumb para otras cosas y no se pidio tocarlo. */
.phone a.card { transition: box-shadow .15s, transform .15s, border-color .15s; }
.phone a.card:hover, .phone a.card:active {
  box-shadow: 0 6px 18px rgba(20,30,50,.12); transform: translateY(-1px); border-color: var(--border);
}
.phone .thumb img, .phone .thumb-lg img { transition: transform .25s ease; }
.phone a.card:hover .thumb img { transform: scale(1.08); }

.code-chip {
  display: inline-block; background: var(--bg-dark); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 6px; letter-spacing: .3px; width: fit-content;
}
.price-lg { font-weight: 800; color: var(--bg-dark); font-size: 15px; white-space: nowrap; }
.desc { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.brandline { font-size: 12px; color: var(--ink-soft); }

.fab-cart {
  /* absolute (no fixed) para que quede pegado a la tarjeta de la app y no
     a la ventana: con fixed, en una pantalla ancha el boton se iba al
     borde derecho del monitor, lejos de la app. .phone es position:
     relative, asi que este absolute se ancla ahi adentro.
     bottom alto: la barra de abajo mide ~68px y si no le tapa "Pedidos". */
  position: absolute; right: 14px; bottom: 82px; z-index: 25;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #E4444C, var(--blue)); color: #fff;
  border: none; box-shadow: 0 4px 16px rgba(192,20,27,.45);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.fab-cart:hover { box-shadow: 0 6px 20px rgba(192,20,27,.55); transform: translateY(-1px); }
.fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  background: #fff; color: var(--blue); border-radius: 999px; font-size: 11.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* --- desktop panel shell --- */
.panel { display: flex; min-height: 100vh; }
.sidebar { width: 232px; flex-shrink: 0; background: var(--bg-darker); display: flex; flex-direction: column; padding: 22px 14px; }
.sidebar-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px; margin-bottom: 30px; flex-shrink: 0; }
.sidebar-brand span { font-family: 'Space Grotesk'; font-weight: 700; font-size: 15px; color: var(--on-dark); }
.sidebar-links { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidebar-salir { flex-shrink: 0; margin-top: 14px; }
.navlink { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--on-dark-soft); }
.navlink.active { background: var(--blue); color: white; }
.panel-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.panel-topbar { padding: 20px 30px; border-bottom: 1px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: space-between; }
.panel-content { flex: 1; overflow: auto; padding: 26px 30px; display: flex; flex-direction: column; gap: 22px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.kpi-label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.kpi-value { font-family: 'Space Grotesk'; font-size: 26px; font-weight: 700; margin-top: 6px; }

table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; padding: 0 14px 10px; }
td { padding: 12px 14px; font-size: 13px; border-top: 1px solid var(--border); }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--surface); }

.panel-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.panel-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

.stepper { display: flex; align-items: center; }
.step { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.step-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.step-line { flex: 1; height: 2px; margin: 0 8px 22px; background: var(--border); }
.step-line.done { background: var(--green); }

.callout { border-radius: 12px; padding: 13px 16px; font-size: 12.5px; line-height: 1.5; }
.callout-amber { background: var(--amber-light); color: oklch(0.4 0.09 65); border: 1px solid oklch(0.82 0.07 65); }
.callout-green { background: var(--green-light); color: oklch(0.4 0.1 152); border: 1px solid oklch(0.85 0.06 152); }

.qty-btn { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 900px) {
  .panel { flex-direction: column; }
  /* En el celular la lista de secciones (Dashboard, Clientes, Stock...)
     se convierte en una tira horizontal -- pero "Salir" queda AFUERA de
     esa tira (ver sidebar-links/sidebar-salir en base_panel.html), no
     mezclado con los ~15 links. Antes estaba todo junto y "Salir" caía
     al final del scroll, prácticamente invisible en un celular. */
  .sidebar { width: 100%; flex-direction: row; align-items: center; padding: 10px 12px; overflow-x: visible; gap: 8px; }
  .sidebar-brand { margin-bottom: 0; }
  .sidebar-links { flex-direction: row; overflow-x: auto; min-width: 0; }
  .sidebar-salir { margin-top: 0; }
  .sidebar-salir .navlink { padding: 10px; }
  .sidebar-salir .navlink svg { flex-shrink: 0; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  /* En una pantalla muy angosta ni el texto "Salir" hace falta -- el
     ícono de puerta ya se entiende, y deja más lugar para la tira de
     secciones que sí necesita ese espacio para scrollear cómodo. El
     ícono no se achica: su tamaño sale de width/height del <svg>, no
     de font-size. */
  .sidebar-salir .navlink { font-size: 0; }
}

/* Titulos de seccion y estados vacios de la pantalla de Inicio (combos) */
.phone .seccion-titulo{
  font-size:11.5px;font-weight:800;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.06em;
  margin:2px 2px 2px;
}
.phone .vacio-chico{
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;
  background:var(--card);border:1px dashed var(--border);
  border-radius:12px;padding:14px 16px;
}

/* ---- Fila de tarjetas chicas con scroll horizontal -- "Los mas
   pedidos" en Inicio (2026-09-08, pedido de Hernan). Mismo .card de
   siempre, achicado, para no inventar un estilo nuevo. ---- */
.phone .fila-scroll{
  /* flex-shrink:0 a proposito: .phone-body es un flex column con varios
     hijos, y un hijo con overflow-x:auto tiene min-height:0 en vez de
     "auto" (asi lo pide la spec de flexbox para cualquier caja con
     overflow != visible) -- sin flex-shrink:0 ese hijo es el unico que
     "cede" espacio cuando el resto del contenido no entra, y terminaba
     aplastado a unos pocos px en vez de mostrar las tarjetas. */
  display:flex;flex-shrink:0;align-items:flex-start;gap:10px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;
  scrollbar-width:none;
}
.phone .fila-scroll::-webkit-scrollbar{ display:none; }
.phone .card-mini{
  flex-shrink:0;width:120px;padding:10px;display:flex;flex-direction:column;gap:7px;
}
.phone .card-mini .thumb{ width:100%;height:84px;border-radius:9px; }
.phone .card-mini .desc{ font-size:12px;line-height:1.3; }
.phone .card-mini .price-lg{ font-size:13px; }

/* ---- Buscador por auto (marca/modelo/año) del catalogo ---- */
.phone .auto-box{
  padding:0 16px 10px;display:flex;flex-direction:column;gap:8px;
  background:var(--bg-dark);
  max-height:420px;overflow:hidden;
  transition:max-height .2s ease,opacity .2s ease,padding .2s ease;
}

/* ---- Header que se achica al bajar en el catalogo (2026-09-08, pedido
   de Hernan: "que la barra de arriba se haga mas chica cuando hago
   scroll" -- asi se ven mas repuestos sin tener que scrollear tanto).
   El scroll pasa adentro de .phone-body, no en la ventana -- por eso la
   clase "header-compacto" la prende/apaga JS ahi mismo (ver
   catalogo.html), esto solo la anima. ---- */
.phone-header{ transition:padding .2s ease; }
.phone-header .brand-img{ transition:width .2s ease; }
.phone.header-compacto .phone-header{ padding-top:10px; padding-bottom:10px; }
.phone.header-compacto .phone-header .brand-img{ width:64px; }
.phone.header-compacto .auto-box{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
/* Botón chico que reemplaza a la barra "¿Para qué auto?" hasta que hace
   falta usarla (2026-09-08, pedido de Hernan: competía con el buscador
   principal de arriba). Mismo criterio visual que .auto-activo (fondo
   navy translúcido), pero clickeable entero -- ver catalogo.html. */
.phone .auto-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:rgba(255,255,255,.1);border:none;border-radius:12px;
  padding:11px 14px;color:#fff;font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;text-align:left;
  transition:background .15s ease;
}
.phone .auto-toggle:active{ background:rgba(255,255,255,.18); }
.phone .auto-toggle-flecha{ flex-shrink:0;transition:transform .2s ease; }
.phone .auto-toggle[aria-expanded="true"] .auto-toggle-flecha{ transform:rotate(90deg); }
/* Colapsado por default (max-height:0) -- se abre con la misma tecnica
   de "header-compacto" de mas abajo (max-height + opacity animados). */
.phone .auto-form-colapsable{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .25s ease,opacity .2s ease,margin-top .25s ease;
}
.phone .auto-form-colapsable.abierto{ max-height:120px;opacity:1;margin-top:8px; }
.phone .auto-form{display:flex;gap:8px;}
.phone .auto-form input[type=text],
.phone .auto-form select{
  flex:1;min-width:0;height:44px;border-radius:12px;
  border:none;padding:0 14px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--ink);
}
.phone .auto-form select{appearance:none;font-weight:700;}
.phone .auto-btn{
  border:none;border-radius:12px;padding:0 18px;height:44px;
  background:var(--red);color:#fff;font-weight:800;font-size:14px;
  font-family:inherit;cursor:pointer;
}
.phone .auto-activo{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.12);color:#fff;
  border-radius:12px;padding:11px 14px;font-size:14px;
}
.phone .auto-quitar{
  color:#fff;opacity:.75;font-size:12px;font-weight:700;
  text-decoration:underline;flex-shrink:0;
}

/* ---- Panel de combos (armar kits para los clientes) ---- */
.combo-cols{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start;}
@media (max-width:900px){ .combo-cols{grid-template-columns:1fr;} }
.panel-input{
  padding:8px 11px;border-radius:9px;border:1px solid var(--border);
  background:var(--card);font-size:13px;font-family:inherit;color:var(--ink);
  outline:none;
}
.panel-input:focus{border-color:var(--blue);}

/* ---- Entrar al panel de Hernan ---- */
.login-panel{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;
}
.login-card{
  background:var(--card);border-radius:16px;padding:28px;
  width:100%;max-width:370px;
  box-shadow:0 10px 40px rgba(0,0,0,.28);
}
.login-card .label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;}
.login-card .field{
  width:100%;height:44px;border-radius:10px;border:1px solid var(--border);
  padding:0 13px;font-size:14px;font-family:inherit;background:var(--card);color:var(--ink);
}
.login-card .field:focus{outline:none;border-color:var(--blue);}
.login-card .btn{width:100%;justify-content:center;}

/* ---- emblema de marca (circulo de color + iniciales) ----
   No son los logos reales de las automotrices -- son marcas registradas.
   Se usa en los chips de marca de la app del taller y de la tienda
   publica. El color y las iniciales salen solos del nombre
   (vehiculos.color_de_marca / sigla_de_marca), no hay lista aparte. */
.marca-emblema{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  color:#fff;font-size:10px;font-weight:800;letter-spacing:-.02em;line-height:1;
}
.marca-emblema-chico{ width:20px;height:20px;font-size:8.5px; }

/* ---- Elegir marca / modelo con chips (dentro de la caja navy del auto) ---- */
.phone .auto-omarca{
  font-size:11px;font-weight:700;color:var(--on-dark-soft);
  text-transform:uppercase;letter-spacing:.05em;margin:4px 2px 0;
}
.phone .auto-chips{
  display:flex;flex-wrap:wrap;gap:6px;
}
/* los modelos de una marca pueden ser muchos (VW tiene 32): ahi si scrollea */
.phone .auto-chips-scroll{ max-height:168px; overflow-y:auto; }

/* Marcas en un carrusel horizontal, no en filas que van envolviendo
   (2026-09-08, pedido de Hernan: "hace que lo de las marcas sea un
   carrusel" -- antes las 12 marcas ocupaban 4 filas enteras). Mismo
   patron que .fila-scroll de Inicio (scroll horizontal, sin barra de
   scroll visible). Los chips de MODELO cuando ya se eligio una marca
   (.auto-chips-scroll, arriba) siguen con scroll VERTICAL a proposito
   -- son muchos mas (VW tiene 32) y no entrarian legibles en una sola fila. */
.phone .auto-chips-carrusel{
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  margin:0 -2px; padding:2px 2px 4px;
}
.phone .auto-chips-carrusel::-webkit-scrollbar{ display:none; }
.phone .auto-chips-carrusel .auto-chip{ flex-shrink:0; }
.phone .auto-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.13);color:#fff;
  border-radius:9px;padding:8px 11px;
  font-size:12.5px;font-weight:600;line-height:1;
}
.phone .auto-chip:hover{background:rgba(255,255,255,.24);color:#fff;}
.phone .auto-chip-n{
  font-size:10.5px;font-weight:700;opacity:.62;
}

/* aviso cuando el buscador corrigió lo escrito o buscó con menos palabras */
.phone .aviso-busqueda{
  font-size:12px;line-height:1.45;color:var(--ink);
  background:var(--amber-light);border-radius:10px;padding:9px 12px;
}

/* Fade al reemplazar los resultados de la busqueda en vivo (2026-09-08,
   pedido de Hernan de "mejorar las animaciones") -- se le agrega/saca la
   clase "cargando-resultados" justo antes/despues de pedir la busqueda
   nueva. Clase generica ".resultados-vivo" (no ids sueltos) para poder
   ponerla en las 4 cajas que hacen busqueda en vivo: catalogo (celular
   y escritorio), tienda y Tuttilitario -- las tres cargan style.css. */
.resultados-vivo{ transition:opacity .15s ease; }
.resultados-vivo.cargando-resultados{ opacity:.45; }

/* Insignia de carga con el logo de la marca (2026-09-08, pedido de
   Hernan: "en los tiempos de carga, en vez de que parezca que se
   trabo, que aparezca alguna animacion relacionada con la marca").
   Reusa el favicon (cuadradito navy con el logo, ya existe -- no hizo
   falta un asset nuevo) con un pulso suave. Reemplaza el "Cargando
   más…" de texto solo en el scroll infinito del catalogo/tienda/
   Tuttilitario (no en el panel, que es la herramienta interna de
   Hernan, no la experiencia de marca de un cliente). */
.ltoke-cargando{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px;color:var(--ink-soft);font-size:12.5px;
}
.ltoke-cargando-logo{
  width:22px;height:22px;border-radius:6px;flex-shrink:0;
  animation:ltokePulso 1.1s ease-in-out infinite;
}
@keyframes ltokePulso{
  0%,100%{ transform:scale(.82);opacity:.5; }
  50%{ transform:scale(1.05);opacity:1; }
}

/* ---- Pantalla de configuracion del panel ---- */
.cfg-label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;}
.cfg-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cfg-porc{font-size:13px;font-weight:700;color:var(--ink-soft);}
.cfg-ayuda{font-size:12px;color:var(--ink-soft);}

/* ---- Acciones sobre un pedido (panel_pedido.html) ---- */
.acciones-pedido {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
}
.acc-envio { display: flex; flex-direction: column; gap: 5px; }
.acc-envio label { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }

.btn-chico {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; border-radius: 9px; padding: 10px 15px;
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  background: var(--bg-dark); color: #fff; text-decoration: none; white-space: nowrap;
}
.btn-chico:hover { opacity: .88; }
.btn-verde { background: var(--green-light); color: var(--green); cursor: default; }
.btn-marcar-pago { background: var(--amber-light); color: var(--amber); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }

/* Aviso para activar los avisos push de pedidos (2026-09-09). Fijo
   abajo de todo, arriba del nav/footer -- no tapa nada de la app y se
   ve en cualquier pantalla (mobile y escritorio). */
.push-banner {
  position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 40;
  max-width: 430px; margin: 0 auto;
  background: var(--bg-dark); color: #fff;
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(20,30,50,.25);
  font-size: 12.5px; line-height: 1.4;
}
/* Bug real (2026-09-09, reportado por Hernan: "la barra... no se va
   nunca aunque toque el boton"): .push-banner ya trae "display:flex"
   propio -- como el atributo [hidden] tiene la MISMA especificidad
   que una clase, .push-banner (declarada despues, en la hoja de
   estilos del sitio) le ganaba a la regla del navegador que oculta
   [hidden]. El JS SI ponia hidden=true correctamente, solo que no
   se notaba nada visualmente. Con el selector [hidden] agregado ac
   ganamos por especificidad, sin tocar el JS. */
.push-banner[hidden] { display: none; }
.push-banner span { flex: 1; }
.push-banner button {
  border: none; border-radius: 8px; font-family: inherit; font-weight: 700; cursor: pointer;
  flex-shrink: 0;
}
.push-banner #push-activar { background: var(--blue); color: #fff; padding: 8px 12px; font-size: 12.5px; }
.push-banner #push-cerrar { background: none; color: rgba(255,255,255,.6); padding: 4px; font-size: 14px; }
@media (min-width: 900px) {
  .push-banner { bottom: 20px; left: auto; right: 20px; max-width: 360px; margin: 0; }
}
.btn-whatsapp:hover { background: var(--whatsapp-hover); opacity: 1; }

/* ---- Dashboard en el celular (2026-09-12, Hernan: "en escritorio esta
   perfecto pero en celulares no") ----
   La tabla de pedidos mide ~775 px: en un celular quedaba cortada por el
   overflow:hidden de .panel-card y no se veian Estado, Cobrado ni el
   menu de "...". Aca cada pedido pasa a ser una tarjeta (grid), con las
   mismas celdas y los mismos botones. En la compu (>900 px) nada cambia.
   Los !important pisan los style="" que ya tienen esas celdas para la
   vista de escritorio. */
@media (max-width: 900px) {
  .panel-topbar { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .panel-topbar .dolar-pill { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 2px; }
  .panel-content { padding: 16px 14px; gap: 16px; }
  .panel-card-head { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .chips-filtro { flex-wrap: wrap; }

  .tabla-pedidos, .tabla-pedidos > tbody { display: block; }
  .tabla-pedidos > thead { display: none; }
  .tabla-pedidos > tbody > tr:not(.fila-detalle) {
    display: grid; grid-template-columns: 26px auto 1fr auto; column-gap: 8px; row-gap: 5px;
    align-items: center; padding: 12px 10px 12px 8px; border-top: 1px solid var(--border);
    grid-template-areas:
      "desp codigo canal menu"
      ".    cliente cliente cliente"
      ".    items items items"
      ".    entrega entrega entrega"
      ".    estado cobrado cobrado"
      ".    stock stock stock";
  }
  .tabla-pedidos > tbody > tr:first-child { border-top: none; }
  .tabla-pedidos > tbody > tr > td { display: block; border-top: none; padding: 0 !important; width: auto !important; min-width: 0; }
  .tabla-pedidos .c-desplegar { grid-area: desp; }
  .tabla-pedidos .c-codigo { grid-area: codigo; font-size: 14.5px; }
  .tabla-pedidos .c-canal { grid-area: canal; }
  .tabla-pedidos .c-menu { grid-area: menu; }
  .tabla-pedidos .c-cliente { grid-area: cliente; font-size: 14px; }
  .tabla-pedidos .c-items { grid-area: items; }
  .tabla-pedidos .c-entrega { grid-area: entrega; color: var(--ink-soft); font-size: 12.5px; }
  .tabla-pedidos .c-estado { grid-area: estado; }
  .tabla-pedidos .c-cobrado { grid-area: cobrado; }
  .tabla-pedidos .c-stock { grid-area: stock; }
  .tabla-pedidos .c-vacio { grid-column: 1 / -1; padding: 24px 10px !important; }
  .tabla-pedidos .c-desplegar .btn-desplegar { padding: 6px 2px !important; }
  .tabla-pedidos .c-menu .menu-fila > summary { padding: 8px 11px; }

  /* Articulos del pedido (se abren con la flechita) */
  .tabla-pedidos > tbody > tr.fila-detalle:not([hidden]) { display: block; }
  .tabla-pedidos > tbody > tr.fila-detalle[hidden] { display: none; }
  .tabla-pedidos .tabla-articulos, .tabla-pedidos .tabla-articulos > tbody { display: block; }
  .tabla-pedidos .tabla-articulos > thead { display: none; }
  .tabla-pedidos .tabla-articulos > tbody > tr {
    display: grid; grid-template-columns: auto auto 1fr; column-gap: 10px; row-gap: 3px;
    padding: 10px 12px 10px 42px; border-top: 1px solid var(--border);
    grid-template-areas: "nombre nombre nombre" "cant precio subtotal" "disp disp disp";
  }
  .tabla-pedidos .tabla-articulos > tbody > tr > td { display: block; border-top: none; padding: 0 !important; font-size: 12.5px; }
  .tabla-pedidos .a-nombre { grid-area: nombre; font-weight: 600; }
  .tabla-pedidos .a-cant { grid-area: cant; }
  .tabla-pedidos .a-cant::before { content: "Cant. "; color: var(--ink-soft); }
  .tabla-pedidos .a-precio { grid-area: precio; }
  .tabla-pedidos .a-precio::before { content: "c/u "; color: var(--ink-soft); }
  .tabla-pedidos .a-subtotal { grid-area: subtotal; text-align: right; font-weight: 600; }
  .tabla-pedidos .a-disp { grid-area: disp; }
}

/* ---- Encuadre de la app de talleres en el celular (2026-09-13, Hernan:
   "los botones a veces abajo se suben y bajan y los apartados de arriba
   se interponen con la barra propia de los telefonos") ----
   - Arriba: con viewport-fit=cover y la app abierta desde la pantalla de
     inicio, la pagina se dibuja DEBAJO de la hora y la bateria. El primer
     bloque de cada pantalla (header navy, barra blanca con la flecha
     "volver", o el cuerpo en Confirmacion) suma ese alto a su propio
     relleno, asi su fondo pasa por detras de la barra del telefono.
     En el navegador comun env() vale 0 y queda todo como antes.
   - Abajo: overscroll-behavior evita el "rebote" de toda la pagina al
     arrastrar (movia la barra de abajo y los botones); el scroll queda
     solo adentro de .phone-body.
   - El carrito flotante y el aviso de notificaciones suben lo que crece
     la barra de abajo por la franja de gestos del iPhone. */
html, body { overscroll-behavior: none; }
.phone-body { overscroll-behavior-y: contain; }
.phone-header { padding-top: max(20px, calc(8px + env(safe-area-inset-top))); }
.phone.header-compacto .phone-header { padding-top: max(10px, env(safe-area-inset-top)); }
.phone-back { padding-top: max(16px, calc(6px + env(safe-area-inset-top))); }
.phone > .phone-body:first-child { padding-top: calc(40px + env(safe-area-inset-top)) !important; }
.fab-cart { bottom: calc(82px + max(0px, env(safe-area-inset-bottom) - 10px)); }
.push-banner { bottom: calc(84px + max(0px, env(safe-area-inset-bottom) - 10px)); }
@media (min-width: 900px) {
  .push-banner { bottom: 20px; }
}

/* ---- iPhone: ancho completo y franja de abajo (2026-09-13, medido en el
   iPhone de Hernan: pantalla de 440 de ancho y 956 de alto) ----
   - .phone tenia max-width:430px (pensado para el celular centrado en la
     compu): en una pantalla de 440 quedaban 5px grises a cada costado.
     En el celular ocupa todo el ancho.
   - html.ios-franja (lo pone base_cliente.html): los ultimos 62px de la
     pantalla quedan fuera de la pagina y solo muestran el fondo del
     documento. Se pinta del blanco de la barra de abajo en las pantallas
     que tienen barra, y como esa franja ya cubre la rayita de gestos, la
     barra no necesita el relleno extra de safe-area. */
@media (max-width: 899px) {
  .phone { max-width: none; }
}
html.ios-franja:has(.phone-nav, .phone-footer),
html.ios-franja:has(.phone-nav, .phone-footer) body { background: var(--card); }
html.ios-franja .phone-nav { padding-bottom: 8px; }
html.ios-franja .phone-footer { padding-bottom: 14px; }
html.ios-franja .fab-cart { bottom: 74px; }
html.ios-franja .push-banner { bottom: 76px; }


/* ---- Encabezado compacto de L'TOKE Expert (2026-09-14, Hernan: "hay que
   emprolijar toda la parte de arriba ya que ocupa mucho espacio") ----
   Inicio, Catalogo y Pedidos: saludo, logo y perfil en un solo renglon
   (antes: logo grande + renglon aparte con "Hola / Mi perfil / Salir"), y
   "Para que auto" y "Patente" en una sola fila de botones. */
.phone-header.phone-header-app { padding: 10px 16px 12px; padding-top: max(10px, calc(4px + env(safe-area-inset-top))); gap: 0; }
.phone.header-compacto .phone-header.phone-header-app { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 8px; }
.phone-brand.phone-brand-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.phone-brand-fila .brand-img { grid-column: 2; grid-row: 1; width: 86px; }
.phone.header-compacto .phone-brand-fila .brand-img { width: 58px; }
.phone-brand-fila .id-hola { grid-column: 1; grid-row: 1; min-width: 0; font-size: 12px; color: var(--on-dark-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-brand-fila .id-perfil { grid-column: 3; grid-row: 1; justify-self: end; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; }
.phone-header-app + .phone-searchwrap { padding: 0 16px 10px; }
.phone .auto-fila { display: flex; gap: 8px; }
.phone .auto-fila .auto-toggle { flex: 1; width: auto; min-width: 0; padding: 9px 12px; font-size: 13px; gap: 6px; }
.phone .auto-fila .auto-toggle-patente { flex: none; }
.btn-salir-perfil { margin-top: 10px; width: 100%; background: none; border: 1px solid var(--border); border-radius: 12px; padding: 12px; font: inherit; font-weight: 600; color: var(--red); cursor: pointer; }

/* Provincia y ciudad de una lista (2026-09-14): el desplegable con el
   mismo aspecto que los campos de texto. */
select.field { appearance: none; -webkit-appearance: none; padding-right: 36px; background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7785' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
select.field:disabled { opacity: .6; }

/* ---- Parte de arriba de L'TOKE Expert, prolija (2026-09-14, Hernan: "parece
   que la barra de busqueda esta mal centrada... me gusta los detalles en rojo") ----
   Antes habia tres azules (header, una franja mas oscura para el buscador y la
   caja del auto) y la linea roja quedaba pegada arriba del buscador, con aire
   solo abajo. Ahora todo el bloque de arriba es del mismo azul, el buscador tiene
   el mismo aire arriba y abajo, y la linea roja es el borde de abajo del bloque:
   se dibuja como fondo fijo arriba de la lista, asi sigue ahi cuando la barra se
   achica al bajar (el fondo de una caja con scroll no se mueve con el contenido). */
.phone-header-app::after { display: none; }
.phone-header.phone-header-app { padding-bottom: 10px; }
.phone-header-app + .phone-searchwrap { background: var(--bg-dark); padding: 2px 16px 12px; }
.phone-header-app + .phone-searchwrap .phone-searchbox { border-radius: 14px; padding: 11px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.phone-header-app + .phone-searchwrap .phone-searchbox:focus-within { box-shadow: 0 0 0 2px var(--blue), 0 2px 10px rgba(0,0,0,.22); }
.phone-header-app ~ .auto-box { padding-bottom: 14px; }
.phone.header-compacto .phone-header-app ~ .auto-box { padding-bottom: 0; }
.phone-header-app ~ .phone-body {
  background: linear-gradient(90deg, #9E1015, var(--blue) 30%, #E4444C 50%, var(--blue) 70%, #9E1015) top / 100% 3px no-repeat, var(--surface);
}
.phone .id-perfil { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }

/* detalles en rojo */
.phone .seccion-titulo { display: flex; align-items: center; gap: 8px; }
.phone .seccion-titulo::before { content: ""; flex: none; width: 4px; height: 14px; border-radius: 2px; background: var(--blue); }
.phone .cat-tile { border-bottom: 3px solid var(--blue); transition: transform .12s ease; }
.phone .cat-tile:active { transform: scale(.97); }
.phone .cat-tile > span:first-child { width: 42px; height: 42px; border-radius: 50%; background: var(--blue-light); display: flex; align-items: center; justify-content: center; font-size: 21px !important; }
.phone .card-mini .price-lg { color: var(--blue); }
/* (2026-09-16) seccion Ofertas del Inicio */
.phone .card-mini .oferta-pct { position: absolute; top: 14px; left: 14px; background: #FFD23F; color: #121B27;
  font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* ---- Promociones de L'TOKE Expert (2026-09-14): carrusel de banners del
   Inicio y ventana al abrir la app. Ver promos.py y _promo_*.html. ----
   El alto del banner sale de padding-top (no de aspect-ratio): en el iPhone
   de Hernan aspect-ratio ya dio problemas en la ficha del producto. */
.promo-carrusel { position: relative; flex-shrink: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 3px 14px rgba(20,30,50,.14); background: var(--card); }
.promo-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.promo-pista::-webkit-scrollbar { display: none; }
.promo-slide { position: relative; flex: 0 0 100%; height: 0; padding-top: 50%; scroll-snap-align: start; display: block; }
.promo-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.promo-puntos { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.promo-puntos button { pointer-events: auto; width: 7px; height: 7px; padding: 0; border: none; border-radius: 4px; background: rgba(255,255,255,.7); box-shadow: 0 0 3px rgba(0,0,0,.45); transition: width .2s ease, background .2s ease; cursor: pointer; }
.promo-puntos button.activo { width: 20px; background: var(--blue); }
.promo-carrusel-esc { margin-bottom: 24px; }
.promo-carrusel-esc .promo-slide { padding-top: 33.333%; }

.promo-ventana { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); background: rgba(10,16,26,.74); animation: promoFondo .2s ease; }
.promo-ventana[hidden] { display: none; }
.promo-ventana-caja { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px;
  animation: promoEntra .3s cubic-bezier(.2,.9,.3,1.15); }
.promo-ventana-foto { display: block; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 14px 44px rgba(0,0,0,.5); border-bottom: 4px solid var(--blue); }
.promo-ventana-foto img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #fff; }
.promo-cerrar { position: absolute; top: -14px; right: -10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.promo-ventana-btn { text-align: center; box-shadow: 0 6px 18px rgba(192,20,27,.45); }
@keyframes promoFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes promoEntra { from { opacity: 0; transform: scale(.92) translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-ventana, .promo-ventana-caja { animation: none; } }

/* ---- Favoritos, Guardados y barra de abajo con 4 botones (2026-09-14) ---- */
.phone-nav .navitem { flex: 1; min-width: 0; }
.fav-form { margin-left: auto; }
.fav-boton { display: inline-flex; align-items: center; gap: 8px; padding: 6px; border: none; background: none;
  color: var(--ink-soft); font: inherit; cursor: pointer; }
.fav-boton svg { fill: none; transition: transform .15s ease, fill .15s ease; }
.fav-boton.activo { color: var(--blue); }
.fav-boton.activo svg { fill: currentColor; }
.fav-boton:active svg { transform: scale(.82); }
.fav-form-esc { margin: 12px 0 0; }
.fav-form-esc .fav-boton { border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 16px; font-weight: 700; color: var(--ink); background: var(--card); }
.fav-form-esc .fav-boton.activo { border-color: var(--blue); color: var(--blue); }
.guardados-atajo { color: inherit; display: flex; align-items: center; gap: 12px; }
.guardados-atajo-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; }

/* ---- Detalles del recorrido completo de L'TOKE Expert (2026-09-15) ----
   - "a:hover" (color rojo) le ganaba al blanco de los botones que son links:
     al pasar el mouse, o en el iPhone despues de tocar (el hover queda
     pegado), el texto quedaba rojo sobre rojo y el boton se veia vacio
     (paso con "Continuar" del carrito).
   - Aviso neutro para "Recibimos tu pedido" / "En camino": el rosado
     parecia un error.
   - Los textos de "todavia no hay..." no tenian recuadro en la compu. */
a.btn, a.btn:hover, a.btn:active, a.btn:focus { color: #fff; }
a.btn-outline, a.btn-outline:hover, a.btn-outline:active { color: var(--ink); }
.callout-neutro { background: var(--indigo-light); color: var(--bg-dark); }
.tc-desktop .vacio-chico { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; background: var(--card);
  border: 1px dashed var(--border); border-radius: 12px; padding: 16px 18px; }

/* ---- Corazoncito de favorito en las tarjetas del catalogo (2026-09-15):
   solo marca, mas chico que el "+" y sin tocarse (se marca desde la ficha). */
.fav-marca { position: absolute; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--blue);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(20,30,50,.28); pointer-events: none; }
.card-mas .fav-marca { left: 56px; top: 6px; }
.t-card-mas .fav-marca { left: 10px; top: 10px; width: 30px; height: 30px; }

/* ---- Bienvenida mas completa (2026-09-15) ---- */
.phone .bienvenida-cuerpo { justify-content: center; gap: 22px; }
.phone .beneficios { display: flex; flex-direction: column; gap: 10px; }
.phone .beneficio { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(20,30,50,.05); }
.phone .beneficio-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; }
.phone .beneficio b { display: block; font-size: 14px; }
.phone .beneficio span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

/* ---- Desencuadre del catalogo (2026-09-15, captura de Hernan buscando
   "tiida"): un nombre largo sin espacios ("PATHFINDER/SENTRA/FRONTIER/...")
   no entraba en la tarjeta y la pantalla se corria de costado. Ahora corta
   la palabra, y la zona que scrollea nunca se mueve para los costados. */
.phone-body { overflow-x: hidden; overflow-wrap: break-word; }
.tc-desktop { overflow-wrap: break-word; }

/* ---- Cartelito "en mantenimiento" para la cuenta de prueba (2026-09-15) ---- */
.aviso-mantenimiento { position: fixed; left: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 70;
  background: #F5B300; color: #1a1a1a; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px;
  box-shadow: 0 2px 8px rgba(20,30,50,.25); pointer-events: none; max-width: calc(100vw - 100px); }
@media (min-width: 900px) { .aviso-mantenimiento { bottom: 16px; } }