/* Delicárnicos · identidad base (toro original: negro, rojo, dorado y blanco). */
:root {
  --negro: #0b0b0c;
  --panel: #151416;
  --panel2: #1d1b1e;
  --linea: #2e2a2d;
  --rojo: #b3121f;
  --rojo2: #d32230;
  --rojo-osc: #7c0c15;
  --dorado: #f2b705;
  --dorado2: #ffd34d;
  --blanco: #f7f3ea;
  --gris: #b7b0a6;
  --gris2: #8a837a;
  --verde: #3fb36b;
  --azul: #5b9be6;
  --naranja: #f08a24;
  --radio: 14px;
  --sombra: 0 14px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--dorado2); }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .4em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: .55em 1.05em; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--panel2); color: var(--blanco); font-weight: 650;
  text-decoration: none; transition: transform .08s, background .15s, border-color .15s;
}
.btn:hover { border-color: #4a4347; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primario { background: linear-gradient(180deg, var(--rojo2), var(--rojo)); border-color: var(--rojo2); color: #fff; }
.btn.dorado { background: linear-gradient(180deg, var(--dorado2), var(--dorado)); border-color: var(--dorado); color: #1a1200; }
.btn.verde { background: #1f5b37; border-color: #2f8a53; color: #e7ffef; }
.btn.peligro { border-color: #7a2a2f; color: #ffc9cc; }
.btn.chico { min-height: 34px; padding: .3em .7em; font-size: .9em; border-radius: 10px; }
.btn.grande { min-height: 56px; font-size: 1.1em; padding: .7em 1.4em; }
.btn.ancho { width: 100%; }

input, select, textarea {
  width: 100%; min-height: 44px; padding: .55em .75em; border-radius: 11px;
  background: #0f0e10; border: 1px solid #3a3438; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--dorado); box-shadow: 0 0 0 3px rgba(242, 183, 5, .18); }
textarea { min-height: 80px; resize: vertical; }
label { display: block; font-size: .88em; color: var(--gris); margin: .7em 0 .25em; }
.campo-error { border-color: var(--rojo2) !important; }

.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.muted { color: var(--gris); }
.chica { font-size: .85em; }
.fila { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.pila > * + * { margin-top: .6em; }

.chip {
  display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em; border-radius: 999px;
  font-size: .8em; font-weight: 700; border: 1px solid var(--linea); background: #1a181b; white-space: nowrap;
}
.chip.rojo { background: rgba(179, 18, 31, .2); border-color: #6d1a21; color: #ffc6ca; }
.chip.dorado { background: rgba(242, 183, 5, .14); border-color: #6b5410; color: var(--dorado2); }
.chip.verde { background: rgba(63, 179, 107, .15); border-color: #22603a; color: #a8f0c4; }
.chip.azul { background: rgba(91, 155, 230, .15); border-color: #2c4f7a; color: #c4dcff; }
.chip.naranja { background: rgba(240, 138, 36, .15); border-color: #7a4613; color: #ffd2a6; }

.aviso { padding: .75em 1em; border-radius: 12px; border: 1px solid #6b5410; background: #1d1707; color: #ffe39a; }
.aviso.error { border-color: #7a2a2f; background: #230c0e; color: #ffd0d3; }
.aviso.ok { border-color: #22603a; background: #0b1d12; color: #c9f5d9; }

#toasts { position: fixed; z-index: 1000; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 440px); }
.toast { padding: .8em 1em; border-radius: 12px; background: #201d20; border: 1px solid #3e383c; box-shadow: var(--sombra); animation: sube .2s ease-out; }
.toast.error { border-color: #7a2a2f; background: #2a0f12; }
.toast.ok { border-color: #22603a; background: #0f2418; }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-fondo { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .7); display: flex; align-items: flex-end; justify-content: center; }
.modal { width: min(100%, 560px); max-height: 92vh; overflow: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: 20px 20px 0 0; padding: 18px; }
@media (min-width: 700px) { .modal-fondo { align-items: center; } .modal { border-radius: 20px; } }

.marca { display: flex; align-items: center; gap: .7em; text-decoration: none; color: inherit; }
.marca img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--dorado); }
.marca b { font-size: 1.15em; letter-spacing: .02em; text-transform: uppercase; }
.marca span { display: block; font-size: .78em; color: var(--dorado2); font-style: italic; }

.cargando { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); display: inline-block; }
.punto.off { background: var(--rojo2); }

/* utilidades (evitan estilos en línea: la política de seguridad los bloquea) */
.mt { margin-top: 10px; }
.mt2 { margin-top: 18px; }
.derecha { justify-content: flex-end; }
.desborde { overflow-x: auto; }
.p16 { padding: 16px; }
.sin-tope { max-height: none !important; }
.ancho-total { max-width: none !important; }

/* ── Mapa y selector de ubicación ── */
.mapa { position: relative; overflow: hidden; height: 260px; border-radius: 14px; border: 1px solid var(--linea); background: #d9d4cc; touch-action: none; cursor: grab; user-select: none; }
.mapa.arrastrando { cursor: grabbing; }
.mapa-capa { position: absolute; inset: 0; }
.mapa-capa img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.mapa-pin { position: absolute; left: 50%; top: 50%; width: 34px; height: 46px; margin: -46px 0 0 -17px; pointer-events: none; z-index: 3;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 46'%3E%3Cpath d='M17 0C7.6 0 0 7.4 0 16.6 0 29 17 46 17 46s17-17 17-29.4C34 7.4 26.4 0 17 0z' fill='%23d32230' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='17' cy='16' r='6.5' fill='%23fff'/%3E%3C/svg%3E"); filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.mapa.arrastrando .mapa-pin { transform: translateY(-6px); transition: transform .1s; }
.mapa-pin span { position: absolute; left: 50%; bottom: -3px; width: 8px; height: 4px; margin-left: -4px; border-radius: 50%; background: rgba(0,0,0,.35); }
.mapa-circulo { position: absolute; border-radius: 50%; background: rgba(91, 155, 230, .18); border: 2px solid rgba(91, 155, 230, .7); pointer-events: none; z-index: 2; }
.mapa-tienda { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #0b0b0c; border: 2px solid var(--dorado); display: grid; place-items: center; font-size: 15px; z-index: 2; pointer-events: none; }
.mapa-zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; z-index: 4; }
.mapa-zoom button { width: 36px; height: 36px; border-radius: 9px; border: 0; background: #fff; color: #111; font-size: 20px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.3); cursor: pointer; }
.mapa-ayuda { position: absolute; left: 8px; top: 8px; right: 52px; z-index: 4; padding: 5px 9px; border-radius: 9px; background: rgba(11,11,12,.82); color: #fff; font-size: 12px; pointer-events: none; }
.mapa-credito { position: absolute; right: 4px; bottom: 3px; z-index: 4; font-size: 10px; color: #333 !important; background: rgba(255,255,255,.75); padding: 1px 5px; border-radius: 4px; text-decoration: none; }
.selector-ubicacion { display: grid; gap: 8px; }
.su-explica { margin: 0; }
.su-sugerencia { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: #12100f; border: 1px solid var(--linea); font-size: .9em; }
.punto-vivo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--azul); animation: late 1s infinite; vertical-align: middle; }
@keyframes late { 50% { opacity: .3; } }

/* casillas y botones de opción: tamaño normal (el estilo general de input es para cajas de texto) */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--rojo2); box-shadow: none; }
.opcion { display: flex; align-items: center; gap: .6em; margin: .45em 0; color: var(--blanco); font-size: 1em; cursor: pointer; }

/* Ambiente de pruebas (AMBIENTE=pruebas en el servidor) */
.banda-pruebas { position: sticky; top: 0; z-index: 9999; background: repeating-linear-gradient(45deg, #f2b705, #f2b705 14px, #1a1a1a 14px, #1a1a1a 28px); color: #fff; text-align: center; font-weight: 800; font-size: .85rem; letter-spacing: .04em; padding: .35rem .5rem; text-shadow: 0 1px 2px #000, 0 0 6px #000; }