/* Cupones de regalo (cupones.js). Usa los tokens de estilo.css y fn-tile/btn/t-anio; aquí solo su acomodo. */
.cu-caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;
  box-shadow:var(--sombra);margin-bottom:18px}
.cu-caja h2{font-size:18px;margin-bottom:6px}
.cu-buscar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px}
.cu-buscar label,.cu-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--suave)}
.cu-buscar input,.cu-form input,.cu-form select,.cu-form textarea{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--linea);
  border-radius:9px;background:var(--papel);color:var(--tinta);min-width:0}
.cu-buscar input[name=folio]{width:150px;text-transform:uppercase}
.cu-buscar input[name=codigo]{width:110px;text-transform:uppercase;letter-spacing:.15em}
.cu-ficha{margin-top:16px;border-top:4px solid #A57F4E;background:var(--fondo);border-radius:10px;padding:16px}
.cu-ficha h3{font-size:20px}
.cu-saldo{display:flex;align-items:baseline;gap:10px;margin:8px 0}
.cu-saldo b{font-size:40px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.cu-pista{height:10px;background:var(--linea);border-radius:5px;overflow:hidden;margin:4px 0 10px}
.cu-pista i{display:block;height:100%;background:#A57F4E}
.cu-datos{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px;margin:8px 0}
.cu-datos dt{color:var(--suave)} .cu-datos dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.cu-canje{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.cu-cuantos{display:flex;align-items:center;gap:6px}
.cu-cuantos button{width:40px;height:40px;border-radius:10px;border:1px solid var(--linea);background:var(--papel);font:900 20px Roboto,sans-serif;color:var(--tinta);cursor:pointer}
.cu-cuantos output{min-width:44px;text-align:center;font:900 24px Roboto,sans-serif}
.cu-ok{background:var(--ok-fondo);color:var(--ok);border-radius:9px;padding:10px 12px;font-weight:700;margin-top:10px}
.cu-error{background:var(--foco-fondo);color:var(--foco);border-radius:9px;padding:10px 12px;font-weight:700;margin-top:10px}
.cu-estado{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px;background:var(--bruma);color:var(--acento-tinta)}
.cu-estado.en_uso,.cu-estado.vigente{background:var(--ok-fondo);color:var(--ok)}
.cu-estado.vencido,.cu-estado.cancelado{background:var(--foco-fondo);color:var(--foco)}
.cu-tabla{width:100%;border-collapse:collapse;font-size:14px}
.cu-tabla th{position:sticky;top:0;background:var(--papel);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);padding:8px 6px;border-bottom:2px solid var(--linea);z-index:1}
.cu-tabla td{padding:8px 6px;border-bottom:1px solid var(--linea);vertical-align:top}
.cu-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cu-tabla tr[data-folio]{cursor:pointer} .cu-tabla tr[data-folio]:hover td{background:var(--bruma)}
.cu-desliza{overflow-x:auto;max-height:520px;overflow-y:auto}
.cu-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.cu-form .ancho{grid-column:1/-1}
.cu-total{font-size:15px;margin-top:10px} .cu-total b{font-size:22px;font-weight:900}
.cu-muestra{overflow-x:auto;padding:12px 0}
.cu-muestra .cp{transform-origin:top left}
.cu-historial{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--suave)}
.cu-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:640px){ .cu-caja{padding:14px} .cu-saldo b{font-size:32px} }