/* 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) */ } /* ───────────────────────────────────────────────────────────────────────────── ESCALA DE CAPAS (z-index) — 2026-08-04. Antes había 19 valores distintos repartidos en 8 archivos, con saltos de 3000 a 99999. Nadie podía saber qué tapaba a qué sin abrirlos todos, y ya había pasado: el aviso de la cámara quedaba DEBAJO del velo negro y el usuario veía la pantalla congelada sin explicación. ⛔ REGLA: ningún z-index nuevo con número suelto. Se usa uno de estos siete, y si hace falta uno más, se agrega AQUÍ con su nombre y su motivo. ───────────────────────────────────────────────────────────────────────────── */ :root{ --z-base: 0; /* contenido normal */ --z-sticky: 100; /* barra superior, encabezados pegados */ --z-dropdown: 200; /* menús, tooltips */ --z-overlay: 800; /* velos que oscurecen el fondo */ --z-spotlight: 900; /* TODOS los modales de la casa */ --z-camera: 950; /* la cámara a pantalla completa */ --z-critical: 990; /* lo que TIENE que verse sobre la cámara (avisos de error) */ } *{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 /* local del componente: no compite con la escala global */; 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:16px; overflow:hidden; display:flex; flex-direction:column} /* ── LA PORTADA ENCABEZA LA TARJETA DEL LISTADO (2026-08-06) ──────────────────────────────── Antes iba el QR, y todos los QR se parecen: con dos o más autos no se distinguían de un vistazo. Mismo 16:9 y misma foto a `cover` que `.q-tarjeta__portada` de la tarjeta pública — es el mismo objeto en otra pantalla, así que se ve igual. */ .q-card__portada{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,var(--surface-2),var(--grafito-deep)); border-bottom:1px solid var(--line)} .q-card__foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block} /* Sin foto NO se deja un hueco gris que parezca un error de carga: el borde punteado y el texto dicen que falta algo Y que se puede arreglar tocando. */ .q-card__portada--vacia{display:grid; place-items:center} .q-card__sinfoto{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:14px 18px; border:1.5px dashed var(--line); border-radius:12px; color:var(--muted)} .q-card__sinfoto b{color:var(--crema); font-size:13px; font-weight:700} .q-card__sinfoto span{font-size:11.5px} .q-card__sinfoto svg{color:var(--teal-lite); margin-bottom:3px} .q-card__portada:hover .q-card__sinfoto{border-color:var(--teal-lite); color:var(--crema)} .q-card__portada:focus-visible{outline:2px solid var(--teal-lite); outline-offset:-2px} .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:12px; font-size:13px} .q-tag{font-size:12px; color:var(--muted); background:var(--surface); padding:4px 9px; border-radius:12px} /* 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:12px} .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:16px} .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 */ /* El pie NO es fijo: aparece al llegar al final del scroll. Antes iba pegado abajo y, en el móvil, dejaba una franja permanente que apretaba el contenido y chocaba con los botones flotantes de ayuda (que se movieron al menú). `margin-top:auto` lo empuja al fondo cuando la página es corta, así no queda flotando a media pantalla. */ .q-foot{text-align:center; color:var(--muted); font-size:13px; padding:20px 0; border-top:1px solid var(--line); background:rgba(11,39,44,.94); margin-top:auto} /* El cuerpo ocupa el alto completo para que el pie caiga abajo aunque haya poco contenido. */ body.q-app{display:flex; flex-direction:column; min-height:100vh} body.q-app > main{flex:1 0 auto} /* 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)} /* el pie ya no es fijo: no hay que reservarle espacio */ /* 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:12px; 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:12px; 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:12px; 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:16px; 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:12px; 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:16px; 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:12px; 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:12px; 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:12px; 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 /* local del componente: no compite con la escala global */; 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:12px; 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:12px; 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:var(--z-sticky); 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:var(--z-dropdown); 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:var(--z-spotlight); 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:16px} .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:12px; 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:12px; 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` (la miniatura única) se retiró el 2026-08-06 al pasar las caras a la fila; queda solo su placeholder, que sigue sirviendo para la cara no previsualizable (PDF o archivo dañado). */ .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:12px; 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} /* ── EL DOCUMENTO COMPLETO: SUS DOS CARAS, EN UN SOLO DESPLIEGUE (2026-08-06) ────────────── ⛔ `overflow-y:auto` NO es decorativo, y sin él el requisito falla justo en el teléfono. `.q-confirm` centra su caja con flex y NO tiene scroll (ver la regla de arriba): dos imágenes de `max-height:88vh` apiladas hacen crecer la caja más que la pantalla, y lo que sobresale queda FUERA del viewport, inalcanzable — el fiscalizador vería la cara A y no habría forma de llegar a la B. ⚠️ 42vh por cara para que las DOS quepan a la vez: el dueño pidió ver el documento completo «en un solo despliegue», no una cara y después la otra. El scroll queda de red de seguridad para pantallas bajas o documentos muy verticales. */ /* ⛔ `cursor:pointer` EN EL FONDO, y no es cosmética (2026-08-06). El dueño abrió el QR sin querer en el teléfono y no pudo cerrarlo tocando fuera. La causa: Safari en iOS NO dispara `click` en un elemento no interactivo —un `div` pelado— a menos que tenga `cursor:pointer` o un `onclick` en línea. Todos estos spotlights cierran con `if(e.target === modal)`, así que en iOS el toque fuera simplemente no llegaba. Con esto, el evento se dispara. ⚠️ La caja recupera el cursor normal: lo clicable es el FONDO, no el contenido. */ .q-confirm{cursor:pointer} .q-confirm__box{cursor:auto} /* Salida VISIBLE. Tocar fuera es una salida escondida: quien no la conoce queda atrapado, que es exactamente lo que pasó. Los spotlights informativos —el QR y el visor— no tenían ningún botón. */ .q-modal__x{position:absolute; top:8px; right:10px; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:rgba(19,26,23,.72); color:var(--crema); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center} .q-modal__x:hover{background:rgba(19,26,23,.9)} .q-modal__x:focus-visible{outline:2px solid var(--teal-lite); outline-offset:2px} .q-qrbig, .q-docbig{position:relative} .q-docbig--varias{max-height:88vh; overflow-y:auto} .q-docbig--varias .q-docbig__img{max-height:42vh} .q-docbig--varias .q-docbig__frame{height:42vh} .q-docbig--varias .q-docbig__img + .q-docbig__cara{margin-top:12px} .q-docbig__cara{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-lite); text-align:center} /* ── LAS CARAS, DENTRO DE LA FILA (2026-08-06) ───────────────────────────────────────────── ⛔ Una columna por cara. Antes esto era UNA miniatura y las caras vivían en el spotlight: dos toques por documento, diez para los cinco del auto. En un control eso no se sostiene. ⚠️ `--dos` solo cuando de verdad hay dos: un documento fotografiado ESTIRADO ya trae sus dos mitades en la misma imagen y se muestra ancho, sin partir la rejilla. */ .q-caras{display:grid; gap:9px; grid-template-columns:1fr} .q-caras--dos{grid-template-columns:1fr 1fr} .q-cara{margin:0; display:flex; flex-direction:column; gap:5px; min-width:0} .q-cara__rot{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-lite); text-align:center} .q-cara__btn{display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; cursor:zoom-in} .q-cara__btn img{width:100%; max-height:300px; object-fit:contain; display:block; background:#fff} /* Con dos columnas cada cara es la mitad de ancha: se le baja el techo para que la fila entera quepa de un vistazo, que es justo lo que se está resolviendo. */ .q-caras--dos .q-cara__btn img{max-height:210px} .q-cara__btn--doc{cursor:pointer; text-decoration:none} .q-cara__btn:focus-visible{outline:2px solid var(--teal-lite); outline-offset:2px} /* El icono de eliminar va sobre la IMAGEN, no sobre el rótulo: con dos columnas, «cara B» queda centrado bajo él y se pisarían en pantallas angostas. */ .q-doc-wrap--rotulos .q-del-form{top:30px} .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:var(--z-camera); 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. */ /* ⛔ Era `#qCamMsg`, y NUNCA aplicaba: el id real lleva sufijo (qCamMsg-docs, qCamMsg-portada). Consecuencia real, también en producción: si la cámara fallaba, el aviso quedaba DEBAJO del velo negro y el usuario veía la pantalla congelada sin ninguna explicación. */ [id^="qCamMsg"]{z-index:var(--z-critical)} /* el aviso de la cámara va 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:16px; 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:12px; 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:12px; 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 /* local del componente: no compite con la escala global */; 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:16px; 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:16px; 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%} /* ── Cabecera SOBRIA de la tarjeta de fiscalización (dueño, 2026-08-10) ────────────────────── En el teléfono esta cabecera se veía llena de ruido: nombre grande + patente + marca, modelo, año y color. Se quedan solo el nombre y la patente, abajo y en discreto, porque es lo único que sirve para emparejar la tarjeta con el auto que el fiscalizador tiene delante — la marca y el color los ve mejor mirando el vehículo, y los datos oficiales están dentro de los documentos. El nombre baja de 32 px a 19 px como mucho: sigue siendo legible y deja de competir con la foto, que es lo que identifica el auto de un vistazo. */ .q-tarjeta__ident--sobria{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; opacity:.92} .q-tarjeta__ident--sobria .q-tarjeta__nombre{font-size:clamp(15px,4vw,19px); margin:0} .q-tarjeta__ident--sobria .q-plate--card{font-size:13px; padding:4px 10px} .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:12px; overflow:hidden; position:relative; background:#fff; border:1px solid rgba(0,0,0,.16); box-shadow:0 10px 26px rgba(0,0,0,.28)} /* ⚠️ `max-height` NUEVO (2026-08-06): al pintar las DOS caras, cada tarjeta duplicaba su altura y la página del control pasaba de 5 a 10 imágenes a tamaño completo. La miniatura del panel ya estaba acotada (`.q-doc-prev img{max-height:280px}`); ésta no lo estaba. Se toca para ampliar. */ .q-tdoc__marco img{width:100%; height:auto; max-height:340px; object-fit:contain; display:block} .q-tdoc__cara{position:absolute; left:8px; bottom:8px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; color:var(--crema); background:rgba(19,26,23,.78)} .q-tdoc__pdf{display:inline-flex; align-items:center; gap:9px; margin-top:11px; padding:11px 15px; border-radius:12px; 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:12px; 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)} /* ⛔ EL BOTÓN NO SE POSICIONA SOLO (2026-08-06). Tenía `position:absolute; top:7px; right:7px` DENTRO de un formulario que también es absoluto y está pegado a la esquina (top:0/right:0). El formulario se encoge a su contenido, así que el botón se posicionaba respecto de una caja de tamaño cero en el borde: se salía del marco y se veía cortado. Quien coloca es el FORMULARIO; el botón solo se dibuja. Es el mismo reparto que usa el icono de eliminar documento (`.q-doc-wrap .q-del-form` + `.q-doc-del`), que sí se ve bien. */ .q-portada__prev .q-del-form{position:absolute; top:8px; right:8px; margin:0; z-index:2} .q-portada__del{opacity:.55; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:12px; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; transition:opacity .15s, background .15s} .q-portada__del:hover, .q-portada__del:focus-visible{opacity:1; background:var(--coral)} .q-portada__del svg{display:block} .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:16px; 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 12px 12px 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:12px; 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)} .q-cuenta__oauth .q-oauthbtn--enlace{text-decoration:none; box-sizing:border-box} @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:var(--z-sticky); 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:12px; 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:12px; 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)} /* ⛔ `.q-vermitarjeta` (botón «Ver como la ve la autoridad») se ELIMINÓ el 2026-07-29 por orden del usuario: confundía con «Guardar copia en mi teléfono». El enlace abierto se alcanza desde el QR. */ .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 12px 12px 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} } /* «Tutorial» y «Reportar un problema» viven en el menú: son