/* Capa web de las dos herramientas (/autos y /motos). Generado por tools/build-web.mjs;
   no lo carga la app de escritorio y no lo carga la landing.

   Todo va con prefijo .v* o dentro de .vBienvenida / .vEmpty: la landing usa su propia hoja
   y ningun selector de aca puede alcanzarla. Las unicas reglas sin prefijo son las tres del
   armazon (body, main, header) y estan comentadas una por una.

   Paleta: la que ya usaban estas paginas (slate #0f172a sobre #f4f6f9) mas el petroleo
   #0A4A45 de la marca para lo comercial. Sin degradados, sin sombras nuevas. */

:root{
  --vTinta:#0f172a;
  --vTinta-2:#475569;
  --vTinta-3:#64748b;
  --vLinea:#e2e8f0;
  --vPetroleo:#0A4A45;
  --vPetroleo-soft:#E0EFED;
  --vLicBar-alto:72px;
}

/* ---------- armazon ----------
   La app medía 100vh: en el celular eso cuenta la barra del navegador y deja un hueco.
   Con flex, main crece hasta el pie y las vistas vacias ya no encogen la pagina. */
body{min-height:100dvh;display:flex;flex-direction:column;}
main{flex:1 0 auto;min-height:0;width:100%;}
/* El encabezado propio de la app deja de ser sticky: la barra que queda fija es la global,
   que es la mas compacta y la que lleva el CTA. Dos barras pegadas arriba comen media
   pantalla en un telefono. */
header:not(.vTop){position:static !important;}

[hidden]{display:none !important;}

/* ---------- barra global ---------- */
.vTop{
  position:sticky;top:0;z-index:90;
  background:var(--vTinta);color:#fff;padding:9px 20px;
  display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  font-size:14px;
}
.vTop-volver{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;}
.vTop-volver:hover{text-decoration:underline;}
.vTop-app{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.vTop-producto{font-weight:700;}
.vTop-sello{
  color:#cbd5e1;font-size:12.5px;font-weight:600;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.vTop-lic{display:flex;align-items:center;gap:10px;}
.vTop-precio{color:#cbd5e1;font-size:13px;white-space:nowrap;}

/* ---------- aviso de datos ---------- */
.vAviso{
  background:#fffbeb;border-bottom:1px solid #fde68a;color:#7c5310;font-size:13.5px;
  padding:8px 24px;display:flex;align-items:center;gap:12px;justify-content:center;
  flex-wrap:wrap;line-height:1.4;
}
.vAviso-txt{max-width:680px;}
.vAviso-sec{color:#8a6420;}
.vAviso-btns{display:flex;gap:8px;flex-wrap:wrap;}

.vBtn{display:inline-block;padding:13px 22px;border-radius:11px;font-size:15px;font-weight:700;
  cursor:pointer;border:none;text-decoration:none;transition:filter .15s,background .15s;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}
.vBtn:hover{filter:brightness(1.08);}
.vBtn-dark{background:#fff;color:var(--vTinta);}
.vLic .vBtn-dark,.vModal .vBtn-dark{background:var(--vTinta);color:#fff;}
.vBtn-line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);}
.vLic .vBtn-line,.vModal .vBtn-line{color:var(--vTinta);border:1px solid #cbd5e1;}
.vAviso .vBtn-line{color:#b45309;border:1px solid #fcd34d;}
.vBtn-wa{background:#16a34a;color:#fff;}
.vBtn-sm{padding:8px 14px;font-size:13px;border-radius:9px;}

/* ---------- bienvenida ----------
   Va arriba de las metricas y solo mientras la app este vacia. No es un modal, no tapa
   nada y no guarda ninguna preferencia: desaparece sola cuando hay un dato cargado. */
.vBienvenida{
  background:#fff;border:1px solid var(--vLinea);border-left:4px solid var(--vPetroleo);
  border-radius:14px;padding:20px 22px;margin-bottom:18px;
}
.vBienvenida-rotulo{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vPetroleo);background:var(--vPetroleo-soft);border-radius:999px;padding:3px 10px;
}
.vBienvenida h2{font-size:20px;color:var(--vTinta);margin:12px 0 6px;}
.vBienvenida-desc{color:var(--vTinta-2);font-size:14.5px;line-height:1.55;margin:0;max-width:62ch;}
.vBienvenida-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.vBienvenida .vBtn-primario{background:var(--vPetroleo);color:#fff;}
.vBienvenida .vBtn-secundario{background:transparent;color:var(--vTinta);border:1px solid #cbd5e1;}
.vBienvenida-terciario{
  background:none;border:none;padding:0;font:inherit;font-size:14px;font-weight:600;
  color:var(--vTinta-3);text-decoration:underline;cursor:pointer;
}
.vBienvenida-guia{margin:16px 0 0;padding:14px 16px;background:#f8fafc;border-radius:10px;}
.vBienvenida-guia ol{margin:0;padding-left:20px;color:var(--vTinta-2);font-size:14.5px;line-height:1.7;}
.vBienvenida :focus-visible,.vEmpty :focus-visible{outline:2px solid var(--vPetroleo);outline-offset:2px;}

/* ---------- estados vacios ----------
   Reemplazan el texto suelto que habia: mismo lugar, mismo icono, y abajo el boton que
   abre el formulario real que ya existe. */
.vEmpty{text-align:center;padding:26px 18px;color:var(--vTinta-3);}
.vEmpty-ico{font-size:30px;line-height:1;margin-bottom:8px;}
.vEmpty h4{font-size:16px;color:var(--vTinta);margin:0 0 4px;}
.vEmpty p{font-size:14px;color:var(--vTinta-3);margin:0 auto;max-width:46ch;line-height:1.5;}
.vEmpty .vBtn{margin-top:14px;background:var(--vPetroleo);color:#fff;padding:10px 18px;font-size:14px;}

/* ---------- barra de licencia (celular) ---------- */
.vLicBar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  background:var(--vTinta);color:#fff;font-size:14px;
  padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  min-height:var(--vLicBar-alto);
}
.vLicBar-txt{min-width:0;}
.vLicBar.oculta{display:none !important;}

/* ---------- panel de licencia ---------- */
.vLic{position:fixed;inset:0;z-index:400;display:flex;justify-content:flex-end;}
.vLic-fondo{position:absolute;inset:0;background:rgba(15,23,42,.5);}
.vLic-panel{
  position:relative;background:#fff;width:min(420px,100%);max-width:100%;
  height:100%;overflow-y:auto;padding:26px 24px calc(26px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}
.vLic-x{
  position:absolute;top:12px;right:12px;background:none;border:none;color:var(--vTinta-3);
  font-size:18px;line-height:1;cursor:pointer;padding:8px;
}
.vLic-rotulo{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vPetroleo);
}
.vLic-panel h2{font-size:20px;color:var(--vTinta);margin:0;line-height:1.3;}
.vLic-desc{color:var(--vTinta-2);font-size:14.5px;line-height:1.55;margin:0;}
.vLic-lista{margin:0;padding:0;list-style:none;display:grid;gap:8px;}
.vLic-lista li{
  position:relative;padding-left:22px;color:var(--vTinta-2);font-size:14.5px;line-height:1.45;
}
.vLic-lista li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--vPetroleo);font-weight:800;
}
.vLic-precio{border-top:1px solid var(--vLinea);padding-top:14px;}
.vLic-etiqueta{
  display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--vTinta-3);
}
.vLic-cifra{margin:4px 0 0;font-size:15px;color:var(--vTinta-2);}
.vLic-cifra b{font-size:30px;color:var(--vPetroleo);font-variant-numeric:tabular-nums;}
.vLic-sube{margin:8px 0 0;font-size:14px;font-weight:700;color:#9a5b0d;}
.vLic-nota{margin:0;font-size:13px;color:var(--vTinta-3);}
.vLic .vBtn{text-align:center;}
.vLic-panel .vBtn-wa{margin-top:4px;}

/* Mientras el panel esta abierto el fondo no scrollea. */
body.vLic-abierto{overflow:hidden;}

.vModal{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.55);display:none;
  align-items:center;justify-content:center;padding:24px;}
.vModal.open{display:flex;}
.vModal-box{background:#fff;border-radius:16px;max-width:460px;width:100%;padding:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);}
.vModal-box h3{font-size:20px;color:var(--vTinta);margin:0 0 12px;}
.vModal-box p{color:var(--vTinta-2);font-size:14.5px;line-height:1.6;margin:0 0 12px;}
.vModal-box code{background:#f1f5f9;padding:2px 6px;border-radius:5px;font-size:13px;}
.vModal-hint{color:var(--vTinta-3);font-size:13.5px;}
.vModal-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}

/* ---------- celular ----------
   Arriba queda solo volver + nombre; la oferta baja a la barra fija, y el contenido reserva
   exactamente el alto de esa barra para no quedar tapado. */
@media(max-width:820px){
  .vTop{padding:9px 14px;font-size:13px;gap:10px;}
  .vTop-largo{display:none;}
  .vTop-lic{display:none;}
  .vTop-sello{font-size:11.5px;}
  .vAviso{padding:8px 14px;font-size:13px;justify-content:flex-start;}
  .vLicBar{display:flex;}
  main{padding-bottom:calc(var(--vLicBar-alto) + env(safe-area-inset-bottom) + 16px);}
  .toast{bottom:calc(var(--vLicBar-alto) + env(safe-area-inset-bottom) + 16px) !important;}
  /* El panel entra como hoja desde abajo y nunca pasa del alto disponible. */
  .vLic{align-items:flex-end;justify-content:center;}
  .vLic-panel{
    width:100%;height:auto;max-height:88dvh;border-radius:18px 18px 0 0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  }
  .vBienvenida{padding:18px;}
  .vBienvenida-cta{flex-direction:column;align-items:stretch;}
  .vBienvenida-cta .vBtn{width:100%;text-align:center;min-height:44px;}
  .vLicBar .vBtn,.vLic .vBtn{min-height:44px;}
  /* Piso de 14px en el telefono: los rotulos chicos del panel se leen a un brazo de distancia. */
  .vLic-rotulo,.vLic-etiqueta,.vLic-nota,.vBienvenida-rotulo,.vLicBar .vBtn-sm,.vLic .vBtn-sm{font-size:14px;}
}