/* Rifa Solidaria · estilos de la app (vendedor y administración).
   Base: CSS del prototipo aprobado del vendedor (v14), sin el marco de revisión. Solo variables
   semánticas de tokens.css (UX-05 v0.4); nada de colores sueltos en los componentes. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--color-fondo-pagina)}
body{margin:0;color:var(--color-texto-principal);font-family:var(--tipografia-base);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--color-borde-foco);outline-offset:3px}
/* Los títulos reciben el foco al cambiar de pantalla (lectores de pantalla); no son interactivos. */
[tabindex="-1"]:focus{outline:none}

/* ---------- app ---------- */
.app{position:relative;width:100%;max-width:420px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--color-fondo-pagina);color:var(--color-texto-principal);display:flex;flex-direction:column;font-size:18px;line-height:1.5}
.app-scroll{flex:1;padding:16px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));display:flex;flex-direction:column;gap:20px}
.app-pie{position:sticky;bottom:0;z-index:4;background:var(--color-fondo-superficie);box-shadow:var(--elevacion-barra-fija);border-top:1px solid var(--color-borde-divisor);padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));display:flex;gap:12px;align-items:center}
.app-pie:empty{display:none}
.mantenimiento{position:sticky;top:0;z-index:5}
.mantenimiento{background:var(--color-aviso-atencion-fondo);color:var(--color-aviso-atencion-texto);border-bottom:2px solid var(--color-aviso-atencion-borde);padding:10px 16px;font-size:16px;line-height:1.4;display:flex;gap:10px;align-items:flex-start}
.mantenimiento svg{flex:none;margin-top:1px}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.identidad{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;min-width:0}
.usuario{display:flex;align-items:center;gap:8px;min-height:40px}
.usuario b{font-size:20px;line-height:1.2;text-align:right}
.avatar{flex:none;display:grid;place-items:center;color:var(--color-texto-principal)}
.identidad .enlace{min-height:40px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.enlace{background:none;border:0;padding:0 2px;min-height:48px;color:var(--color-texto-enlace);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:16px;text-align:left}
.enlace.grande{font-size:18px;font-weight:700}
.volver{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0 4px;min-height:48px;color:var(--color-texto-enlace);font-size:18px;font-weight:700;cursor:pointer;flex:none;margin-left:-4px}
.paso{font-size:16px;color:var(--color-texto-secundario);margin:0}
h1{font-size:28px;line-height:1.25;margin:0;text-wrap:balance}
h2.sec{font-size:22px;line-height:1.3;margin:0}
.ayuda{font-size:16px;color:var(--color-texto-secundario);margin:0}
.encab{display:grid;gap:4px}

.btn{font-size:20px;font-weight:700;line-height:1.2;min-height:56px;width:100%;border-radius:var(--radio-boton);border:2px solid transparent;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:var(--elevacion-boton);transition:background-color 150ms, box-shadow 150ms, transform 150ms}
.btn:active{box-shadow:none;transform:translateY(1px)}
.btn-principal{background:var(--color-accion-principal-fondo);color:var(--color-accion-principal-texto)}
.btn-principal:active{background:var(--color-accion-principal-fondo-presionado)}
.btn-secundario{background:var(--color-accion-secundaria-fondo);color:var(--color-accion-secundaria-texto)}
.btn-secundario:active{background:var(--color-accion-secundaria-fondo-presionado)}
.btn-peligro{background:var(--color-accion-peligro-fondo);color:var(--color-accion-peligro-texto)}
.btn-peligro:active{background:var(--color-accion-peligro-fondo-presionado)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--color-accion-deshabilitada-fondo);color:var(--color-accion-deshabilitada-texto);cursor:not-allowed;box-shadow:none;transform:none}
.btn.auto{width:auto;flex:none}
.btn-texto{background:none;box-shadow:none;color:var(--color-texto-enlace);text-decoration:underline;text-underline-offset:4px}
.btn-texto:active{background:var(--color-fondo-sutil);transform:none}
.spinner{width:20px;height:20px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:gira .8s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
.acciones{display:grid;gap:12px}

.aviso{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radio-tarjeta);border:2px solid;font-size:18px;line-height:1.4}
.aviso svg{flex:none;width:24px;height:24px;margin-top:1px}
.aviso .cont{display:grid;gap:4px;min-width:0;flex:1}
.aviso b{display:block}
.aviso .acc{display:flex;flex-wrap:wrap;gap:4px 16px}
.aviso .enlace{color:inherit;font-weight:700;font-size:16px}
.a-exito{background:var(--color-aviso-exito-fondo);border-color:var(--color-aviso-exito-borde);color:var(--color-aviso-exito-texto)}
.a-atencion{background:var(--color-aviso-atencion-fondo);border-color:var(--color-aviso-atencion-borde);color:var(--color-aviso-atencion-texto)}
.a-error{background:var(--color-aviso-error-fondo);border-color:var(--color-aviso-error-borde);color:var(--color-aviso-error-texto)}
.a-info{background:var(--color-aviso-info-fondo);border-color:var(--color-aviso-info-borde);color:var(--color-aviso-info-texto)}

.datos{background:var(--color-fondo-superficie);border:1px solid var(--color-borde-divisor);border-radius:var(--radio-tarjeta);padding:12px 12px 12px 16px;display:grid;gap:4px}
.datos .fila{display:flex;align-items:center;gap:12px}
.datos .txt{flex:1;min-width:0;line-height:1.3}
.datos .txt b{display:block;font-size:18px}
.datos .txt span{font-size:16px;color:var(--color-texto-secundario)}
.datos dl{margin:4px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:16px}
.datos dt{color:var(--color-texto-secundario)}
.datos dd{margin:0;overflow-wrap:anywhere}
.datos .enlace{justify-self:start;min-height:40px}
.datos .pie-datos{display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn-icono{width:48px;height:48px;min-height:48px;padding:0;border-radius:var(--radio-boton);flex:none}
.btn-icono svg{width:24px;height:24px}
.tarjeta{background:var(--color-fondo-superficie);border:1px solid var(--color-borde-divisor);border-radius:var(--radio-tarjeta);padding:16px;display:grid;gap:6px;text-align:left;width:100%;cursor:pointer}
.tarjeta .t{font-size:22px;font-weight:700;line-height:1.3}
.tarjeta .fila{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tarjeta .cifra{font-size:32px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.tarjeta .det{font-size:16px;color:var(--color-texto-secundario)}
.grupo{display:grid;gap:12px}
.lista-enlaces{display:grid;gap:0;background:var(--color-fondo-superficie);border:1px solid var(--color-borde-divisor);border-radius:var(--radio-tarjeta);overflow:hidden}
.lista-enlaces button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 16px;background:none;border:0;border-bottom:1px solid var(--color-borde-divisor);text-align:left;cursor:pointer;font-size:18px}
.lista-enlaces button:last-child{border-bottom:0}
.lista-enlaces .cnt{font-size:16px;color:var(--color-aviso-atencion-texto);background:var(--color-aviso-atencion-fondo);border:1px solid var(--color-aviso-atencion-borde);border-radius:999px;padding:0 10px;white-space:nowrap}
.chev{flex:none;color:var(--color-texto-secundario)}

.segmentado{display:grid;grid-template-columns:1fr 1fr;background:var(--color-fondo-carril);border-radius:var(--radio-boton);padding:4px;gap:4px}
.segmentado button{font-size:18px;font-weight:700;min-height:48px;border-radius:var(--radio-boton);border:2px solid transparent;background:transparent;color:var(--color-texto-secundario);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.segmentado button small{font-size:14px;font-weight:400}
.segmentado button[aria-pressed="true"]{background:var(--color-fondo-superficie);border-color:var(--color-accion-principal-borde);color:var(--color-accion-principal-texto)}

.grilla{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.celda{position:relative;height:56px;border-radius:var(--radio-celda);border:2px solid;display:flex;align-items:center;justify-content:center;font-family:var(--tipografia-numeros);font-size:20px;font-weight:700;line-height:1;padding:0;cursor:pointer;font-variant-numeric:tabular-nums}
.celda svg{position:absolute;top:3px;right:3px;width:16px;height:16px}
.c-disponible{background:var(--color-estado-numero-disponible-fondo);border-color:var(--color-estado-numero-disponible-borde);color:var(--color-estado-numero-disponible-texto)}
.c-seleccionado{background:var(--color-estado-numero-seleccionado-fondo);border:3px solid var(--color-estado-numero-seleccionado-borde);color:var(--color-estado-numero-seleccionado-texto)}
.c-pendiente{background:var(--color-estado-numero-pendiente-fondo);border-color:var(--color-estado-numero-pendiente-borde);color:var(--color-estado-numero-pendiente-texto);cursor:default}
.c-confirmado{background:var(--color-estado-numero-confirmado-fondo);border-color:var(--color-estado-numero-confirmado-borde);color:var(--color-estado-numero-confirmado-texto);cursor:default}
.c-esqueleto{background:var(--color-fondo-carril);border-color:var(--color-borde-divisor);cursor:default;animation:pulso 1.2s ease-in-out infinite}
@keyframes pulso{50%{opacity:.5}}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:16px;color:var(--color-texto-secundario)}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda i{width:16px;height:16px;border-radius:4px;border:2px solid;display:inline-block}

.resumen-barra{flex:1;min-width:0;line-height:1.3}
.resumen-barra b{display:block;font-size:18px}
.resumen-barra span{font-size:16px;color:var(--color-texto-secundario)}
.mono{font-family:var(--tipografia-numeros);font-variant-numeric:tabular-nums}

.campo{display:grid;gap:8px}
.campo label{font-size:18px;font-weight:700;line-height:1.4}
.entrada{display:flex;align-items:stretch;min-height:56px;border:2px solid var(--color-borde-control);border-radius:var(--radio-control);background:var(--color-fondo-superficie);overflow:hidden}
.entrada:focus-within{outline:3px solid var(--color-borde-foco);outline-offset:2px}
.entrada.err{border-color:var(--color-aviso-error-borde)}
.prefijo{display:flex;align-items:center;padding:0 12px;background:var(--color-fondo-carril);border-right:2px solid var(--color-borde-control);font-family:var(--tipografia-numeros);font-size:20px;font-weight:700;color:var(--color-texto-secundario);white-space:nowrap}
.entrada input{flex:1;min-width:0;border:0;outline:0;font-size:18px;padding:0 14px;background:transparent}
.entrada input.mono{font-size:20px;letter-spacing:.02em}
.entrada input.codigo{font-size:28px;letter-spacing:.3em;text-align:center}
.msj-error{display:flex;gap:8px;align-items:flex-start;color:var(--color-aviso-error-texto);font-size:16px;line-height:1.4}
.msj-error svg{flex:none;margin-top:2px}
.chip{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--color-fondo-sutil);border:1px solid var(--color-borde-divisor);border-radius:var(--radio-tarjeta);padding:10px 14px;font-size:16px}

.bloque{background:var(--color-fondo-superficie);border:1px solid var(--color-borde-divisor);border-radius:var(--radio-tarjeta);padding:16px;display:grid;gap:10px}
.bloque .cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bloque .cab b{font-size:18px}
.bloque .cab .enlace{min-height:44px}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px}
.etq{font-family:var(--tipografia-numeros);font-weight:700;font-size:18px;padding:4px 10px;border-radius:8px;background:var(--color-estado-numero-seleccionado-fondo);border:2px solid var(--color-estado-numero-seleccionado-borde);color:var(--color-estado-numero-seleccionado-texto)}
.etq.conflicto{background:var(--color-aviso-error-fondo);border-color:var(--color-aviso-error-borde);color:var(--color-aviso-error-texto);text-decoration:line-through}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--color-borde-divisor);padding-top:12px;font-weight:700}
.total .mono{font-size:24px}

.casilla{display:flex;gap:14px;align-items:flex-start;min-height:48px;padding:14px;border:2px solid var(--color-borde-control);border-radius:var(--radio-tarjeta);background:var(--color-fondo-superficie);cursor:pointer;font-size:18px;line-height:1.4}
.casilla input{appearance:none;flex:none;width:28px;height:28px;border:2px solid var(--color-borde-control);border-radius:6px;background:var(--color-fondo-superficie);margin:0;display:grid;place-content:center;cursor:pointer}
.casilla input:checked{background:var(--color-accion-principal-fondo);border-color:var(--color-accion-principal-borde)}
.casilla input:checked::after{content:"";width:8px;height:15px;border:solid var(--color-accion-principal-texto);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-2px)}
.casilla:has(input:checked){border-color:var(--color-accion-principal-borde);background:var(--color-fondo-sutil)}
.casilla.err{border-color:var(--color-aviso-error-borde)}
.casilla.bloq{opacity:.6;cursor:not-allowed}

.venta{gap:8px}
.venta .cab-v{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.venta .cab-v b{font-size:18px}
.venta .meta-v{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:16px;color:var(--color-texto-secundario)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:700;border-radius:999px;padding:2px 10px;border:1px solid}
.pill svg{width:16px;height:16px}
.p-pendiente{background:var(--color-estado-numero-pendiente-fondo);border-color:var(--color-estado-numero-pendiente-borde);color:var(--color-estado-numero-pendiente-texto)}
.p-confirmada{background:var(--color-estado-numero-confirmado-fondo);border-color:var(--color-estado-numero-confirmado-borde);color:var(--color-estado-numero-confirmado-texto)}
.p-liberada{background:var(--color-fondo-carril);border-color:var(--color-borde-divisor);color:var(--color-texto-secundario)}
.p-seguimiento{background:var(--color-aviso-atencion-fondo);border-color:var(--color-aviso-atencion-borde);color:var(--color-aviso-atencion-texto)}
.etq.e-pendiente{background:var(--color-estado-numero-pendiente-fondo);border-color:var(--color-estado-numero-pendiente-borde);color:var(--color-estado-numero-pendiente-texto)}
.etq.e-confirmado{background:var(--color-estado-numero-confirmado-fondo);border-color:var(--color-estado-numero-confirmado-borde);color:var(--color-estado-numero-confirmado-texto)}
.etq.e-liberado{background:var(--color-fondo-carril);border-color:var(--color-borde-divisor);color:var(--color-texto-secundario);text-decoration:line-through}
h2.sec .cuenta{font-size:16px;font-weight:400;color:var(--color-texto-secundario);margin-left:6px}
.lineas{display:grid;gap:0}
.linea{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--color-borde-divisor)}
.linea:first-child{border-top:0}
.linea .est{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-size:16px}
.linea .motivo{font-size:15px;color:var(--color-texto-secundario)}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.campo{grid-template-columns:minmax(0,1fr)}
.app-scroll>*{min-width:0;max-width:100%}
.buscar{display:flex;gap:8px;align-items:stretch}
.buscar .entrada{flex:1;min-width:0}
.celda.resaltada{outline:3px solid var(--color-borde-foco);outline-offset:3px}
.opcion{min-height:48px;padding:0 18px;border-radius:var(--radio-boton);border:2px solid var(--color-borde-control);background:var(--color-fondo-superficie);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.opcion[aria-checked="true"]{background:var(--color-estado-numero-seleccionado-fondo);border-color:var(--color-estado-numero-seleccionado-borde);color:var(--color-estado-numero-seleccionado-texto);font-weight:700}
.opcion svg{width:18px;height:18px}
.entrada textarea{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:18px;padding:12px 14px;background:transparent;resize:vertical;min-height:88px}
.terminal{display:grid;gap:14px;padding-top:32px}
.terminal svg{width:56px;height:56px}
.exito-cab{display:grid;justify-items:center;text-align:center;gap:10px;padding-top:24px}
.exito-cab svg{width:72px;height:72px;color:var(--color-aviso-exito-borde)}

.velo{position:fixed;inset:0;background:rgba(26,29,35,.45);display:flex;align-items:center;justify-content:center;padding:32px 20px;z-index:5}
.dialogo{max-width:420px;background:var(--color-fondo-superficie);border-radius:var(--radio-tarjeta);box-shadow:var(--elevacion-dialogo);padding:24px;display:grid;gap:16px;width:100%}
.dialogo h2{font-size:22px;margin:0;line-height:1.3}
.dialogo p{margin:0}

.toast{position:fixed;left:16px;right:16px;bottom:110px;max-width:388px;margin:0 auto;background:var(--color-texto-principal);color:var(--color-fondo-superficie);border-radius:12px;padding:12px 16px;font-size:16px;z-index:6}

@media (prefers-reduced-motion:reduce){.spinner,.c-esqueleto{animation:none}}
/* Celular de pantalla chica: la grilla sigue en 5 columnas sin desplazamiento horizontal */
@media (max-width:340px){.celda{font-size:18px}.btn{font-size:18px}}

.cargando-app{display:grid;place-items:center;min-height:60vh;color:var(--color-texto-secundario);gap:12px;text-align:center}
.btn-chico{font-size:18px;padding:0 16px}