@font-face{font-family:"Ubik Helvetica";font-style:normal;font-weight:400;font-display:swap;src:url(fuentes/ubik-400.woff2) format("woff2")}
@font-face{font-family:"Ubik Helvetica";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/ubik-500.woff2) format("woff2")}
@font-face{font-family:"Ubik Helvetica";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/ubik-700.woff2) format("woff2")}
@font-face{font-family:"Ubik Helvetica";font-style:normal;font-weight:800;font-display:swap;src:url(fuentes/ubik-800.woff2) format("woff2")}
/* Layout: en el celular, el mapa arriba, los campos agrupados debajo y el pedido (precio + Pedir UBIK) en una hoja fija
   abajo que se arrastra; en escritorio, campos a la izquierda y, a la derecha, el mapa con la tarjeta del viaje debajo.
   Nada lleva contorno: las cosas se separan por relleno. La página de inicio es de quien pide; chofer y administración van aparte. */
:root{
  color-scheme:light;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  /* Color: blanco y negro como el logo, más un verde para avanzar. Ámbar y rojo solo como punto o aviso de estado. */
  --fondo:#f2f2f2;
  --superficie:#ffffff;
  --superficie-2:#ffffff;
  --relleno:#ebebeb;
  --relleno-2:#dfdfdf;
  --tinta:#0e0e0e;
  --tinta-2:#4e4e4e;
  --tinta-3:#616161;
  --linea:#0e0e0e1f;
  --borde:#858585;
  --boton:#0e0e0e;
  --sobre-boton:#ffffff;
  --acento:#0f7a3d;
  --acento-boton:#2fd16a;
  --sobre-acento:#ffffff;
  --aviso:#b56a00;
  --ambar:#f4bb57;
  --ok-texto:#0b6b34;
  --aviso-texto:#8a5000;
  --mal:#b0261d;
  --sobre-mal:#ffffff;
  --material:#ffffffc4;
  --material-cab:#f2f2f2c9;
  --cabecera:#ffffff;
  --material-luz:#ffffffd9;
  --velo:#0e0e0e59;
  --mapa-tierra:#e9e9e9;
  --mapa-calle:#ffffff;
  --mapa-calle-borde:#d3d3d3;
  --mapa-ruta-nac:#fbe9b9;
  --mapa-verde:#bfe3c6;
  --mapa-pasto:#d5ead8;
  --mapa-agua:#b3d6ec;
  --mapa-gris:#e1e1e1;
  --mapa-edificio:#d7d7d7;
  --mapa-texto:#616161;
  --sombra-1:0 1px 2px rgba(14,14,14,0.05), 0 8px 24px rgba(14,14,14,0.08);
  --sombra-2:0 -6px 32px rgba(14,14,14,0.14);
  --sombra-flota:0 10px 32px rgba(14,14,14,0.18);
  /* Medidas */
  --esp-1:4px;
  --esp-2:8px;
  --esp-3:12px;
  --esp-4:16px;
  --esp-5:20px;
  --esp-6:24px;
  --r-s:8px;
  --r-m:14px;
  --r-l:22px;
  --r-xl:28px;
  --r-pill:999px;
  --alto-control:52px;
  --alto-control-chico:44px;
  --desenfoque:24px;
  /* Tipografía: una sola familia, la de la marca, igual en todos los equipos */
  --font-sans:"Ubik Helvetica", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#0c0c0c;
    --superficie:#181818;
    --superficie-2:#212121;
    --relleno:#272727;
    --relleno-2:#343434;
    --tinta:#f4f4f4;
    --tinta-2:#bcbcbc;
    --tinta-3:#9f9f9f;
    --linea:#f4f4f424;
    --borde:#7a7a7a;
    --boton:#f4f4f4;
    --sobre-boton:#0e0e0e;
    --acento:#2fd16a;
    --acento-boton:#0f7a3d;
    --sobre-acento:#04210f;
    --aviso:#f4bb57;
    --ambar:#f4bb57;
    --ok-texto:#2fd16a;
    --aviso-texto:#f4bb57;
    --mal:#ff8b80;
    --sobre-mal:#2a0704;
    --material:#212121d6;
    --material-cab:#0c0c0cc9;
    --cabecera:#000000;
    --material-luz:#ffffff1f;
    --velo:#00000099;
    --mapa-tierra:#121212;
    --mapa-calle:#2f2f2f;
    --mapa-calle-borde:#1e1e1e;
    --mapa-ruta-nac:#4d4428;
    --mapa-verde:#1c3a27;
    --mapa-pasto:#17281d;
    --mapa-agua:#17323f;
    --mapa-gris:#191919;
    --mapa-edificio:#272727;
    --mapa-texto:#9f9f9f;
    --sombra-1:0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
    --sombra-2:0 -6px 32px rgba(0,0,0,0.6);
    --sombra-flota:0 10px 32px rgba(0,0,0,0.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fondo:#0c0c0c;
  --superficie:#181818;
  --superficie-2:#212121;
  --relleno:#272727;
  --relleno-2:#343434;
  --tinta:#f4f4f4;
  --tinta-2:#bcbcbc;
  --tinta-3:#9f9f9f;
  --linea:#f4f4f424;
  --borde:#7a7a7a;
  --boton:#f4f4f4;
  --sobre-boton:#0e0e0e;
  --acento:#2fd16a;
  --acento-boton:#0f7a3d;
  --sobre-acento:#04210f;
  --aviso:#f4bb57;
  --ambar:#f4bb57;
  --ok-texto:#2fd16a;
  --aviso-texto:#f4bb57;
  --mal:#ff8b80;
  --sobre-mal:#2a0704;
  --material:#212121d6;
  --material-cab:#0c0c0cc9;
  --cabecera:#000000;
  --material-luz:#ffffff1f;
  --velo:#00000099;
  --mapa-tierra:#121212;
  --mapa-calle:#2f2f2f;
  --mapa-calle-borde:#1e1e1e;
  --mapa-ruta-nac:#4d4428;
  --mapa-verde:#1c3a27;
  --mapa-pasto:#17281d;
  --mapa-agua:#17323f;
  --mapa-gris:#191919;
  --mapa-edificio:#272727;
  --mapa-texto:#9f9f9f;
  --sombra-1:0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
  --sombra-2:0 -6px 32px rgba(0,0,0,0.6);
  --sombra-flota:0 10px 32px rgba(0,0,0,0.6);
  color-scheme:dark;
}
/* ---------- Base ---------- */
:root{
  --resorte:cubic-bezier(.2,.9,.25,1);   /* asentamiento sin rebote, para lo que no se arrastra */
  --riel:repeating-linear-gradient(to bottom,var(--borde) 0 4px,transparent 4px 8px);
  scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);
  scroll-padding-bottom:calc(var(--orden-asoma,0px) + 16px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--fondo);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;isolation:isolate;background:var(--fondo);color:var(--tinta);font:400 1.0625rem/1.45 var(--font-sans);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  transition:background-color .3s ease,color .3s ease}
h1,h2,h3,p,ul,ol,fieldset,legend{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
textarea{display:block;resize:vertical;line-height:1.4}
button{cursor:pointer;touch-action:manipulation}
img{max-width:100%}
:where(button,input,select,textarea,summary,a):focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
/* está para quien usa lector de pantalla; a la vista no suma */
.oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ---------- Cabecera: una fila plana, blanca o negra según el tema, con el logo al centro. Queda fija arriba ---------- */
.cabecera{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;
  margin-top:calc(-1 * env(safe-area-inset-top,0px));padding:calc(env(safe-area-inset-top,0px) + 8px) var(--esp-4) var(--esp-2);
  background:var(--cabecera);transition:box-shadow .25s ease}
.desplazada .cabecera{box-shadow:0 1px 0 var(--linea)}
/* la palabra Ubik en curvas: toma la tinta del tema; el punto de la i es el cuadrado de destino, en verde */
.logo-marca{display:block;flex:none;height:24px;width:calc(24px * 2105 / 748);fill:currentColor;color:var(--tinta);overflow:visible}
.logo-punto{fill:var(--acento)}
.logo{grid-column:2;display:flex;align-items:center;justify-content:center;min-height:44px;padding-inline:6px;color:var(--tinta);text-decoration:none;border-radius:var(--r-s)}
.logo .logo-punto{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s var(--resorte)}
@media (hover:hover){.logo:hover .logo-punto{transform:translateY(-14%)}}
/* en qué parte de la app se está: a la izquierda, frente al menú */
.cabecera-rol{grid-column:1;justify-self:start;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--tinta-2);font:500 .9375rem/1.2 var(--font-sans);white-space:nowrap}
/* para quien navega con teclado: lo primero que encuentra lo lleva derecho al contenido */
.saltar{position:fixed;z-index:120;left:var(--esp-4);top:calc(env(safe-area-inset-top,0px) + 8px);padding:var(--esp-3) var(--esp-4);border-radius:var(--r-pill);background:var(--boton);color:var(--sobre-boton);font-weight:700;text-decoration:none;transform:translateY(-200%);opacity:0}
.saltar:focus{transform:none;opacity:1}
main:focus{outline:0}
/* el menú: dos rayas. Ahí vive todo lo que no es pedir un viaje */
.menu-btn{grid-column:3;justify-self:end;position:relative;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--tinta);transition:background-color .15s ease,transform .28s var(--resorte)}
.menu-btn i,.menu-btn i::after{position:absolute;left:12px;width:20px;height:2.5px;border-radius:2px;background:currentColor}
.menu-btn i{top:16px}
.menu-btn i::after{content:"";left:0;top:8px;width:13px}
.menu-btn:active{background:var(--relleno-2);transform:scale(.92);transition-duration:.08s}
@media (hover:hover){.menu-btn:hover{background:var(--relleno-2)}}

@media (max-width:359px){
  .cabecera{gap:var(--esp-2)}
  .logo-marca{height:21px;width:calc(21px * 2105 / 748)}
}
@media (min-width:760px){
  .cabecera{padding:calc(env(safe-area-inset-top,0px) + 10px) max(16px,calc((100% - 1088px) / 2)) 10px}
  .logo-marca{height:28px;width:calc(28px * 2105 / 748)}
}

/* ---------- Página ---------- */
.marco{position:relative;max-width:1120px;margin-inline:auto;padding-inline:var(--esp-4);padding-block:0 56px;display:flex;flex-direction:column;gap:var(--esp-5)}
#avisos,main{margin-top:var(--esp-2)}
.pila{display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.pila-chica{display:flex;flex-direction:column;gap:6px;min-width:0}
.fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-3);min-width:0}
.fila-entre{justify-content:space-between}
.dos{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-4);align-items:start}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--esp-4)}
@media (min-width:760px){.marco{padding-top:var(--esp-3)}#avisos,main{margin-top:0}}
@media (min-width:900px){
  .marco{padding-top:var(--esp-6)}
  .dos{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--esp-6)}
}

/* ---------- Tipografía ---------- */
.titulo,.estado-titulo{font:800 2rem/1.06 var(--font-sans);letter-spacing:-.034em;text-wrap:balance}
.subtitulo{font:700 1.3125rem/1.2 var(--font-sans);letter-spacing:-.02em;text-wrap:balance}
.rotulo{font:500 .8125rem/1.4 var(--font-sans);letter-spacing:.005em;color:var(--tinta-3)}
.tenue{color:var(--tinta-2)}
.chico{font-size:.9375rem;line-height:1.4}
.letra-chica{font-size:.8125rem;line-height:1.4;letter-spacing:.005em;color:var(--tinta-3)}
.num{font-variant-numeric:tabular-nums}
.plata{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.vacio{color:var(--tinta-2);font-size:.9375rem;line-height:1.45;max-width:60ch}
.pie{display:flex;flex-direction:column;gap:var(--esp-3);margin-top:clamp(56px,10vh,104px);padding-top:var(--esp-6);font-size:.8125rem;line-height:1.45;letter-spacing:.005em;color:var(--tinta-3);max-width:76ch}
.pie-enlaces{display:flex;flex-wrap:wrap;gap:2px var(--esp-4)}
.pie-enlaces .enlace-texto{min-height:32px;color:var(--tinta-2);font-weight:500;text-align:left}
.pie #pie-ayuda{gap:var(--esp-3)}
.pie-leyenda{font-size:.75rem;line-height:1.45}
.pie-leyenda:empty,#pie-ayuda:empty{display:none}
.pie .logo-marca{height:20px;width:calc(20px * 2105 / 748);color:var(--tinta-3)}
.pie .logo-punto{fill:currentColor}
.pie .btn{--campo-fondo:var(--superficie)}
.pie .fila:empty{display:none}
@media (min-width:900px){.titulo,.estado-titulo{font-size:2.5rem;letter-spacing:-.038em}}

/* ---------- Panel: superficie plana y sin contorno. Solo la tarjeta del viaje se eleva ---------- */
.panel{--campo-fondo:var(--relleno);--celda:var(--relleno);background:var(--superficie);border-radius:var(--r-l);padding:var(--esp-5);min-width:0}
.ticket{background:var(--superficie-2);box-shadow:var(--sombra-1)}
@media (max-width:480px){.panel{padding:18px var(--esp-4)}}
@media (min-width:900px){.ticket{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}.ticket-fijo{position:static}}

/* ---------- Campos: rellenos, sin contorno. El foco es un anillo de tinta ---------- */
.campo{display:flex;flex-direction:column;gap:var(--esp-2);border:0;min-width:0}
.campo > label,.campo > legend{font:500 .9375rem/1.3 var(--font-sans);color:var(--tinta)}
.campo > legend{margin-bottom:var(--esp-2)}
.opc{font-weight:400;color:var(--tinta-3)}
input[type="text"],input[type="number"],input[type="tel"],input[type="date"],select,textarea{width:100%;min-height:var(--alto-control);padding:var(--esp-3) var(--esp-4);
  background-color:var(--campo-fondo,var(--superficie));color:var(--tinta);border:0;border-radius:var(--r-m);
  -webkit-appearance:none;appearance:none}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="text"],input[type="tel"]{text-overflow:ellipsis}
input[type="date"]{min-width:0}
input::placeholder,textarea::placeholder{color:var(--tinta-3);opacity:1}
input[readonly]{color:var(--tinta-2)}
:where(input[type="text"],input[type="number"],input[type="tel"],input[type="date"],select,textarea):focus-visible{outline-width:2px;outline-offset:0}
.selector{position:relative}
.selector select{padding-right:46px;text-overflow:ellipsis}
.selector::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-7px;border:solid var(--tinta-2);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.error{color:var(--mal);font-size:.9375rem;font-weight:500;line-height:1.35}
.campo:has(> .error:not([hidden])) > input{box-shadow:inset 0 0 0 2px var(--mal)}

/* Pedido del pasajero: los campos van agrupados en renglones, como una lista. El placeholder hace de rótulo. */
.pedir{display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.titulo-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--esp-3);margin-bottom:var(--esp-3)}
.titulo-fila > .titulo{min-width:0}
/* las piezas de la marca, chicas, al lado del título: el disco ámbar, la cápsula verde, el anillo y el selector,
   cuyo pulgar se mueve con lo que elegís (viaje, envío o mandado) */
.piezas{flex:none;margin-top:6px;display:grid;grid-template-columns:16px 34px;grid-template-rows:16px 16px;gap:5px}
.piezas > *{display:block;border-radius:var(--r-pill)}
.pz-disco{border-radius:50%;background:var(--ambar)}
.pz-pastilla{background:var(--acento)}
.pz-anillo{border-radius:50%;border:4px solid var(--tinta)}
.pz-pista{padding:2px;background:var(--relleno-2)}
.pz-pista b{display:block;width:50%;height:100%;border-radius:var(--r-pill);background:var(--boton);transition:transform .45s var(--resorte)}
.pedir:has(#tipo-envio:checked) .pz-pista b{transform:translateX(50%)}
.pedir:has(#tipo-mandado:checked) .pz-pista b{transform:translateX(100%)}
.abierta .piezas > *{animation:arte-entra .6s var(--resorte) backwards}
.abierta .pz-pastilla{animation-delay:.08s}
.abierta .pz-anillo{animation-delay:.16s}
.abierta .pz-pista{animation-delay:.24s}
@media (min-width:900px){.piezas{grid-template-columns:22px 46px;grid-template-rows:22px 22px;gap:7px}.pz-anillo{border-width:5px}}
@media (max-width:359px){.piezas{display:none}}
.titulo-texto{display:flex;flex-direction:column;gap:6px;min-width:0}
/* dónde funciona: Saladillo, dicho en una línea debajo del título */
.titulo-lugar{color:var(--tinta-2);font:500 1.0625rem/1.3 var(--font-sans);letter-spacing:-.005em}
@media (min-width:900px){.titulo-lugar{font-size:1.1875rem}}
.grupo{--campo-fondo:var(--relleno);background:var(--superficie);border-radius:var(--r-l);min-width:0}
.renglon{position:relative;display:flex;align-items:center;min-height:54px}
.renglon > input,.renglon > .selector{flex:1 1 auto;min-width:0}
.renglon input,.renglon select{min-height:54px;padding-block:0;background-color:transparent;border-radius:var(--r-m)}
.renglon :where(input,select):focus-visible{outline-offset:-2px}
.renglon select{font-weight:500}
.sep::after{content:"";position:absolute;left:var(--esp-4);right:0;top:0;height:1px;background:var(--linea)}
.grupo > .error{padding:0 var(--esp-4) var(--esp-3)}
.grupo > .chips{padding:0 var(--esp-4) var(--esp-3)}
/* la ruta lleva las mismas marcas que el recorrido del viaje: aro de salida, cuadrado de destino, riel entre los dos */
.ruta .renglon input,.ruta .renglon select{padding-left:46px}
.ruta .sep::after{left:46px}
.ruta > .error,.ruta > .chips{padding-left:46px}
.ruta .r-origen input{padding-right:52px}
.r-origen::before,.r-destino::before{content:"";position:absolute;left:22px;top:50%;z-index:1;pointer-events:none}
.r-origen::before{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:3px solid var(--tinta)}
.r-destino::before{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:3px;background:var(--tinta);transition:background-color .3s ease,transform .45s var(--resorte)}
.r-destino.listo::before{background:var(--acento);transform:scale(1.15)}
.r-origen{background:linear-gradient(var(--superficie),var(--superficie)) 21px 0/2px calc(50% + 11px) no-repeat,var(--riel) 21px 0/2px 100% repeat-y}
.r-destino{background:linear-gradient(var(--superficie),var(--superficie)) 21px 100%/2px calc(50% + 9px) no-repeat,var(--riel) 21px 0/2px 100% repeat-y}
.ruta > #err-origen,.ruta > .c-origen,.ruta > #sug-origen,.ruta > .parada,.ruta > .r-mas,.ruta > #err-paradas{background:var(--riel) 21px 0/2px 100% repeat-y}
/* una parada: punto chico sobre el riel, cuánto se espera ahí y la cruz para quitarla */
.r-parada::before,.r-mas::before{content:"";position:absolute;left:22px;top:50%;z-index:1;pointer-events:none;border-radius:50%}
.r-parada::before{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--ambar);animation:trazo-brota .4s var(--resorte) backwards}
.r-mas::before{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;background:linear-gradient(var(--tinta-2),var(--tinta-2)) center/9px 2px no-repeat,linear-gradient(var(--tinta-2),var(--tinta-2)) center/2px 9px no-repeat,var(--superficie)}
.renglon > .mini{flex:none;width:108px}
.ruta .renglon .mini select{padding-left:8px;padding-right:26px;color:var(--tinta-2);font-weight:500;font-size:.9375rem;text-overflow:clip}
.mini::after{right:12px;width:7px;height:7px;margin-top:-6px}
.quitar{position:relative;flex:none;width:44px;height:44px;margin-right:3px;padding:0;border:0;border-radius:50%;background:none;color:var(--tinta-2);transition:background-color .15s ease,transform .28s var(--resorte)}
.quitar::before,.quitar::after{content:"";position:absolute;left:14px;top:21px;width:16px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg)}
.quitar::after{transform:rotate(-45deg)}
.quitar:active{background:var(--relleno-2);transform:scale(.9);transition-duration:.08s}
.mas{flex:1 1 auto;min-height:50px;padding:0 var(--esp-4) 0 46px;border:0;border-radius:var(--r-m);background:none;color:var(--tinta-2);font:500 1rem/1.2 var(--font-sans);text-align:left}
.mas:active{opacity:.6}
.parada > .error{padding:0 var(--esp-4) var(--esp-3) 46px}
@media (max-width:359px){.renglon > .mini{width:96px}.quitar{width:38px;margin-right:0}.quitar::before,.quitar::after{left:11px}}
.ruta > #err-paradas{padding-left:46px}
#tipo-ayuda{margin-top:calc(-1 * var(--esp-2));padding-inline:var(--esp-1);text-wrap:pretty}
/* un atajo a la vez: los de la salida mientras está vacía; después, los del destino */
.pedir:has(#origen:not(:placeholder-shown)) .c-origen,
.pedir:has(#origen:placeholder-shown) #chips-destino .chip:not(.chip-localidad),
.pedir:has(#destino:not(:placeholder-shown)) #chips-destino .chip:not(.chip-localidad){display:none}

.chips{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.chip{position:relative;min-height:34px;padding:6px 14px;background:var(--campo-fondo,var(--superficie));border:0;border-radius:var(--r-pill);
  color:var(--tinta);font:500 .875rem/1.2 var(--font-sans);transition:background-color .15s ease,transform .28s var(--resorte)}
.chip::after{content:"";position:absolute;inset:-5px -2px}     /* zona de toque de 44px */
.chip:active{background:var(--relleno-2);transform:scale(.95);transition-duration:.08s}
@media (hover:hover){.chip:hover{background:var(--relleno-2)}}

/* selector de dos opciones: el pulgar de tinta se corre a la elegida */
.opciones{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:var(--r-pill);background:var(--relleno-2)}
.opciones::before{content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--r-pill);background:var(--boton);transition:transform .38s var(--resorte)}
.opciones:has(.opcion:nth-child(2) input:checked)::before{transform:translateX(100%)}
.opciones:has(.opcion:nth-child(3) input:checked)::before{transform:translateX(200%)}
.tres{grid-template-columns:repeat(3,1fr)}
.tres::before{width:calc((100% - 6px) / 3)}
.opcion{position:relative;display:block}
.opcion input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opcion span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:46px;padding:var(--esp-2) var(--esp-3);border-radius:var(--r-pill);
  color:var(--tinta-2);font:500 1rem/1.2 var(--font-sans);text-align:center;pointer-events:none;transition:color .2s ease}
.opcion input:checked + span{color:var(--sobre-boton)}
.opcion span{gap:7px}
.opcion .ico{flex:none;width:19px;height:19px;fill:currentColor;transition:transform .45s var(--resorte)}
.opcion input:checked + span .ico{color:var(--acento-boton);animation:ico-salta .5s var(--resorte)}
@keyframes ico-salta{40%{transform:translateY(-3px) scale(1.08)}}
@media (max-width:359px){.opcion .ico{display:none}}
.opcion input:focus-visible + span{outline:3px solid var(--tinta);outline-offset:2px}
@supports not selector(:has(*)){
  .opciones::before{display:none}
  .opcion input:checked + span{background:var(--boton)}
}

/* ---------- Botones: cápsulas rellenas que responden al apoyar el dedo, no al soltar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);min-height:var(--alto-control);padding:var(--esp-3) var(--esp-6);border:0;border-radius:var(--r-pill);
  font:500 1.0625rem/1.2 var(--font-sans);letter-spacing:-.012em;text-align:center;text-decoration:none;-webkit-user-select:none;user-select:none;
  transition:transform .28s var(--resorte),background-color .15s ease,opacity .15s ease}
.btn:active{transform:scale(.97);transition-duration:.08s,.15s,.15s}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-principal{background:var(--boton);color:var(--sobre-boton);font-weight:700}
.btn-chapa{background:var(--acento);color:var(--sobre-acento);font-weight:700}
.btn-linea,.btn-peligro{background:var(--campo-fondo,var(--superficie));color:var(--tinta)}
.btn-peligro{color:var(--mal)}
.btn-linea:active,.btn-peligro:active{background:var(--relleno-2)}
.btn-chico{min-height:var(--alto-control-chico);padding:var(--esp-2) var(--esp-4);font-size:.9375rem}
.btn-ancho{width:100%}
@media (hover:hover){
  .btn-principal:not([disabled]):hover,.btn-chapa:not([disabled]):hover{opacity:.86}
  .btn-linea:hover,.btn-peligro:hover{background:var(--relleno-2)}
}
.enlace{min-height:var(--alto-control-chico);padding:var(--esp-2) var(--esp-1);background:none;border:0;color:var(--tinta-2);font-weight:500;font-size:.9375rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.enlace:active{opacity:.6}

/* Confirmación: lo destructivo se pregunta en una hoja que sube desde abajo, con velo. En escritorio, en un cuadro al centro. */
.confirmar{position:fixed;z-index:60;left:0;right:0;bottom:0;max-width:520px;margin-inline:auto;isolation:isolate;display:flex;flex-direction:column;gap:var(--esp-2);
  padding:var(--esp-6) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom,0px));font-weight:400;font-size:1.0625rem;text-align:center;white-space:normal}
.confirmar::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--velo)}
.confirmar::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--superficie-2);box-shadow:var(--sombra-2)}
.confirmar > span{padding:0 var(--esp-2) var(--esp-3);font-weight:500;line-height:1.3;text-wrap:balance;color:var(--tinta)}
.confirmar > .btn{--campo-fondo:var(--relleno);width:100%;min-height:var(--alto-control);font-size:1.0625rem}
.confirmar > .btn-linea{font-weight:700}
@media (min-width:760px){
  .confirmar{inset:0;width:min(380px,calc(100% - 32px));height:fit-content;margin:auto;padding:var(--esp-6) var(--esp-5) var(--esp-5)}
  .confirmar::after{border-radius:var(--r-xl);box-shadow:var(--sombra-flota)}
}

/* ---------- Estado: una palabra escrita en su color. Sin puntos, sin chapitas, sin fondo ---------- */
.estado{color:var(--tinta-2);font:700 .8125rem/1.3 var(--font-sans);letter-spacing:.005em;white-space:nowrap}
.estado-aviso{color:var(--aviso-texto)}
.estado-firme{color:var(--tinta)}
.estado-ok{color:var(--ok-texto)}
.estado-mal{color:var(--mal)}
.estado-tenue{color:var(--tinta-3);font-weight:500}

/* un aviso: un renglón sobre relleno. Si es grave, el texto va en rojo */
.banda{padding:10px 14px;border-radius:var(--r-m);background:var(--celda,var(--superficie));color:var(--tinta-2);font-size:.875rem;line-height:1.4}
.banda strong{color:var(--tinta);font-weight:700}
.banda-mal{color:var(--mal);font-weight:500}
.banda-mal strong{color:inherit}
/* la invitación a instalarla: chica, con sus dos botones */
.instalar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2) var(--esp-4);padding:10px 10px 10px var(--esp-4);color:var(--tinta)}
.instalar .btn{--campo-fondo:var(--relleno)}
.instalar strong{font-weight:700}

/* El estado del chofer: lo primero que lee al abrir su tablero. Una palabra grande, en su color. */
.libre{flex:1 1 100%;min-width:0;color:var(--tinta-3);font:800 1.75rem/1.1 var(--font-sans);letter-spacing:-.034em}
.libre-on{color:var(--ok-texto)}
.libre-ocupado{color:var(--aviso-texto)}

/* ---------- Recorrido: aro de salida, cuadrado de destino, riel entre los dos ---------- */
.recorrido{--g:14px;--fs:1.0625rem;display:flex;flex-direction:column;gap:var(--g)}
.tramo{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--esp-3);align-items:stretch}
.riel{position:relative}
.marca{position:absolute;left:50%;top:calc(var(--fs) * .65);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:2.5px;background:var(--tinta)}
.marca-o{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:transparent;border:3px solid var(--tinta)}
.riel::after{content:"";position:absolute;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:var(--riel)}
.tramo:first-child .riel::after{top:calc(var(--fs) * .65 + 11px);bottom:calc(var(--g) * -1)}
.tramo:last-child .riel::after{top:0;height:max(0px,calc(var(--fs) * .65 - 9px))}
/* una parada: aro chico, con riel antes y después */
.marca-p{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:transparent;border:2.5px solid var(--tinta)}
.tramo-parada .riel::before{content:"";position:absolute;left:50%;top:0;width:2px;height:max(0px,calc(var(--fs) * .65 - 9px));margin-left:-1px;border-radius:1px;background:var(--riel)}
.tramo.tramo-parada .riel::after{top:calc(var(--fs) * .65 + 9px);bottom:calc(var(--g) * -1);height:auto}
.recorrido-buscando .riel::after{background-size:2px 8px;animation:marcha .6s linear infinite}
.recorrido-firme .riel::after,.recorrido-firme .riel::before{background:var(--tinta)}
@keyframes marcha{to{background-position:0 8px}}
.cartel{display:flex;flex-direction:column;gap:1px;min-width:0}
.cartel-nombre{font:500 var(--fs)/1.3 var(--font-sans);overflow-wrap:anywhere}
.cartel-sub{font:500 .8125rem/1.35 var(--font-sans);letter-spacing:.005em;color:var(--tinta-3)}
.cartel-vacio .cartel-nombre{font-weight:400;color:var(--tinta-3)}
.recorrido-chico{--g:10px;--fs:.9375rem}

/* ---------- Precio ---------- */
.precio{display:flex;align-items:baseline;gap:6px;font:800 3.25rem/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.precio-signo{font-size:.5em;font-weight:700;letter-spacing:-.01em;color:var(--tinta-2)}
.precio-texto{font-size:1.875rem;line-height:1.1;letter-spacing:-.022em}

/* ---------- Pedido: tarjeta en escritorio, hoja que se arrastra en el celular ---------- */
.orden{--campo-fondo:var(--relleno);display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
.orden-asa{display:none}
@media (min-width:900px){
  .orden{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px);padding:var(--esp-5);border-radius:var(--r-l);background:var(--superficie-2);box-shadow:var(--sombra-1)}
  #pas-recorrido{order:1}
  #pas-precio{order:2}
  #pas-disponibles{order:3}
  #btn-pedir{order:4;width:100%}
  .orden .letra-chica{order:5}
}
@media (max-width:899px){
  .con-orden .marco{padding-bottom:calc(var(--orden-asoma,104px) + 28px)}
  .orden{position:fixed;z-index:20;left:0;right:0;bottom:-320px;max-width:600px;margin-inline:auto;
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:0;align-items:center;
    padding:0 16px calc(336px + env(safe-area-inset-bottom,0px));scroll-margin-bottom:env(safe-area-inset-bottom,0px);
    border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--material);
    -webkit-backdrop-filter:blur(var(--desenfoque)) saturate(180%);backdrop-filter:blur(var(--desenfoque)) saturate(180%);
    box-shadow:inset 0 1px 0 var(--material-luz),var(--sombra-2);
    touch-action:none;-webkit-user-select:none;user-select:none;will-change:transform}
  .orden-asa{grid-column:1 / -1;grid-row:1;justify-self:center;display:block;position:relative;width:88px;height:26px;padding:0;border:0;border-radius:13px;background:none}
  .orden-asa::before,.orden-asa::after{content:"";position:absolute;top:10px;left:50%;width:21px;height:5px;margin-left:-10.5px;border-radius:3px;background:var(--tinta-3)}
  .orden-asa::before{transform:translateX(-8px) rotate(calc(var(--p,0) * 16deg))}
  .orden-asa::after{transform:translateX(8px) rotate(calc(var(--p,0) * -16deg))}
  /* cerrada, la hoja muestra solo la cifra y el botón; el rótulo queda para el lector de pantalla */
  #pas-precio{display:contents}
  #pas-precio .rotulo{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #pas-precio > :first-child{grid-column:1 / -1;grid-row:2}
  #pas-precio > .precio,#pas-precio > .rotulo + p{grid-column:1;grid-row:3}
  #pas-precio > .precio{font-size:2.375rem}
  #pas-precio > .precio-texto{font-size:1.5rem}
  #btn-pedir{grid-column:2;grid-row:3;padding-inline:22px}
  #pas-precio > .precio ~ p{grid-column:1 / -1;grid-row:4;margin-top:14px}
  #pas-recorrido{grid-column:1 / -1;grid-row:5;margin-top:var(--esp-4);padding-top:var(--esp-4);border-top:1px solid var(--linea)}
  #pas-disponibles{grid-column:1 / -1;grid-row:6;margin-top:14px}
  .orden .letra-chica{grid-column:1 / -1;grid-row:7;margin-top:var(--esp-2)}
  /* mientras se escribe una dirección, la hoja se corre: ese lugar es de las sugerencias */
  .orden{transition:opacity .2s ease}
  #form-pedido:has(.ruta input:focus) ~ .orden{opacity:0;pointer-events:none}
  /* sobre la capa translúcida no va tinta-3: lo que pasa por debajo le puede quitar contraste */
  .orden .letra-chica,.orden .cartel-sub,.orden .cartel-vacio .cartel-nombre{color:var(--tinta-2)}
}
@media (max-width:359px){#pas-precio > .precio{font-size:1.875rem}#btn-pedir{padding-inline:var(--esp-4)}}

/* ---------- Mapa: las calles de Saladillo, dibujadas por la app. Lo que flota encima va sobre material translúcido ---------- */
.mapa{position:relative;isolation:isolate;overflow:hidden;height:clamp(236px,40svh,360px);border-radius:var(--r-xl);background:var(--mapa-tierra);-webkit-user-select:none;user-select:none}
.mapa-chofer{height:clamp(220px,34svh,330px)}
.mapa-lienzo{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-3px}
.mapa-lienzo:active{cursor:grabbing}
.mapa-botones{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:var(--esp-2)}
.mapa-btn,.mapa-modo,.mapa-dato,.mapa-credito{background:var(--material);-webkit-backdrop-filter:blur(var(--desenfoque)) saturate(180%);backdrop-filter:blur(var(--desenfoque)) saturate(180%)}
.mapa-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--tinta);box-shadow:var(--sombra-1);transition:transform .28s var(--resorte)}
.mapa-btn:active{transform:scale(.9);transition-duration:.08s}
.mapa-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:none),(pointer:coarse){.mapa-solo-puntero{display:none}}       /* con el dedo se acerca pellizcando */
/* qué marca un toque en el mapa: la salida (aro) o el destino (cuadrado) */
.mapa-modo{position:absolute;left:10px;top:10px;display:flex;padding:3px;border-radius:var(--r-pill);box-shadow:var(--sombra-1)}
.mapa-pill{position:relative;min-height:38px;padding:0 14px 0 32px;border:0;border-radius:var(--r-pill);background:none;color:var(--tinta-2);font:500 .875rem/1 var(--font-sans);letter-spacing:-.005em;transition:color .2s ease,background-color .2s ease,transform .28s var(--resorte)}
.mapa-pill::after{content:"";position:absolute;inset:-3px 0}                  /* zona de toque de 44px */
.mapa-pill::before{content:"";position:absolute;left:13px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;border:3px solid currentColor}
.mapa-pill[data-para="destino"]::before{width:9px;height:9px;margin-top:-4.5px;border:0;border-radius:2.5px;background:var(--acento)}
.mapa-pill[data-para="destino"][aria-pressed="true"]::before{background:var(--acento-boton)}
.mapa-pill[aria-pressed="true"]{background:var(--boton);color:var(--sobre-boton)}
.mapa-pill:active{transform:scale(.95);transition-duration:.08s}
.mapa-dato{position:absolute;left:10px;bottom:10px;margin:0;padding:var(--esp-2) 13px;border-radius:var(--r-pill);color:var(--tinta);font:500 .8125rem/1.2 var(--font-sans);font-variant-numeric:tabular-nums;box-shadow:var(--sombra-1);animation:materializa .4s var(--resorte)}
.mapa-credito{position:absolute;right:var(--esp-2);bottom:6px;padding:2px 7px;border-radius:var(--r-s);color:var(--tinta-2);font:500 .6875rem/1.4 var(--font-sans);text-decoration:none}
@media (min-width:900px){
  /* escritorio: campos a la izquierda; a la derecha el mapa y, debajo, la tarjeta del viaje */
  #v-pasajero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--esp-4) var(--esp-6);align-items:start}
  #mapa-pas{grid-column:2;grid-row:1;height:clamp(300px,42vh,420px)}
  #pas-armado,#pas-viaje,#pas-viaje > .dos{display:contents}
  #form-pedido,#pas-viaje > .dos > :first-child,#pas-viaje > .panel{grid-column:1;grid-row:1 / span 2}
  #pas-orden,#pas-viaje > .dos > .ticket{grid-column:2;grid-row:2}
  #pas-copia,#pas-historial{grid-column:1 / -1}
  #v-pasajero .orden,#v-pasajero .ticket{position:static}
  .mapa-chofer{height:clamp(260px,36vh,380px)}
}

/* ---------- Sugerencias de dirección: aparecen debajo del campo mientras se escribe ---------- */
.sugerencias{list-style:none;display:flex;flex-direction:column;margin:0;padding:0 var(--esp-2) var(--esp-2) 38px;animation:materializa .3s var(--resorte)}
.sugerencias > li + li{border-top:1px solid var(--linea)}
.sug{display:flex;flex-direction:column;justify-content:center;gap:1px;width:100%;min-height:50px;padding:7px 10px 7px var(--esp-2);border:0;border-radius:var(--r-s);background:none;color:var(--tinta);text-align:left;transition:background-color .15s ease}
.sug-txt{font:500 1rem/1.3 var(--font-sans);overflow-wrap:anywhere}
.sug-sub{font:500 .8125rem/1.3 var(--font-sans);letter-spacing:.005em;color:var(--tinta-3)}
.sug-libre .sug-txt{font-weight:500}
.sugerencias > .sug{cursor:pointer}
.sugerencias > .sug[aria-selected="true"],.sug:active{background:var(--relleno)}
@media (hover:hover){.sug:hover{background:var(--relleno)}}
.sugerencias:not([hidden]) ~ .chips{display:none}

/* ---------- Seguridad del viaje ---------- */
/* el código que el pasajero le dice al chofer: sin él no arranca el viaje */
.codigo{display:flex;flex-direction:column;gap:2px;padding:14px var(--esp-4);border-radius:var(--r-m);background:var(--relleno)}
.codigo-num{font:800 2.5rem/1.1 var(--font-sans);letter-spacing:.16em;font-variant-numeric:tabular-nums}
.pin{font-weight:700;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.pin::placeholder{font-weight:400;letter-spacing:0}
.secreto{-webkit-text-security:disc}
.par{flex-wrap:nowrap}
.par > input{flex:1 1 auto;width:auto;min-width:0}
.par > .btn{flex:none}
a.btn{cursor:pointer}
.alias .enlace{min-height:0;padding:0 var(--esp-1)}
.alerta{color:var(--mal);font-weight:500}
.enlace-texto{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* la cuenta del chofer con UBIK */
.cuenta{display:flex;flex-direction:column;gap:var(--esp-3)}
.cuenta .btn{--campo-fondo:var(--relleno-2)}
#cho-cuerpo > .banda{--celda:var(--superficie)}
#adm-tarifa-nota{display:flex;flex-direction:column;gap:var(--esp-2)}
#adm-tarifa-nota:empty{display:none}

/* interruptor */
.tilde{display:flex;align-items:center;gap:var(--esp-3);min-height:var(--alto-control-chico);font-weight:500;cursor:pointer}
.tilde input{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:51px;height:31px;margin:0;border-radius:var(--r-pill);background:var(--relleno-2);cursor:pointer;transition:background-color .2s ease}
.tilde input::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .32s var(--resorte)}
.tilde input:checked{background:var(--acento)}
.tilde input:checked::after{transform:translateX(20px)}

/* ---------- Documentos del chofer ---------- */
.fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3)}
@media (min-width:640px){.fotos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foto{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:150px;padding:10px;overflow:hidden;border-radius:var(--r-m);background:var(--campo-fondo,var(--superficie)) center/cover no-repeat}
.foto-nombre{font:500 .9375rem/1.25 var(--font-sans)}
.foto-estado{font:500 .8125rem/1.3 var(--font-sans);color:var(--tinta-2)}
.foto.lista::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 30%,rgba(0,0,0,.72))}
.foto.lista .foto-nombre,.foto.lista .foto-estado{color:#fff}
/* la administración los mira en una hoja aparte */
.visor{position:fixed;inset:0;z-index:70;display:grid;align-items:end;justify-items:center;background:var(--velo);animation:vela .3s ease-out}
.visor-hoja{--campo-fondo:var(--relleno);display:flex;flex-direction:column;gap:var(--esp-4);width:min(760px,100%);max-height:92svh;overflow:auto;overscroll-behavior:contain;padding:var(--esp-5) var(--esp-4) calc(var(--esp-5) + env(safe-area-inset-bottom,0px));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--superficie-2);box-shadow:var(--sombra-2);animation:sube .42s var(--resorte)}
.visor-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--esp-4)}
.visor-fotos figure{display:flex;flex-direction:column;gap:6px;margin:0}
.visor-fotos img,.visor-falta{display:block;width:100%;border-radius:var(--r-m);background:var(--relleno)}
.visor-falta{display:grid;place-items:center;aspect-ratio:1.5;color:var(--tinta-3);font-size:.9375rem}
.visor-fotos figcaption{font:500 .8125rem/1.3 var(--font-sans);letter-spacing:.005em;color:var(--tinta-3)}
@media (min-width:760px){
  .visor{align-items:center;padding:var(--esp-6)}
  .visor-hoja{padding:var(--esp-6);border-radius:var(--r-xl);box-shadow:var(--sombra-flota)}
}

/* ---------- Viaje del pasajero ---------- */
/* el progreso es una barra en cinco tramos; el nombre de cada paso queda para el lector de pantalla y el título dice el estado */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--esp-1)}
.pasos li{min-width:0;font-size:0;line-height:0;color:transparent}
.pasos li::before{content:"";display:block;height:4px;border-radius:2px;background:var(--relleno-2)}
.pasos .hecho::before,.pasos .actual::before{background:var(--tinta)}
.ficha{--campo-fondo:var(--superficie);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3) var(--esp-4);padding:14px var(--esp-4);border-radius:var(--r-m);background:var(--relleno)}
.ficha-datos{display:flex;flex-direction:column;min-width:0;font-size:.9375rem;line-height:1.4;color:var(--tinta-2)}
.ficha-nombre{font:700 1.25rem/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--tinta)}
.ficha-datos .ficha-nombre{margin-bottom:2px}
/* calificación: cinco estrellas dibujadas, iguales en cualquier teléfono */
.estrellas{display:flex;margin-left:-8px}
.estrella{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:none;color:var(--borde);font-size:0;transition:transform .28s var(--resorte),color .2s ease}
.estrella::before,.e{content:"";display:block;background:currentColor;clip-path:polygon(50% 2%,61.8% 36.2%,97.6% 36.6%,68.8% 58%,79.4% 92.2%,50% 71.6%,20.6% 92.2%,31.2% 58%,2.4% 36.6%,38.2% 36.2%)}
.estrella::before{width:32px;height:32px}
.estrella.on{color:var(--tinta)}
.estrella:active{transform:scale(.85);transition-duration:.08s}
.punt{white-space:nowrap}
.e{display:inline-block;width:.86em;height:.86em;margin-left:.2em;vertical-align:-.07em}

/* ---------- Patente: una chapa lisa con los caracteres en monoespaciada ---------- */
.patente{display:inline-flex;flex:none;align-items:center;border-radius:var(--r-s);background:var(--relleno-2);color:var(--tinta)}
.patente-banda{display:none}
.patente-num{font:700 1.125rem/1 var(--font-sans);letter-spacing:.07em;padding:var(--esp-2) var(--esp-3);white-space:nowrap}
.patente-chica .patente-num{font-size:.875rem;padding:5px var(--esp-2)}
.ficha .patente{background:var(--superficie)}

/* ---------- Listas, celdas y tablas ---------- */
.lista{list-style:none;display:flex;flex-direction:column}
.lista > li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2) var(--esp-4);padding-block:14px;border-top:1px solid var(--linea);min-width:0}
.lista > li:first-child{border-top:0;padding-top:0}
.lista > li:last-child{padding-bottom:0}
.lista-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px;overflow-wrap:anywhere}
.elegir{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-1) var(--esp-4);width:100%;min-height:64px;padding:var(--esp-3) 44px var(--esp-3) var(--esp-4);text-align:left;
  background:var(--celda,var(--superficie));border:0;border-radius:var(--r-m);transition:background-color .15s ease,transform .28s var(--resorte)}
.elegir::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-5px;border:solid var(--tinta-3);border-width:2px 2px 0 0;transform:rotate(45deg)}
.elegir:active{background:var(--relleno-2);transform:scale(.985);transition-duration:.08s}
.elegir .patente{display:none}
@media (hover:hover){.elegir:hover{background:var(--relleno-2)}}
.pedido{--campo-fondo:var(--superficie);display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-4);border-radius:var(--r-m);background:var(--celda,var(--superficie))}

/* Tablero del chofer: el estado arriba, el nombre abajo y una sola acción. El auto y la patente ya los sabe. */
#cho-cuerpo > .panel.fila{align-items:flex-end}
#cho-cuerpo > .panel.fila .lista-texto{flex-basis:100%}
#cho-cuerpo > .panel.fila .ficha-nombre{font:500 1.0625rem/1.3 var(--font-sans);letter-spacing:-.005em}
#cho-cuerpo > .panel.fila .ficha-nombre + .chico,#cho-cuerpo > .panel.fila .patente,
#cho-cuerpo .pila-chica > .titulo + p{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:599px){
  #cho-cuerpo > .panel.fila > .fila{width:100%}
  #cho-cuerpo > .panel.fila > .fila:last-child{justify-content:center}
  #cho-cuerpo > .panel.fila > .fila:last-child > .btn{flex:1 1 100%}
  .pedido .fila-entre > .btn{flex:1 1 100%}
}

.tabla-wrap{overflow-x:auto;margin-inline:-4px;padding-inline:var(--esp-1)}
table{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.4}
th{padding:var(--esp-2) 10px;text-align:left;white-space:nowrap;font:500 .8125rem/1.3 var(--font-sans);letter-spacing:.005em;color:var(--tinta-3);border-bottom:1px solid var(--linea)}
td{padding:var(--esp-3) 10px;vertical-align:middle;border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}
td.izq{text-align:left}

/* en el celular cada fila de tabla se lee como una ficha: recorrido o nombre arriba, el resto abajo */
@media (max-width:719px){
  .tabla-wrap{overflow:visible;margin:0;padding:0}
  .tabla-wrap table,.tabla-wrap tbody{display:block}
  .tabla-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tabla-wrap tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--esp-1) var(--esp-3);align-items:center;padding-block:14px;border-top:1px solid var(--linea)}
  .tabla-wrap tbody tr:first-child{border-top:0;padding-top:0}
  .tabla-wrap tbody tr:last-child{padding-bottom:0}
  .tabla-wrap td,.tabla-wrap td.num{display:block;min-width:0;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
  #adm-curso td:nth-child(4),#adm-historial td:nth-child(4){grid-area:1 / 1;font-weight:500;font-size:1.0625rem;line-height:1.3}
  #adm-curso td:nth-child(6),#adm-historial td:nth-child(6){grid-area:1 / 2;justify-self:end;white-space:nowrap}
  #adm-curso td:nth-child(3),#adm-historial td:nth-child(3){grid-area:2 / 1;color:var(--tinta-2)}
  #adm-curso td:nth-child(2),#adm-historial td:nth-child(2){grid-area:2 / 2;justify-self:end}
  #adm-curso td:nth-child(5),#adm-historial td:nth-child(5){grid-area:3 / 1;color:var(--tinta-2)}
  #adm-curso td:nth-child(1),#adm-historial td:nth-child(1){grid-area:3 / 2;justify-self:end;color:var(--tinta-2);white-space:nowrap}
  #adm-curso td:nth-child(7){grid-area:4 / 1 / auto / -1;margin-top:var(--esp-2)}
  #adm-historial td:nth-child(7){grid-area:4 / 1 / auto / -1;color:var(--tinta-2)}
  #adm-curso td:nth-child(5)::before,#adm-historial td:nth-child(5)::before{content:"Chofer: "}
  #adm-curso td:nth-child(1)::before{content:"Pedido "}
  #adm-historial td:nth-child(7)::before{content:"Puntaje: "}
  #adm-historial td:nth-child(8){grid-area:5 / 1 / auto / -1;color:var(--tinta-2)}
  #adm-historial td:nth-child(8)::before{content:"Cargo: "}
  #adm-choferes td:nth-child(1){grid-area:1 / 1;font-size:1.0625rem;line-height:1.3}
  #adm-choferes td:nth-child(1) .tenue{font-size:.9375rem}
  #adm-choferes td:nth-child(4){grid-area:1 / 2;justify-self:end;align-self:start}
  #adm-choferes td:nth-child(2){grid-area:2 / 1;color:var(--tinta-2)}
  #adm-choferes td:nth-child(3){grid-area:2 / 2;justify-self:end}
  #adm-choferes td:nth-child(5){grid-area:3 / 1;color:var(--tinta-2)}
  #adm-choferes td:nth-child(6){grid-area:3 / 2;justify-self:end;color:var(--tinta-2);white-space:nowrap}
  #adm-choferes td:nth-child(7){grid-area:4 / 1 / auto / -1;color:var(--tinta-2)}
  #adm-choferes td:nth-child(8){grid-area:5 / 1 / auto / -1;margin-top:var(--esp-2)}
  #adm-choferes td:nth-child(8):has(> .fila:empty){display:none}
  #adm-choferes td:nth-child(5)::before{content:"Viajes hoy: "}
  #adm-choferes td:nth-child(7)::before{content:"Cuenta con UBIK: "}
}

/* ---------- Números del día ---------- */
.resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px var(--esp-5)}
.resumen > .dato:last-child:nth-child(odd){grid-column:1 / -1}
.resumen-suelto{display:flex;flex-wrap:wrap;gap:var(--esp-3) 36px;padding:0}
.dato{display:flex;flex-direction:column;gap:3px;min-width:0}
.dato b{font:800 1.75rem/1.05 var(--font-sans);letter-spacing:-.036em;font-variant-numeric:tabular-nums;white-space:nowrap}
.dato span{font-size:.8125rem;line-height:1.3;letter-spacing:.005em;color:var(--tinta-2)}
@media (min-width:720px){
  .resumen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .resumen > .dato:last-child:nth-child(odd){grid-column:auto}
}
@media (min-width:1000px){.resumen{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- Desplegables ---------- */
details > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);min-height:var(--alto-control-chico);cursor:pointer;list-style:none;font-weight:500;border-radius:var(--r-s)}
details > summary::-webkit-details-marker{display:none}
details > summary::after{content:"";flex:none;width:9px;height:9px;margin:-4px 6px 0 0;border:solid var(--tinta-2);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s var(--resorte)}
details[open] > summary::after{transform:translateY(4px) rotate(225deg)}
details[open] > summary{margin-bottom:var(--esp-4)}

/* ---------- Toasts: bajan desde la cabecera y vuelven por donde vinieron ---------- */
.toasts{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);padding:10px var(--esp-4) 0;pointer-events:none}
.toast{max-width:min(520px,100%);padding:var(--esp-3) 18px;border-radius:var(--r-l);background:var(--boton);color:var(--sobre-boton);font:500 .9375rem/1.35 var(--font-sans);text-align:center;box-shadow:var(--sombra-flota);
  transform-origin:50% 0;animation:toast-entra .45s var(--resorte) backwards,toast-sale .25s ease-in 3.25s forwards}
.toast-mal{background:var(--mal);color:var(--sobre-mal);animation-delay:0s,5.75s}
@keyframes toast-entra{from{opacity:0;transform:translateY(-14px) scale(.94);filter:blur(6px)}}
@keyframes toast-sale{to{opacity:0;transform:translateY(-10px) scale(.96)}}

/* ---------- Movimiento ---------- */
/* Lo que aparece sube apenas y se asienta. */
@keyframes entra{from{opacity:0;transform:translate3d(0,8px,0)}}
:is(#mapa-pas,#form-pedido,#pas-viaje,#pas-historial,#cho-cuerpo,#cho-puerta,#adm-dentro > *,#adm-puerta,#v-cerrada){animation:entra .5s var(--resorte) backwards}
html:not(.abierta) :is(#mapa-pas,#form-pedido,#pas-orden,#pas-viaje,#cho-cuerpo,#cho-puerta,#adm-puerta,#v-cerrada){animation:none}
.abierta #form-pedido{animation-delay:.06s}
/* Un cambio de estado del viaje se materializa: nitidez y escala llegan juntas. */
@keyframes materializa{from{opacity:0;transform:scale(.985);filter:blur(8px)}}
.cambia{animation:materializa .5s var(--resorte)}
/* La confirmación sube desde abajo y el velo aparece con ella. Se animan sus partes: el contenedor no puede moverse sin arrastrar el velo. */
@keyframes sube{from{opacity:0;transform:translateY(56px)}}
@keyframes vela{from{opacity:0}}
.confirmar.brota > *,.confirmar.brota::after{animation:sube .42s var(--resorte)}
.confirmar.brota::before{animation:vela .3s ease-out}
.libre.enciende{animation:materializa .5s var(--resorte)}
@media (min-width:760px){@keyframes sube{from{opacity:0;transform:scale(.94)}}}

@media (prefers-reduced-motion: reduce){
  @keyframes entra{from{opacity:0}}
  @keyframes materializa{from{opacity:0}}
  @keyframes sube{from{opacity:0}}
  @keyframes toast-entra{from{opacity:0}}
  @keyframes toast-sale{to{opacity:0}}
  .recorrido-buscando .riel::after{animation:none}
  .btn,.btn:active,.menu-btn,.menu-btn:active,.chip,.chip:active,.elegir,.elegir:active,.estrella,.estrella:active,.mapa-btn,.mapa-btn:active,.mapa-pill,.mapa-pill:active,.foto,.foto:active{transform:none}
  .btn:active,.chip:active,.estrella:active{opacity:.7}
  .opciones::before,details > summary::after,.tilde input::after{transition:none}
  @keyframes vela{from{opacity:0}}
  body{transition:none}
}
@media (prefers-reduced-transparency: reduce){
  .mapa-btn,.mapa-modo,.mapa-dato,.mapa-credito{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--superficie-2)}
  @media (max-width:899px){.orden{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--superficie-2)}}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mapa-btn,.mapa-modo,.mapa-dato,.mapa-credito{background:var(--superficie-2)}
  @media (max-width:899px){.orden{background:var(--superficie-2)}}
}
/* quien pide más contraste recupera los contornos */
@media (prefers-contrast: more){
  .panel,.grupo,.ticket,.ficha,.pedido,.elegir,.banda,.chip,.btn-linea,.btn-peligro,.patente,.opciones,
  input[type="text"],input[type="number"],input[type="tel"],input[type="date"],select,textarea,.mapa,.codigo,.foto,.tilde input,.casilla input,#t-cuenta,#t-ajustes{outline:1px solid var(--borde);outline-offset:-1px}
  .mapa-btn,.mapa-modo,.mapa-dato,.mapa-credito{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--superficie-2);outline:1px solid var(--borde)}
  .cabecera{border-bottom:1px solid var(--borde)}
  @media (max-width:899px){.orden{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--superficie-2);border-top:1px solid var(--borde)}}
  .pasos li::before{background:var(--borde)}
}

/* ---------- Marca: el aro de la salida, el camino y el cuadrado del destino. La misma forma que el recorrido, usada como dibujo ---------- */
.trazo{position:relative;display:block;flex:none;width:var(--t-ancho,84px);height:14px;color:var(--tinta)}
.trazo::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;border:3.5px solid currentColor}
.trazo::after{content:"";position:absolute;right:0;top:1px;width:12px;height:12px;border-radius:3px;background:currentColor}
.trazo i{position:absolute;left:21px;right:19px;top:5.5px;height:3px;background:repeating-linear-gradient(to right,currentColor 0 6px,transparent 6px 12px)}
/* buscando chofer: el camino avanza */
.trazo-anda i{animation:trazo-anda .7s linear infinite}
@keyframes trazo-anda{to{background-position:12px 0}}
/* llegó: el camino se completa y el destino se enciende */
.trazo-llega i{background:currentColor;border-radius:2px;transform-origin:0 50%;animation:trazo-crece .7s var(--resorte) backwards}
.trazo-llega::after{background:var(--acento);animation:trazo-brota .45s var(--resorte) .5s backwards}
@keyframes trazo-crece{from{transform:scaleX(0)}}
@keyframes trazo-brota{from{transform:scale(0)}}
@keyframes trazo-revela{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.estado-titulo{margin-top:2px}
.pila-chica > .trazo{margin-bottom:var(--esp-2)}

/* las piezas de la marca juntas: la losa de tinta con el recorrido, el botón verde, el punto ámbar y el selector */
.arte{display:grid;grid-template-columns:72px minmax(0,1fr) 34px;grid-template-rows:34px 34px;gap:8px;width:min(100%,252px)}
.arte-carta{grid-row:1 / 3;display:grid;place-items:center;border-radius:var(--r-l);background:var(--boton)}
.arte-carta .trazo{--t-ancho:54px;color:var(--sobre-boton);transform:rotate(90deg)}
.arte-pastilla{border-radius:var(--r-pill);background:var(--acento)}
.arte-punto{border-radius:50%;background:var(--aviso)}
.arte-pista{grid-column:2 / 4;padding:3px;border-radius:var(--r-pill);background:var(--relleno-2)}
.arte-pista i{display:block;width:44%;height:100%;border-radius:var(--r-pill);background:var(--boton)}
.abierta .arte > *{animation:arte-entra .6s var(--resorte) backwards}
.abierta .arte-pastilla{animation-delay:.07s}
.abierta .arte-punto{animation-delay:.14s}
.abierta .arte-pista{animation-delay:.21s}
.abierta .arte-pista i{animation:arte-corre .7s var(--resorte) .34s backwards}
@keyframes arte-entra{from{opacity:0;transform:translateY(10px) scale(.94)}}
@keyframes arte-corre{from{transform:translateX(126%)}}
/* qué se pidió, cuando no es un viaje común: una palabra, sin chapa */
.etiqueta{color:var(--tinta-2);font:500 .8125rem/1.3 var(--font-sans);letter-spacing:.005em;white-space:nowrap}

/* ---------- Inicio: la palabra blanca sobre negro, el punto verde cae sobre la i y el camino se dibuja.
   Al salir, desde ese punto se abre una ola verde y detrás llega el fondo de la app ---------- */
.inicio{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:#000;overflow:hidden}
.inicio-marca{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.inicio-lugar{color:#fff;opacity:.72;font:500 1.375rem/1 var(--font-sans);letter-spacing:-.01em;animation:inicio-logo .7s var(--resorte) .35s backwards}
.inicio .logo-marca{position:relative;z-index:1;height:62px;width:calc(62px * 2105 / 748);color:#fff;animation:inicio-logo .8s var(--resorte) backwards}
.inicio .logo-punto{fill:#2fd16a;transform-box:fill-box;transform-origin:50% 100%;animation:punto-cae .7s cubic-bezier(.3,1.4,.5,1) .55s backwards}
.inicio .trazo{position:relative;z-index:1;--t-ancho:104px;color:#fff;opacity:.9}
.inicio .trazo::before{animation:trazo-brota .45s var(--resorte) .8s backwards}
.inicio .trazo i{animation:trazo-revela .8s cubic-bezier(.4,0,.2,1) 1s backwards}
.inicio .trazo::after{background:#2fd16a;animation:trazo-brota .45s var(--resorte) 1.6s backwards}
@keyframes inicio-logo{from{opacity:0;transform:scale(.94)}}
@keyframes punto-cae{from{opacity:0;transform:translateY(-120%) scale(.4)}}
.inicio-ola{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:circle(0 at var(--ox,50%) var(--oy,45%))}
.inicio-ola.verde{background:#0f7a3d}
.inicio-ola.fondo{background:var(--fondo)}
.inicio.fuera .inicio-ola{clip-path:circle(150vmax at var(--ox,50%) var(--oy,45%));transition:clip-path .8s cubic-bezier(.65,0,.35,1)}
.inicio.fuera .inicio-ola.fondo{transition-delay:.38s}
.inicio.fuera .inicio-marca,.inicio.fuera .trazo{transform:scale(.97);transition:transform .4s ease}
.inicio.fuera{pointer-events:none;opacity:0;transition:opacity .3s ease 1.1s}
/* si por lo que sea la app no llega a arrancar, el inicio no se queda tapando la pantalla */
.inicio{animation:inicio-cede .4s ease 9s forwards}
@keyframes inicio-cede{to{opacity:0;visibility:hidden}}

/* ---------- Pedir UBIK: adelante del texto, el recorrido chico. Cuando el pedido está completo, el camino anda ---------- */
.pedir-ruta{position:relative;display:inline-block;flex:none;width:30px;height:10px}
.pedir-ruta::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;border:2.5px solid currentColor;box-sizing:border-box}
.pedir-ruta::after{content:"";position:absolute;right:0;top:1px;width:8px;height:8px;border-radius:2px;background:var(--acento-boton)}
.pedir-ruta i{position:absolute;left:13px;right:11px;top:4px;height:2px;background:repeating-linear-gradient(to right,currentColor 0 2px,transparent 2px 4px);opacity:.75}
#btn-pedir.listo .pedir-ruta i{animation:trazo-anda .9s linear infinite;opacity:1}
#btn-pedir.listo .pedir-ruta::after{animation:pedir-late 1.8s ease-in-out infinite}
@keyframes pedir-late{50%{transform:scale(1.25)}}

/* ---------- Invertir salida y destino: un botón redondo al final de la salida ---------- */
.invertir{position:absolute;right:6px;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;
  background:var(--relleno);color:var(--tinta);transition:background-color .15s ease,transform .28s var(--resorte)}
.invertir::after{content:"";position:absolute;inset:-2px}
.invertir svg{width:20px;height:20px}
.invertir:active{background:var(--relleno-2);transform:scale(.9);transition-duration:.08s}
.invertir.gira svg{animation:gira .5s var(--resorte)}
@keyframes gira{from{transform:rotate(-180deg)}}
.invertir.gira{animation:invertir-verde .7s ease}
@keyframes invertir-verde{30%{background:var(--acento);color:var(--sobre-acento)}}
@media (hover:hover){.invertir:hover{background:var(--relleno-2)}}
/* la localidad del destino: una cápsula al frente de los lugares frecuentes */
.chip-localidad{display:inline-flex;align-items:center;padding:0;background:linear-gradient(var(--acento),var(--acento)) 14px 50%/8px 8px no-repeat,var(--relleno-2);color:var(--tinta);cursor:pointer}
#chips-destino .chip-localidad select{-webkit-appearance:none;appearance:none;width:auto;max-width:72vw;min-height:34px;padding:6px 32px 6px 30px;border:0;border-radius:var(--r-pill);background:none;color:inherit;font:700 .875rem/1.2 var(--font-sans);cursor:pointer}
.chip-localidad::before{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.chip-localidad::after{content:none}

.chip-localidad select:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}

/* ---------- Lo que se abre encima: menú, política, reclamos, documentos ---------- */
.hoja-cab{flex-wrap:nowrap}
.hoja-menu{width:min(440px,100%)}
.menu-lista{gap:var(--esp-2)}
.visor-hoja .elegir{--celda:var(--relleno);min-height:58px;color:var(--tinta);text-decoration:none}
.politica p{color:var(--tinta-2);max-width:62ch;text-wrap:pretty}
.politica p + p{margin-top:2px}
button.enlace-texto{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit}
/* fuera de servicio */
.cerrada{display:grid;place-items:center;min-height:56svh}
.cerrada-caja{width:min(100%,460px);gap:var(--esp-5)}
#cho-puerta > .panel,#adm-puerta{gap:var(--esp-5)}
#adm-puerta{width:min(100%,460px);margin-inline:auto}

@media (prefers-reduced-motion: reduce){
  .trazo-anda i,.trazo-llega i,.trazo-llega::after,.abierta .arte > *,.abierta .arte-pista i,.inicio .logo-marca,.inicio .trazo::before,.inicio .trazo i,.inicio .trazo::after{animation:none}
  .inicio,.inicio .logo-marca,.inicio .inicio-ola{transition:none}
  .inicio .logo-punto,#btn-pedir.listo .pedir-ruta i,#btn-pedir.listo .pedir-ruta::after,.piezas > *,.r-parada::before,.invertir.gira,.inicio-lugar,.invertir.gira svg,.opcion input:checked + span .ico{animation:none}
  .menu-btn,.menu-btn:active,.quitar,.quitar:active{transform:none}
}

/* ---------- Casilla: lo que hay que aceptar para seguir. Nunca viene marcada ---------- */
.acepto{display:flex;flex-direction:column;gap:var(--esp-2)}
.casilla{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--esp-3);align-items:start;min-height:var(--alto-control-chico);padding-block:var(--esp-2);font-size:.9375rem;line-height:1.4;cursor:pointer}
.casilla input{-webkit-appearance:none;appearance:none;position:relative;width:28px;height:28px;margin:0;border-radius:var(--r-s);background:var(--relleno-2);cursor:pointer;transition:background-color .15s ease}
.casilla input::after{content:"";position:absolute;left:9px;top:4px;width:8px;height:14px;border:solid var(--sobre-boton);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .2s var(--resorte)}
.casilla input:checked{background:var(--boton)}
.casilla input:checked::after{transform:rotate(45deg) scale(1)}
.casilla span{padding-top:4px}
.acepto .letra-chica{padding-left:40px}
.acepto .error{padding-left:40px}
@media (prefers-reduced-motion: reduce){.casilla input,.casilla input::after{transition:none}}

/* ---------- Textos legales: se leen como una nota, de arriba abajo, en una sola columna ---------- */
.legal{display:flex;flex-direction:column;gap:var(--esp-6);max-width:760px;margin-inline:auto;padding-block:var(--esp-6)}
.legal p,.legal li{max-width:66ch;color:var(--tinta-2);text-wrap:pretty}
.legal p strong{color:var(--tinta);font-weight:700}
.legal section{gap:var(--esp-2)}
.legal section > .subtitulo{margin-bottom:2px}
.puntos{display:flex;flex-direction:column;gap:var(--esp-2);padding-left:1.15em}
.puntos li::marker{color:var(--tinta-3)}
.legal .pie-enlaces{padding-top:var(--esp-4);border-top:1px solid var(--linea)}
#v-legal{animation:entra .5s var(--resorte) backwards}
.gestion-num{font-size:1.75rem;letter-spacing:.08em}

/* ---------- La tarifa en la administración: el litro de nafta manda, y la cuenta queda a la vista ---------- */
.nafta > input{max-width:220px;font:800 1.75rem/1.1 var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cuenta-tabla{font-variant-numeric:tabular-nums}
.cuenta-tabla th{white-space:normal;vertical-align:bottom}
.cuenta-tabla tbody th{padding:var(--esp-3) 10px;font:500 .9375rem/1.4 var(--font-sans);color:var(--tinta);border-bottom:1px solid var(--linea);white-space:nowrap}
.cuenta-tabla tbody tr:last-child th{border-bottom:0}
.cuenta-tabla td:last-child{font-weight:700}
#t-cuenta{display:flex;flex-direction:column;gap:var(--esp-2);max-width:640px;padding:var(--esp-2) var(--esp-2) var(--esp-3);border-radius:var(--r-m);background:var(--relleno)}
#t-cuenta .letra-chica{padding-inline:10px;color:var(--tinta-2)}
#t-ajustes{padding:0 var(--esp-4);border-radius:var(--r-m);background:var(--relleno)}
#t-ajustes[open]{padding-bottom:var(--esp-4)}
#t-ajustes .rejilla{--campo-fondo:var(--superficie)}
@media (max-width:480px){.cuenta-tabla th,.cuenta-tabla td,.cuenta-tabla tbody th{padding-inline:6px}.cuenta-tabla{font-size:.875rem}}

/* ---------- Fotos: sacar una en el momento o elegirla de la galería ---------- */
.foto-botones{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.foto-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px 6px 10px;border:0;border-radius:var(--r-pill);background:var(--relleno-2);color:var(--tinta);font:700 .875rem/1 var(--font-sans);transition:transform .28s var(--resorte),background-color .15s ease}
.foto-btn::after{content:"";position:absolute;inset:-4px -2px}
.foto-btn:active{transform:scale(.95);transition-duration:.08s}
.foto-btn i{width:17px;height:17px;flex:none;background:currentColor}
.ico-camara{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5h6l1.6 2.2H20a1.6 1.6 0 0 1 1.6 1.6v10a1.6 1.6 0 0 1-1.6 1.6H4a1.6 1.6 0 0 1-1.6-1.6v-10A1.6 1.6 0 0 1 4 6.7h3.4L9 4.5Zm3 4.3a4.2 4.2 0 1 0 0 8.4 4.2 4.2 0 0 0 0-8.4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5h6l1.6 2.2H20a1.6 1.6 0 0 1 1.6 1.6v10a1.6 1.6 0 0 1-1.6 1.6H4a1.6 1.6 0 0 1-1.6-1.6v-10A1.6 1.6 0 0 1 4 6.7h3.4L9 4.5Zm3 4.3a4.2 4.2 0 1 0 0 8.4 4.2 4.2 0 0 0 0-8.4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.ico-galeria{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3.5h14A2.5 2.5 0 0 1 21.5 6v12a2.5 2.5 0 0 1-2.5 2.5H5A2.5 2.5 0 0 1 2.5 18V6A2.5 2.5 0 0 1 5 3.5Zm0 2a.5.5 0 0 0-.5.5v9.6l4.2-4.2a1.2 1.2 0 0 1 1.7 0l3.1 3.1 1.6-1.6a1.2 1.2 0 0 1 1.7 0l2.7 2.7V6a.5.5 0 0 0-.5-.5H5Zm10.5 5a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3.5h14A2.5 2.5 0 0 1 21.5 6v12a2.5 2.5 0 0 1-2.5 2.5H5A2.5 2.5 0 0 1 2.5 18V6A2.5 2.5 0 0 1 5 3.5Zm0 2a.5.5 0 0 0-.5.5v9.6l4.2-4.2a1.2 1.2 0 0 1 1.7 0l3.1 3.1 1.6-1.6a1.2 1.2 0 0 1 1.7 0l2.7 2.7V6a.5.5 0 0 0-.5-.5H5Zm10.5 5a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.foto.lista .foto-btn{background:rgba(255,255,255,.92);color:#0e0e0e}
.foto-estado{font-weight:700}
.foto:not(.lista) .foto-estado{color:var(--tinta-3)}
.foto.lista .foto-estado::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;background:#2fd16a;vertical-align:1px}
.foto-perfil{grid-column:1 / -1;min-height:170px}
@media (min-width:640px){.foto-perfil{grid-column:auto}}
/* la cámara de la compu, adentro de la app */
.camara-visor{position:relative;overflow:hidden;border-radius:var(--r-l);background:#000;aspect-ratio:4 / 3}
.camara-visor video{display:block;width:100%;height:100%;object-fit:cover}
.camara-espejo video{transform:scaleX(-1)}
.camara-guia{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-52%);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.35);border:3px solid rgba(255,255,255,.85);pointer-events:none}
@media (max-width:640px){.camara-visor{aspect-ratio:3 / 4}}

/* ---------- La cara del chofer ---------- */
.avatar{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--relleno-2)}
.ficha .avatar{width:64px;height:64px}
.ficha:has(.avatar){justify-content:flex-start}
.ficha:has(.avatar) .patente{margin-left:auto}
.avatar-vacio{position:relative;display:block;background:var(--relleno-2)}
.avatar-vacio::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:4px solid var(--tinta-3);box-sizing:border-box}
.perfil-falta{border:2px solid var(--acento)}
.perfil-falta .subtitulo{margin-bottom:2px}

/* ---------- Permisos: cada uno con su botón ---------- */
.permiso{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--esp-3);padding:var(--esp-3);border-radius:var(--r-m);background:var(--relleno)}
.permiso-ico{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--boton)}
.pi-geo{width:18px;height:18px;border-radius:50%;border:4.5px solid var(--sobre-boton);box-sizing:border-box}
.pi-noti{width:15px;height:15px;border-radius:4px;background:var(--acento-boton)}
.permiso-ok{color:var(--ok-texto);font:700 .9375rem/1 var(--font-sans);white-space:nowrap}
.permiso-no{color:var(--mal);font:700 .9375rem/1 var(--font-sans);white-space:nowrap}
@media (max-width:420px){.permiso{grid-template-columns:44px minmax(0,1fr)}.permiso > :last-child{grid-column:2;justify-self:start}}

/* ---------- Seguimiento: el chofer viene y la barra se llena ---------- */
.sigue{display:flex;flex-direction:column;gap:12px;padding:var(--esp-4);border-radius:var(--r-m);background:var(--relleno)}
.sigue-cab strong{font:700 1.0625rem/1.2 var(--font-sans)}
.sigue-barra{position:relative;height:12px;margin:6px 10px;border-radius:var(--r-pill);background:var(--relleno-2)}
.sigue-lleno{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);border-radius:var(--r-pill);background:var(--acento);transition:width .9s var(--resorte)}
.sigue-salida{position:absolute;left:-10px;top:50%;z-index:1;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:5px solid var(--tinta);background:var(--relleno);box-sizing:border-box}
.sigue-meta{position:absolute;right:-10px;top:50%;z-index:1;width:20px;height:20px;margin-top:-10px;border-radius:5px;background:var(--tinta)}
.sigue-barra[aria-valuenow="100"] .sigue-meta{background:var(--acento);animation:trazo-brota .45s var(--resorte)}
.sigue-auto{position:absolute;left:calc(var(--p) * 100%);top:50%;z-index:2;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--boton);box-shadow:0 0 0 4px var(--relleno);transition:left .9s var(--resorte)}
.sigue-auto::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:2px;background:var(--acento-boton)}
.sigue-espera .sigue-lleno{width:100%;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--borde) 8px 12px);opacity:.5;animation:trazo-anda 1.2s linear infinite}
.sigue-espera .sigue-auto{display:none}
@media (prefers-reduced-motion: reduce){.sigue-lleno,.sigue-auto{transition:none}.sigue-espera .sigue-lleno{animation:none}}

/* ---------- Notificaciones de la administración: cómo se va a ver ---------- */
.noti-vista{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;max-width:420px;padding:12px 14px;border-radius:18px;background:var(--superficie-2);box-shadow:var(--sombra-1)}
.noti-ico{position:relative;display:block;width:44px;height:44px;border-radius:11px;background:#0e0e0e}
.noti-ico i{position:absolute;left:50%;top:9px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;border:3px solid #fff;box-sizing:border-box}
.noti-ico b{position:absolute;left:50%;bottom:9px;width:11px;height:11px;margin-left:-5.5px;border-radius:3px;background:#fff}
.noti-ico::after{content:"";position:absolute;left:50%;top:21px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#fff;box-shadow:0 5px 0 #fff}
.noti-app{color:var(--tinta-3);font:500 .8125rem/1.2 var(--font-sans)}
.noti-vista strong{font:700 1rem/1.25 var(--font-sans);margin-top:2px}
.noti-cuerpo{color:var(--tinta-2);font-size:.9375rem;line-height:1.35}

/* ---------- Saludo editable: cómo se va a ver ---------- */
.saludo-vista{display:flex;flex-direction:column;gap:6px;max-width:520px;padding:var(--esp-4);border-radius:var(--r-m);background:var(--fondo)}
.saludo-vista .titulo{margin-top:4px}
.chip.chip-elegida{background:var(--boton);color:var(--sobre-boton)}