/* Qomparte.me — tema OSCURO de marca «Teal Océano» (teal/cian oscuro + coral suave, tipografía Unbounded).
   CSS propio de QomparteAutos, NO compartido con Tapres. */
:root{
  --grafito:#1c4a52; --grafito-deep:#0b272c;
  --teal:#16c2b6; --teal-lite:#2fd4c7; --coral:#f5895b; --crema:#eaf7f6;
  --surface:#123a42; --surface-2:#174a53; --line:rgba(225,250,250,.11);
  --muted:#86aeae; --warn:#f6c453; --bad:#f5895b; --app-w:1320px;
  --on-teal:#04231f;   /* texto oscuro para ir ENCIMA del teal brillante (Q, botón teal, plate) */
}
*{box-sizing:border-box; scrollbar-width:none}
/* ⚠️ El atributo `hidden` de HTML equivale a `display:none`, pero lo PISA cualquier regla que
   fije `display` (p. ej. `.q-btn{display:inline-flex}`). Por eso el botón «Agregar a inicio» se
   veía en Safari, donde nunca puede funcionar (2026-07-23). Esta regla global lo blinda y evita
   que el mismo error vuelva a aparecer en cualquier otro componente. */
[hidden]{display:none !important}
*::-webkit-scrollbar{width:0; height:0; display:none}
html,body{margin:0; padding:0; max-width:100%; overflow-x:clip}
/* Blindaje: con las barras de scroll OCULTAS por diseño, un desborde horizontal no se ve pero
   descuadra toda la página en el teléfono y ahí se queda. Ningún medio puede ser más ancho que
   su contenedor. (2026-07-23, tras reporte de "perdió el formato responsivo" en móvil.)
   ⚠️ `clip` y NO `hidden`: `overflow-x:hidden` convierte al elemento en contenedor de scroll y
   eso ROMPE `position:sticky` en TODOS sus descendientes — el hero anclado del carrusel dejaba
   de pegarse y se iba hacia arriba. `clip` recorta igual sin crear contenedor de scroll. */
img,svg,video,canvas,iframe{max-width:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 620px at 72% -12%, #0e323a 0%, var(--grafito-deep) 55%) fixed;
  color:var(--crema); min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none}

/* NAV */
/* Header y pie SIEMPRE a la vista: se fijan a la pantalla y el scroll ocurre solo en el cuerpo
   (petición del usuario 2026-07-23). `sticky` no bastaba: en el teléfono el pie se despegaba al
   rebotar el scroll. El cuerpo reserva su alto con padding para que nada quede tapado. */
.q-nav{border-bottom:1px solid var(--line); position:fixed; top:0; left:0; right:0; z-index:20;
  background:rgba(11,39,44,.86); backdrop-filter:blur(9px)}
.q-nav__inner{display:flex; align-items:center; justify-content:space-between;
  max-width:var(--app-w); margin:0 auto; padding:15px 24px}
.q-brand{display:flex; align-items:center; gap:10px; font-family:Unbounded,sans-serif; font-weight:800; letter-spacing:-.02em}
/* Logo de marca = la MISMA imagen que usa Qontacta (Q teal + nodo coral), no una «Q» de letra.
   Se sirve desde public/ bajo /qomparte/. Cubre nav (landing+app), login y vista pública. */
.q-brand__q{width:34px; height:34px; flex:none; display:block; font-size:0; color:transparent;
  background:url(/qomparte/qomparteme-logo.png) center/contain no-repeat}
.q-brand__txt{font-size:19px}
.q-brand__me{color:var(--coral)}
.q-nav__right{display:flex; align-items:center; gap:18px}
.q-nav__link{color:var(--muted); font-weight:500; font-size:14px}
.q-nav__link:hover{color:var(--crema)}
.q-nav__acct{font-size:14px; background:var(--surface); padding:7px 12px; border-radius:999px; border:1px solid var(--line)}

/* SHELL */
.q-shell{width:100%; max-width:var(--app-w); margin:0 auto; padding:34px 24px 60px; flex:1}
.q-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap}
.q-h1{font-family:Unbounded,sans-serif; font-weight:800; font-size:30px; margin:0 0 6px; letter-spacing:-.02em}
.q-sub{margin:0; color:var(--muted); font-size:15px}
.q-head__cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.q-cupo{color:var(--muted); font-size:13px}

/* BUTTONS */
.q-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  transition:transform .06s ease, filter .15s ease}
.q-btn:active{transform:translateY(1px)}
.q-btn--coral{background:var(--coral); color:#2a1c17}
.q-btn--coral:hover{filter:brightness(1.06)}
.q-btn--ghost{background:transparent; border-color:var(--line); color:var(--crema)}
.q-btn--teal{background:var(--teal); color:var(--on-teal)}

/* GRID + CARDS */
.q-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.q-card{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column}
.q-card__qr{position:relative; display:flex; justify-content:center; padding:22px 0 14px;
  background:radial-gradient(300px 120px at 50% 0%, rgba(22,194,182,.16), transparent)}
.q-qr-tile{background:#fff; padding:8px; border-radius:12px; width:118px; height:118px; display:grid; place-items:center}
.q-qr-tile svg,.q-qr-tile img{width:100%; height:100%; display:block}
.q-card__status{position:absolute; top:12px; right:12px; font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px}
.q-card__status--activo{background:rgba(22,194,182,.2); color:var(--teal-lite)}
.q-card__status--pausado{background:rgba(245,137,91,.18); color:var(--coral)}
.q-card__body{padding:6px 18px 18px}
.q-card__title{font-family:Unbounded,sans-serif; font-weight:600; font-size:17px; margin:6px 0 8px}
.q-card__meta{display:flex; gap:8px; align-items:center; margin:0 0 14px; flex-wrap:wrap}
.q-plate{font-family:Unbounded,sans-serif; font-weight:600; letter-spacing:.08em; background:#0c3038;
  color:#6fe3d6; border:1px solid rgba(22,194,182,.35); padding:4px 10px; border-radius:7px; font-size:13px}
.q-tag{font-size:12px; color:var(--muted); background:var(--surface); padding:4px 9px; border-radius:6px}

/* DOC ROWS + CHIPS */
.q-docs{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.q-docrow{display:flex; align-items:center; justify-content:space-between; font-size:13px;
  padding:8px 11px; background:rgba(0,0,0,.16); border-radius:9px}
.q-chip{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px}
.q-chip--ok{background:rgba(22,194,182,.22); color:var(--teal-lite)}
.q-chip--warn{background:rgba(246,196,83,.18); color:var(--warn)}
.q-chip--bad{background:rgba(245,137,91,.2); color:var(--coral)}
.q-chip--muted{background:rgba(134,174,174,.14); color:var(--muted)}
.q-card__manage{display:inline-block; margin-top:2px; color:var(--teal-lite); font-weight:600; font-size:14px}
.q-card__manage:hover{color:var(--crema)}

/* EMPTY */
.q-empty{text-align:center; padding:70px 20px; background:var(--surface); border:1px dashed var(--line); border-radius:20px}
.q-empty__icon{font-size:46px; margin-bottom:8px}
.q-empty h2{font-family:Unbounded,sans-serif; margin:0 0 8px}
.q-empty p{color:var(--muted); margin:0 0 22px}

/* FLASH */
.q-flash-wrap{max-width:var(--app-w); margin:16px auto 0; padding:0 24px}
.q-flash{padding:12px 16px; border-radius:12px; font-size:14px; font-weight:500}
.q-flash--ok{background:rgba(22,194,182,.16); color:var(--teal-lite); border:1px solid rgba(22,194,182,.3)}
.q-flash--bad{background:rgba(245,137,91,.16); color:var(--coral); border:1px solid rgba(245,137,91,.3)}

/* FOOT */
.q-foot{text-align:center; color:var(--muted); font-size:13px; padding:16px 0; border-top:1px solid var(--line);
  position:fixed; bottom:0; left:0; right:0; z-index:10; background:rgba(11,39,44,.94); backdrop-filter:blur(9px)}
/* Alto real de las barras: si cambia el padding del header o del pie, se ajusta AQUÍ y todo lo
   demás sigue calzando. */
:root{--barra-sup:66px; --barra-inf:50px}
@media (max-width:760px){ :root{--barra-sup:60px; --barra-inf:48px} }
/* Solo el layout de la APP tiene barras fijas. La tarjeta pública NO las lleva (empieza en la
   portada del vehículo), así que no debe reservar ese espacio: si no, deja un hueco muerto. */
body.q-app{padding-top:var(--barra-sup); padding-bottom:var(--barra-inf)}
/* El menú del header se ancla al header fijo, no a la página. */
.q-nav .q-nav__right--menu{position:absolute}
.q-foot__inner{max-width:var(--app-w); margin:0 auto; padding:0 24px}

@media (max-width:560px){
  .q-nav__inner{padding:14px 16px}
  .q-shell{padding:24px 16px 48px}
  .q-h1{font-size:24px}
}

/* PAGE HEAD / PANEL */
.q-page-head{display:flex; align-items:center; gap:16px; margin-bottom:20px}
.q-page-head__action{margin-left:auto}
.q-back{color:var(--muted); font-size:14px; font-weight:500}
.q-back:hover{color:var(--crema)}
.q-panel{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; max-width:640px}
.q-h2{font-family:Unbounded,sans-serif; font-weight:600; font-size:19px; margin:26px 0 12px}

/* FORM */
.q-form{display:flex; flex-direction:column; gap:16px}
.q-field{display:flex; flex-direction:column; gap:6px; flex:1}
.q-field>span{font-size:13px; color:var(--muted)}
.q-field-row{display:flex; gap:14px; flex-wrap:wrap}
.q-input{background:var(--grafito-deep); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  color:var(--crema); font-size:14px; font-family:inherit; width:100%}
.q-input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(22,194,182,.2)}
.q-input--date{max-width:190px}
.q-form__actions{display:flex; gap:12px; margin-top:8px}
.q-form__errors{background:rgba(245,137,91,.14); border:1px solid rgba(245,137,91,.3); color:var(--coral);
  border-radius:10px; padding:10px 14px; font-size:13px}
.q-form__errors p{margin:2px 0}
.q-btn--sm{padding:8px 13px; font-size:13px}

/* SHOW */
.q-show{display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start}
.q-show__side{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 33px; text-align:center}
.q-edit-icon{color:var(--muted); display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); transition:color .15s, border-color .15s}
.q-edit-icon:hover{color:var(--crema); border-color:var(--muted)}
.q-edit-icon svg{display:block}
.q-qr-tile--big{width:100%; height:auto; aspect-ratio:1; margin:0; padding:6px}
.q-show__url{font-size:11px; color:var(--muted); word-break:break-all; margin:12px 0 14px}
.q-show__side-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.q-show__side-actions form{display:contents}
.q-show__hint{font-size:12px; color:var(--muted); margin-top:12px; line-height:1.5}
.q-show__head{display:flex; flex-direction:column; align-items:center; gap:8px; margin:8px 0 14px}

/* DOC SLOTS */
.q-slot{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px}
.q-slot__head{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; list-style:none; user-select:none; min-width:0}
.q-slot__head::-webkit-details-marker{display:none}
.q-slot__head-r{display:flex; align-items:center; gap:6px; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; min-width:0}
.q-slot__name{min-width:0; overflow-wrap:anywhere}
/* En teléfono, título arriba y chips en su propia línea: con 4 chips de discrepancia la fila
   no cabe y empujaba el ancho de la página. */
@media (max-width:560px){
  .q-slot__head{flex-wrap:wrap; row-gap:8px}
  .q-slot__name{flex:1 1 100%}
  .q-slot__head-r{width:100%; justify-content:flex-start}
}
.q-slot__chev{color:var(--muted); transition:transform .2s ease; flex:0 0 auto}
.q-slot[open] .q-slot__chev{transform:rotate(180deg)}
.q-slot__head:hover .q-slot__chev{color:var(--crema)}
.q-slot__body{margin-top:12px}
.q-slot__name{font-weight:600; font-size:15px}
.q-slot__file{font-size:13px; color:var(--teal-lite); margin:0 0 10px}
.q-slot__form{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.q-file{font-size:13px; color:var(--muted); max-width:220px}
.q-linkbtn{background:none; border:none; color:var(--coral); font-size:12px; cursor:pointer; padding:6px 0; margin-top:4px}
.q-linkbtn:hover{text-decoration:underline}

@media (max-width:640px){
  .q-show{grid-template-columns:1fr}
  .q-show__side{max-width:none}
}

/* PUBLIC (fiscalización) */
.q-pub-top{display:flex; align-items:center; gap:8px; justify-content:center; padding:16px;
  font-family:Unbounded,sans-serif; font-weight:800; border-bottom:1px solid var(--line)}
.q-pub-top__txt{font-size:16px}
.q-pub-shell{max-width:560px; margin:0 auto; padding:14px 14px 30px; min-height:60vh}
@media (max-width:560px){
  /* En el teléfono la tarjeta manda: casi sin margen, la portada llena la pantalla al abrir. */
  .q-pub-shell{padding:10px 10px 24px}
}
/* La marca vive AQUÍ, no arriba: al abrir la tarjeta lo primero tiene que ser el vehículo. */
.q-pub-foot{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  color:var(--muted); font-size:12px; padding:22px 20px 26px; border-top:1px solid var(--line)}
.q-pub-foot__marca{display:inline-flex; align-items:center; gap:7px;
  font-family:Unbounded,sans-serif; font-weight:800; letter-spacing:-.02em; color:var(--crema)}
.q-pub-foot__marca .q-brand__q{width:22px; height:22px}
.q-pub-foot__txt{font-size:14px}
.q-pub-foot__leyenda{font-size:11.5px; color:var(--muted)}
.q-pub__plate{text-align:center; margin-bottom:22px}
.q-plate--xl{font-size:30px; letter-spacing:.14em; padding:12px 22px; display:inline-block}
.q-pub__noplate{font-family:Unbounded,sans-serif; font-size:24px; font-weight:600}
.q-pub__meta{color:var(--muted); margin:12px 0 0; font-size:15px}
.q-pub__docs{display:flex; flex-direction:column; gap:14px}
.q-pub__doc{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px}
.q-pub__doc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.q-pub__doc-name{font-weight:600; font-size:16px}
.q-pub__venc{font-size:13px; color:var(--muted); margin:0 0 10px}
.q-pub__file img{width:100%; border-radius:10px; display:block; border:1px solid var(--line)}
.q-pub__open{width:100%; justify-content:center}
.q-pub__missing{color:var(--muted); font-size:14px; margin:0}
.q-pub__stamp{text-align:center; color:var(--muted); font-size:12px; margin-top:22px}
.q-pub--msg{text-align:center; padding:60px 20px}
.q-pub__icon{font-size:44px; margin-bottom:10px}
.q-pub__msgtxt{color:var(--muted); max-width:400px; margin:8px auto 0; line-height:1.6}

/* AUTH */
.q-auth{display:flex; justify-content:center; padding:44px 16px}
.q-auth__card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; width:100%; max-width:420px}
.q-auth__brand{display:flex; align-items:center; gap:8px; font-family:Unbounded,sans-serif; font-weight:800; margin-bottom:16px}
.q-auth .q-h1{font-size:24px; margin:0 0 6px}
.q-auth__hint{font-size:13px; color:var(--muted); margin-top:16px; line-height:1.5}
.q-nav__logout{background:none; border:1px solid var(--line); color:var(--muted); font-size:13px; padding:6px 12px; border-radius:999px; cursor:pointer; font-family:inherit}
.q-nav__logout:hover{color:var(--crema); border-color:var(--muted)}
.q-nav__right form{display:inline-block; margin:0}

/* LANDING */
.q-accent{color:var(--coral)}
.q-land-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:30px 0 50px}
.q-land-badge{display:inline-block; background:rgba(22,194,182,.16); color:var(--teal-lite); padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:16px}
.q-land-h1{font-family:Unbounded,sans-serif; font-weight:800; font-size:40px; line-height:1.1; letter-spacing:-.02em; margin:0 0 16px}
.q-land-lead{color:#bcd6d5; font-size:17px; line-height:1.6; margin:0 0 24px; max-width:520px}
.q-land-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.q-land-note{color:var(--muted); font-size:13px}
.q-land-hero__art{display:flex; justify-content:center; align-items:center}
/* Mientras esté vacía no debe abrir hueco en el teléfono. */
.q-land-hero__art:empty{display:none}
.q-land-h2{font-family:Unbounded,sans-serif; font-weight:700; font-size:26px; text-align:center; margin:0 0 30px}
.q-land-steps{padding:50px 0}
.q-land-grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.q-land-step{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px}
.q-land-step__n{width:38px; height:38px; border-radius:10px; background:var(--coral); color:#2a1c17; font-family:Unbounded,sans-serif; font-weight:800; display:grid; place-items:center; margin-bottom:14px}
.q-land-step h3{font-family:Unbounded,sans-serif; font-weight:600; font-size:17px; margin:0 0 8px}
.q-land-step p{color:var(--muted); font-size:14px; line-height:1.6; margin:0}
.q-land-feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; padding:20px 0 50px}
.q-land-feat{padding:20px}
.q-land-feat h3{font-family:Unbounded,sans-serif; font-size:16px; margin:0 0 8px}
.q-land-feat p{color:var(--muted); font-size:14px; line-height:1.6; margin:0}
.q-land-final{text-align:center; padding:50px 0 30px}
@media (max-width:760px){
  .q-land-hero{grid-template-columns:1fr; text-align:center}
  .q-land-h1{font-size:30px}
  .q-land-cta{justify-content:center}
  .q-land-lead{margin-left:auto; margin-right:auto}
  .q-land-hero__art{order:-1}
}

/* WALLET (scaffold, próximamente) */
.q-wallet{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.q-wallet__t{font-size:12px; color:var(--muted); margin:0 0 8px}
.q-wallet__btn{width:100%; display:block; margin:0 0 8px; background:#08232a; color:var(--crema); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:13px; font-weight:600; opacity:.5; cursor:not-allowed}
.q-wallet__soon{font-size:11px; color:var(--muted); margin:2px 0 0; line-height:1.4}
.q-offline-btn{margin-top:14px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(22,194,182,.14); color:var(--teal-lite); border:1px solid rgba(22,194,182,.4); border-radius:12px;
  padding:12px; font-size:13px; font-weight:700; cursor:pointer; transition:filter .15s ease}
.q-offline-btn:hover{filter:brightness(1.12)}
.q-offline-hint{font-size:11px; color:var(--muted); margin:7px 2px 0; line-height:1.45; text-align:center}
/* (beta) Guardar sin señal automático — toggle + estado de conexión */
.q-autooff{margin-top:14px; border-top:1px solid var(--line); padding-top:14px}
.q-switch{display:flex; align-items:center; gap:10px; cursor:pointer}
.q-switch input{position:absolute; opacity:0; width:0; height:0}
.q-switch__slider{position:relative; flex:none; width:42px; height:24px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); transition:background .2s}
.q-switch__slider::before{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s}
.q-switch input:checked + .q-switch__slider{background:rgba(22,194,182,.4); border-color:rgba(22,194,182,.6)}
.q-switch input:checked + .q-switch__slider::before{transform:translateX(18px); background:var(--teal-lite)}
.q-switch input:focus-visible + .q-switch__slider{box-shadow:0 0 0 3px rgba(22,194,182,.25)}
.q-switch__label{font-size:13px; color:var(--crema); font-weight:600; line-height:1.3}
.q-beta{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--coral);
  border:1px solid rgba(245,137,91,.4); border-radius:6px; padding:1px 5px; margin-left:2px}
.q-autooff__status{font-size:11px; color:var(--muted); margin:9px 2px 0; line-height:1.45}
.q-autooff__status.ok{color:var(--teal-lite)}
.q-autooff__status.warn{color:var(--warn)}
.q-autooff__row{display:flex; align-items:center; gap:8px}
.q-autooff__row .q-switch{flex:1; min-width:0}
.q-switch__label{display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap}
.q-nosig{width:16px; height:16px; flex:none; opacity:.85}
.q-info{flex:none; position:relative; background:none; border:0; padding:4px; color:var(--muted); cursor:pointer; line-height:0}
.q-info svg{width:18px; height:18px; display:block}
.q-info:hover{color:var(--crema)}
.q-info__pop{display:none; position:absolute; right:-4px; bottom:calc(100% + 8px); width:232px; z-index:30;
  background:var(--surface-2); color:var(--crema); border:1px solid var(--line); border-radius:12px; padding:11px 13px;
  font-size:12px; font-weight:500; line-height:1.5; text-align:left; box-shadow:0 16px 40px -14px rgba(0,0,0,.7)}
.q-info__pop b{color:var(--teal-lite)}
.q-info:hover .q-info__pop, .q-info:focus .q-info__pop, .q-info.on .q-info__pop{display:block}
/* PLANES */
.q-plan{margin:18px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.q-plan__row{display:flex; justify-content:space-between; padding:13px 16px; border-top:1px solid var(--line); font-size:14px}
.q-plan__row:first-child{border-top:0}
.q-plan__row b{color:var(--teal-lite)}
.q-plan__soon{background:rgba(246,196,83,.12); border:1px solid rgba(246,196,83,.28); color:var(--warn); border-radius:12px; padding:12px 16px; font-size:13px; margin-bottom:18px}
.q-plan__soon p{margin:0}

/* QR probar + campos de documento */
.q-show__side a{text-decoration:none}
.q-show__test{display:inline-block; color:var(--teal-lite); font-weight:600; font-size:13px; margin:10px 0 4px}
.q-show__test:hover{color:var(--crema)}
.q-slot__form{align-items:flex-end}
.q-slot__field{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted)}
.q-slot__hint{font-size:12px; color:var(--muted); margin:8px 0 0; line-height:1.45}
.q-docs-intro{color:var(--muted); font-size:13px; margin:0 0 16px; line-height:1.5}
.q-slot__warn{background:rgba(245,137,91,.14); border:1px solid rgba(245,137,91,.32); color:var(--coral); border-radius:10px; padding:9px 12px; margin-bottom:10px; font-size:13px; line-height:1.45}
.q-slot__warn p{margin:2px 0}
.q-slot__ok{background:rgba(22,194,182,.14); border:1px solid rgba(22,194,182,.3); color:var(--teal-lite); border-radius:10px; padding:9px 12px; margin-bottom:10px; font-size:13px}
.q-ocr-status{font-size:12px; color:var(--teal-lite); margin:6px 0 0}
.q-auto{color:var(--teal-lite); font-size:11px; font-weight:600}

/* Confirmación de borrado (spotlight de marca, no confirm() nativo) */
.q-confirm{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px}
.q-confirm[hidden]{display:none}
.q-confirm__box{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; max-width:400px; text-align:center}
.q-confirm__box h3{font-family:Unbounded,sans-serif; margin:0 0 10px; font-size:18px}
.q-confirm__box p{color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 20px}
.q-confirm__actions{display:flex; gap:10px; justify-content:center}
.q-del-btn{color:var(--coral)}

/* Mensajes = SPOTLIGHT (regla del usuario: TODO mensaje va como modal centrado, nunca banner ni alert() nativo) */
.q-msg{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px}
.q-msg__box{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 28px; max-width:430px; box-shadow:0 30px 70px rgba(0,0,0,.5)}
.q-msg__item{display:flex; gap:12px; align-items:flex-start; margin-bottom:16px}
.q-msg__item p{margin:0; font-size:15px; line-height:1.5; color:var(--crema)}
.q-msg__icon{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-weight:700}
.q-msg__item--ok .q-msg__icon{background:rgba(22,194,182,.2); color:var(--teal-lite)}
.q-msg__item--bad .q-msg__icon{background:rgba(245,137,91,.2); color:var(--coral)}
.q-msg__box .q-btn{width:100%; justify-content:center}

/* Auto-deslogueo por inactividad (spotlight) */
.q-timeout{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:210; padding:20px}
.q-timeout[hidden]{display:none}
.q-timeout__box{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 28px; max-width:400px; width:100%; box-shadow:0 30px 70px rgba(0,0,0,.5); text-align:center}
.q-timeout__head{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px}
.q-timeout__icon{font-size:24px}
.q-timeout__title{margin:0; font-family:'Unbounded',sans-serif; font-weight:600; font-size:19px; color:var(--crema)}
.q-timeout__txt{margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--muted)}
.q-timeout__txt b{color:var(--crema); font-variant-numeric:tabular-nums}
.q-timeout__actions{display:flex; gap:10px}
.q-timeout__actions .q-btn{flex:1; justify-content:center}

/* QR ampliable (spotlight): pinchar el QR lo agranda y ofrece copiar/abrir */
.q-qr-btn{border:0; background:none; padding:0; margin:0; cursor:zoom-in; display:block; width:100%}
.q-qr-btn:focus-visible{outline:2px solid var(--teal-lite); outline-offset:3px; border-radius:14px}
.q-qrbig{max-width:360px}
.q-qrbig__img{width:100%; max-width:300px; height:auto; border-radius:12px; background:#fff; padding:10px; display:block; margin:0 auto 12px}
.q-qrbig__url{font-size:12px; color:var(--muted); word-break:break-all; margin:0 0 18px}
.q-qrbig__actions{flex-wrap:wrap}
.q-qrbig__close{display:block; margin:14px auto 0}

/* Dropzone moderno (arrastrar y soltar) para subir archivos */
.q-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; width:100%;
  border:2px dashed var(--line); border-radius:12px; padding:22px 16px; cursor:pointer; background:rgba(0,0,0,.14);
  transition:border-color .15s, background .15s}
.q-drop:hover,.q-drop.drag{border-color:var(--teal); background:rgba(22,194,182,.08)}
.q-drop.has-file{border-color:var(--teal); border-style:solid; background:rgba(22,194,182,.06)}
.q-drop__input{display:none}
.q-drop__icon{width:30px; height:30px; color:var(--teal-lite); margin-bottom:2px}
.q-drop__title{font-weight:600; font-size:14px; color:var(--crema)}
.q-drop__sub{font-size:12px; color:var(--muted); word-break:break-word; max-width:100%}
.q-drop.has-file .q-drop__sub{color:var(--teal-lite); font-weight:600}
.q-spin{width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--teal); border-radius:50%; margin:0 auto; animation:qspin .8s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}

/* CAJA ÚNICA de subida (lectura con visión: identifica y reparte los documentos solos) */
.q-import{background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  border-radius:16px; padding:20px 22px; margin-bottom:18px}
.q-import__head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.q-import__head form{margin:0; flex:none}
.q-import__wipe{display:inline-flex; align-items:center; gap:6px; background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; padding:6px 11px; font-size:12px; font-weight:600;
  color:var(--muted); font-family:inherit; transition:color .15s, border-color .15s, background .15s}
.q-import__wipe:hover{color:var(--coral); border-color:rgba(245,137,91,.45); background:rgba(245,137,91,.08)}
.q-import__wipe svg{display:block; flex:none}
@media (max-width:520px){ .q-import__wipe span{display:none} }
.q-import__t{font-family:Unbounded,sans-serif; font-weight:600; font-size:17px; margin:0 0 6px; color:var(--crema)}
.q-import__s{margin:0 0 16px; color:var(--muted); font-size:13.5px; line-height:1.55}
.q-import__s b{color:var(--crema)}
.q-import__form{display:flex; flex-direction:column; gap:12px}
.q-import__go{align-self:flex-start}
.q-import__go:disabled{opacity:.45; cursor:not-allowed}
.q-import__hint{margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.5}

.q-slot__vacio{margin:2px 0 0; color:var(--muted); font-size:13px; line-height:1.55}
.q-slot__vacio b{color:var(--crema)}

/* Documento SUBIDO: preview + info (reemplaza al formulario) */
.q-doc{display:flex; gap:14px; align-items:flex-start; margin-bottom:6px}
.q-doc__prev{flex:0 0 auto; display:block; width:96px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#fff}
.q-doc__prev img{width:96px; height:96px; object-fit:cover; display:block}
.q-doc__pdf{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:96px; height:96px; color:var(--teal-lite); font-size:12px; font-weight:600; text-align:center; background:rgba(22,194,182,.1)}
.q-doc__pdficon{font-family:Unbounded,sans-serif; font-weight:800; font-size:16px; color:var(--coral)}
.q-doc__meta{flex:1; min-width:0}
.q-doc__venc{font-size:14px; margin:0 0 8px; color:var(--teal-lite)}
.q-doc__venc.is-bad{color:var(--coral)}
.q-doc__venc.q-muted{color:var(--muted)}
.q-fecha{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.q-doc__actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.q-doc__actions form{display:inline}
.q-linkbtn2{background:none; border:none; color:var(--teal-lite); font-size:13px; font-weight:600; cursor:pointer; padding:0; font-family:inherit}
.q-linkbtn2:hover{text-decoration:underline}

/* Documento subido: previsualización a TODO EL ANCHO + spotlight a tamaño completo */
.q-doc-prev{display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; cursor:zoom-in}
.q-doc-prev img{width:100%; max-height:280px; object-fit:contain; display:block; background:#fff}
.q-doc-prev__ph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; height:150px; color:var(--teal-lite); font-size:13px; font-weight:600; background:rgba(22,194,182,.10)}
.q-doc-prev__ph[hidden]{display:none}
.q-doc-wrap{position:relative}
.q-doc-wrap .q-del-form{position:absolute; top:8px; right:8px; z-index:2; margin:0; padding:0}
.q-doc-del{opacity:.5; display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; padding:0; transition:opacity .15s, background .15s}
.q-doc-del:hover, .q-doc-del:focus-visible{opacity:1; background:var(--coral)}
.q-doc-del svg{display:block}
.q-fecha-card{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px}
.q-fecha-card__lbl{flex:1 1 100%; font-size:13px; color:var(--warn); font-weight:500}
.q-fecha-fix{margin-top:10px}
.q-fecha-fix summary{font-size:12px; color:var(--muted); cursor:pointer; list-style:none; display:inline-block}
.q-fecha-fix summary::-webkit-details-marker{display:none}
.q-fecha-fix summary:hover{color:var(--teal-lite)}
.q-fecha-fix[open] summary{margin-bottom:8px; color:var(--teal-lite)}
.q-fecha-fix .q-fecha-card{margin-top:0}
.q-docbig{max-width:min(1200px, 94vw); padding:14px}
.q-docbig__frame{width:100%; height:88vh; border:0; border-radius:12px; background:#fff}
.q-docbig__img{width:100%; max-height:88vh; object-fit:contain; border-radius:12px; display:block; margin:0 auto; background:#fff}
.q-docbig__ph{display:flex; align-items:center; justify-content:center; height:160px; background:rgba(22,194,182,.10); border-radius:12px; margin:0 0 14px}
.q-docbig .q-doc__venc{margin:0 0 8px}
.q-docbig .q-fecha{justify-content:center; margin:0 0 12px}
.q-docbig__actions{justify-content:center; margin-top:4px}
.q-muted{color:var(--muted)}

/* ── CÁMARA CON MARCO GUÍA (subida de documentos) ─────────────────────────────
   Pantalla completa sobre todo lo demás. El marco lleva proporción CARTA vertical y se
   dibuja "recortando" la oscuridad con un box-shadow gigante: así el interior queda nítido
   y el exterior atenuado, sin tapar el vídeo. */
.q-cam{position:fixed; inset:0; z-index:9995; background:#000; display:grid; place-items:center}
/* Encima de los botones flotantes de ayuda (.q-fab, z-index 9990), que si no tapaban el botón
   de la linterna. Los FAB se ocultan además desde el JS al abrir la cámara. */
#qCamMsg{z-index:9999}   /* el aviso de la cámara tiene que quedar POR ENCIMA de la cámara */
.q-cam[hidden]{display:none}
.q-cam__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000}
.q-cam__marco{position:relative; border-radius:14px; box-shadow:0 0 0 100vmax rgba(4,20,22,.62);
  outline:2px solid rgba(22,194,182,.9); outline-offset:-2px}
.q-cam__esq{position:absolute; width:26px; height:26px; border:3px solid var(--teal)}
.q-cam__esq--tl{top:-3px; left:-3px;  border-right:0; border-bottom:0; border-radius:12px 0 0 0}
.q-cam__esq--tr{top:-3px; right:-3px; border-left:0;  border-bottom:0; border-radius:0 12px 0 0}
.q-cam__esq--bl{bottom:-3px; left:-3px;  border-right:0; border-top:0; border-radius:0 0 0 12px}
.q-cam__esq--br{bottom:-3px; right:-3px; border-left:0;  border-top:0; border-radius:0 0 12px 0}
.q-cam__ayuda{position:absolute; top:calc(env(safe-area-inset-top, 0px) + 18px); left:16px; right:16px;
  margin:0; text-align:center; color:var(--crema); font-size:13.5px; line-height:1.5;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}
.q-cam__ayuda b{color:var(--teal-lite)}
.q-cam__barra{position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 26px}
.q-cam__btn{background:rgba(10,40,44,.72); border:1px solid var(--line); color:var(--crema);
  border-radius:999px; padding:10px 16px; font-size:13px; font-weight:600; font-family:inherit;
  cursor:pointer; min-width:86px}
.q-cam__btn.is-on{background:var(--teal); color:var(--on-teal); border-color:var(--teal)}
.q-cam__disparo{width:72px; height:72px; border-radius:50%; border:4px solid rgba(255,255,255,.92);
  background:transparent; cursor:pointer; display:grid; place-items:center; padding:0; flex:none}
.q-cam__disparo span{width:56px; height:56px; border-radius:50%; background:#fff; display:block;
  transition:transform .1s}
.q-cam__disparo:active span{transform:scale(.88)}
.q-import__acciones{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.q-import__cam{display:inline-flex; align-items:center; gap:8px}
.q-import__cam[hidden]{display:none}

/* ── MENÚ HAMBURGUESA (teléfono) ──────────────────────────────────────────────
   Con sesión iniciada el header lleva cuatro elementos (dos enlaces, el nombre de la cuenta y
   Salir) y en el teléfono no caben: se plegaba mal. Bajo 760 px se esconden tras el botón y se
   despliegan como panel a todo el ancho. En escritorio no cambia nada. */
.q-burger{display:flex; background:transparent; border:1px solid var(--line); border-radius:10px;
  padding:9px 10px; cursor:pointer; flex-direction:column; gap:4px; width:42px; align-items:center}
.q-burger span{display:block; width:18px; height:2px; background:var(--crema); border-radius:2px;
  transition:transform .18s, opacity .18s}
.q-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.q-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.q-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* El menú va plegado SIEMPRE, también en escritorio (decisión del usuario 2026-07-23): el header
   queda limpio y el comportamiento es el mismo en teléfono y computador. En escritorio el panel
   no ocupa todo el ancho, se ancla a la derecha como un desplegable. */
.q-nav__inner{position:relative}
.q-nav__right--menu{
    position:absolute; top:calc(100% + 8px); right:16px; left:auto; width:min(260px, calc(100vw - 32px));
    z-index:25; display:none; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(9,34,39,.98); backdrop-filter:blur(10px);
    border:1px solid var(--line); border-radius:14px; padding:6px 0 8px; overflow:hidden;
    box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.q-nav__right--menu.is-open{display:flex}
.q-nav__right--menu > *{width:100%}
.q-nav__right--menu .q-nav__link{padding:12px 18px; font-size:14.5px; color:var(--crema); display:block}
.q-nav__right--menu .q-nav__link:hover{background:rgba(22,194,182,.10)}
.q-nav__right--menu .q-nav__acct{background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:10px 18px 11px; color:var(--muted); font-size:12px;
  text-transform:uppercase; letter-spacing:.08em}
.q-nav__right--menu form{margin:0; padding:8px 14px 0}
.q-nav__right--menu .q-nav__logout,
.q-nav__right--menu .q-btn{width:100%; justify-content:center}

@media (max-width:760px){
  /* En teléfono el desplegable pasa a ocupar todo el ancho, pegado bajo el header. */
  .q-nav__inner{padding:12px 16px}
  .q-nav__right--menu{
    top:100%; left:0; right:0; width:auto;
    border-radius:0; border-left:0; border-right:0; border-top:0;
    padding:6px 0 10px; box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .q-nav__right--menu .q-nav__link{padding:13px 20px; font-size:15px}
  .q-nav__right--menu .q-nav__acct{padding:10px 20px 12px; font-size:12.5px}
  .q-nav__right--menu form{padding:8px 20px 0}
}

/* ── LA TARJETA (vista pública / fiscalización) ───────────────────────────────
   Se abre delante de un fiscalizador: portada con el nombre integrado y TODOS los documentos
   desplegados, sin nada que haya que tocar. */
.q-tarjeta__portada{position:relative; border-radius:18px; overflow:hidden; margin-bottom:20px;
  aspect-ratio:16/9; background:linear-gradient(135deg,var(--surface-2),var(--grafito-deep));
  border:1px solid var(--line); display:flex; align-items:flex-end}
.q-tarjeta__foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
/* Velo inferior: el nombre se lee sobre cualquier foto, clara u oscura. */
.q-tarjeta__velo{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,20,22,0) 38%, rgba(4,20,22,.55) 68%, rgba(4,20,22,.92) 100%)}
.q-tarjeta__portada--vacia .q-tarjeta__velo{background:linear-gradient(180deg, rgba(4,20,22,0) 40%, rgba(4,20,22,.55) 100%)}
.q-tarjeta__ident{position:relative; padding:20px 22px; width:100%}
.q-tarjeta__nombre{font-family:Unbounded,sans-serif; font-weight:700; font-size:clamp(22px,6vw,32px);
  margin:0 0 10px; color:#fff; line-height:1.1; text-shadow:0 3px 18px rgba(0,0,0,.75)}
.q-tarjeta__datos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.q-plate--card{font-size:15px; padding:5px 12px}
.q-tarjeta__meta{font-size:12.5px; color:rgba(234,247,246,.86); text-shadow:0 2px 10px rgba(0,0,0,.8)}

.q-tarjeta__docs{display:flex; flex-direction:column; gap:14px}
.q-tdoc{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 14px 12px}
.q-tdoc--falta{background:transparent; border-style:dashed}
.q-tdoc__head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; row-gap:6px}
.q-tdoc__name{font-family:Unbounded,sans-serif; font-weight:600; font-size:14px; color:var(--crema); min-width:0}
.q-tdoc__venc{margin:8px 0 0; font-size:12.5px; color:var(--muted)}
.q-tdoc__venc strong{color:var(--crema)}
/* Marco del documento: fondo blanco (es papel) y sin recortar nada del contenido. */
.q-tdoc__marco{display:block; margin-top:11px; border-radius:11px; overflow:hidden;
  background:#fff; border:1px solid rgba(0,0,0,.16); box-shadow:0 10px 26px rgba(0,0,0,.28)}
.q-tdoc__marco img{width:100%; height:auto; display:block}
.q-tdoc__pdf{display:inline-flex; align-items:center; gap:9px; margin-top:11px; padding:11px 15px;
  border-radius:11px; background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; font-weight:600}
.q-tdoc__pdficon{background:var(--coral); color:var(--on-teal); font-size:10px; font-weight:800;
  padding:3px 6px; border-radius:5px; letter-spacing:.04em}
.q-tdoc__missing{margin:10px 0 2px; font-size:13px; color:var(--muted)}
.q-tarjeta__offline{display:flex; justify-content:center; align-items:center; gap:8px;
  margin:22px auto 0; max-width:360px}

/* ── PORTADA: subirla desde la ficha del vehículo ─────────────────────────────── */
.q-portada{margin:16px 0 4px; text-align:left}
.q-portada__prev{position:relative; border-radius:12px; overflow:hidden; margin-bottom:10px; border:1px solid var(--line)}
.q-portada__prev img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.q-portada__nombre{position:absolute; left:10px; bottom:8px; font-family:Unbounded,sans-serif;
  font-weight:600; font-size:13px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.85)}
.q-portada__del{position:absolute; top:7px; right:7px; background:rgba(8,26,29,.78); color:var(--crema);
  border:1px solid var(--line); border-radius:9px; padding:5px 7px; cursor:pointer; display:grid; place-items:center}
.q-portada__del:hover{color:var(--coral); border-color:rgba(245,137,91,.5)}
.q-portada__prev .q-del-form{position:absolute; top:0; right:0; margin:0}
.q-drop--sm{padding:16px 12px; gap:3px}
.q-drop--sm .q-drop__icon{width:22px; height:22px}
.q-drop--sm .q-drop__title{font-size:13px}
.q-portada__acciones{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.q-portada__acciones .q-btn{flex:1 1 auto}

/* ── CARRUSEL CILINDRO (hero de la landing) ───────────────────────────────────
   Los cinco pases van montados en las caras de un cilindro vertical. El giro lo manda el
   scroll de la página; en reposo deriva solo, muy despacio, para que no se vea muerto.
   Sin flechas ni puntos: el usuario pidió que solo se viera el efecto. */
.q-cil{
  /* `--cara-w` se hereda de `.q-pin`. */
  --radio: calc(var(--cara-w) * 1.32);      /* radio del cilindro */
  /* Alto justo: el pase mide 2,28 de alto por 1 de ancho; el resto era aire de sobra. */
  --giro: 0deg;
  position:relative; width:100%; height:calc(var(--cara-w) * 2.32);
  /* Cuanto MÁS lejos la cámara, menos deformación: con 1100px los pases se veían
     estirados. El punto de fuga va centrado, que si no las caras se sesgan. */
  perspective:1900px; perspective-origin:50% 50%;
}
.q-cil__eje{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(calc(var(--radio) * -1)) rotateY(var(--giro));
  will-change:transform;
}
.q-cil__cara{
  position:absolute; top:50%; left:50%; width:var(--cara-w);
  margin:calc(var(--cara-w) * -1.14) 0 0 calc(var(--cara-w) / -2);
  /* 5 caras → 72° entre una y otra */
  transform:rotateY(calc(72deg * var(--i))) translateZ(var(--radio));
  transition:opacity .25s linear;
  /* Los pases que quedan al fondo miran hacia afuera: sin esto se verían POR DETRÁS, con el
     texto en espejo. Ocultando la cara trasera desaparecen y solo se ven los que dan la cara. */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.q-cil__cara img{
  width:100%; height:auto; display:block; border-radius:12px;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
}
/* Quien prefiera menos movimiento ve el cilindro quieto, sin deriva ni giro por scroll. */
@media (prefers-reduced-motion: reduce){
  .q-cil__eje{transition:none !important}
}
@media (max-width:760px){
  .q-pin{--cara-w:clamp(140px, 44vw, 200px)}
  .q-cil{perspective:1200px}
  .q-pin__fijo{min-height:auto}   /* en el teléfono el hero se apila: no aplica el cálculo */
}

/* ── ANCLADO DEL HERO (el carrusel se lleva el scroll primero) ────────────────
   El contenedor mide una pantalla MÁS `--vuelta`. El hijo va pegajoso, así que mientras se
   recorre ese sobrante el hero se queda quieto y el scroll se gasta en girar el cilindro una
   vuelta completa; al terminar, la página sigue bajando con normalidad. */
/* El contenedor de la página trae relleno superior; con él, el hero se corre esos píxeles antes
   de que el anclado tome y parece que «salta» al primer scroll. En la landing se anula, así el
   hero queda anclado desde el píxel cero. */
.q-shell:has(> .q-pin){ padding-top:0 }
.q-pin{ --vuelta: 1100px;
  /* El tamaño del pase vive AQUÍ (no en .q-cil) para que el bloque anclado pueda calcular su
     alto a partir de él y el aire de arriba y abajo se mantenga parejo aunque cambie el tamaño. */
  --cara-w: clamp(132px, min(calc((100vh - var(--barra-sup) - var(--barra-inf) - 40px) / 2.32), 22vw), 268px);
  position:relative;
  /* ⚠️ ALTURA EXPLÍCITA, no `padding-bottom`: el rango en que un elemento `sticky` puede pegarse
     lo marca la caja de CONTENIDO del padre, no la de relleno. Con padding-bottom el contenido
     medía exactamente lo mismo que el hijo → rango cero → el hero no se anclaba (2026-07-23). */
  height:calc(100vh - var(--barra-sup) - var(--barra-inf) + var(--vuelta)) }
.q-pin__fijo{
  position:sticky; top:var(--barra-sup);
  /* El bloque anclado se ajusta al alto del hero dejando un aire parejo (`--aire`) arriba y
     abajo. Se toca SOLO este número para apretar o soltar el hueco: el tamaño de los pases lo
     manda `--cara-w` y no depende de esto. */
  --aire: 22px;
  /* ⚠️ TIENE que cubrir la ventana entera. Si el bloque anclado es más BAJO que la ventana, por
     el hueco de abajo asoma la sección siguiente durante los últimos píxeles del giro y parece
     que se «mete por debajo» (reporte del usuario 2026-07-23). Con el alto completo, mientras
     el hero está anclado no puede verse nada más. */
  min-height:calc(100vh - var(--barra-sup) - var(--barra-inf));
  display:flex; align-items:center;
  padding:var(--aire) 0;
}
.q-pin__fijo > .q-land-hero{ width:100%; padding:0 }
@media (max-width:760px){
  /* En el teléfono, una vuelta más corta: retener el scroll mucho rato se siente atascado. */
  .q-pin{ --vuelta:620px }
}
/* Sin anclado para quien pidió menos movimiento: la página baja normal desde el primer scroll. */
@media (prefers-reduced-motion: reduce){
  .q-pin{ padding-bottom:0 }
  .q-pin__fijo{ position:static; min-height:0 }
}

/* ── SELECTOR DE PLANES (landing) ─────────────────────────────────────────────
   Cuatro tramos: dos de autoservicio (van al checkout) y dos de flota (van a cotización).
   Ver `Plan::TODOS` — los precios y rangos viven ahí, no aquí. */
.q-planes{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; align-items:stretch; margin-bottom:22px}
.q-plan-card{position:relative; display:flex; flex-direction:column; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 20px 20px}
.q-plan-card--top{border-color:rgba(245,137,91,.55); background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.q-plan-card__cinta{position:absolute; top:-11px; left:20px; background:var(--coral); color:var(--on-teal);
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.01em}
.q-plan-card__nombre{font-family:Unbounded,sans-serif; font-weight:600; font-size:17px; margin:0 0 2px; color:var(--crema)}
.q-plan-card__rango{margin:0 0 14px; font-size:12.5px; color:var(--muted)}
.q-plan-card__precio{margin:0 0 14px; display:flex; flex-direction:column; gap:1px; line-height:1.15}
.q-plan-card__desde{font-size:11.5px; color:var(--muted)}
.q-plan-card__precio strong{font-family:Unbounded,sans-serif; font-weight:700; font-size:26px; color:var(--teal-lite)}
.q-plan-card__unidad{font-size:11.5px; color:var(--muted)}
.q-plan-card__gancho{margin:0 0 12px; font-size:13px; line-height:1.5; color:var(--crema)}
.q-plan-card__lista{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:7px}
.q-plan-card__lista li{position:relative; padding-left:19px; font-size:12.5px; color:var(--muted); line-height:1.45}
.q-plan-card__lista li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--teal); font-weight:700}
.q-plan-card__cta{margin-top:auto; width:100%; justify-content:center}
.q-planes__pie{text-align:center; font-size:13px; color:var(--muted); margin:0}
.q-planes__pie a{color:var(--teal-lite); text-decoration:underline; text-underline-offset:3px}

@media (max-width:980px){ .q-planes{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:560px){ .q-planes{grid-template-columns:1fr} }

/* ── PÁGINAS LEGALES (términos y privacidad) ─────────────────────────────────── */
.q-legal{max-width:760px; margin:0 auto; padding:6px 0 40px; line-height:1.7; color:#c3dedd}
.q-legal__h1{font-family:Unbounded,sans-serif; font-weight:700; font-size:clamp(24px,5vw,32px); color:var(--crema); margin:0 0 4px}
.q-legal__fecha{font-size:12.5px; color:var(--muted); margin:0 0 26px}
.q-legal h2{font-family:Unbounded,sans-serif; font-weight:600; font-size:17px; color:var(--crema); margin:30px 0 8px}
.q-legal p{margin:0 0 12px; font-size:14.5px}
.q-legal b{color:var(--crema); font-weight:600}
.q-legal a{color:var(--teal-lite); text-decoration:underline; text-underline-offset:3px}
.q-legal ul{margin:0 0 12px; padding-left:20px; font-size:14.5px}
.q-legal li{margin-bottom:6px}
.q-legal small{color:var(--muted); font-size:12px}
.q-legal__tabla{margin:12px 0 16px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.q-legal__fila{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:11px 15px; font-size:13.5px; border-top:1px solid var(--line)}
.q-legal__fila:first-child{border-top:0}
.q-legal__fila b{white-space:nowrap; color:var(--teal-lite)}
/* Enlaces legales en los pies */
.q-foot__legal{display:inline-flex; gap:7px; align-items:center; margin-left:10px}
.q-foot__legal a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.q-foot__legal a:hover{color:var(--crema)}
.q-pub-foot .q-foot__legal{margin-left:0; margin-top:2px; font-size:11.5px}

/* ── CONSENTIMIENTOS SEPARADOS (checkout) ────────────────────────────────────── */
.q-consent__h2{font-family:Unbounded,sans-serif; font-weight:600; font-size:15px; color:var(--crema); margin:26px 0 10px}
.q-consent{display:flex; flex-direction:column; gap:2px; margin-bottom:18px}
.q-consent__fila{display:flex; align-items:flex-start; gap:10px; padding:12px 13px; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-2); flex-wrap:wrap}
.q-consent__fila:hover{border-color:rgba(22,194,182,.35)}
.q-consent__check{margin:2px 0 0; width:17px; height:17px; flex:none; accent-color:var(--teal); cursor:pointer}
.q-consent__txt{flex:1 1 200px; font-size:13.5px; line-height:1.5; color:var(--crema); min-width:0}
.q-consent__req,.q-consent__opt{display:inline-block; margin-left:6px; font-size:10.5px; font-weight:600;
  padding:2px 7px; border-radius:999px; vertical-align:1px}
.q-consent__req{background:rgba(245,137,91,.16); color:var(--coral)}
.q-consent__opt{background:rgba(22,194,182,.14); color:var(--teal-lite)}
.q-consent__info{background:transparent; border:0; color:var(--teal-lite); font-size:12px; font-family:inherit;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:2px 0; flex:none}
.q-consent__box{max-width:520px; text-align:left}
.q-consent__box h3{text-align:left}
.q-consent__cita{margin:0 0 12px; padding:12px 14px; border-left:3px solid var(--teal);
  background:rgba(22,194,182,.07); border-radius:0 10px 10px 0; font-size:13.5px; line-height:1.6; color:var(--crema)}
.q-consent__nota{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 12px}
.q-consent__enlaces{font-size:12.5px; margin:0 0 4px}
.q-consent__enlaces a{color:var(--teal-lite); text-decoration:underline; text-underline-offset:3px}

/* ── CHECKOUT ────────────────────────────────────────────────────────────────── */
.q-checkout{display:flex; flex-direction:column}
.q-checkout__ayuda{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 14px}
.q-field{display:flex; flex-direction:column; gap:5px; margin-bottom:13px}
.q-field > span{font-size:12.5px; color:var(--muted)}
.q-field small{font-size:11.5px; color:var(--muted)}
.q-plan__aviso{background:rgba(245,137,91,.12); border:1px solid rgba(245,137,91,.4);
  border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.55; color:var(--crema); margin:18px 0 4px}
.q-plan__aviso b{color:var(--coral)}

/* ── CREAR CUENTA EN EL CHECKOUT: campos a la izquierda, Google/Apple a la derecha ──────
   Los proveedores vuelven a ESTA misma pantalla con la cuenta creada, porque los
   consentimientos y el pago siguen pendientes aquí. */
.q-cuenta{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; margin-bottom:4px}
.q-cuenta__campos{display:flex; flex-direction:column}
/* El borde superior del primer campo alinea con el del botón de Google: ninguna de las dos
   columnas lleva nada encima que las desnivele. */
.q-cuenta__campos .q-field:first-child{margin-top:0}
.q-cuenta__campos .q-field:first-child > span{margin-top:0}
.q-cuenta__campos .q-field:last-child{margin-bottom:0}
.q-cuenta__oauth{display:flex; flex-direction:column; gap:9px;
  /* El primer input arranca DEBAJO de su rótulo «Tu nombre» (~21px: la línea del rótulo + el gap
     del campo). Se baja esta columna lo mismo para que el borde superior del botón de Google
     calce con el borde superior del CAMPO nombre, no con su rótulo. */
  padding-top:21px}
/* «o crea tu cuenta con» va DEBAJO de los botones, no encima. */
.q-cuenta__o{font-size:12px; color:var(--muted); text-align:center; margin-top:4px}
.q-cuenta__nota{font-size:11.5px; color:var(--muted); line-height:1.5; margin:3px 0 0; text-align:center}
/* Los botones de proveedor viven en el login; aquí se reusan sus clases con estilo propio. */
.q-cuenta__oauth .q-oauthbtn{display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 16px; border-radius:11px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600}
.q-cuenta__oauth .q-oauthbtn svg{width:18px; height:18px; flex:none}
.q-cuenta__oauth .q-oauthbtn--google{background:#fff; color:#1f1f1f; border-color:#dadce0}
.q-cuenta__oauth .q-oauthbtn--apple{background:#000; color:#fff}
.q-cuenta__oauth .q-oauthbtn:hover{filter:brightness(1.06)}
@media (max-width:620px){
  .q-cuenta{grid-template-columns:1fr; gap:14px}
  .q-cuenta__oauth{padding-top:2px}
}

/* ── AGREGAR A PANTALLA DE INICIO (capa 3) ────────────────────────────────────── */
.q-inst{position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  max-width:440px; margin:0 auto; z-index:60; display:flex; gap:13px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:15px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.q-inst[hidden]{display:none}
.q-inst__x{position:absolute; top:9px; right:11px; background:transparent; border:0; color:var(--muted);
  font-size:15px; cursor:pointer; line-height:1}
.q-inst__ico img{border-radius:11px; display:block; flex:none}
.q-inst__t{font-family:Unbounded,sans-serif; font-weight:600; font-size:14px; color:var(--crema); margin:0 0 4px; padding-right:14px}
.q-inst__s{font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 10px}
.q-inst__pasos{margin:2px 0 0; padding-left:18px; font-size:12.5px; color:var(--crema); line-height:1.6}
.q-inst__pasos b{color:var(--teal-lite)}
.q-inst__share{display:inline-block; width:11px; height:14px; vertical-align:-2px; margin:0 1px;
  border:1.5px solid var(--teal-lite); border-radius:2px; border-top:0; position:relative}
.q-inst__share::before{content:""; position:absolute; left:50%; top:-6px; width:1.5px; height:8px;
  background:var(--teal-lite); transform:translateX(-50%)}
.q-inst__share::after{content:""; position:absolute; left:50%; top:-6px; width:6px; height:6px;
  border-top:1.5px solid var(--teal-lite); border-right:1.5px solid var(--teal-lite);
  transform:translateX(-50%) rotate(-45deg)}

/* Acceso a la tarjeta pública desde la ficha del dueño (es la que se agrega a inicio). */
.q-vermitarjeta{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:14px; padding:10px 14px; border-radius:11px; font-size:13.5px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--line); color:var(--crema)}
.q-vermitarjeta:hover{border-color:rgba(22,194,182,.45); color:var(--teal-lite)}
.q-inst__estado{font-size:11.5px; color:var(--muted); margin:0 0 8px; line-height:1.45}
.q-inst__estado--ok{color:var(--teal-lite); font-weight:600}
.q-inst__estado--mal{color:var(--coral)}

/* Guardado sin señal (landing): mismo lenguaje que el resto — cabecera centrada + tarjetas. */
.q-land-offline{padding:34px 0 24px}
.q-land-offline__head{text-align:center}
.q-land-offline__head .q-land-badge{margin-bottom:12px}
.q-land-offline .q-land-step h3{font-family:Unbounded,sans-serif; font-size:16px; margin:0 0 8px}
.q-land-offline .q-land-step p{margin:0; font-size:13.5px; line-height:1.6; color:var(--muted)}
.q-land-offline .q-land-step b{color:var(--teal-lite)}
.q-land-nota{font-size:13.5px; line-height:1.65; color:var(--muted); margin:4px 0 0;
  padding:13px 15px; border-left:3px solid var(--teal); background:rgba(22,194,182,.07);
  border-radius:0 10px 10px 0}
.q-land-nota b{color:var(--crema)}

/* Sello de validez legal (hero) + nota de confianza bajo «Cómo funciona». */
.q-land-badge--sello{background:rgba(245,137,91,.14); color:var(--coral); margin-left:8px}
.q-land-nota--legal{max-width:760px; margin:22px auto 0}
.q-land-nota--legal a{color:var(--teal-lite); text-decoration:underline; text-underline-offset:3px; font-weight:600}
@media (max-width:560px){ .q-land-badge--sello{margin-left:0} }