/* ────────────────────────────────────────────────────────────
   Taska Map — estilos compartidos
   Extracto unificado de los <style> embebidos en los 3 HTML.
   ──────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   1. RESET + RAÍZ
   ════════════════════════════════════════════════════════════ */

:root {
  /* === PALETA "RECIBO" === */
  --papel: #F8F1E0;            /* fondo claro general */
  --papel-oscuro: #EFE3C5;     /* fondos secundarios, manzanas del mapa */
  --fondo: #F4ECCC;            /* fondo principal de la app, amarillento */
  --fondo-card: #FAF5E6;       /* cards, popups, tickets */
  --tinta: #15110C;            /* texto principal, bordes 1.5px */
  --borde: #15110C;            /* alias semántico de tinta para bordes */
  --borde-soft: #E0D2A8;       /* líneas dashed suaves */
  --humo: #6E665A;             /* texto secundario, captions */
  --naranja: #E87A1A;          /* acento principal, pin normal, precios */
  --naranja-sel: #D4391A;      /* pin seleccionado, CTA principal */
  --espuma: #F2E4B5;           /* espuma del pin, highlights crema */
  --estrella: #E0A020;         /* iconos rating */
  --verde: #3A6B3E;            /* reservado v2 (estados positivos) */
  --error: #B33A3A;            /* errores, mantenido del sistema viejo */

  /* === ALIASES DE VARIABLES VIEJAS (puente temporal — se irán retirando por fases) === */
  --cream: var(--fondo);
  --cream-2: var(--papel-oscuro);
  --wine: var(--naranja-sel);
  --wine-2: var(--tinta);
  --mustard: var(--naranja);
  --bottle: var(--verde);
  --ink: var(--tinta);
  --smoke: var(--humo);

  /* === TIPOGRAFÍAS === */
  --font-display: "Bagel Fat One", system-ui, sans-serif;
  --font-serif: "DM Serif Display", Georgia, serif;
  --font-mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "Manrope", system-ui, sans-serif;

  /* === RADIOS === */
  --radius-card: 14px;
  --radius-popup: 12px;
  --radius-pill: 999px;
  --radius-button: 14px;

  /* === BORDES === */
  --border-ticket: 1.5px solid var(--tinta);
  --border-dashed: 1px dashed var(--tinta);
  --border-soft-dashed: 1px dashed var(--borde-soft);

  /* === SOMBRAS (sistema "Recibo") === */
  --shadow: 0 6px 24px rgba(21, 17, 12, 0.18);
  --shadow-strong: 0 6px 24px rgba(21, 17, 12, 0.32);
  --shadow-lg: 0 -8px 32px rgba(21, 17, 12, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Tipografía global de títulos. Las reglas más específicas de
   componentes (.taska-sheet-title, .login-title, etc.) ganan, así
   que esto sólo aplica a h1-h4 sin selector más fuerte. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--tinta);
}

/* Layout vertical por página (la clase va en <body>).
   En page-form y page-admin usamos flex column con min-height 100vh
   para que el .version-footer (display block) caiga al final del flujo
   en vez de pegarse al viewport con position fixed (causaba solapes
   sobre el textarea de proponer y el bloque de moderación de admin). */
html:has(body.page-map), body.page-map { height: 100%; overflow: hidden; }
html:has(body.page-form), body.page-form {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html:has(body.page-admin), body.page-admin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.page-form > #form-screen,
body.page-form > #success-screen { flex: 1 0 auto; }
body.page-admin > .login-screen,
body.page-admin > .admin-screen { flex: 1 0 auto; }

/* ════════════════════════════════════════════════════════════
   2. KEYFRAMES COMPARTIDOS
   ════════════════════════════════════════════════════════════ */

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-12px) rotate(-8deg); }
  60% { transform: translateY(0) rotate(4deg); }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Originalmente "pulse" en index.html — chapa pulsante de la city pill */
@keyframes pulse-mustard-3 {
  0%, 100% { box-shadow: 0 0 0 3px rgba(212,160,23,0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(212,160,23,0.05); }
}

/* Originalmente "pulse" en admin.html — punto del badge "pendiente" */
@keyframes pulse-mustard-2 {
  0%, 100% { box-shadow: 0 0 0 2px rgba(212,160,23,0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(212,160,23,0.05); }
}

/* ════════════════════════════════════════════════════════════
   3. INPUT BASE
   Idéntico en proponer.html y admin.html (login). En admin.html el
   modal usa .modal-form .field .input con valores distintos (más
   pequeño), que viven en su sección.
   ════════════════════════════════════════════════════════════ */

/* Input base. Sistema Recibo: rectángulo 6px, borde 1.5px tinta,
   placeholder en italic-serif (refuerza voz humana), foco con borde
   2px naranja-sel (compensamos el +0.5px de borde con padding). */
.input { width: 100%; background: var(--fondo-card);
  border: 1.5px solid var(--tinta); border-radius: 6px;
  height: 44px; padding: 0 14px; box-sizing: border-box;
  font: 500 14px var(--font-ui); color: var(--tinta);
  outline: none; transition: border-width 0.12s ease; }
.input::placeholder { color: var(--humo); font-weight: 400;
  font-family: var(--font-serif); font-style: italic; }
.input:focus { border-width: 2px; border-color: var(--naranja-sel);
  padding: 0 13.5px; }

/* ════════════════════════════════════════════════════════════
   4. INDEX.HTML — MAPA PÚBLICO
   Solo usado en index.html
   Nota: usa --shadow-strong (más oscuro) en lugar de --shadow.
   ════════════════════════════════════════════════════════════ */

.app { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }

#map { position: absolute; inset: 0; z-index: 0; background: var(--cream); }
.leaflet-tile-pane { filter: sepia(0.18); }
.leaflet-control-attribution { background: rgba(245,239,224,0.85) !important;
  font-family: 'Manrope', sans-serif !important; font-size: 10px !important; color: var(--smoke) !important; }
.leaflet-control-attribution a { color: var(--wine) !important; }

.header { position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px 12px 0; padding-top: max(env(safe-area-inset-top), 14px); pointer-events: none; }
.header-inner { max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  pointer-events: auto; }
/* ─── Isotipo (cuadrado naranja-sel + 'TM' en esquina) ───
   Sustituye al antiguo círculo con 'T' serif. Tres tamaños:
     - default 48px (header del mapa)
     - .logo-isotipo-lg 64px (pantalla de login del admin)
     - .logo-isotipo-sm 40px (header del admin)
*/
.logo-isotipo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--naranja-sel);
  border: 1.5px solid var(--tinta);
  position: relative;
  display: block;
  text-decoration: none;
  box-shadow: var(--shadow-strong);
  cursor: pointer;
  transition: transform 0.18s ease;
}
.logo-isotipo:hover { transform: scale(1.05) rotate(-2deg); }
.logo-isotipo-tm {
  position: absolute;
  top: 5px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--papel);
  line-height: 1;
  letter-spacing: 0;
}
.logo-isotipo-lg { width: 64px; height: 64px; }
.logo-isotipo-lg .logo-isotipo-tm { font-size: 14px; top: 7px; right: 8px; }
.logo-isotipo-sm { width: 40px; height: 40px; }
.logo-isotipo-sm .logo-isotipo-tm { font-size: 10px; top: 4px; right: 5px; }
/* Badge del buscador (nº de resultados) — antes vivía en .search, ahora
   en .search-expanded. Estilo neutral por si reaparece fuera del header. */
.badge { font-size: 11px; font-weight: 600; color: var(--bottle); background: rgba(44,74,62,0.12);
  border-radius: 999px; padding: 3px 9px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* ─── CITY PILL — sistema Recibo (papel-card + serif italic) ─── */
.city-pill-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  pointer-events: auto;
}
.city-pill {
  width: 100%;
  height: 44px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--tinta);
  transition: background 0.15s, transform 0.1s;
}
.city-pill:active { transform: scale(0.985); }
.city-pill[aria-expanded="true"],
.city-pill-wrap.open .city-pill { background: var(--papel-oscuro); }
.city-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--naranja);
  flex-shrink: 0;
}
.city-pill-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--tinta);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.city-pill-sep {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--humo);
  flex-shrink: 0;
}
.city-pill-count {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.city-pill-chev {
  margin-left: auto;
  color: var(--tinta);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.city-pill-wrap.open .city-pill-chev,
.city-pill[aria-expanded="true"] .city-pill-chev { transform: rotate(180deg); }

/* ─── LUPA (buscador colapsado) — mismo lenguaje que la pill ─── */
.search-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--tinta);
  padding: 0;
  pointer-events: auto;
  transition: background 0.15s, transform 0.1s;
}
.search-icon-btn:active { transform: scale(0.95); }

/* ─── BUSCADOR EXPANDIDO — sustituye temporalmente la pill+lupa ─── */
.search-expanded {
  flex: 1;
  height: 44px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 0 6px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.search-expanded.visible { opacity: 1; transform: translateX(0); }
/* Cuando el wrap está colapsado lo sacamos del flujo: si dejásemos
   display: flex, el flex: 1 del expandido competiría con el de la pill
   y ésta se aplastaría a 0px. Mismo motivo para el [hidden] de la pill
   y la lupa durante la expansión. */
.search-expanded[hidden],
.city-pill-wrap[hidden],
.search-icon-btn[hidden] { display: none; }
.search-expanded svg { color: var(--tinta); flex-shrink: 0; }
.search-expanded-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--tinta);
  outline: none;
  padding: 0;
  height: 100%;
}
.search-expanded-input::placeholder {
  color: var(--humo);
  font-family: var(--font-serif);
  font-style: italic;
}
.search-expanded-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinta);
  flex-shrink: 0;
}
.search-expanded-close:active { background: rgba(21,17,12,0.06); }

/* ─── DROPDOWN DE CIUDADES — papel-card con dashed entre items ─── */
.city-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  /* min-width permite que proponer.html (donde el padre .kicker-wrap es
     inline-block estrecho) muestre el dropdown legible. En el header del
     mapa, left: 0; right: 0 lo hacen ocupar todo el wrap (flex: 1). */
  min-width: 260px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  z-index: 600;
  overflow: hidden;
  max-height: min(60vh, 420px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.city-pill-wrap.open .city-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.city-dropdown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1.5px dashed var(--tinta);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}
.city-dropdown-header svg { color: var(--humo); flex-shrink: 0; }
.city-dropdown-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.city-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  color: var(--tinta);
  text-align: left;
  transition: filter 0.12s;
}
.city-option + .city-option { border-top: 1.5px dashed var(--tinta); }
.city-option:hover:not(:disabled):not(.active) { filter: brightness(0.97); }
.city-option-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.city-option-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--tinta);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.city-option-prov {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--humo);
  white-space: nowrap;
}
.city-option-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.city-option-meta-count {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.city-option-meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
}

/* Item activo — borde lateral naranja + fondo papel-oscuro + tag verde */
.city-option.active {
  background: var(--papel-oscuro);
  cursor: default;
}
.city-option.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--naranja);
}
.city-option-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--verde);
  text-transform: uppercase;
  flex-shrink: 0;
}
.city-option-active-tag svg { color: var(--verde); flex-shrink: 0; }

/* Ciudad "próximamente" — deshabilitada visualmente */
.city-option.coming { cursor: not-allowed; opacity: 0.55; }
.city-option.coming:hover { filter: none; }
.city-option-coming {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
  font-style: italic;
  flex-shrink: 0;
}

/* "✓ activa" legacy — sigue usándose en proponer.html cuyo renderCityOptions
   propio aún emite la clase. En index.html ya no aparece (item activo usa
   .city-option-active-tag). Lo mantenemos sutil con color verde. */
.city-option-check {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
  flex-shrink: 0;
}

/* CTA "Sugiérela" — separador sólido (no dashed) para marcar cambio de sección */
.city-suggest {
  padding: 12px 14px;
  border-top: 1.5px solid var(--tinta);
  background: var(--fondo);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--tinta);
  text-align: center;
  cursor: pointer;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  transition: filter 0.12s;
}
.city-suggest:hover { filter: brightness(0.97); }
.city-suggest-underline {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* MAP BUTTONS — bloque vertical único con borde 1.5px tinta y
   dividers dashed entre botones. Sustituye al patrón antiguo de tres
   pills separadas con sombra. */
.map-actions { position: absolute; right: 12px; top: 124px; z-index: 999;
  display: flex; flex-direction: column;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1); }
.app.sheet-open .map-actions { transform: translateY(-180px); }
.map-btn { width: 44px; height: 44px;
  background: transparent; border: none;
  color: var(--tinta); display: grid; place-items: center; cursor: pointer;
  transition: filter 0.15s; }
.map-btn + .map-btn { border-top: 1.5px dashed var(--tinta); }
.map-btn:hover { filter: brightness(0.96); }
.map-btn:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

/* BARRA INFERIOR — contiene filtro (izda) y FAB (dcha) */
.bottom-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 0 16px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), opacity 0.25s; }
.app.sheet-open .bottom-bar { transform: translateY(120%); opacity: 0; pointer-events: none; }

/* FILTRO — pill colapsada por defecto, tarjeta expandida con .open */
.filter { flex: 0 1 auto; min-width: 0; pointer-events: auto;
  position: relative; }

/* Pill colapsada: sistema Recibo, borde 1.5px tinta. Icono SVG
   stroke 2px (Lucide sliders-horizontal) a la izquierda del texto;
   el emoji 🍺 vive dentro del texto, no como icono. */
.filter-pill { display: inline-flex; align-items: center; gap: 8px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  padding: 0 16px 0 12px; height: 38px; border-radius: 22px;
  font: 500 14px var(--font-ui); color: var(--tinta);
  cursor: pointer; max-width: 100%;
  transition: filter 0.15s; }
.filter-pill:hover { filter: brightness(0.96); }
.filter-pill:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.filter-pill-icon { color: var(--tinta); flex-shrink: 0; }
.filter-pill-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter.open .filter-pill { display: none; }

/* Botellín SVG inline: se alinea con texto en pills/labels.
   viewBox cuadrado del SVG está recortado al ancho del bicho
   (20 0 24 64) para que el inline box no tenga aire lateral
   y el texto quepa bien en pills estrechas. */
.botellin-icon {
  width: 0.55em; height: 1.4em;
  vertical-align: -0.35em;
  display: inline-block;
  margin-left: 0.2em;
  flex-shrink: 0;
}

.euro-symbol { font-family: var(--font-mono); font-weight: 500; font-size: 14px;
  color: var(--naranja); line-height: 1; }
.filter-card .euro-symbol { font-size: 16px; }

/* Tarjeta expandida del filtro: rectángulo (datos), radius 6px,
   borde 1.5px tinta. Sin sombra ni backdrop-filter. */
.filter-card { position: absolute; left: 0; bottom: 0;
  width: min(460px, calc(100vw - 88px));
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 16px 20px 14px;
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.2,.8,.2,1), visibility 0.2s; }
.filter.open .filter-card { opacity: 1; visibility: visible;
  transform: translateY(0) scale(1); pointer-events: auto; }

.filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.filter-label { display: flex; align-items: center; gap: 8px; }
.filter-label-text { font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--tinta); }
.filter-close { width: 28px; height: 28px; border-radius: 4px; border: 1.5px solid var(--tinta);
  background: var(--fondo-card); color: var(--tinta); cursor: pointer;
  display: grid; place-items: center;
  transition: filter 0.15s; }
.filter-close:hover { filter: brightness(0.96); }
.filter-close:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

/* Slider de precio: wrapper custom. El <input type="range"> nativo
   queda invisible (opacity 0) por encima para captar la interacción
   y la accesibilidad por teclado, mientras los elementos visuales
   (track dashed tinta, fill naranja con borde, thumb cuadrado naranja
   con borde) se posicionan absolutos según el porcentaje. El JS
   (updateSliderTrack en index.html) actualiza .width del fill y .left
   del thumb cada input. */
.price-slider { width: 100%; padding: 8px 0 4px; }
.price-slider-value { font-family: var(--font-display);
  font-size: 22px; color: var(--tinta); text-align: center;
  margin: 0 0 10px; line-height: 1;
  font-variant-numeric: tabular-nums; }
.price-slider-track-wrap { position: relative; height: 22px;
  display: flex; align-items: center; }
.price-slider-track-dashed {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 0;
  border-top: 1.5px dashed var(--tinta); }
.price-slider-fill {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: var(--naranja);
  border: 1.5px solid var(--tinta);
  border-radius: 2px;
  box-sizing: border-box;
  pointer-events: none; }
.price-slider-thumb {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background: var(--naranja);
  border: 1.5px solid var(--tinta);
  border-radius: 4px;
  box-sizing: border-box;
  pointer-events: none; }
.price-slider-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
  margin: 0;
  -webkit-appearance: none; appearance: none; }
.price-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; cursor: grab; }
.price-slider-input::-moz-range-thumb {
  width: 22px; height: 22px; border: none; cursor: grab; }
.price-slider-ticks {
  margin-top: 8px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--humo); letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; }

.filter-meta { margin-top: 12px; padding-top: 10px;
  border-top: 1.5px dashed var(--tinta);
  display: flex; justify-content: flex-end; align-items: center; font-size: 12px; }
/* Terciario: serif italic underlined, sin fondo ni borde */
.reset-btn { background: transparent; border: none; color: var(--tinta);
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px;
  cursor: pointer; padding: 0 4px;
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: filter 0.15s; }
.reset-btn:hover { filter: brightness(0.7); }

/* FAB — sistema Recibo: alto 54px, naranja-sel, borde 1.5px tinta,
   radius 28px (excepción del pill por convención FAB), texto serif
   italic, círculo papel con + dentro. Sin sombra. */
.fab { flex: 0 0 auto; pointer-events: auto;
  background: var(--naranja-sel); color: var(--papel);
  height: 54px; padding: 0 22px 0 8px; border-radius: 28px;
  border: 1.5px solid var(--tinta);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 18px; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s,
              padding 0.2s cubic-bezier(.2,.8,.2,1),
              width 0.2s cubic-bezier(.2,.8,.2,1); }
.fab:hover { filter: brightness(0.96); }
.fab:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.fab .fab-plus { width: 38px; height: 38px; border-radius: 50%;
  background: var(--papel); display: grid; place-items: center;
  color: var(--naranja-sel); flex-shrink: 0;
  font-family: var(--font-ui); font-weight: 600; font-size: 22px; line-height: 1;
  transition: width 0.2s, height 0.2s; }
.fab .fab-plus svg { stroke: var(--naranja-sel); }
.fab .fab-text { transition: max-width 0.2s ease, opacity 0.15s ease, margin 0.2s ease;
  max-width: 200px; overflow: hidden; }

.fab.compact { padding: 0; height: 44px; width: 44px;
  gap: 0; justify-content: center;
  position: absolute; right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 20px); }
.fab.compact .fab-plus { background: transparent; width: 100%; height: 100%;
  color: var(--papel); }
.fab.compact .fab-plus svg { stroke: var(--papel); }
.fab.compact .fab-text { max-width: 0; opacity: 0; margin: 0; }

.taska-marker { transition: transform 0.15s; cursor: pointer; }
.taska-marker:hover { transform: scale(1.15); z-index: 999 !important; }

/* Color del cuerpo del pin via currentColor — se aplica también a los pines
   del picker (proponer) y del admin (mini-mapas y modal de edición). */
.taska-pin svg { display: block; }
.taska-pin-normal { color: var(--naranja); }
.taska-pin-selected { color: var(--naranja-sel); }

/* Pop-in en cascada: opt-in con la clase .marker-pop. Solo se aplica en
   la primera carga de marcadores (ver index.html — variable isFirstRender)
   para que filtrar no agote al usuario con animaciones repetidas. */
@keyframes markerPop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.taska-marker.marker-pop {
  animation: markerPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* ─── POPUP COMPACTO — TICKET DENTADO ─── */
/* Neutralizamos el wrapper que Leaflet añade por defecto: queremos
   ver el ticket dentado sin la cápsula blanca con sombra. */
.leaflet-popup.taska-popup-wrap .leaflet-popup-content-wrapper {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.leaflet-popup.taska-popup-wrap .leaflet-popup-content {
  margin: 0;
  width: 280px !important;
}
.leaflet-popup.taska-popup-wrap .leaflet-popup-tip-container { display: none; }
.leaflet-popup.taska-popup-wrap .leaflet-popup-tip { display: none; }

.taska-popup {
  position: relative;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  width: 280px;
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-ui);
  color: var(--tinta);
  --tooth: 8px;
  -webkit-mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 16px 16px repeat-x;
          mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 16px 16px repeat-x;
}
.taska-popup-image-wrap {
  position: relative;
  width: 100%;
  height: 130px;
  background: var(--tinta);
  border: 1.5px solid var(--tinta);
  overflow: hidden;
}
.taska-popup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.18) saturate(1.1);
}
.taska-popup-price {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--naranja-sel);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
}
.taska-popup-head { display: flex; flex-direction: column; gap: 4px; }
.taska-popup-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  line-height: 1.1;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.taska-popup-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--humo);
}
.taska-popup-meta svg { flex-shrink: 0; }
.taska-popup-comment {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--tinta);
  margin: 0;
  line-height: 1.45;
  padding: 8px 0;
  border-top: 1.5px dashed var(--tinta);
  border-bottom: 1.5px dashed var(--tinta);
}
.taska-popup-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--humo);
  text-transform: uppercase;
  text-align: center;
  margin: -2px 0 2px;
}
.taska-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.taska-popup-actions .btn {
  flex: 1;
  height: 36px;
  font-size: 12px;
  padding: 0 10px;
  gap: 6px;
}
.taska-popup-actions .btn svg { flex-shrink: 0; }

/* Estado vacío de imagen (sin foto del local) — popup y sheet comparten.
   Selectores compuestos para ganar specificity al background tinta del
   wrap base (declarado después en cascade para el sheet). */
.taska-popup-image-wrap.taska-popup-image-empty,
.taska-sheet-image-wrap.taska-sheet-image-empty {
  background: var(--papel-oscuro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--humo);
}
.taska-popup-image-stripes,
.taska-sheet-image-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 14px,
    rgba(21,17,12,0.05) 14px,
    rgba(21,17,12,0.05) 16px
  );
  pointer-events: none;
}
.taska-popup-image-empty-label,
.taska-sheet-image-empty-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}

/* Botones pequeños del popup (38→36px) reutilizan .btn-primary/.btn-secondary */
.btn-sm { height: 36px; font-size: 12px; padding: 0 10px; }

/* ─── BOTTOM SHEET — wrapper de animación + ticket interior ─── */
.sheet-backdrop { position: absolute; inset: 0; z-index: 1500;
  background: rgba(21,17,12,0); pointer-events: none; transition: background 0.3s; }
.app.sheet-open .sheet-backdrop { background: rgba(21,17,12,0.22); pointer-events: auto; }
/* El wrapper .sheet ya no pinta nada — solo es la cápsula que se
   anima y limita la altura. El fondo, borde y dentado los pone
   .taska-sheet dentro. */
.sheet { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1600;
  background: transparent;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 max(env(safe-area-inset-left), 0px) 0 max(env(safe-area-inset-right), 0px); }
.app.sheet-open .sheet { transform: translateY(0); }
.sheet-handle { flex-shrink: 0; height: 24px; display: grid; place-items: center; cursor: grab; }
.sheet-handle::before { content: ''; width: 44px; height: 4px; border-radius: 2px;
  background: var(--tinta); opacity: 0.45; }
.sheet-content { overflow-y: auto; overscroll-behavior: contain;
  padding: 0 14px max(env(safe-area-inset-bottom), 14px);
  max-width: 520px; width: 100%; margin: 0 auto; }

.taska-sheet {
  position: relative;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  padding: 26px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--tinta);
  font-family: var(--font-ui);
  /* Sólo dentado arriba — el sheet llega pegado al fondo del viewport,
     un dentado inferior quedaría cortado fuera de pantalla. */
  --tooth: 8px;
  -webkit-mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth)) no-repeat;
          mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth)) no-repeat;
}
.taska-sheet-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
  margin: -6px 0 -2px;
}
.taska-sheet-image-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  background: var(--tinta);
  border: 1.5px solid var(--tinta);
  overflow: hidden;
}
.taska-sheet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.18) saturate(1.1);
}
.taska-sheet-price {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--naranja-sel);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}
.taska-sheet-title-block { display: flex; flex-direction: column; gap: 6px; }
.taska-sheet-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  margin: 0;
  line-height: 1.05;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.taska-sheet-address {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--humo);
}
.taska-sheet-address svg { flex-shrink: 0; }
.taska-sheet-rule {
  border: none;
  border-top: 1.5px dashed var(--tinta);
  margin: 2px 0;
}
.taska-sheet-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.taska-sheet-detail .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo);
}
.taska-sheet-detail .value {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--tinta);
  font-weight: 500;
  text-align: right;
}
.taska-sheet-detail .value-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--tinta);
  text-align: right;
}
.taska-sheet-comment-block {
  padding: 12px 0;
  border-top: 1.5px dashed var(--tinta);
  border-bottom: 1.5px dashed var(--tinta);
}
.taska-sheet-comment-block .comment-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 6px;
}
.taska-sheet-comment-block .comment {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--tinta);
  margin: 0;
  line-height: 1.45;
}
.taska-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.taska-sheet-actions .btn-primary {
  width: 100%;
  height: 44px;
  gap: 8px;
}
.taska-sheet-actions-row {
  display: flex;
  gap: 8px;
}
.taska-sheet-actions-row .btn {
  flex: 1;
  height: 42px;
  gap: 6px;
}
.taska-sheet-actions .btn svg { flex-shrink: 0; }
.taska-sheet-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--humo);
  text-transform: uppercase;
  text-align: center;
  margin: 4px 0 0;
}

/* ─── TOAST EFÍMERO ─── */
/* Aparece centrado abajo del viewport, se autodestruye a los ~2.5s.
   La sombra es la única excepción al "no sombras" del sistema Recibo:
   el toast es efímero y necesita peso visual para destacar. */
.toast { position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--tinta); color: var(--papel);
  border: 1.5px solid var(--tinta); border-radius: 6px;
  padding: 10px 20px;
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  z-index: 10000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0; pointer-events: none;
  max-width: 90vw; text-align: center;
  box-shadow: 0 4px 0 var(--tinta); }
.toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }

.state-overlay { position: absolute; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--cream);
  text-align: center; padding: 32px;
  transition: opacity 0.3s; }
.state-overlay.hidden { opacity: 0; pointer-events: none; }
.state-icon { font-size: 40px; margin-bottom: 16px; animation: bob 2s ease-in-out infinite; }
.state-title { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: 22px; color: var(--wine); margin-bottom: 8px; }
.state-text { font-size: 14px; color: var(--smoke); max-width: 320px; line-height: 1.5; }
.state-detail { font-size: 11px; color: var(--smoke); margin-top: 12px;
  font-family: 'SF Mono', Monaco, Consolas, monospace; opacity: 0.6;
  word-break: break-word; max-width: 320px; }

/* ─── ESTADO VACÍO: CIUDAD SIN TASKAS ─── */
/* Ticket pequeño centrado sobre el mapa. pointer-events:none en el
   contenedor para no bloquear el zoom/pan; el botón CTA reactiva
   pointer-events. */
.empty-city {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1400;
  pointer-events: none;
  padding: 24px 20px;
}
.empty-city[hidden] { display: none; }
.empty-city-ticket {
  pointer-events: auto;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  padding: 18px 22px 16px;
  max-width: 320px; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px;
  --tooth: 6px;
  mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 12px 12px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 12px 12px repeat-x;
  -webkit-mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 12px 12px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 12px 12px repeat-x;
}
.empty-city-stamp {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--humo); margin: 0;
}
.empty-city-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; color: var(--tinta);
  line-height: 1.35; margin: 0;
}
.empty-city-cta {
  font-family: var(--font-ui); font-weight: 500; font-size: 13px;
  color: var(--tinta);
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta); border-radius: 6px;
  padding: 8px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.empty-city-cta:hover { filter: brightness(0.96); }
.empty-city-cta:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

/* ─── ESTADO VACÍO: FILTRO SIN RESULTADOS ─── */
/* Aviso persistente (no efímero) anclado encima del bottom-bar.
   No ocupa todo el ancho; X opcional para descartar. Distinto del
   toast efímero (.toast) en posición, peso visual y persistencia. */
.empty-filter {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex; align-items: center; gap: 10px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 10px 8px 10px 14px;
  max-width: calc(100vw - 24px);
}
.empty-filter[hidden] { display: none; }
.empty-filter-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--tinta);
  margin: 0; line-height: 1.35;
}
.empty-filter-close {
  width: 26px; height: 26px;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta); cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.empty-filter-close:hover { opacity: 0.7; }

/* ─── ESTADO VACÍO: BÚSQUEDA SIN RESULTADOS ─── */
/* Mensaje pequeño bajo el header, anclado a la fila del buscador.
   Aparece solo con el buscador expandido y consulta sin matches en
   el viewport actual. */
.empty-search {
  position: absolute;
  top: 100%;
  left: 16px; right: 16px;
  margin-top: 8px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--tinta);
  text-align: center; line-height: 1.35;
  z-index: 1450;
}
.empty-search[hidden] { display: none; }

/* ─── BANNER SIN CONEXIÓN ─── */
/* Anclado arriba sobre el header. No bloquea la UI; al volver la
   conexión se oculta. Solo eventos online/offline, no estado inicial. */
.net-banner {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2500;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--papel-oscuro);
  border-bottom: 1.5px solid var(--tinta);
  font-family: var(--font-serif); font-style: italic;
  font-size: 13px; color: var(--tinta);
  animation: net-banner-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.net-banner[hidden] { display: none; }
.net-banner-icon { color: var(--tinta); flex-shrink: 0; }
.net-banner-text { line-height: 1.3; }
@keyframes net-banner-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ONBOARDING — bienvenida solo en la primera visita */
.onboarding { position: fixed; inset: 0; z-index: 5000;
  display: none;
  background: rgba(26,26,26,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
  padding: 16px;
  padding-top: max(env(safe-area-inset-top), 16px);
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
  animation: onboarding-fade-in 0.25s ease-out; }
.onboarding.show { display: flex; }
.onboarding-card { max-width: 420px; width: 100%;
  background: var(--cream); border-radius: 24px;
  padding: 36px 32px 28px; text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(26,26,26,0.06);
  animation: onboarding-card-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.onboarding-icon { font-size: 56px; margin-bottom: 8px;
  animation: bounce 1s ease; }
.onboarding-kicker { display: block; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--bottle); font-weight: 700; margin-bottom: 4px; }
.onboarding-title { font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 700; font-size: 36px; color: var(--ink);
  line-height: 1.05; margin-bottom: 18px; letter-spacing: -0.01em; }
.onboarding-text { font-size: 15px; line-height: 1.55;
  color: var(--ink); margin-bottom: 24px; }
.onboarding-text strong { font-weight: 700; color: var(--wine); }
.onboarding-btn { width: 100%; height: 50px;
  border: none; border-radius: 14px;
  background: var(--wine); color: var(--cream);
  font: 700 15px 'Manrope', sans-serif; cursor: pointer;
  box-shadow: 0 3px 0 var(--wine-2), 0 6px 18px -6px rgba(139,31,42,0.3);
  transition: transform 0.1s, background 0.15s; }
.onboarding-btn:hover { background: var(--wine-2); }
.onboarding-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wine-2); }
@keyframes onboarding-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboarding-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 380px) {
  .price-slider-value { font-size: 20px; }
  .taska-sheet-title { font-size: 24px; }
  .taska-sheet-price { font-size: 18px; padding: 5px 10px; }
  .taska-sheet-image-wrap { height: 160px; }
  .taska-popup-title { font-size: 20px; }
  .fab { font-size: 16px; height: 48px; padding: 0 18px 0 6px; }
  .fab .fab-plus { width: 34px; height: 34px; font-size: 20px; }
  .filter-pill { font-size: 13px; padding: 0 14px 0 12px; }
  .onboarding-title { font-size: 30px; }
  .onboarding-card { padding: 28px 24px 24px; }
}

/* ════════════════════════════════════════════════════════════
   5. PROPONER.HTML — FORMULARIO PÚBLICO
   Solo usado en proponer.html
   ════════════════════════════════════════════════════════════ */

.submit-header { position: sticky; top: 0; z-index: 1000;
  background: var(--cream); border-bottom: 1px solid rgba(26,26,26,0.08);
  padding: 14px 16px; padding-top: max(env(safe-area-inset-top), 14px);
  display: flex; align-items: center; gap: 14px; }
/* Botón "←" del header de proponer. Patrón icon-button: rectángulo con
   borde 1.5px tinta (sigue el sistema, no es exactamente terciario por
   ser solo icono). */
.back-btn { width: 40px; height: 40px; border-radius: 6px;
  border: 1.5px solid var(--tinta); background: var(--fondo-card);
  color: var(--tinta); display: grid; place-items: center;
  font-size: 18px; text-decoration: none; flex-shrink: 0;
  transition: filter 0.15s; }
.back-btn:hover { filter: brightness(0.96); }
.back-btn:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

.header-titles .kicker { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--bottle); font-weight: 700; margin-bottom: 2px; }
.header-titles h1 { font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }

.submit-form { max-width: 540px; margin: 0 auto;
  padding: 20px 16px 120px; display: flex; flex-direction: column; gap: 24px; }

/* Campos del formulario público (scoped a .submit-form para no chocar
   con .modal-form .field del admin). Voz humana: label en serif italic,
   placeholder italic, helper en mono uppercase. */
.submit-form .field { display: flex; flex-direction: column; gap: 6px; }
.submit-form .field > label { font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--tinta); }
.submit-form .field .req { color: var(--error); font-style: normal; font-weight: 500;
  margin-left: 2px; }
.submit-form .field .opt { color: var(--humo); font-size: 12px; font-style: normal;
  font-weight: 500; margin-left: 6px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.field-hint { font-size: 13px; color: var(--humo); line-height: 1.4; margin-top: 0; }
.field-error { font-size: 13px; color: var(--error); font-weight: 500;
  display: none; align-items: center; gap: 6px; }
.submit-form .field.has-error .field-error { display: flex; }
.field-error::before { content: '⚠'; }
.submit-form .field.has-error .input { border-color: var(--error); }

.submit-form .textarea { resize: vertical; min-height: 88px; line-height: 1.45;
  height: auto; padding: 12px 14px;
  font-family: var(--font-ui); }
.submit-form .textarea:focus { padding: 11.5px 13.5px; }

.submit-form .counter { align-self: flex-end;
  font-family: var(--font-mono); font-size: 11px; color: var(--humo);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; font-weight: 500; }
.submit-form .counter.warn { color: var(--error); }

/* Input de precio: símbolo € en mono naranja a izquierda, € a derecha
   también. El emoji 🍺 viejo se sustituyó por € (ver HTML). */
.submit-form .price-input { position: relative; display: flex; align-items: center;
  background: var(--fondo-card); border: 1.5px solid var(--tinta); border-radius: 6px;
  padding: 0 14px; height: 44px;
  transition: border-width 0.12s ease; }
.submit-form .price-input:focus-within { border-width: 2px;
  border-color: var(--naranja-sel); padding: 0 13.5px; }
.submit-form .price-icon { font-family: var(--font-mono); font-weight: 500;
  font-size: 14px; color: var(--naranja); padding-right: 10px; }
.submit-form .price-input .input.price { border: none; padding: 0;
  background: transparent; height: auto;
  font-family: var(--font-display);
  font-size: 18px; color: var(--tinta);
  font-variant-numeric: tabular-nums; }
.submit-form .price-input .input.price:focus { padding: 0; border: none; }
.submit-form .price-currency { font-family: var(--font-mono); font-weight: 500;
  font-size: 14px; color: var(--naranja); padding-left: 4px; }

.photo-zone { width: 100%; aspect-ratio: 16 / 10;
  border: 2px dashed rgba(26,26,26,0.18); border-radius: 16px;
  background: linear-gradient(135deg, var(--cream-2), white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; color: var(--smoke);
  transition: border-color 0.15s, background 0.15s, transform 0.1s; }
.photo-zone:hover { border-color: var(--wine);
  background: linear-gradient(135deg, var(--cream-2), rgba(212,160,23,0.08));
  color: var(--wine); }
.photo-zone:active { transform: scale(0.99); }
.photo-zone-text { font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 16px; }
.photo-zone small { font-size: 11px; opacity: 0.7; }

.photo-preview { position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: var(--shadow); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-overlay { position: absolute; inset: 0;
  background: rgba(26,26,26,0.55); color: var(--cream);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; }
.photo-ok { position: absolute; bottom: 12px; left: 12px;
  background: var(--bottle); color: var(--cream);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  box-shadow: var(--shadow);
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.photo-remove { position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(26,26,26,0.7); backdrop-filter: blur(8px);
  color: var(--cream); border: none; font-size: 22px; font-weight: 300;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s, transform 0.1s; }
.photo-remove:hover { background: var(--wine); }

/* Picker viejo (.location-picker, .locate-btn, .picker-map-wrap, .picker-readout)
   retirado en Fase 7: el minimapa vive ahora dentro de .minimap-wrap dentro
   del ticket "DÓNDE ESTÁ". Reglas en sección "FASE 7 — PROPONER COMO 3 TICKETS DENTADOS". */

/* Wrapper del widget de Cloudflare Turnstile.
   El gap del .submit-form (24px) ya da el espaciado vertical; aquí solo
   centramos el iframe y reservamos altura para evitar saltos de layout
   mientras el script asíncrono lo carga. */
.turnstile-wrap { display: flex; justify-content: center; min-height: 65px; }

/* Botón primario del formulario público (proponer + modal sugerir) */
.submit-btn { width: 100%; height: 48px; border: 1.5px solid var(--tinta);
  border-radius: 6px;
  background: var(--naranja-sel); color: var(--papel);
  font: 500 14px var(--font-ui); cursor: pointer;
  transition: filter 0.15s; margin-top: 8px; }
.submit-btn:hover:not(:disabled) { filter: brightness(0.96); }
.submit-btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.legal { font-size: 12px; color: var(--smoke); text-align: center;
  line-height: 1.4; margin-top: -8px; }
.server-error { color: var(--error); font-size: 14px; font-weight: 500;
  background: rgba(179,58,58,0.08);
  border-left: 3px solid var(--error);
  padding: 10px 14px; border-radius: 4px 12px 12px 4px;
  display: none; }
.server-error.show { display: block; }

/* Pantalla éxito de proponer: usa el mismo lenguaje de ticket que el
   modal sugerir ciudad (Fase 5.1), pero ocupa la pantalla completa
   en vez de aparecer como modal. Las clases internas (.success-stamp,
   .success-title, .success-message, .success-check-*, .success-detail,
   .success-stamp-bottom) están definidas más abajo, compartidas con
   el modal. Aquí solo el contenedor, el resumen y los botones. */
.success-screen {
  position: fixed;
  inset: 0;
  background: var(--fondo);
  z-index: 100;
  display: flex;
  /* flex-start (no center) + margin auto en el hijo: centra verticalmente
     cuando hay sitio; cuando el ticket es más alto que el viewport, el
     scroll arranca desde arriba y los botones del fondo siguen alcanzables.
     Con align-items: center el flex item desborda por encima del eje y
     overflow-y: auto no llega ahí — top cortado y CTA inaccesible. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.success-screen[hidden] { display: none !important; }

/* El ticket dentro de la pantalla completa: hereda .modal-ticket
   (mask dentado, borde tinta, fondo card) pero sin el transform de
   modal-deslizable.
   opacity:1 + pointer-events:auto: .modal-ticket está diseñado como
   "modal cerrado por defecto" (pointer-events:none, y opacity:0 en
   desktop), y solo .show lo activa. Aquí lo reusamos solo por el
   mask dentado, así que reactivamos visibilidad y clicks para que
   los botones del ticket éxito respondan. */
.success-screen .modal-ticket {
  position: relative;
  transform: none;
  bottom: auto; left: auto; top: auto;
  max-width: 380px; width: 100%;
  margin: auto 0;
  opacity: 1;
  pointer-events: auto;
}
.success-screen .modal-ticket.show { transform: none; }
.success-ticket {
  padding: 36px 22px 26px;
  display: flex; flex-direction: column;
  gap: 16px;
  align-items: center; text-align: center;
}

/* Resumen del envío (nombre + precio + dirección) dentro del ticket. */
.success-summary {
  padding: 12px 0;
  border-top: 1.5px dashed var(--tinta);
  border-bottom: 1.5px dashed var(--tinta);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.success-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.success-summary-row[hidden] { display: none; }
.success-summary-row .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo);
  flex-shrink: 0;
}
.success-summary-row .value {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--tinta);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.success-summary-row .value-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
}

.success-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}
.success-actions .btn {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary, .btn-secondary { height: 42px; border-radius: 6px;
  font: 500 14px var(--font-ui); cursor: pointer;
  border: 1.5px solid var(--tinta); text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.15s; }
.btn-primary { background: var(--naranja-sel); color: var(--papel); }
.btn-primary:hover { filter: brightness(0.96); }
.btn-primary:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.btn-secondary { background: var(--fondo-card); color: var(--tinta); }
.btn-secondary:hover { filter: brightness(0.96); }
.btn-secondary:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

@media (max-width: 380px) {
  .header-titles h1 { font-size: 19px; }
  .submit-form { padding: 16px 12px 100px; gap: 20px; }
}

/* ─── FASE 7 — PROPONER COMO 3 TICKETS DENTADOS ─────────────────
   Reusa el mask de .modal-ticket (modal sugerir Fase 5.1) pero en
   variante "estática" embebida en el flujo de la página. Cada ticket
   es una .propose-ticket con su sello mono, título serif italic y
   regla dashed. Los campos heredan .ticket-form .field-* renombrados
   en este mismo deploy. */

.propose-screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
}

.page-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--tinta);
  line-height: 1.05;
  margin: 12px 4px 18px;
}

.page-stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--humo);
  text-align: center;
  margin: 16px 0 0;
}

/* Ticket de página: mismo mask dentado que .modal-ticket pero sin la
   posición fixed ni el slide animation. Variable --tooth controla el
   tamaño de los dientes (igual que el modal). */
.propose-ticket {
  position: relative;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  margin-bottom: 18px;
  --tooth: 8px;
  padding: 26px 22px 22px;
  mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 16px 16px repeat-x;
  -webkit-mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 16px 16px repeat-x;
}

/* Form dentro de la página propose: se aprovecha de .ticket-form
   genérico para .field-* y solo aplica el gap propio del flujo de
   página (los tickets ya tienen sus márgenes). */
.propose-form { display: flex; flex-direction: column; }
.propose-form .field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.propose-form .field:last-child { margin-bottom: 0; }
.propose-form .field-label {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 15px; color: var(--tinta);
}
.propose-form .field-label .req {
  color: var(--error); margin-left: 2px; font-style: normal; font-weight: 500;
}
.propose-form .field-label .opt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--humo); margin-left: 6px; font-style: normal; font-weight: 500;
}
.propose-form .field-hint {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--humo); margin: -2px 0 0;
}
.propose-form .field-input,
.propose-form .field-textarea {
  width: 100%;
  background: var(--fondo);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  font-family: var(--font-ui); font-size: 14px;
  color: var(--tinta); box-sizing: border-box;
  outline: none;
  transition: border-width 0.12s ease;
}
.propose-form .field-input { height: 42px; padding: 0 14px; }
.propose-form .field-textarea {
  min-height: 84px; padding: 12px 14px;
  resize: vertical; line-height: 1.45;
}
.propose-form .field-input::placeholder,
.propose-form .field-textarea::placeholder {
  color: var(--humo);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.propose-form .field-input:focus { border-width: 2px; border-color: var(--naranja-sel); padding: 0 13.5px; }
.propose-form .field-textarea:focus { border-width: 2px; border-color: var(--naranja-sel); padding: 11.5px 13.5px; }
.propose-form .field-counter {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--humo);
  text-align: right; margin: -2px 0 0;
  font-variant-numeric: tabular-nums;
}
.propose-form .field-counter.warn { color: var(--error); }
.propose-form .field.has-error .field-input,
.propose-form .field.has-error .field-textarea,
.propose-form .field.has-error .price-input-wrap { border-color: var(--error); }
.propose-form .field-error {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--error); margin: 2px 0 0;
  display: none; align-items: center; gap: 6px;
}
.propose-form .field-error::before { content: '⚠'; }
.propose-form .field.has-error .field-error { display: flex; }

/* ──────────────────────────────────────────────
   ETIQUETAS (Fase D · v0.17.0)
   Compartidas entre proponer.html y admin.html
   ────────────────────────────────────────────── */

/* Checkboxes de etiquetas: rectángulos (datos), papel oscurecido al
   marcar, mismo radius 6px que el resto de inputs del formulario. */
.tag-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tag-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  background: var(--fondo);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease;
}
.tag-check:hover { background: var(--papel-oscuro); }
.tag-check.checked { background: var(--papel-oscuro); }
.tag-check input[type="checkbox"] {
  margin: 0;
  accent-color: var(--naranja-sel);
  cursor: pointer;
  flex-shrink: 0;
}
.tag-check-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
}

/* Contador "X / 3 seleccionadas" en admin (mono uppercase, alineado dcha). */
.tag-counter {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 8px 0 0;
  text-align: right;
}
.tag-counter.full {
  color: var(--naranja-sel);
  font-weight: 600;
}

/* Pills de etiquetas (popup + sheet en index.html). Paleta A "cálida
   ascendente": espuma → naranja → tinta. Reusan border y radius del
   sistema. */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-right: 6px;
  margin-bottom: 6px;
}
.tag-pill .botellin-icon {
  /* hereda de .botellin-icon global */
}
.tag-tapa_incluida {
  background: var(--espuma);
  color: var(--tinta);
}
.tag-hay_litronas {
  background: var(--naranja);
  color: var(--tinta);
}
.tag-de_categoria {
  background: var(--tinta);
  color: var(--papel);
}

/* Bloques contenedores de las pills en popup y sheet. */
.popup-tags-row {
  border-top: 1px dashed rgba(21, 17, 12, 0.3);
  padding-top: 10px;
  margin: 8px 0 2px;
}
.sheet-tags-block {
  margin: 8px 0 14px;
}

/* Foto dropzone — caja dashed tinta con icono cámara, texto serif italic
   y hint mono uppercase. Click abre file picker. Estado con foto subida
   reemplaza al dropzone en el DOM (lo gestiona JS). */
.foto-dropzone {
  width: 100%;
  min-height: 150px;
  background: var(--fondo);
  border: 1.5px dashed var(--tinta);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 18px;
  color: var(--humo);
  text-align: center;
  transition: background 120ms ease;
}
.foto-dropzone:hover { background: var(--papel-oscuro); }
.foto-dropzone svg { color: var(--humo); }
.foto-dropzone-text {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; color: var(--tinta);
}
.foto-dropzone-hint {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--humo);
}

/* Vista con foto subida: la imagen ocupa la caja con borde tinta y
   esquinas 6px. Overlay "subiendo" en italic-serif sobre papel translúcido. */
.foto-uploaded {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  overflow: hidden;
  background: var(--tinta);
}
.foto-uploaded img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(0.18) saturate(1.05);
}
.foto-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--naranja-sel);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0;
}
.foto-remove:hover { filter: brightness(0.96); }
.foto-uploading-overlay {
  position: absolute; inset: 0;
  background: rgba(248, 241, 224, 0.85);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic;
  font-size: 18px; color: var(--tinta);
}
.foto-uploading-overlay[hidden] { display: none; }
.foto-ok-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: var(--verde); color: var(--papel);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--tinta);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* Precio del botellín — emoji 🍺 a la izquierda, € en Bagel naranja
   a la derecha. El input no tiene su propio borde — el wrapper hace
   de input visual. */
.propose-form .price-input-wrap {
  position: relative;
  display: flex; align-items: center;
  width: 100%; height: 42px;
  background: var(--fondo);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  transition: border-width 0.12s ease;
}
.propose-form .price-input-wrap:focus-within {
  border-width: 2px; border-color: var(--naranja-sel);
}
.price-input-icon {
  position: absolute; left: 14px;
  font-size: 18px; pointer-events: none;
}
.propose-form .field-input.price-input {
  border: none; background: transparent;
  height: 100%;
  padding: 0 44px 0 44px;
  font-family: var(--font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.propose-form .field-input.price-input:focus {
  border: none; padding: 0 44px 0 44px;
}
.price-input-euro {
  position: absolute; right: 14px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--naranja);
  pointer-events: none;
  line-height: 1;
}

/* Mini-mapa del picker dentro del ticket DÓNDE ESTÁ */
.minimap-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  overflow: hidden;
  background: var(--papel-oscuro);
}
.minimap-leaflet {
  width: 100%; height: 100%;
  cursor: crosshair;
  background: var(--papel-oscuro);
}
.minimap-wrap .leaflet-tile-pane { filter: sepia(0.18); }
.minimap-stamp {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta);
  font-weight: 500;
  z-index: 500;
  pointer-events: none;
}
.minimap-loc-btn {
  position: absolute;
  top: 10px; right: 10px;
  height: 30px;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta);
  cursor: pointer;
  z-index: 500;
  transition: filter 0.15s;
}
.minimap-loc-btn:hover { filter: brightness(0.96); }
.minimap-loc-btn:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

.minimap-readout {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px;
  color: var(--humo);
  margin: 10px 4px 0;
  text-align: center;
  line-height: 1.4;
  min-height: 20px;
}
.minimap-readout.has-value { color: var(--tinta); }
.minimap-readout strong { color: var(--tinta); font-weight: 600; }

/* Captcha enmarcado en dashed + texto legal + botón submit */
.propose-captcha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 12px 0;
  border-top: 1.5px dashed var(--tinta);
  border-bottom: 1.5px dashed var(--tinta);
  margin: 8px 0 14px;
  min-height: 80px;
}
.propose-legal {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--humo);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 12px;
}
.propose-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--error);
  background: rgba(179, 58, 58, 0.08);
  padding: 8px 12px;
  border-left: 3px solid var(--error);
  margin: 0 0 12px;
}
.propose-error[hidden] { display: none; }
.propose-submit {
  width: 100%; height: 48px;
  background: var(--naranja-sel);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  cursor: pointer;
  transition: filter 0.15s;
}
.propose-submit:hover:not(:disabled) { filter: brightness(0.96); }
.propose-submit:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.propose-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════
   6. ADMIN.HTML — PANEL DE MODERACIÓN
   Solo usado en admin.html
   ════════════════════════════════════════════════════════════ */

/* ─── LOGIN ─── */
.login-screen { min-height: 100vh; display: grid; place-items: center;
  padding: 32px 16px; background: var(--cream); }
.login-card { width: 100%; max-width: 400px; background: white;
  border-radius: 24px; padding: 40px 32px; box-shadow: var(--shadow);
  border: 1px solid rgba(26,26,26,0.06); }
/* .login-logo solo aporta margen y centrado; el aspecto visual viene
   ya de .logo-isotipo + .logo-isotipo-lg en el mismo elemento. */
.login-logo { margin: 0 auto 20px; }
.login-kicker { display: block; text-align: center; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--bottle);
  font-weight: 700; margin-bottom: 4px; }
.login-title { font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 700; font-size: 28px; color: var(--ink);
  text-align: center; line-height: 1.1; margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-error { color: var(--error); font-size: 13px; font-weight: 500;
  background: rgba(179,58,58,0.08); border-left: 3px solid var(--error);
  padding: 10px 14px; border-radius: 4px 12px 12px 4px; display: none; }
.login-error.show { display: block; }
/* Botón primario del login admin */
.login-btn { height: 48px; border: 1.5px solid var(--tinta); border-radius: 6px;
  background: var(--naranja-sel); color: var(--papel);
  font: 500 14px var(--font-ui); cursor: pointer;
  transition: filter 0.15s; margin-top: 6px; }
.login-btn:hover:not(:disabled) { filter: brightness(0.96); }
.login-btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Terciario: link de vuelta al mapa */
.login-back { display: block; text-align: center; margin-top: 16px;
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--tinta); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.login-back:hover { filter: brightness(0.7); }

/* ─── ADMIN ─── */
.admin-screen { display: none; min-height: 100vh; }
.admin-screen.show { display: block; }

.admin-header { position: sticky; top: 0; z-index: 1000;
  background: var(--cream); border-bottom: 1px solid rgba(26,26,26,0.08);
  padding: 14px 16px; padding-top: max(env(safe-area-inset-top), 14px);
  display: flex; align-items: center; gap: 14px; }
/* .admin-logo: el aspecto visual viene de .logo-isotipo + .logo-isotipo-sm. */
.admin-logo { flex-shrink: 0; }
.admin-titles { flex: 1; min-width: 0; }
.admin-titles .kicker { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--bottle); font-weight: 700; }
.admin-titles h1 { font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 18px; line-height: 1.1; color: var(--ink); }
.admin-user { font-size: 12px; color: var(--smoke);
  font-weight: 500; text-align: right; line-height: 1.3; }
.admin-user .email { display: block;
  overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
/* Terciario: salir del admin */
.logout-btn { background: transparent; border: none;
  padding: 0 4px; cursor: pointer;
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  color: var(--tinta);
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: filter 0.15s; }
.logout-btn:hover { filter: brightness(0.7); }

.admin-main { max-width: 720px; margin: 0 auto;
  padding: 24px 16px 80px; }

.admin-summary { background: white; border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--shadow);
  border: 1px solid rgba(26,26,26,0.06);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-summary-num { font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 36px; color: var(--wine); line-height: 1;
  font-variant-numeric: tabular-nums; }
.admin-summary-text { flex: 1; }
.admin-summary-label { font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.2; }
.admin-summary-sub { font-size: 12px; color: var(--smoke); margin-top: 2px; }
/* Botón secundario del header admin */
.refresh-btn { background: var(--fondo-card); border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 0 14px; height: 38px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px var(--font-ui); color: var(--tinta);
  transition: filter 0.15s; }
.refresh-btn:hover { filter: brightness(0.96); }
.refresh-btn:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }

/* ─── FILTROS DE CIUDAD (chips) ─── */
.city-filters { display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px; padding: 0 2px; }
.city-chip { background: white; border: 1.5px solid rgba(26,26,26,0.10);
  border-radius: 999px; padding: 6px 12px;
  font: 600 12px 'Manrope', sans-serif; color: var(--smoke);
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px; }
.city-chip:hover { color: var(--ink); border-color: rgba(26,26,26,0.24); }
.city-chip.active { background: var(--bottle); color: var(--cream);
  border-color: var(--bottle); }
.city-chip-count { font-size: 10px; opacity: 0.85;
  background: rgba(0,0,0,0.15); padding: 1px 6px; border-radius: 999px;
  font-variant-numeric: tabular-nums; }
.city-chip:not(.active) .city-chip-count {
  background: var(--cream-2); }

/* ─── TABS (Pendientes / Publicadas / Sugerencias) ───
   Sistema Recibo: borde 1.5px tinta como contenedor, mono uppercase
   para los labels (voz funcional admin), dividers dashed entre tabs.
   El contador pasa de píldora cilíndrica a número en serif italic
   naranja-rojo al lado del label. */
.tabs { display: flex; flex-wrap: wrap;
  border: 1.5px solid var(--tinta); border-radius: 8px;
  overflow: hidden;
  background: var(--fondo-card);
  margin-bottom: 14px; }
.tab { flex: 1 1 50%; padding: 10px 12px; border: none;
  background: var(--papel-oscuro);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--humo); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.15s; }
/* En móvil las pestañas hacen wrap a 2 filas. Bordes:
   - dashed izquierdo solo entre pares de la misma fila
   - dashed superior en las pestañas de filas inferiores */
.tab:nth-child(even) { border-left: 1.5px dashed var(--tinta); }
.tab:nth-child(n+3) { border-top: 1.5px dashed var(--tinta); }
.tab:hover:not(.active) { filter: brightness(0.96); }
.tab.active { background: var(--fondo-card); color: var(--tinta);
  font-weight: 500; }
/* v0.21.1 · Badge consolidado como pill rojo en todos los tabs (incluso
   cuando el count es 0). Antes era texto inline naranja sin fondo en la
   base y solo algunos badges (fallos) tenían pill via .has-pending — se
   veían franjas delgadas ilegibles. Ahora todos uniformes. La pestaña
   activa mantiene un color de texto distinto para señalar "estás aquí". */
.tab-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--naranja-sel);
  color: var(--papel);
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.4;
  margin-left: 4px;
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Cuando el count es 0 → señal positiva "todo limpio". El verde del
   sistema es el mismo que usamos en otros estados positivos. */
.tab-count.is-empty { background: var(--verde); }
.tab.active .tab-count { color: var(--tinta); }

@media (min-width: 640px) {
  /* Desktop: 1 sola fila, recuperamos el patrón de bordes original. */
  .tab { flex: 1 1 auto; }
  .tab:nth-child(even) { border-left: none; }
  .tab:nth-child(n+3) { border-top: none; }
  .tab + .tab { border-left: 1.5px dashed var(--tinta); }
}

/* ─── BUSCADOR (solo en publicadas) ───
   Mismo patrón que el buscador del header de index: pill 22px con
   borde 1.5px tinta. Por ser exploratorio (filtrar, descubrir) cae
   en la regla de pills, no de rectángulos. */
.search-row { margin-bottom: 14px; }
.search-input { width: 100%; height: 44px;
  background: var(--fondo-card); border: 1.5px solid var(--tinta);
  border-radius: 22px; padding: 0 16px;
  font: 500 14px var(--font-ui); color: var(--tinta);
  outline: none; transition: border-width 0.12s ease; }
.search-input::placeholder { color: var(--humo); }
.search-input:focus { border-width: 2px; border-color: var(--naranja-sel);
  padding: 0 15.5px; }

/* ─── BADGES de estado en tarjetas ─── */
.approved-badge { background: var(--bottle); color: var(--cream);
  padding: 4px 10px; border-radius: 999px;
  font: 700 10px 'Manrope', sans-serif; text-transform: uppercase;
  letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 5px; }
.approved-badge::before { content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: rgba(255,255,255,0.85); }

/* ─── BOTONES de editar/eliminar (en cada taska de Publicadas) ───
   Heredan dimensiones de .action-btn pero adoptan el sistema Recibo:
   editar = secundario (acción común, no destructiva), eliminar =
   secundario destructivo (foco rojo error en hover). */
.edit-btn { background: var(--fondo-card); color: var(--tinta);
  border: 1.5px solid var(--tinta); }
.edit-btn:hover:not(:disabled) { filter: brightness(0.96); }
.edit-btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.delete-btn { background: var(--fondo-card); color: var(--tinta);
  border: 1.5px solid var(--tinta); }
.delete-btn:hover:not(:disabled) { color: var(--error);
  border-color: var(--error); }
.delete-btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

/* ─── MODAL de edición ─── */
.modal-backdrop { position: fixed; inset: 0;
  background: rgba(26,26,26,0.55); z-index: 9000;
  opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.modal-backdrop.show { opacity: 1; pointer-events: auto; }

.modal { position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--cream); border-radius: 24px 24px 0 0;
  z-index: 9001; max-height: 92vh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
  padding: 0 20px 24px;
  padding-bottom: max(env(safe-area-inset-bottom), 24px);
  box-shadow: 0 -8px 32px -12px rgba(0,0,0,0.25);
  /* En escritorio el modal queda con opacity:0 centrado en el viewport.
     Sin pointer-events:none, el cuadro invisible captura los clicks del
     centro de la pantalla. */
  pointer-events: none; }
.modal.show { transform: translateY(0); pointer-events: auto; }
@media (min-width: 640px) {
  .modal { left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -45%) scale(0.96); opacity: 0;
    max-width: 480px; width: calc(100% - 32px);
    border-radius: 20px; padding: 0 28px 28px; }
  .modal.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.modal-handle { width: 44px; height: 5px; border-radius: 3px;
  background: rgba(26,26,26,0.18); margin: 10px auto 4px; cursor: pointer; }
@media (min-width: 640px) { .modal-handle { display: none; } }

.modal-header { padding: 12px 0 16px;
  border-bottom: 1px solid rgba(26,26,26,0.06);
  margin-bottom: 18px; }
.modal-header .kicker { display: block; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--smoke); font-weight: 700; margin-bottom: 4px; }
.modal-header h2 { font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 22px; color: var(--ink);
  line-height: 1.15; margin: 0; }

.modal-form { display: flex; flex-direction: column; gap: 14px; }

/* Campos del modal del admin. Mantienen voz funcional (label en mono
   uppercase) en contraste con el público (italic-serif). El input
   hereda del .input global ya rediseñado. */
.modal-form .field { display: flex; flex-direction: column; gap: 6px; }
.modal-form .field label { font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--humo); font-weight: 500; }
.modal-form .field .input { /* hereda del .input global */ }
.modal-form .field .textarea { resize: vertical; min-height: 80px;
  height: auto; padding: 12px 14px;
  font-family: var(--font-ui); line-height: 1.45; }
.modal-form .field .textarea:focus { padding: 11.5px 13.5px; }
.modal-form .field .counter { font-family: var(--font-mono);
  font-size: 11px; color: var(--humo);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: right; font-variant-numeric: tabular-nums; }

/* Input de precio del modal admin: simétrico con .submit-form .price-input
   pero más compacto. El € izquierdo se posiciona absoluto para no romper
   el padding del input. */
.modal-form .price-input { position: relative; display: flex; align-items: center; }
.modal-form .price-input .price-icon { position: absolute; left: 14px;
  font-family: var(--font-mono); font-weight: 500; font-size: 14px;
  color: var(--naranja); pointer-events: none; }
.modal-form .price-input .input.price { padding-left: 32px; padding-right: 32px;
  font-family: var(--font-display); font-size: 16px;
  font-variant-numeric: tabular-nums; }
.modal-form .price-input .input.price:focus { padding-left: 31.5px; padding-right: 31.5px; }
.modal-form .price-input .price-currency { position: absolute; right: 14px;
  font-family: var(--font-mono); font-weight: 500; font-size: 14px;
  color: var(--naranja); pointer-events: none; }

.modal-error { display: none; color: var(--error); font-size: 13px;
  background: rgba(179,58,58,0.08); border-left: 3px solid var(--error);
  padding: 8px 12px; border-radius: 4px 12px 12px 4px; margin: 0; }
.modal-error.show { display: block; }

/* Preview de imagen en el modal de edición. Caja 16:10 con la foto
   actual (o estado vacío), botón secundario para abrir el file picker
   y label en mono uppercase para indicar imagen pendiente de guardar. */
.edit-photo { display: flex; flex-direction: column; gap: 8px; }
.edit-photo-preview { position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden; background: var(--cream-2);
  border: 1.5px solid rgba(26,26,26,0.08); }
.edit-photo-preview img { width: 100%; height: 100%; object-fit: cover;
  display: none; }
.edit-photo-empty { position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14px; color: var(--smoke); }
.edit-photo-btn { align-self: flex-start; background: var(--fondo-card);
  border: 1.5px solid var(--tinta); border-radius: 6px;
  padding: 0 14px; height: 38px;
  font: 500 13px var(--font-ui); color: var(--tinta);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: filter 0.15s; }
.edit-photo-btn:hover { filter: brightness(0.96); }
.edit-photo-btn:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.edit-photo-pending { display: none; font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--naranja); font-weight: 600;
  margin: 0; padding-left: 4px; }
.edit-photo-pending.show { display: block; }

/* Mini-mapa de ubicación en el modal de edición. Reusa el patrón visual
   de .picker-map-wrap pero con altura reducida y filter alineado con
   v0.9.3 (solo sepia, sin chain). */
.edit-map-wrap { border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); border: 1.5px solid rgba(26,26,26,0.08); }
.edit-map { height: 200px; width: 100%; background: var(--cream-2);
  cursor: crosshair; }
.edit-map .leaflet-tile-pane { filter: sepia(0.18); }
.edit-map-hint { font-family: 'Fraunces', serif; font-style: italic;
  font-size: 13px; color: var(--smoke); line-height: 1.4;
  padding-left: 4px; margin: 6px 0 0; }

.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 8px; }
/* Botones del modal de edición (admin). Sentence case (no uppercase),
   patrón coherente con primario/secundario del sistema. */
.modal-btn { height: 42px; border-radius: 6px;
  border: 1.5px solid var(--tinta);
  font: 500 14px var(--font-ui); cursor: pointer;
  transition: filter 0.15s; }
.modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-btn-cancel { background: var(--fondo-card); color: var(--tinta); }
.modal-btn-cancel:hover:not(:disabled) { filter: brightness(0.96); }
.modal-btn-cancel:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.modal-btn-save { background: var(--naranja-sel); color: var(--papel); }
.modal-btn-save:hover:not(:disabled) { filter: brightness(0.96); }
.modal-btn-save:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

/* ─── MODAL "Sugerir ciudad" — TICKET DENTADO (Fase 5.1) ───
   Lenguaje recibo coherente con popup y bottom sheet de Fase 4.
   Reemplaza al modal antiguo "suave" (12px radius, focus mustard).
   .modal-ticket sobrescribe la posición/forma de .modal base
   pero la apertura sigue controlada por la clase .show del JS. */

.modal-ticket {
  position: fixed;
  bottom: 0;
  left: 50%;
  top: auto;
  right: auto;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 380px;
  max-height: none;
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
  z-index: 9001;
  opacity: 1;
  /* Cerrado: nunca captura clicks. En móvil queda fuera del viewport
     por transform, pero defendemos en profundidad. */
  pointer-events: none;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease-out;
  --tooth: 8px;
  mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 16px 16px repeat-x;
  -webkit-mask:
    radial-gradient(circle var(--tooth) at 50% 0, transparent 98%, #000) 0 0 / 16px 16px repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - var(--tooth) * 2) no-repeat,
    radial-gradient(circle var(--tooth) at 50% 100%, transparent 98%, #000) 0 100% / 16px 16px repeat-x;
}
.modal-ticket.show { transform: translateX(-50%) translateY(0); pointer-events: auto; }

@media (min-width: 640px) {
  .modal-ticket {
    bottom: auto; top: 50%;
    transform: translateX(-50%) translateY(calc(-50% + 30px));
    /* En escritorio el modal queda centrado en el viewport. Sin
       opacity:0 + pointer-events:none, el ticket aparece visible y
       clickable al cargar la página (bug visible en index.html). */
    opacity: 0;
    pointer-events: none;
  }
  .modal-ticket.show {
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    pointer-events: auto;
  }
}

.modal-ticket-close {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--tinta); z-index: 2;
  padding: 0;
}
.modal-ticket-close:hover { opacity: 0.7; }

.ticket-form,
.modal-ticket-success {
  padding: 30px 22px 22px;
  display: flex;
  flex-direction: column;
}
.ticket-form { gap: 14px; }
.modal-ticket-success {
  gap: 16px; align-items: center; text-align: center;
  padding: 36px 22px 26px;
}
/* El atributo HTML `hidden` debe forzar display:none. Sin este override,
   las reglas de display:flex de arriba ganan en cascada y ambas vistas
   coexisten. Se resuelve scoped al ticket para no afectar al resto. */
.ticket-form[hidden],
.modal-ticket-success[hidden] { display: none; }

.ticket-stamp {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--humo);
  text-align: center; margin: 0;
}
.ticket-title {
  font-family: var(--font-serif); font-style: italic;
  font-size: 26px; color: var(--tinta);
  line-height: 1.05; margin: 0; text-align: center;
}
.ticket-subtitle {
  font-family: var(--font-serif); font-style: italic;
  font-size: 14px; color: var(--humo);
  line-height: 1.4; margin: 0 0 4px; text-align: center;
}
.ticket-rule {
  height: 0; border-top: 1.5px dashed var(--tinta);
  margin: 4px 0;
}

#suggest-form {
  display: flex; flex-direction: column; gap: 14px;
}
.ticket-form .field {
  display: flex; flex-direction: column; gap: 6px;
}
.ticket-form .field-label {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; color: var(--tinta);
}
.ticket-form .field-label .req {
  color: var(--error); margin-left: 2px; font-style: normal; font-weight: 700;
}
.ticket-form .field-label .opt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--humo); margin-left: 6px; font-style: normal; font-weight: 500;
}
.ticket-form .field-input {
  width: 100%; height: 42px;
  background: var(--fondo);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 0 14px;
  font-family: var(--font-ui); font-size: 14px;
  color: var(--tinta); box-sizing: border-box;
  outline: none;
  transition: border-width 0.12s ease;
}
.ticket-form .field-input::placeholder {
  color: var(--humo);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
}
.ticket-form .field-input:focus {
  border-width: 2px; border-color: var(--naranja-sel);
  padding: 0 13.5px;
}
.ticket-form .field-hint {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--humo); margin: -2px 0 0;
}

.ticket-captcha {
  display: flex; justify-content: center; align-items: center;
  padding: 8px 0; min-height: 65px; margin: 2px 0;
  border-top: 1.5px dashed var(--tinta);
  border-bottom: 1.5px dashed var(--tinta);
}

/* Mensaje pequeño bajo el widget de Turnstile cuando el captcha
   falla. Mono uppercase rojo tinta, coherente con el resto de
   sellos/labels del sistema. Compartido por modal sugerir e
   index.html y por proponer.html. */
.captcha-error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--error);
  text-align: center;
  margin: 4px 0 0;
}
.captcha-error[hidden] { display: none; }

.ticket-stamp-bottom {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--humo); text-align: center; margin: 4px 0 0;
}

/* Pantalla éxito */
.success-check-wrap {
  position: relative; width: 76px; height: 76px;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
}
.success-check-circle {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--bottle, var(--verde));
  border: 1.5px solid var(--tinta);
  display: flex; align-items: center; justify-content: center;
  color: var(--papel, #F5EFE0);
}
/* La animación arranca cuando JS añade .is-animating. El estado base
   se queda en scale(1) (sin transform) para no depender del fill-mode,
   que falla si el elemento se carga inicialmente con display:none. */
.success-check-circle.is-animating {
  animation: success-check-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes success-check-pop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

.success-stamp {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bottle, var(--verde)); margin: 0;
}
.success-title {
  font-family: var(--font-serif); font-style: italic;
  font-size: 30px; color: var(--tinta);
  line-height: 1.02; margin: 0;
}
.success-message {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; color: var(--tinta);
  line-height: 1.45; margin: 0;
  padding: 12px 0; width: 100%; text-align: center;
  border-top: 1.5px dashed var(--tinta);
  border-bottom: 1.5px dashed var(--tinta);
}
.success-message-highlight { color: var(--naranja-sel); }
.success-detail {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--humo);
  display: flex; justify-content: space-between; width: 100%;
}
.success-close-btn {
  width: 100%; height: 44px;
  background: var(--fondo-card); color: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 6px;
  font-family: var(--font-ui); font-weight: 500; font-size: 14px;
  cursor: pointer; margin-top: 4px;
  transition: filter 0.15s;
}
.success-close-btn:hover { filter: brightness(0.96); }
.success-close-btn:active { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
.success-stamp-bottom {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--humo); margin: 4px 0 0;
}

/* Confeti — fixed full-screen, pointer-events:none, z-index justo bajo modal */
.confetti-container {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  overflow: hidden;
}
.confetti-piece {
  position: absolute; width: 8px; height: 12px;
  border: 1px solid rgba(21, 17, 12, 0.6);
  top: -20px;
  animation: confetti-fall 2.4s ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* Botón X del modal de edición del admin. NO se elimina: lo usa
   .modal del panel de administración. El modal de "Sugerir ciudad"
   tiene su propia .modal-ticket-close, distinto patrón visual. */
.modal-close { position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(26,26,26,0.06); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s, transform 0.1s; }
.modal-close:hover { background: rgba(26,26,26,0.12); }
.modal-close:active { transform: scale(0.94); }

/* ─── TARJETAS ─── */
.taskas-list { display: flex; flex-direction: column; gap: 16px; }

.taska-card { background: white; border-radius: 20px;
  box-shadow: var(--shadow); overflow: hidden;
  border: 1px solid rgba(26,26,26,0.06);
  animation: cardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: opacity 0.4s, transform 0.4s; }
.taska-card.removing { opacity: 0; transform: translateX(-100%); pointer-events: none; }

.taska-photo { height: 200px; background-size: cover; background-position: center;
  background-color: var(--cream-2); position: relative; }
.taska-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,26,26,0.45), transparent 50%); }
.taska-photo.no-photo { display: grid; place-items: center;
  background: linear-gradient(135deg, var(--cream-2), rgba(212,160,23,0.15));
  color: var(--smoke); font-family: 'Fraunces', serif; font-style: italic; }
.taska-photo.no-photo::after { display: none; }

.photo-badges { position: absolute; top: 14px; left: 14px;
  z-index: 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pending-badge {
  background: rgba(245,239,224,0.95); backdrop-filter: blur(8px);
  color: var(--bottle); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 5px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; }
.pending-badge::before { content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--mustard);
  box-shadow: 0 0 0 2px rgba(212,160,23,0.25);
  animation: pulse-mustard-2 2s ease-in-out infinite; }
.city-badge { background: var(--ink); color: var(--cream);
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 12px;
  padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; }
.city-badge::before { content: '📍'; font-size: 10px; }

.price-badge { position: absolute; top: 14px; right: 14px;
  background: var(--wine); color: var(--cream);
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 700;
  font-size: 18px; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  font-variant-numeric: tabular-nums; z-index: 2; }

.taska-body { padding: 18px 20px 20px; }
.taska-name { font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 22px; line-height: 1.15; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 6px; }
.taska-meta { display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--smoke); margin-bottom: 12px; }
.taska-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.taska-meta-item svg { flex-shrink: 0; opacity: 0.7; }
.taska-meta-item.address { color: var(--bottle); font-weight: 500; }
.taska-meta-dot { width: 3px; height: 3px; border-radius: 50%;
  background: rgba(26,26,26,0.2); align-self: center; }

.taska-desc { font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  background: rgba(212,160,23,0.08);
  border-left: 3px solid var(--mustard);
  padding: 12px 14px; border-radius: 4px 10px 10px 4px;
  margin-bottom: 14px; }
.taska-desc.empty { font-style: normal; color: var(--smoke);
  background: rgba(26,26,26,0.04); border-left-color: rgba(26,26,26,0.15); }

.taska-mini-map-wrap { border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(26,26,26,0.08); margin-bottom: 16px; }
.taska-mini-map { height: 160px; width: 100%; background: var(--cream-2); }
.taska-mini-map .leaflet-tile-pane {
  filter: sepia(0.18) saturate(0.92) hue-rotate(-6deg) brightness(0.98); }

/* Bloque de etiquetas editables dentro de cada card pendiente.
   Reusa .tag-checkboxes/.tag-check/.tag-counter de Fase D; solo necesita
   el wrapper (label mono uppercase + gap) porque .field está scoped al
   modal-form/submit-form. */
.pending-tags-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.pending-tags-field > label {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--humo); font-weight: 500;
}

.taska-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-btn { height: 46px; border: 1.5px solid var(--tinta); border-radius: 6px;
  font: 500 14px var(--font-ui); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.15s; }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Primario: aprobar */
.approve-btn { background: var(--naranja-sel); color: var(--papel); }
.approve-btn:hover:not(:disabled) { filter: brightness(0.96); }
.approve-btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }
/* Secundario destructivo: rechazar */
.reject-btn { background: var(--fondo-card); color: var(--tinta); }
.reject-btn:hover:not(:disabled) { color: var(--error); border-color: var(--error); }
.reject-btn:active:not(:disabled) { box-shadow: inset 0 2px 0 rgba(21,17,12,0.15); }

/* ─── SUGERENCIAS DE CIUDAD (admin) ─── */
.suggestions-list { display: flex; flex-direction: column; gap: 10px; }

.suggestion-row { position: relative;
  background: white; border-radius: 14px;
  border: 1px solid rgba(26,26,26,0.08);
  padding: 14px 52px 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.2s, opacity 0.2s;
  animation: cardIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.suggestion-row:hover { border-color: rgba(26,26,26,0.18);
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.18); }
.suggestion-row.removing { opacity: 0; transform: translateX(20px); }

.suggestion-main { display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.suggestion-city { font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 700; font-size: 19px; color: var(--ink);
  margin: 0; line-height: 1.15; }
.suggestion-date { font-size: 11px; color: var(--smoke);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  flex-shrink: 0; }
.suggestion-meta { font-size: 13px; color: var(--smoke);
  margin-top: 6px; line-height: 1.4;
  word-break: break-word; }
.suggestion-comment { font-family: 'Fraunces', serif; font-style: italic;
  font-size: 14px; color: var(--ink); line-height: 1.45;
  margin: 8px 0 0; padding-left: 10px;
  border-left: 2px solid var(--mustard); }

.suggestion-delete { position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: var(--smoke);
  display: grid; place-items: center; cursor: pointer;
  font-size: 15px; line-height: 1;
  transition: background 0.15s, color 0.15s, transform 0.1s; }
.suggestion-delete:hover { background: rgba(179,58,58,0.08); color: var(--error); }
.suggestion-delete:active { transform: scale(0.94); }
.suggestion-delete:disabled { opacity: 0.4; cursor: wait; }

/* ─── ESTADOS ─── */
.empty-state, .loading-state, .error-state {
  text-align: center; padding: 60px 24px; color: var(--smoke); }
.empty-state .icon, .loading-state .icon, .error-state .icon {
  font-size: 48px; margin-bottom: 16px;
  animation: bob 2.5s ease-in-out infinite; }
.empty-state .title, .loading-state .title, .error-state .title {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600;
  font-size: 22px; color: var(--wine); margin-bottom: 6px; }
.empty-state .text, .loading-state .text, .error-state .text {
  font-size: 14px; max-width: 360px; margin: 0 auto; line-height: 1.5; }

.toast { position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ink); color: var(--cream);
  padding: 12px 20px; border-radius: 999px;
  font: 600 13px 'Manrope', sans-serif;
  box-shadow: var(--shadow); z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 32px); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--bottle); }
.toast.error { background: var(--wine); }

/* ─── Foco visible (accesibilidad teclado) ───
   Por defecto los botones primarios reusan :hover (filter) como pista
   visual, lo cual deja a usuarios con tab navigation sin marca clara
   de "estoy aquí". Añadimos un outline andaluz (tinta + offset) sobre
   :focus-visible para que solo aparezca con teclado, no con click. */
.submit-btn:focus-visible,
.propose-submit:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.success-close-btn:focus-visible,
.fab:focus-visible,
.onboarding-btn:focus-visible,
.empty-city-cta:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

/* ─── Version footer ───
   Sello discreto en proponer.html / admin.html. En index.html no
   aparece: la versión va en la atribución de Leaflet. Lo dejamos en
   pointer-events:none para que nunca interfiera con UI clicable. */
.version-footer {
  align-self: flex-end;
  padding: 8px 14px max(env(safe-area-inset-bottom), 8px);
  font-size: 10px; color: var(--humo); opacity: 0.55;
  font-family: var(--font-mono); pointer-events: none;
  letter-spacing: 0.02em;
}

@media (max-width: 380px) {
  .admin-titles h1 { font-size: 16px; }
  .taska-name { font-size: 19px; }
  .admin-user .email { max-width: 110px; }
}

/* ════════════════════════════════════════════════════════════
   HOVER-LIFT (desktop-only)
   Pequeña traslación hacia arriba + sombra reforzada en hover.
   Solo en dispositivos con hover real para que en móvil (donde
   el hover del touch queda "pegado" tras el tap) no quede raro.
   ════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--wine-2), var(--shadow-strong);
  }
  .submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--wine-2), 0 10px 24px -8px rgba(139,31,42,0.45);
  }
  .modal-btn-save:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--wine-2);
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--wine-2);
  }
  /* Filas de sugerencia: lift suave que respeta el hover sutil ya existente. */
  .suggestion-row:hover {
    transform: translateY(-2px);
  }
}

/* ════════════════════════════════════════════════════════════
   SPLASH — pantalla de carga del mapa
   Pin gota animado (bobeo + halo pulsante) sobre la marca en
   Bagel Fat One y una tagline andaluza con tres puntos. Stamp
   inferior con versión + fecha del día.
   Visible solo en index.html. Hide-controlled por JS.
   ════════════════════════════════════════════════════════════ */
.splash {
  position: fixed;
  inset: 0;
  background: var(--papel);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 24px;
  /* Nunca capturamos clicks, ni siquiera mientras el splash está visible:
     si el mapa tarda más de la cuenta, el usuario puede empezar a tocar
     por debajo aunque el splash siga difuminado encima. */
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.splash.hidden {
  opacity: 0;
}
.splash-pin {
  position: relative;
  width: 130px;
  height: 180px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.splash-pin svg {
  position: relative;
  z-index: 1;
  animation: splash-bob 1.8s ease-in-out infinite;
}
.splash-halo {
  position: absolute;
  width: 110px;
  height: 28px;
  bottom: 8px;
  left: 10px;
  background: rgba(232, 122, 26, 0.28);
  border-radius: 50%;
  animation: splash-pulse 2s ease-in-out infinite;
  z-index: 0;
}
.splash-brand {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--tinta);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.5px;
}
.splash-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--humo);
  margin: 0;
  min-height: 24px;
}
.splash-dot {
  display: inline-block;
  opacity: 0;
  animation: splash-blink 1.4s steps(1) infinite;
}
.splash-dot:nth-of-type(1) { animation-delay: 0s; }
.splash-dot:nth-of-type(2) { animation-delay: 0.35s; }
.splash-dot:nth-of-type(3) { animation-delay: 0.7s; }
.splash-stamp {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--tinta);
  text-transform: uppercase;
}
@keyframes splash-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes splash-pulse {
  0%, 100% { transform: scaleX(1); opacity: 0.28; }
  50% { transform: scaleX(0.65); opacity: 0.5; }
}
@keyframes splash-blink {
  0%, 75% { opacity: 0; }
  25%, 50% { opacity: 1; }
}

/* ==========================================================================
   FASE E · AVISAR DE UN FALLO (v0.18.0)
   Modal de usuario (.modal-fallo) reutiliza el patrón modal-ticket
   dentado del modal "Sugerir ciudad". Aquí solo añadimos los elementos
   nuevos: lista de opciones (checkboxes), textarea con label dinámico,
   y la pestaña "Fallos" del admin con cards agrupadas por bar.
   ========================================================================== */

/* Modal del usuario  —————————————————————————————————————————— */

.modal-fallo .ticket-subtitle {
  font-family: var(--font-ui);
  font-style: normal;
  color: var(--humo);
}
.modal-fallo .ticket-subtitle strong {
  color: var(--tinta);
  font-weight: 700;
}
.fallo-bar-address {
  color: var(--humo);
  font-weight: 500;
}

.fallo-options-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 2px;
}
.fallo-options-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: var(--humo);
  margin: 0 0 10px;
}

.fallo-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.fallo-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  background: var(--papel);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.fallo-option:hover { background: var(--papel-oscuro); }
.fallo-option.checked { background: var(--papel-oscuro); }
.fallo-option input {
  margin: 0;
  accent-color: var(--naranja-sel);
  flex-shrink: 0;
}
.fallo-option-label { flex: 1; }
.fallo-option-emoji {
  font-size: 16px;
  margin-left: auto;
}

/* Fase E.2 · v0.19.0 · El textarea global del modal (Fase E) se
   sustituyó por textareas anclados a cada checkbox. Las clases
   .fallo-textarea-block / .fallo-textarea / .fallo-textarea-label se
   eliminaron del CSS al quitarse del HTML. */

/* v0.21.1 · La regla específica de .tab-count-fallos.has-pending se
   eliminó tras consolidar el pill en la base .tab-count (todos los
   badges idénticos, count 0 incluido). */

/* Admin · cards agrupadas por bar  ———————————————————————————— */

.bar-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-group {
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  padding: 14px;
}

.bar-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px dashed rgba(21, 17, 12, 0.3);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.bar-group-info { min-width: 0; flex: 1; }

.bar-group-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--tinta);
  margin: 0;
  line-height: 1.15;
}
.bar-group-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 4px 0 0;
}

.bar-group-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.bar-group-count {
  background: var(--naranja-sel);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 2px 12px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.4;
  min-width: 32px;
  text-align: center;
}

.bar-group-edit-shortcut {
  background: var(--tinta);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}
.bar-group-edit-shortcut:hover { background: #000; }

.bar-group-reports {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-item {
  background: var(--papel);
  border: 1px solid rgba(21, 17, 12, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
}

.report-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.report-pill {
  background: var(--naranja);
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 3px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.report-pill-precio    { background: var(--naranja);     color: var(--tinta); }
.report-pill-direccion { background: var(--papel);       color: var(--tinta); }
.report-pill-foto      { background: var(--espuma);      color: var(--tinta); }
.report-pill-cerrado   { background: var(--naranja-sel); color: var(--papel); }
.report-pill-datos     { background: var(--papel-oscuro);color: var(--tinta); }
.report-pill-otro      { background: var(--tinta);       color: var(--papel); }

.report-time {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  white-space: nowrap;
}

.report-comment {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13px;
  color: var(--tinta);
  margin: 6px 0;
  line-height: 1.4;
  border-left: 2px solid var(--tinta);
  padding-left: 10px;
}

.report-ip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  margin-top: 4px;
}

.report-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.report-mini-btn {
  flex: 1;
  background: transparent;
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tinta);
  cursor: pointer;
}
.report-mini-btn:hover { background: var(--papel-oscuro); }
.report-mini-btn.resolve {
  background: var(--verde);
  color: var(--papel);
  border-color: var(--tinta);
}
.report-mini-btn.resolve:hover { background: #2e5631; }

/* Móvil: cabecera del bar a 2 líneas, no se aplasta el botón Editar  */
@media (max-width: 520px) {
  .bar-group-head {
    flex-direction: column;
    align-items: stretch;
  }
  .bar-group-actions {
    justify-content: space-between;
  }
}

/* ==========================================================================
   FASE E.2 · COMENTARIOS ANCLADOS + FOTO (v0.19.0)
   Cada checkbox del modal de fallo despliega su propio detalle (textarea
   + opcional botón de adjuntar foto), visualmente fusionado debajo del
   checkbox. Solo el tipo "foto" admite imagen sugerida.
   ========================================================================== */

/* Wrapper que envuelve el checkbox + detalle  */
.fallo-option-wrapper {
  display: flex;
  flex-direction: column;
}

/* Cuando el checkbox está marcado, fusionamos visualmente el label con
   el detalle quitando el borde inferior y el radius. */
.fallo-option-wrapper.checked .fallo-option {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

/* Detalle (oculto por defecto)  */
.fallo-option-detail {
  border: 1.5px solid var(--tinta);
  border-top: 1.5px dashed rgba(21, 17, 12, 0.4);
  border-radius: 0 0 6px 6px;
  background: var(--fondo);
  padding: 12px;
  display: none;
}
.fallo-option-wrapper.checked .fallo-option-detail {
  display: block;
}

/* Label dentro del detalle ("Detalle (opcional)" / "(obligatorio)")  */
.fallo-detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 6px;
}
.fallo-detail-label.required {
  color: var(--naranja-sel);
  font-weight: 600;
}

/* Textarea del detalle  */
.fallo-detail-input {
  width: 100%;
  background: var(--fondo-card);
  border: 1px solid var(--tinta);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--tinta);
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
}
.fallo-detail-input::placeholder {
  color: var(--humo);
  font-style: italic;
}

/* Upload de foto · botón estado vacío  */
.fallo-photo-upload {
  margin-top: 10px;
}
.fallo-photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--fondo-card);
  border: 1.5px dashed var(--tinta);
  border-radius: 6px;
  padding: 14px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--humo);
  cursor: pointer;
  transition: all 0.15s;
}
.fallo-photo-btn:hover {
  background: var(--espuma);
  color: var(--tinta);
}

/* Upload de foto · preview con thumbnail  */
.fallo-photo-preview {
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fallo-photo-preview-thumb {
  width: 50px;
  height: 50px;
  background: var(--espuma);
  border: 1px solid var(--tinta);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.fallo-photo-preview-info {
  flex: 1;
  min-width: 0;
}
.fallo-photo-preview-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.fallo-photo-preview-size {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--humo);
  margin: 0;
}
.fallo-photo-remove {
  background: transparent;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--tinta);
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}

/* Admin · foto adjunta en card de reporte tipo "foto"  */
.report-photo-attached {
  margin-top: 8px;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  max-height: 200px;
}
.report-photo-attached img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}
.report-photo-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--tinta);
  font-weight: 600;
  z-index: 1;
}

/* ==========================================================================
   FASE F.1 · RESEÑAS BÁSICAS (v0.20.0)
   ─────────────────────────────────────────────────────────────────────────
   Sistema de reseñas funcional. Toca:
   · popup del mapa (línea de rating compacta entre comentario y tags)
   · sheet (sección "Reseñas" clickable con ★ y flecha)
   · modal de reseñas (.modal-resenas, reusa .modal-ticket)
   · admin (cards pending vs validated en pestaña RESEÑAS)
   ========================================================================== */

/* — POPUP del mapa · línea de rating compacta — */
.popup-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0;
  padding-top: 6px;
  border-top: 1px dashed rgba(21, 17, 12, 0.3);
}
.popup-rating-stars {
  color: var(--naranja);
  font-size: 14px;
  letter-spacing: 1px;
}
.popup-rating-num {
  color: var(--tinta);
  font-weight: 700;
}
.popup-rating-count {
  color: var(--humo);
  font-weight: 400;
  font-size: 12px;
}

/* — SHEET · sección Reseñas clickable — */
/* Hereda la estructura de .taska-sheet-detail (label + value).
   Como ahora es un <button>, neutralizamos los defaults del UA. */
.taska-sheet-detail-clickable {
  background: transparent;
  border: none;
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.taska-sheet-detail-clickable:hover {
  background: var(--papel-oscuro);
}
.taska-sheet-detail-clickable:focus-visible {
  outline: 2px solid var(--naranja-sel);
  outline-offset: 2px;
  border-radius: 4px;
}
.sheet-resenas-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sheet-resenas-stars {
  color: var(--naranja);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
}
.sheet-resenas-count {
  color: var(--humo);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
}
.sheet-resenas-empty {
  color: var(--humo);
  font-style: italic;
  font-size: 13px;
}
.sheet-resenas-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  margin-left: 4px;
  background: var(--papel);
  color: var(--tinta);
}

/* "Avisar de un fallo" ahora ocupa ancho completo (antes compartía
   fila con "Qué dise la gente", reemplazado por sección detalle). */
.taska-sheet-actions .btn-block {
  width: 100%;
}

/* — MODAL de reseñas — */
/* Reusa .modal-ticket. Aquí solo añadimos overrides específicos. */
/* v0.20.1 · A diferencia del modal de fallo o sugerir-ciudad (contenido
   acotado), el modal de reseñas crece según el número de reseñas + el
   form. Sin tope vertical, en desktop con translateY(-50%) las puntas
   se salen del viewport, y en móvil el bottom queda fuera de pantalla
   sin scroll porque .modal-ticket tiene overflow:visible.
   Limitamos altura y scroll solo aquí, sin tocar el patrón base. */
.modal-resenas {
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-resenas .ticket-form {
  /* permitir que la lista pagine sin desbordar */
}

/* Promedio destacado (solo se muestra con ≥3 reseñas) */
.resena-promedio {
  background: var(--fondo);
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.resena-promedio-num {
  font-family: var(--font-display);
  font-size: 38px;
  color: var(--naranja-sel);
  line-height: 1;
  letter-spacing: -1px;
}
.resena-promedio-info {
  flex: 1;
}
.resena-promedio-stars {
  font-size: 18px;
  color: var(--naranja);
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 4px;
}
.resena-promedio-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0;
}

/* Estado vacío motivador */
.resena-empty {
  text-align: center;
  padding: 18px 12px 22px;
}
.resena-empty-icon {
  font-size: 36px;
  margin-bottom: 6px;
}
.resena-empty-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--tinta);
}
.resena-empty-msg {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--humo);
  margin: 0;
}

/* Lista de reseñas */
.resena-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

/* Card de reseña individual (en el modal público) */
.resena-card {
  background: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  padding: 12px 14px;
}
.resena-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.resena-head-left {
  flex: 1;
}
.resena-author {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  margin: 0;
  line-height: 1.1;
  color: var(--tinta);
}
.resena-author.anon {
  color: var(--humo);
}
.resena-stars {
  font-size: 14px;
  color: var(--naranja);
  letter-spacing: 1.5px;
  margin: 4px 0 2px;
  line-height: 1;
}
.resena-date {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
}
.resena-text {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--tinta);
  margin: 8px 0 0;
  line-height: 1.45;
  font-style: italic;
}

/* Botón "Ver N reseñas más" */
.btn-ver-mas {
  display: block;
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--tinta);
  border-radius: 22px;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  margin: 4px 0 14px;
}
.btn-ver-mas:hover {
  background: var(--espuma);
}
/* v0.20.1 · Sin esta regla, el JS marca btnVerMas.hidden=true pero el
   atributo `hidden` (display:none del user-agent) lo sobrescribe la
   regla .btn-ver-mas { display: block } por orden de cascada (misma
   especificidad, gana la posterior). Mayor especificidad: [hidden] sí
   gana. Sin !important. */
.btn-ver-mas[hidden] {
  display: none;
}

/* Form: añadir nueva reseña */
.form-resena {
  border-top: 1.5px dashed var(--tinta);
  padding-top: 14px;
  margin-top: 10px;
}
.form-resena-stamp {
  margin-top: 0;
}
.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 8px 0 6px;
}
.form-label-required {
  color: var(--naranja-sel);
  font-weight: 600;
}

/* Estrellas clickables (5 botones) */
.stars-input {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.star-btn {
  background: transparent;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  width: 40px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta);
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.star-btn:hover {
  background: var(--espuma);
}
.star-btn.active {
  background: var(--naranja);
  color: var(--papel);
  border-color: var(--tinta);
}

/* Inputs del form */
.form-input,
.form-textarea {
  width: 100%;
  background: var(--fondo);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--tinta);
  margin-bottom: 6px;
  box-sizing: border-box;
}
.form-textarea {
  resize: vertical;
  min-height: 80px;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--humo);
  font-style: italic;
}

/* — ADMIN · cards de reseña en pestaña RESEÑAS — */
.resenas-admin-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--papel);
  border: 1px dashed var(--tinta);
  border-radius: 6px;
  text-align: center;
}
.resenas-admin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-resena-card {
  background: var(--fondo-card);
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  padding: 14px;
  transition: opacity 0.2s, background 0.2s;
}
/* Card pendiente · borde naranja para destacar lo accionable */
.admin-resena-card.admin-resena-pending {
  border-color: var(--naranja-sel);
  border-width: 2px;
}
/* Card validada · apagada visualmente, sin botones */
.admin-resena-card.admin-resena-validated {
  opacity: 0.55;
  background: var(--papel);
}
.admin-resena-card.admin-resena-validated:hover {
  opacity: 0.85;
}

.admin-resena-bar {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 8px;
}
.admin-resena-bar strong {
  color: var(--tinta);
  font-weight: 600;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.admin-resena-inner {
  background: var(--fondo);
  border: 1px solid rgba(21, 17, 12, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
}
.admin-resena-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.resena-author-admin {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  margin: 0;
  line-height: 1.1;
  color: var(--tinta);
}
.resena-author-admin.anon {
  color: var(--humo);
}
.resena-stars-admin {
  font-size: 13px;
  color: var(--naranja);
  letter-spacing: 1.2px;
  margin: 4px 0 2px;
  line-height: 1;
}
.resena-meta-admin {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--humo);
  text-transform: uppercase;
}
.resena-text-admin {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--tinta);
  margin: 8px 0 0;
  line-height: 1.4;
  font-style: italic;
}
.resena-text-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--humo);
  margin: 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Acciones · botones Validar/Eliminar (estado pendiente) */
.admin-resena-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px dashed rgba(21, 17, 12, 0.3);
  padding-top: 10px;
}
.admin-action-btn {
  flex: 1;
  background: transparent;
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.admin-action-btn.validate {
  background: var(--verde);
  color: var(--papel);
}
.admin-action-btn.delete {
  background: var(--naranja-sel);
  color: var(--papel);
}
.admin-action-btn:hover {
  filter: brightness(1.05);
}

/* Acciones · estado validado (solo check verde) */
.admin-resena-actions-validated {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  border-top: 1px dashed rgba(21, 17, 12, 0.3);
  padding-top: 10px;
}
.resena-check {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 600;
}

/* v0.21.1 · La regla específica .tab-count-resenas.has-pending se
   eliminó tras consolidar el pill en .tab-count base. */

/* — Rating inline junto al nombre del bar en el sheet (v0.20.1) —
   Aparece pegado al <h2> del nombre, separado visualmente con un
   pequeño gap. Solo se pinta si la taska tiene ≥3 reseñas (mismo
   umbral que popup/sección RESEÑAS/promedio destacado del modal). */
.taska-sheet-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.taska-sheet-title-rating {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--humo);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.taska-sheet-title-rating-star {
  color: var(--naranja);
  font-size: 15px;
}
.taska-sheet-title-rating-num {
  color: var(--tinta);
  font-weight: 700;
}

/* ==========================================================================
   FASE F.2 · DENUNCIA DE RESEÑAS (v0.21.0)
   ========================================================================== */

/* — Botón "Denunciar" en cada reseña del modal público —
   Pequeño y discreto en la esquina derecha de la cabecera de cada
   reseña-card. Cuando este navegador ya denunció (localStorage), pasa
   a "✓ Denunciada" deshabilitado. */
.resena-denunciar {
  background: transparent;
  border: 1px solid var(--humo);
  border-radius: 22px;
  padding: 3px 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--humo);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
  align-self: flex-start;
}
.resena-denunciar:hover {
  border-color: var(--tinta);
  color: var(--tinta);
}
.resena-denunciar.disabled,
.resena-denunciar:disabled {
  background: var(--espuma);
  border-color: rgba(110, 102, 90, 0.3);
  color: rgba(110, 102, 90, 0.7);
  cursor: not-allowed;
}

/* — Modal de denuncia (ticket dentado) —
   Hereda el dentado/textura de .modal-ticket. Sólo aporta tamaños y
   layout específicos del cuerpo. */
.modal-denuncia {
  max-width: 380px;
}

/* Recuadro con la reseña que se va a denunciar */
.denuncia-target {
  background: var(--fondo);
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.denuncia-target-author {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--tinta);
}
.denuncia-target-stars {
  font-size: 12px;
  color: var(--naranja);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 4px;
}
.denuncia-target-text {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: var(--tinta);
  margin: 0;
  line-height: 1.4;
}

/* Motivos (radio buttons como pills) */
.motivos-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 8px;
}
.motivos-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.motivo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  background: var(--papel);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  transition: background 0.15s;
}
.motivo:hover,
.motivo.checked {
  background: var(--papel-oscuro);
}
.motivo input {
  margin: 0;
  accent-color: var(--naranja-sel);
}
.motivo-label {
  flex: 1;
}
.motivo-emoji {
  font-size: 16px;
  margin-left: auto;
}

/* Textarea de detalle (solo para reason='otro') */
.motivo-detail {
  border: 1.5px solid var(--tinta);
  border-radius: 6px;
  background: var(--fondo);
  padding: 12px;
  margin-top: -8px;
  margin-bottom: 14px;
}
.motivo-detail-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--naranja-sel);
  font-weight: 600;
  margin: 0 0 6px;
}
.motivo-detail-input {
  width: 100%;
  background: var(--fondo-card);
  border: 1px solid var(--tinta);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--tinta);
  resize: vertical;
  min-height: 50px;
  box-sizing: border-box;
}

/* Acciones del modal: Cancelar + Denunciar */
.denuncia-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.denuncia-actions .btn-cancel {
  background: transparent;
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 8px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
}
.denuncia-actions .btn-cancel:hover {
  background: var(--papel-oscuro);
}
.denuncia-actions .btn-denunciar {
  flex: 1;
  background: var(--naranja-sel);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: 22px;
  padding: 8px 22px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.denuncia-actions .btn-denunciar:disabled {
  background: var(--papel-oscuro);
  color: var(--humo);
  cursor: not-allowed;
}

/* — Admin · pestaña DENUNCIAS —
   Cards agrupadas por reseña con motivos detallados y acciones. */
.denuncias-admin-summary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--humo);
  padding: 8px 4px 12px;
}
.denuncias-admin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-denuncia-card {
  background: var(--fondo-card);
  border: 1.5px solid rgba(21, 17, 12, 0.4);
  border-radius: 8px;
  padding: 14px;
}
.admin-denuncia-card.is-hidden {
  border: 2px solid var(--naranja-sel);
}

.admin-denuncia-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.admin-denuncia-bar {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0;
  flex: 1;
}
.admin-denuncia-bar strong {
  color: var(--tinta);
  font-weight: 600;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 2px;
}

.denuncia-count-tag {
  border: 1.5px solid var(--tinta);
  border-radius: 12px;
  padding: 2px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.denuncia-count-tag.hidden-tag {
  background: var(--naranja-sel);
  color: var(--papel);
}
.denuncia-count-tag.visible-tag {
  background: var(--naranja);
  color: var(--tinta);
}

.estado-oculta-tag {
  background: var(--tinta);
  color: var(--papel);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: inline-block;
  font-weight: 600;
}

/* Snippet de la reseña dentro de la card de denuncia */
.admin-resena-snippet {
  background: var(--fondo);
  border: 1px solid rgba(21, 17, 12, 0.4);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.admin-resena-snippet .snippet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.admin-resena-snippet .snippet-author {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  margin: 0;
  color: var(--tinta);
}
.admin-resena-snippet .snippet-author.anon {
  color: var(--humo);
}
.admin-resena-snippet .snippet-stars {
  font-size: 12px;
  color: var(--naranja);
  letter-spacing: 1px;
  flex-shrink: 0;
}
.admin-resena-snippet .resena-text-admin {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  color: var(--tinta);
  margin: 0;
  line-height: 1.4;
}
.admin-resena-snippet .resena-text-empty {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--humo);
  margin: 0;
  font-style: normal;
}

/* Lista de motivos: cada denuncia con icono + label + fecha */
.denuncia-motivos-list {
  margin: 8px 0;
}
.denuncia-motivo-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--humo);
  text-transform: uppercase;
  padding: 6px 0;
  border-top: 1px dashed rgba(21, 17, 12, 0.2);
}
.denuncia-motivo-entry:first-child {
  border-top: none;
}
.denuncia-motivo-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.denuncia-motivo-text {
  font-style: italic;
  text-transform: none;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0;
  flex: 1;
  color: var(--tinta);
}
.denuncia-motivo-time {
  color: var(--tinta);
  opacity: 0.7;
  margin-left: auto;
  flex-shrink: 0;
}

/* Botones de acción de la card */
.admin-denuncia-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  border-top: 1px dashed rgba(21, 17, 12, 0.3);
  padding-top: 10px;
}
.admin-denuncia-actions .admin-action-btn {
  flex: 1;
}
.admin-denuncia-actions .admin-action-btn.ignore {
  background: var(--verde);
  color: var(--papel);
  border: 1.5px solid var(--tinta);
}
.admin-denuncia-actions .admin-action-btn.ignore:hover {
  filter: brightness(0.95);
}

/* v0.21.1 · La regla específica .tab-count-denuncias.has-pending se
   eliminó tras consolidar el pill en .tab-count base. */
