/* Sistema de diseño "B" — promosbancarias (Fase 6). CSS a mano, sin build.
   Tokens como custom properties; claro/oscuro por prefers-color-scheme + [data-theme]. */

/* Fuente self-hosted */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/assets/fonts/hanken-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('/assets/fonts/hanken-grotesk-800.woff2') format('woff2'); }

/* --- Tokens: claro (default) --- */
:root {
  --bg:#EEF1F8; --surface:#FFFFFF; --surface-2:#F6F8FC; --text:#141A2E; --muted:#5A6480;
  --border:#E2E7F1; --accent:#00B3A4; --accent-press:#009488; --on-accent:#08221F;
  --warn:#B45309; --warn-bg:#FEF3C7; --danger:#DC2626; --danger-bg:#FDECEA;
  --r-card:16px; --r-btn:12px; --r-chip:999px; --maxw:560px;
  --font:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow-card:0 4px 14px rgba(20,26,46,.07);
  color-scheme: light;
}
/* --- Tokens: oscuro --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#111623; --surface:#1B2233; --surface-2:#161C2A; --text:#E8ECF5; --muted:#94A0BC;
    --border:#2A3346; --accent:#1FD1C0; --accent-press:#18B6A7; --on-accent:#08221F;
    --warn:#FBBF24; --warn-bg:#3A2E10; --danger:#F87171; --danger-bg:#3A1A18;
    --shadow-card:none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#111623; --surface:#1B2233; --surface-2:#161C2A; --text:#E8ECF5; --muted:#94A0BC;
  --border:#2A3346; --accent:#1FD1C0; --accent-press:#18B6A7; --on-accent:#08221F;
  --warn:#FBBF24; --warn-bg:#3A2E10; --danger:#F87171; --danger-bg:#3A1A18;
  --shadow-card:none; color-scheme: dark;
}

/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0; font-family:var(--font); font-size:16px; line-height:1.5;
  color:var(--text); background:var(--bg); min-height:100vh; min-height:100dvh;
}
img, picture, video { max-width:100%; height:auto; display:block; }
input, textarea, select { font:inherit; font-size:16px; }
button { min-height:44px; min-width:44px; touch-action:manipulation; cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.safe-top { padding-top:env(safe-area-inset-top); }
.safe-bottom { padding-bottom:env(safe-area-inset-bottom); }
.skip-link { position:absolute; left:-9999px; top:0; padding:8px 12px; background:var(--text); color:var(--bg); }
.skip-link:focus { left:8px; top:8px; z-index:9999; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:16px; }
.error-page { text-align:center; padding-top:20vh; }
.visually-hidden, .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- App shell ---- */
.app-shell { background:var(--bg); }
.topbar {
  position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  min-height:52px; padding:max(6px,env(safe-area-inset-top)) 16px 6px;
  background:var(--surface); color:var(--text); border-bottom:1px solid var(--border);
}
.topbar-user { font-weight:700; }
.topbar button { background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:var(--r-btn); padding:6px 14px; font-weight:600; }
.app-main { padding:16px 16px calc(80px + env(safe-area-inset-bottom)); max-width:var(--maxw); margin:0 auto; }

.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:10; display:flex;
  height:calc(58px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface); border-top:1px solid var(--border);
}
.bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:.7rem; text-decoration:none; color:var(--muted); font-weight:600; }
.bottom-nav a.active { color:var(--accent); }
.bottom-nav a span { font-size:1.35rem; }

/* ---- Flash ---- */
.flash { padding:10px 14px; border-radius:var(--r-btn); margin-bottom:12px; font-weight:600; }
.flash-ok { background:color-mix(in srgb, var(--accent) 14%, var(--surface)); color:var(--accent-press); }
.flash-error { background:var(--danger-bg); color:var(--danger); }

/* ---- Botones ---- */
.btn { display:inline-block; padding:10px 16px; border:1px solid var(--border); border-radius:var(--r-btn);
  text-decoration:none; color:var(--text); background:var(--surface); font-weight:700; text-align:center; }
.btn:active { transform:translateY(1px); }
.btn--pri, .btn-primario { border:0; background:var(--accent); color:var(--on-accent); }
.btn--pri:active, .btn-primario:active { background:var(--accent-press); }
.btn--sec { background:var(--surface-2); border:1px solid var(--border); color:var(--text); }
.btn-primario { width:100%; padding:12px; }
.theme-toggle { display:flex; gap:8px; flex-wrap:wrap; }
.theme-toggle [aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ---- Login ---- */
.login-page { max-width:360px; padding-top:16vh; margin:0 auto; }
.login-page h1 { text-align:center; }
.login-page label { display:block; margin:12px 0 4px; font-weight:600; }
.login-page input { width:100%; padding:12px; border:1px solid var(--border); border-radius:var(--r-btn);
  background:var(--surface); color:var(--text); }
.login-page button { width:100%; margin-top:16px; padding:12px; border:0; border-radius:var(--r-btn);
  background:var(--accent); color:var(--on-accent); font-weight:700; }
.error { background:var(--danger-bg); color:var(--danger); padding:10px 12px; border-radius:var(--r-btn); }

/* ---- Semana ---- */
.semana-rango { color:var(--muted); margin-top:-8px; }
.day-section { margin-bottom:22px; }
.day-title { font-size:1.05rem; font-weight:700; margin:0 0 8px; }
.day-today .day-title { color:var(--accent); }
.day-past { opacity:.5; }
.day-empty { color:var(--muted); font-size:.9rem; margin:4px 0 0; }

/* ---- Hero de ahorro (si la vista lo usa) ---- */
.ahorro-hero { margin:4px 0 16px; }
.ahorro-hero .lbl { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.ahorro-hero .amt { font-weight:800; font-size:2.1rem; line-height:1; color:var(--accent); margin-top:2px; }

/* ---- Card de promo ---- */
.promo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  margin-bottom:10px; box-shadow:var(--shadow-card); }
.promo-card.dimmed, .promo-card--atenuada { opacity:.55; }
.promo-card-link { display:block; padding:.75rem .85rem; text-decoration:none; color:inherit; }
.promo-card-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.promo-comercio { font-weight:700; font-size:1rem; }
.promo-beneficio { white-space:nowrap; }
.promo-beneficio strong { font-size:1.2rem; font-weight:800; color:var(--accent); }
.promo-beneficio small { color:var(--muted); margin-left:4px; }
.promo-titulo { margin:4px 0; color:var(--muted); font-size:.9rem; }
.promo-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }

/* ---- Badges ---- */
.badge { font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:8px;
  background:var(--surface-2); color:var(--muted); }
.badge-warn { background:var(--warn-bg); color:var(--warn); }
.badge-glow { background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--accent-press); }

/* ---- Chips de banco ---- */
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:var(--r-chip);
  background:var(--chip-color, var(--surface-2)); color:#fff; border:0; }

/* Detalle de promo, filtros y forms */
.filters-bar { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.filters-bar select { flex:1 1 140px; padding:10px; border:1px solid var(--border);
  border-radius:var(--r-btn); background:var(--surface); color:var(--text); }
.filters-bar button { padding:10px 16px; border:0; border-radius:var(--r-btn);
  background:var(--accent); color:var(--on-accent); font-weight:700; }

/* Detalle */
.promo-datos { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; }
.promo-datos dt { font-weight:600; color:var(--muted); }
.promo-datos dd { margin:0; }
.promo-titulo-detalle { color:var(--muted); margin-top:-8px; }
.promo-legales { white-space:normal; color:var(--muted); font-size:.9rem; }
.sucursales-lista { padding-left:18px; }
.usar-form { margin:16px 0; }
.usar-form select { width:100%; padding:12px; border:1px solid var(--border); border-radius:var(--r-btn);
  margin:4px 0 8px; background:var(--surface); color:var(--text); }
.admin-actions { display:flex; gap:8px; align-items:center; margin:16px 0; }
.admin-actions form { display:inline; }

/* Forms */
.promo-form fieldset, .perfil-form fieldset { border:1px solid var(--border); border-radius:var(--r-card);
  margin:0 0 16px; padding:14px; background:var(--surface); box-shadow:var(--shadow-card); }
.promo-form legend, .perfil-form legend { font-weight:700; padding:0 6px; }
.promo-form label, .perfil-form label { display:block; margin:10px 0 4px; font-weight:600; }
.promo-form input[type="text"], .promo-form input[type="date"], .promo-form input[type="url"],
.promo-form select, .promo-form textarea, .perfil-form input[type="text"],
.perfil-form input[type="password"] {
  width:100%; padding:12px; border:1px solid var(--border); border-radius:var(--r-btn);
  background:var(--surface); color:var(--text);
}
.check-row { display:flex; flex-wrap:wrap; gap:8px; }
.check-col { display:flex; flex-direction:column; gap:6px; }
.check-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 10px;
  border:1px solid var(--border); border-radius:var(--r-btn); font-weight:400; margin:0; min-height:44px;
  background:var(--surface); }
.field-error { color:var(--danger); font-size:.85rem; margin:4px 0 0; }
.field-hint { color:var(--muted); font-size:.85rem; margin:10px 0 4px; }
.sucursal-row { display:grid; grid-template-columns:1fr auto; gap:6px; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px dashed var(--border); }
.sucursal-row input { grid-column:1; }
.sucursal-row .quitar-sucursal { grid-column:2; grid-row:1 / span 3; align-self:center;
  border:1px solid var(--border); border-radius:var(--r-btn); background:var(--surface); color:var(--text); }

/* ABM familia + direcciones */
.btn-link { text-align:center; }
.user-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:.75rem; margin-bottom:10px; box-shadow:var(--shadow-card); }
.user-card-top { display:flex; align-items:baseline; gap:8px; }
.user-nombre { font-weight:700; }
.user-meta { margin:4px 0 8px; color:var(--muted); font-size:.9rem; }
.reset-form { display:flex; gap:8px; }
.reset-form input { flex:1; min-width:0; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--r-btn); background:var(--surface); color:var(--text); }
.admin-links { display:flex; flex-direction:column; gap:8px; }
.admin-links .btn { text-align:center; }
.direcciones-lista { list-style:none; padding:0; margin:0 0 1rem; }
.direccion-item { display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.5rem 0; border-bottom:1px solid var(--border); }

/* ---- Tab Cerca ---- */
.cerca-wrap { position:relative; height:calc(100dvh - 3.6rem - 3.8rem); height:calc(100vh - 3.6rem - 3.8rem);
  margin:-1rem; overflow:hidden; }
@supports (height:100dvh) { .cerca-wrap { height:calc(100dvh - 3.6rem - 3.8rem); } }
#cerca-mapa { position:absolute; inset:0; z-index:1; }
.cerca-controles { position:absolute; top:.5rem; left:.5rem; right:.5rem; z-index:500;
  display:flex; flex-direction:column; gap:.4rem; pointer-events:none; }
.cerca-controles form, .cerca-controles .chips-direcciones { pointer-events:auto; }
.cerca-buscar input { width:100%; font-size:16px; padding:.6rem .9rem; border-radius:var(--r-chip);
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.12); }
.chips-direcciones { display:flex; gap:.35rem; flex-wrap:wrap; }
.chip-dir { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-chip);
  padding:.4rem .85rem; font-size:.85rem; text-decoration:none; color:var(--text); min-height:44px;
  display:inline-flex; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.chip-dir.activa { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.bottom-sheet { position:absolute; left:0; right:0; bottom:0; z-index:600; background:var(--surface);
  border-radius:18px 18px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.22); transition:height .22s ease;
  display:flex; flex-direction:column; }
@media (prefers-reduced-motion: reduce) { .bottom-sheet { transition:none; } }
.bottom-sheet[data-estado="colapsado"] { height:3.6rem; }
.bottom-sheet[data-estado="medio"] { height:45%; }
.bottom-sheet[data-estado="full"] { height:calc(100% - 4.5rem); }
.sheet-handle { width:100%; border:0; background:none; padding:.5rem .9rem .35rem; cursor:grab;
  display:flex; flex-direction:column; align-items:center; gap:.25rem; min-height:44px; color:var(--text); }
.sheet-grip { width:38px; height:4px; border-radius:2px; background:var(--border); }
.sheet-titulo { font-weight:700; font-size:.95rem; }
.sheet-contenido { overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 .9rem calc(.9rem + env(safe-area-inset-bottom)); }
.bucket-titulo { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  margin:.9rem 0 .3rem; font-weight:700; }
.cerca-card-wrap { position:relative; }
.cerca-distancia { position:absolute; top:.5rem; right:.6rem; z-index:2; font-size:.75rem; font-weight:700;
  color:var(--on-accent); background:var(--accent); border-radius:var(--r-chip); padding:.12rem .5rem; }
.cerca-empty { padding-top:1rem; }
.cerca-empty .cerca-buscar { display:flex; gap:.4rem; margin:.8rem 0; }
.cerca-empty .cerca-buscar input { flex:1; min-width:0; }
/* El input manda el ancho; el botón no debe estirarse (anula el width:100% de .btn-primario) */
.cerca-empty .cerca-buscar .btn-primario { width:auto; flex:0 0 auto; }
.pin-direccion { color:var(--muted); font-size:.8rem; }

/* ---- Empty states ---- */
.empty { text-align:center; color:var(--muted); padding:2rem 1rem; }
.empty .emoji { font-size:2.2rem; display:block; margin-bottom:.4rem; }
.empty p { margin:.2rem 0; }

/* ---- Skeletons (shimmer) ---- */
.skeleton { position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r-card); }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  animation:shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation:none; } }

/* ---- Paginación + "ver más" ---- */
.paginacion { display:flex; align-items:center; gap:10px; margin:18px 0 4px; }
.pag-info { flex:1; color:var(--muted); font-size:.85rem; text-align:center; }
.day-mas { margin:2px 0 0; }
.day-mas a { color:var(--accent); font-weight:700; font-size:.9rem; text-decoration:underline; text-underline-offset:2px; }