@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap');
/* Identidad Fuente Mendoza (BANG Company 2025): rojo #ff0000, marron #320000, mostaza #ffba00, blanco, negro.
   Tipografia descriptiva DIN Condensed Bold -> Barlow Condensed como equivalente web. */
:root {
  color-scheme: light dark;
  --rojo: #ff0000;
  --marron: #320000;
  --mostaza: #ffba00;
  --fondo: #f8f2e9;
  --superficie: #ffffff;
  --texto: #2a0804;
  --suave: #7b625b;
  --borde: #ecdfd3;
  --acento: #e00b00;
  --acento-texto: #ffffff;
  --acento-suave: #ffe5e0;
  --ok: #1f7a3a;
  --ok-suave: #e1f2e6;
  --aviso: #8a5a00;
  --aviso-suave: #fff1cc;
  --error: #b3261e;
  --error-suave: #fbe3e1;
  --radio: 12px;
  --sombra: 0 6px 24px rgba(50, 0, 0, 0.14);
  --titulos: "Barlow Condensed", "DIN Condensed", "Arial Narrow", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #170403;
    --superficie: #260a07;
    --texto: #fbf0e8;
    --suave: #c4a59c;
    --borde: #45201a;
    --acento: #ff3426;
    --acento-texto: #ffffff;
    --acento-suave: #43120c;
    --ok: #6ccb88;
    --ok-suave: #1c3324;
    --aviso: #ffc933;
    --aviso-suave: #3d2c06;
    --error: #ff8a80;
    --error-suave: #401612;
    --sombra: 0 6px 24px rgba(0, 0, 0, 0.55);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--titulos); font-weight: 700; letter-spacing: .01em; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
.suave { color: var(--suave); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--acento); color: var(--acento-texto); font-weight: 700;
}
.boton:not(:disabled):hover { filter: brightness(1.06); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.boton.ancho { width: 100%; }
.etiqueta {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--acento-suave); color: var(--acento);
}
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.error { background: var(--error-suave); color: var(--error); }
.aviso-flotante {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: var(--radio);
  background: var(--texto); color: var(--fondo); box-shadow: var(--sombra); z-index: 50;
  font-weight: 500; text-align: center;
}
.aviso-flotante.error { background: var(--error); color: #fff; }