/* Mi taller › Recibir un auto (recepcion.js). Pensado primero para el celular de 375 px, en EMIR Claro y en EMIR oscuro. */
#reRaiz{max-width:560px}
#reRaiz label{display:block}
.re-pasos{list-style:none;margin:0 0 16px;padding:10px 12px 8px;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio-2);display:grid;grid-template-columns:repeat(5,1fr);gap:6px;counter-reset:p}
.re-pasos li{min-width:0}
.re-pasos button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0 0;background:none;border:0;border-top:3px solid var(--linea2);color:var(--gris);font:600 var(--t-2)/1.2 var(--f);text-align:left;cursor:default}
.re-pasos button span{font:800 var(--t-1)/1 var(--num,var(--f));letter-spacing:.08em}
.re-pasos button b{font-weight:700;max-width:100%;overflow-wrap:anywhere}
.re-pasos li.hecho button{border-top-color:var(--menta);color:var(--texto);cursor:pointer}
.re-pasos li[aria-current="step"] button{border-top-color:var(--menta);color:var(--tinta)}
.re-pasos li[aria-current="step"] b{font-weight:800}
.re-paso{background:var(--sup);border:1px solid var(--linea);border-radius:var(--radio-2);padding:4px 16px 16px}
.re-paso>label:first-child,.re-paso>.re-sub:first-child{margin-top:12px}
.re-grande{font:800 var(--t-6)/1.1 var(--num,var(--f))!important;letter-spacing:.06em;text-transform:uppercase}
#reVin{font-family:var(--num,var(--f));letter-spacing:.04em;text-transform:uppercase}
.re-cuenta{float:right;font-weight:600;color:var(--gris);font-size:var(--t-2)}
.re-vinmsg:empty,.re-visitas:empty{display:none}
.re-vinmsg.malo{color:var(--rojo);font-weight:600}
.re-visitas{margin:12px 0 0;font-size:var(--t-3);color:var(--texto);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.re-chip{display:inline-block;padding:4px 10px;border-radius:var(--radio-pildora);background:var(--menta-osc);border:1px solid var(--linea2);font-size:var(--t-2);font-weight:700;color:var(--tinta)}
.re-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.re-dos>div{min-width:0}
.re-sub{margin:16px 0 8px;font-size:var(--t-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.re-msg{margin:12px 0 0;font-size:var(--t-3);color:var(--menta)}
.re-msg:empty{display:none}
.re-msg.malo,.re-msg.red{color:var(--rojo);font-weight:600}
.re-pie{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:16px}
.re-pie .btn{margin:0}
.re-pie.solo{grid-template-columns:auto}
.re-atras{width:auto!important;padding:16px 16px 16px 10px!important;gap:4px!important}
.re-atras svg{width:18px;height:18px}
.re-saltar{margin-top:12px!important}

/* cliente */
.re-sug{display:grid;gap:6px;margin-top:6px}
.re-sug:empty{display:none}
.re-sug button,.re-elegido{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;background:var(--fondo);border:1px solid var(--linea2);border-radius:var(--radio-2);padding:12px;color:var(--texto);font:inherit;cursor:pointer}
.re-sug button b,.re-elegido b{display:block;font-size:var(--t-4);overflow-wrap:anywhere}
.re-sug button small,.re-elegido small{display:block;color:var(--gris);font-size:var(--t-3);margin-top:2px}
.re-elegido{cursor:default;border-color:var(--menta)}
.re-elegido>div{min-width:0}
.re-elegido .btn{flex:none}
#reCliHint:empty{display:none}

/* gasolina: cinco marcas que se llenan hasta la elegida */
.re-gas{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.re-gas button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;min-height:56px;background:var(--fondo);border:1px solid var(--linea2);border-radius:var(--radio-1,8px);color:var(--texto);font:700 var(--t-2)/1 var(--f);cursor:pointer}
.re-gas button i{display:block;width:70%;height:10px;border-radius:3px;background:rgba(var(--tinta-rgb),.12)}
.re-gas button.lleno i{background:var(--menta)}
.re-gas button[aria-pressed="true"]{border-color:var(--menta);box-shadow:0 0 0 1px var(--menta) inset}

/* fotos */
.re-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.re-foto{position:relative;margin:0;aspect-ratio:1;border-radius:var(--radio-1,8px);overflow:hidden;background:var(--sup2)}
.re-foto img{width:100%;height:100%;object-fit:cover;display:block}
.re-foto-x{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(3,4,6,.7);color:#fff;font:700 18px/1 var(--f);cursor:pointer;display:grid;place-items:center}
.re-foto-mas{aspect-ratio:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--linea2);border-radius:var(--radio-1,8px);color:var(--tinta);font-weight:700;font-size:var(--t-2);cursor:pointer;margin:0!important}
.re-foto-mas svg{width:22px;height:22px}
.re-archivo{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* firma: el texto arriba, el recuadro blanco abajo (también en modo oscuro: es papel) */
.re-firma-texto{font-size:var(--t-3);line-height:1.45;color:var(--texto2,var(--texto));background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio-2);padding:12px}
.re-firma-texto p{margin:0}
.re-firma-texto .re-extra{margin-top:8px;font-weight:600;color:var(--texto)}
.re-firma{position:relative;margin-top:8px;border:1.5px solid var(--linea2);border-radius:var(--radio-2);overflow:hidden;background:#fff}
.re-firma canvas{display:block;width:100%;height:180px;touch-action:none;cursor:crosshair}
.re-firma.apagada canvas{opacity:.35;cursor:not-allowed}
.re-firma-guia{position:absolute;left:16px;right:16px;bottom:36px;border-bottom:1px solid #C9CDD3;color:#8A9099;font-size:var(--t-2);pointer-events:none;padding-bottom:4px}
.re-firma.firmada .re-firma-guia{color:transparent}
.re-borrar{position:absolute;top:8px;right:8px;background:#fff;border:1px solid #C9CDD3;color:#0B0F14;border-radius:var(--radio-pildora);padding:6px 12px;font:600 var(--t-2)/1 var(--f);cursor:pointer;min-height:44px;min-width:44px}

/* envío y pendientes */
.re-envio,.re-listo,.re-pend{background:var(--sup);border:1px solid var(--linea);border-radius:var(--radio-2);padding:16px}
.re-envio>.re-sub:first-child,.re-listo>.re-sub:first-child,.re-pend>.re-sub:first-child{margin-top:0}
.re-envio-t{display:block;font-size:var(--t-5);font-weight:800;overflow-wrap:anywhere}
.re-envio>small{display:block;color:var(--gris);font-size:var(--t-3);margin-top:2px}
.re-cola{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.re-cola li{display:flex;align-items:center;gap:10px;font-size:var(--t-3);color:var(--gris)}
.re-cola li i{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--linea2)}
.re-cola li.ok{color:var(--texto)}
.re-cola li.ok i{background:var(--menta);border-color:var(--menta)}
.re-envio .re-fotos{margin-top:4px}
.re-firma-otra{margin-top:12px}
.re-firma-img{display:block;width:100%;max-height:140px;object-fit:contain;background:#fff;border:1px solid var(--linea);border-radius:var(--radio-2);margin-top:8px}
.re-pend-f{padding:12px 0;border-top:1px solid var(--linea)}
.re-pend-f:first-of-type{border-top:0;padding-top:0}
.re-pend-f b{display:block;font:800 var(--t-5)/1.2 var(--num,var(--f));letter-spacing:.04em;overflow-wrap:anywhere}
.re-pend-f small{display:block;color:var(--gris);font-size:var(--t-3);margin-top:4px}
.re-pend-f .btn{margin-top:12px}
.re-pend-f .btn.chico{margin-top:8px}

/* listo */
.re-folio{display:block;font:800 clamp(40px,12vw,56px)/1 var(--num,var(--f));letter-spacing:-.01em;color:var(--tinta)}
.re-listo-d{margin:8px 0 0;color:var(--texto);font-size:var(--t-4);line-height:1.4}
.re-nota{margin:12px 0 0;padding:10px 12px;border-radius:var(--radio-2);background:var(--menta-osc);border:1px solid var(--linea2);font-size:var(--t-3)}
.re-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.re-btns .btn{margin-top:12px}
@media(max-width:360px){.re-dos{grid-template-columns:1fr;gap:0}.re-btns{grid-template-columns:1fr}}
/* en el celular los botones del paso van pegados arriba de la barra de abajo: «Siguiente» siempre a la mano */
@media(max-width:900px){
  #recepcion .re-pie{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:5;margin:16px -16px 0;padding:10px 16px;background:var(--fondo);box-shadow:0 -10px 16px -12px rgba(0,0,0,.25)}
}
.re-falla{display:grid;gap:8px;margin:0 0 12px;padding:12px;border:1px solid var(--rojo);border-radius:var(--radio-2);background:var(--fondo)}
.re-falla .re-msg{margin:0}
.re-falla .btn{margin:0}

/* leer tarjeta de circulación (tarjeta.js): botón arriba del paso 1; lo que se llenó solo queda marcado hasta que se edita */
.re-tarjeta{margin:12px 0 4px}
.re-tarjeta>.btn{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;margin:0!important;cursor:pointer}
.re-tarjeta>.btn svg{width:20px;height:20px}
.re-tarjeta>.btn.ocupado{opacity:.6;pointer-events:none}
.re-tarjeta-h{margin:8px 0 0!important}
.re-tarjeta-h label{display:inline!important;color:var(--tinta);font-weight:700;text-decoration:underline;cursor:pointer;margin:0!important}
.re-tarjeta-h.listo{color:var(--texto);font-weight:600}
.re-tarjeta-h.malo{color:var(--rojo);font-weight:600}
#reRaiz input.re-leido{border-color:var(--menta);box-shadow:0 0 0 1px var(--menta) inset}
#reRaiz input.re-dudoso{border-color:var(--rojo);border-style:dashed}
/* dictar lo que reporta el cliente: botón chico a la derecha de la etiqueta */
#reRaiz label[for="reReporta"]{display:flex;align-items:center;justify-content:space-between;gap:8px}
.re-dicta{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:var(--radio-pildora);border:1px solid var(--linea2);background:var(--fondo);color:var(--tinta);font:700 var(--t-2)/1 var(--f);cursor:pointer}
.re-dicta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.re-dicta.oyendo{border-color:var(--rojo);color:var(--rojo)}
.re-firma-texto p+p{margin-top:6px}