/* ============================================================
   AccesMap — sistema de diseño (moderno, temas claro/oscuro)
   ============================================================ */
:root {
  --c-bg:#F5F7FA; --c-bg-2:#EBEFF5; --c-surface:#FFFFFF; --c-surface-2:#FAFBFD;
  --c-ink:#0F1B2D; --c-ink-2:#5A6A80; --c-border:#E4E9F1; --c-border-2:#CFD8E4;
  --c-brand:#0E7C86; --c-brand-2:#14A6AC; --c-brand-ink:#0A5A62; --c-brand-soft:#E0F1F2;
  --c-food:#D2762C; --c-food-soft:#FBECDC;
  --c-si:#12805C; --c-si-bg:#DDF2E9; --c-no:#C24230; --c-no-bg:#F8E5E1; --c-na:#6B7688; --c-na-bg:#EDF1F6;
  --shadow-1:0 1px 2px rgba(15,27,45,.06), 0 4px 14px rgba(15,27,45,.05);
  --shadow-2:0 24px 60px rgba(15,27,45,.22);
  --radius:16px; --radius-sm:10px;
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --header-h:76px;
  --ring:0 0 0 1px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:#0B1220; --c-bg-2:#111B2C; --c-surface:#141F31; --c-surface-2:#182437;
    --c-ink:#EAF0F8; --c-ink-2:#95A5BD; --c-border:#243349; --c-border-2:#34465F;
    --c-brand:#2BBAC6; --c-brand-2:#41D2CF; --c-brand-ink:#8AE3EB; --c-brand-soft:#123039;
    --c-food:#E8A24E; --c-food-soft:#35281A;
    --c-si:#34C08A; --c-si-bg:#12332A; --c-no:#E97060; --c-no-bg:#3A211D; --c-na:#8494AB; --c-na-bg:#1E2A3E;
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-2:0 28px 64px rgba(0,0,0,.62); --ring:0 0 0 1px rgba(255,255,255,.05);
  }
}
:root[data-theme="light"] {
  --c-bg:#F5F7FA; --c-bg-2:#EBEFF5; --c-surface:#FFFFFF; --c-surface-2:#FAFBFD;
  --c-ink:#0F1B2D; --c-ink-2:#5A6A80; --c-border:#E4E9F1; --c-border-2:#CFD8E4;
  --c-brand:#0E7C86; --c-brand-2:#14A6AC; --c-brand-ink:#0A5A62; --c-brand-soft:#E0F1F2;
  --c-food:#D2762C; --c-food-soft:#FBECDC;
  --c-si:#12805C; --c-si-bg:#DDF2E9; --c-no:#C24230; --c-no-bg:#F8E5E1; --c-na:#6B7688; --c-na-bg:#EDF1F6;
  --shadow-1:0 1px 2px rgba(15,27,45,.06), 0 4px 14px rgba(15,27,45,.05);
  --shadow-2:0 24px 60px rgba(15,27,45,.22); --ring:0 0 0 1px rgba(0,0,0,.05);
}
:root[data-theme="dark"] {
  --c-bg:#0B1220; --c-bg-2:#111B2C; --c-surface:#141F31; --c-surface-2:#182437;
  --c-ink:#EAF0F8; --c-ink-2:#95A5BD; --c-border:#243349; --c-border-2:#34465F;
  --c-brand:#2BBAC6; --c-brand-2:#41D2CF; --c-brand-ink:#8AE3EB; --c-brand-soft:#123039;
  --c-food:#E8A24E; --c-food-soft:#35281A;
  --c-si:#34C08A; --c-si-bg:#12332A; --c-no:#E97060; --c-no-bg:#3A211D; --c-na:#8494AB; --c-na-bg:#1E2A3E;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  --shadow-2:0 28px 64px rgba(0,0,0,.62); --ring:0 0 0 1px rgba(255,255,255,.05);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:var(--font-body); color:var(--c-ink); background:var(--c-bg);
  display:flex; flex-direction:column; min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
body.voice-mode { font-size:1.05em; }
h1, h2, h3 { font-family:var(--font-display); line-height:1.1; margin:0; letter-spacing:-.02em; text-wrap:balance; }
.muted { color:var(--c-ink-2); font-size:.9rem; }

.skip-link { position:absolute; left:12px; top:-60px; z-index:1200; background:var(--c-brand); color:#fff; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700; transition:top .18s; }
.skip-link:focus { top:12px; }
:focus-visible { outline:3px solid var(--c-brand); outline-offset:2px; border-radius:6px; }
body.voice-mode :focus-visible { outline-width:4px; }

/* ============ HEADER ============ */
.app-header {
  min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:12px clamp(16px,3vw,34px); background:color-mix(in srgb, var(--c-surface) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--c-border); position:sticky; top:0; z-index:500;
}
.brand { display:flex; align-items:center; gap:13px; }
.brand__mark {
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(145deg, var(--c-brand-2), var(--c-brand)); box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand__text h1 { font-size:1.55rem; font-weight:800; color:var(--c-ink); letter-spacing:-.03em; }
.brand__accent { color:var(--c-brand); }
.brand__slogan { margin:2px 0 0; font-size:.8rem; font-weight:700; color:var(--c-ink-2); letter-spacing:.01em; }

.header-tools { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.toolbar { display:inline-flex; gap:6px; }
.iconbtn {
  width:40px; height:40px; border-radius:11px; border:1px solid var(--c-border-2); background:var(--c-surface);
  font-size:1.15rem; line-height:1; cursor:pointer; color:var(--c-ink); display:grid; place-items:center; transition:all .15s;
}
.iconbtn:hover { border-color:var(--c-brand); transform:translateY(-1px); }
.iconbtn.is-on { background:var(--c-brand); border-color:var(--c-brand); color:#fff; }

.role-switch { display:flex; align-items:center; gap:9px; }
.segmented { display:inline-flex; background:var(--c-bg-2); border:1px solid var(--c-border-2); border-radius:999px; padding:4px; }
.seg { border:0; background:transparent; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.9rem; color:var(--c-ink-2); padding:8px 17px; border-radius:999px; transition:all .18s; }
.seg.is-active { background:var(--c-brand); color:#fff; box-shadow:var(--shadow-1); }
.vbadge { font-size:.72rem; font-weight:800; color:var(--c-si); background:var(--c-si-bg); border:1px solid color-mix(in srgb, var(--c-si) 35%, transparent); padding:4px 9px; border-radius:999px; letter-spacing:.02em; }

/* ============ LAYOUT ============ */
.layout { flex:1; display:grid; grid-template-columns:minmax(340px, 420px) 1fr; min-height:0; }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } .map-wrap { order:-1; height:46vh; } }

/* ============ PANEL ============ */
.panel { display:flex; flex-direction:column; min-height:0; background:var(--c-surface); border-right:1px solid var(--c-border); }
.panel__search { padding:18px 18px 10px; border-bottom:1px solid var(--c-border); }
.search { display:flex; align-items:center; gap:10px; background:var(--c-bg); border:1.5px solid var(--c-border-2); border-radius:12px; padding:0 14px; transition:border-color .15s, box-shadow .15s; }
.search:focus-within { border-color:var(--c-brand); box-shadow:0 0 0 3px var(--c-brand-soft); }
.search__icon { color:var(--c-ink-2); flex:none; }
.search input { border:0; background:transparent; outline:none; font-family:var(--font-body); font-size:1rem; color:var(--c-ink); padding:12px 0; width:100%; }
.search input::placeholder { color:var(--c-ink-2); }

.filters { display:flex; flex-wrap:wrap; gap:8px; margin:13px 0 4px; }
.chip { border:1.5px solid var(--c-border-2); background:var(--c-surface); color:var(--c-ink-2); font-family:var(--font-body); font-weight:700; font-size:.82rem; padding:7px 12px; border-radius:999px; cursor:pointer; transition:all .15s; }
.chip:hover { border-color:var(--c-brand); color:var(--c-brand); }
.chip.is-on { background:var(--c-brand); border-color:var(--c-brand); color:#fff; }
.chip--food:hover { border-color:var(--c-food); color:var(--c-food); }
.chip--food.is-on { background:var(--c-food); border-color:var(--c-food); color:#fff; }

.panel__meta { display:flex; align-items:center; justify-content:space-between; padding:13px 18px 6px; }
.count { font-size:.78rem; color:var(--c-ink-2); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.place-list { list-style:none; margin:0; padding:6px 12px 14px; overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }

.card { text-align:left; width:100%; cursor:pointer; background:var(--c-surface); border:1.5px solid var(--c-border); border-radius:var(--radius); padding:14px 15px; display:grid; gap:9px; transition:transform .14s, border-color .14s, box-shadow .14s; animation:rise .45s cubic-bezier(.2,.7,.3,1) both; }
.card:hover { border-color:var(--c-brand); transform:translateY(-2px); box-shadow:var(--shadow-1); }
.card__top { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.card__name { font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--c-ink); }
.card__cat { font-size:.77rem; color:var(--c-ink-2); margin-top:2px; }
.card__addr { font-size:.77rem; color:var(--c-ink-2); }

.score { flex:none; font-family:var(--font-display); font-weight:800; font-size:.72rem; padding:5px 10px; border-radius:999px; white-space:nowrap; border:1.5px solid; letter-spacing:.01em; }
.score--alta { color:var(--c-si); background:var(--c-si-bg); border-color:color-mix(in srgb, var(--c-si) 30%, transparent); }
.score--media { color:var(--c-food); background:var(--c-food-soft); border-color:color-mix(in srgb, var(--c-food) 30%, transparent); }
.score--baja { color:var(--c-no); background:var(--c-no-bg); border-color:color-mix(in srgb, var(--c-no) 30%, transparent); }
.score--nd { color:var(--c-na); background:var(--c-na-bg); border-color:color-mix(in srgb, var(--c-na) 30%, transparent); }

.iconrow { display:flex; flex-wrap:wrap; gap:6px; }
.ico { display:inline-flex; align-items:center; gap:4px; font-size:.73rem; font-weight:700; padding:3px 8px; border-radius:8px; border:1px solid var(--c-border); color:var(--c-ink-2); }
.ico[data-st="si"] { color:var(--c-si); background:var(--c-si-bg); border-color:color-mix(in srgb, var(--c-si) 25%, transparent); }
.ico[data-st="no"] { color:var(--c-no); background:var(--c-no-bg); border-color:color-mix(in srgb, var(--c-no) 25%, transparent); }
.ico[data-st="na"] { color:var(--c-na); background:var(--c-na-bg); }
.ico__gl { font-size:.9rem; }

/* ============ MAP ============ */
.map-wrap { position:relative; min-height:0; }
#map { position:absolute; inset:0; height:100%; width:100%; background:var(--c-bg-2); z-index:1; }
@media (max-width:900px) { #map { position:relative; } }

.legend { position:absolute; left:14px; bottom:22px; z-index:400; background:color-mix(in srgb, var(--c-surface) 94%, transparent); border:1px solid var(--c-border); border-radius:12px; padding:10px 13px; box-shadow:var(--shadow-1); font-size:.78rem; display:grid; gap:5px; color:var(--c-ink); }
.legend__title { font-family:var(--font-display); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-ink-2); }
.legend__item { display:flex; align-items:center; gap:8px; font-weight:700; }
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; border:2px solid var(--c-surface); box-shadow:0 0 0 1px var(--c-border-2); }
.dot--alta { background:var(--c-si); } .dot--media { background:var(--c-food); } .dot--baja { background:var(--c-no); } .dot--nd { background:var(--c-na); }

/* Marcador minimalista (sin letra) */
.mk { display:block; width:16px; height:16px; border-radius:50%; border:3px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); transition:transform .12s; }
.mk--alta { background:#1F9E6E; } .mk--media { background:#E08A2B; } .mk--baja { background:#D0503B; } .mk--nd { background:#8A93A5; }
.leaflet-marker-icon:hover .mk, .mk:hover { transform:scale(1.25); }

.leaflet-popup-content-wrapper { border-radius:12px; background:var(--c-surface); color:var(--c-ink); box-shadow:var(--shadow-2); }
.leaflet-popup-tip { background:var(--c-surface); }
.leaflet-popup-content { font-family:var(--font-body); margin:12px 14px; }
.pop__name { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--c-ink); }
.pop__btn { margin-top:8px; }

/* ============ BUTTONS ============ */
.btn { font-family:var(--font-body); font-weight:700; cursor:pointer; border-radius:11px; padding:11px 18px; font-size:.95rem; border:1.5px solid transparent; transition:all .15s; display:inline-flex; align-items:center; gap:8px; }
.btn--primary { background:var(--c-brand); color:#fff; }
.btn--primary:hover { background:var(--c-brand-ink); transform:translateY(-1px); }
.btn--food { background:var(--c-food); color:#fff; }
.btn--food:hover { filter:brightness(.94); transform:translateY(-1px); }
.btn--ghost { background:var(--c-surface); color:var(--c-brand); border-color:var(--c-border-2); }
.btn--ghost:hover { border-color:var(--c-brand); }
.btn--sm { padding:7px 13px; font-size:.84rem; border-radius:9px; }
.btn:disabled { opacity:.6; cursor:default; transform:none; }

/* ============ MODAL ============ */
.modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.modal[hidden] { display:none; }
.modal__backdrop { position:absolute; inset:0; background:rgba(8,12,22,.55); backdrop-filter:blur(3px); animation:fade .2s; }
.modal__card { position:relative; background:var(--c-surface); border:1px solid var(--c-border); border-radius:20px; box-shadow:var(--shadow-2); width:100%; max-width:480px; max-height:90vh; overflow-y:auto; padding:26px; animation:pop .26s cubic-bezier(.2,.8,.3,1) both; }
.modal__card--wide { max-width:620px; }
.modal__close { position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid var(--c-border); background:var(--c-bg); font-size:1.5rem; line-height:1; cursor:pointer; color:var(--c-ink-2); }
.modal__close:hover { background:var(--c-no-bg); color:var(--c-no); }
.modal__title { font-size:1.35rem; font-weight:800; color:var(--c-ink); margin-bottom:4px; }
.modal__sub { color:var(--c-ink-2); font-size:.9rem; margin:0 0 6px; }

/* Detalle */
.det__head { padding-right:40px; margin-bottom:6px; }
.det__titlerow { display:flex; align-items:center; gap:10px; }
.det__name { font-size:1.6rem; font-weight:800; color:var(--c-ink); }
.det__meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--c-ink-2); font-size:.88rem; margin-top:5px; align-items:center; }
.det__source { display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.8rem; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--c-brand-soft); color:var(--c-brand-ink); }
.det__section { margin-top:20px; }
.det__section h3 { font-size:1.05rem; display:flex; align-items:center; gap:8px; padding-bottom:8px; margin-bottom:12px; border-bottom:2px solid var(--c-border); }
.det__section--fis h3 { color:var(--c-brand); }
.det__section--ali h3 { color:var(--c-food); }
.det__section--con h3 { color:var(--c-ink); }
.det__grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:460px) { .det__grid { grid-template-columns:1fr; } }
.feat { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1.5px solid var(--c-border); border-radius:11px; font-size:.88rem; font-weight:700; background:var(--c-surface-2); }
.feat[data-st="si"] { background:var(--c-si-bg); border-color:color-mix(in srgb, var(--c-si) 25%, transparent); }
.feat[data-st="no"] { background:var(--c-no-bg); border-color:color-mix(in srgb, var(--c-no) 25%, transparent); }
.feat[data-st="na"] { background:var(--c-na-bg); }
.feat__gl { font-size:1.1rem; flex:none; }
.feat__txt { flex:1; color:var(--c-ink); }
.feat__st { font-size:.73rem; padding:2px 8px; border-radius:7px; white-space:nowrap; color:#fff; }
.feat[data-st="si"] .feat__st { background:var(--c-si); } .feat[data-st="no"] .feat__st { background:var(--c-no); } .feat[data-st="na"] .feat__st { background:var(--c-na); }

.condgrid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media (max-width:460px) { .condgrid { grid-template-columns:1fr; } }
.condcard { border:1.5px solid color-mix(in srgb, var(--c-si) 25%, transparent); background:var(--c-si-bg); border-radius:12px; padding:10px 12px; }
.condcard__t { font-weight:800; font-size:.9rem; color:var(--c-ink); display:flex; align-items:center; gap:6px; }
.condcard__n { font-size:.78rem; color:var(--c-ink-2); margin-top:4px; line-height:1.45; }

.reviews { margin-top:22px; }
.reviews h3 { font-size:1.05rem; color:var(--c-ink); margin-bottom:10px; }
.review { background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:12px; padding:11px 13px; margin-bottom:8px; }
.review__top { display:flex; justify-content:space-between; font-size:.8rem; color:var(--c-ink-2); margin-bottom:3px; }
.review__author { font-weight:700; color:var(--c-ink); }
.review__badge { font-size:.72rem; font-weight:700; padding:1px 8px; border-radius:6px; background:var(--c-food-soft); color:var(--c-food); }
.det__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* ============ FORM ============ */
.form { display:grid; gap:14px; margin-top:8px; }
.field { display:grid; gap:5px; }
.field label { font-weight:700; font-size:.86rem; color:var(--c-ink); }
.field input[type=text], .field textarea { font-family:var(--font-body); font-size:.95rem; color:var(--c-ink); border:1.5px solid var(--c-border-2); border-radius:10px; padding:10px 12px; background:var(--c-surface-2); width:100%; }
.field textarea { resize:vertical; min-height:70px; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--c-brand); box-shadow:0 0 0 3px var(--c-brand-soft); }
.form__group-title { font-family:var(--font-display); font-weight:700; font-size:.98rem; margin:8px 0 -2px; color:var(--c-brand); }
.form__group-title--food { color:var(--c-food); }
.form__group-title--con { color:var(--c-ink); }
.tri { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--c-border); }
.tri span { font-size:.87rem; font-weight:700; }
.tri__opts { display:inline-flex; gap:4px; }
.tri__opts button { border:1.5px solid var(--c-border-2); background:var(--c-surface); cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.78rem; padding:5px 11px; border-radius:8px; color:var(--c-ink-2); }
.tri__opts button.on[data-v="si"] { background:var(--c-si); color:#fff; border-color:var(--c-si); }
.tri__opts button.on[data-v="no"] { background:var(--c-no); color:#fff; border-color:var(--c-no); }
.tri__opts button.on[data-v="na"] { background:var(--c-na); color:#fff; border-color:var(--c-na); }
.form__actions { display:flex; gap:10px; margin-top:8px; }
.form__hint { font-size:.8rem; color:var(--c-brand-ink); background:var(--c-brand-soft); padding:9px 12px; border-radius:9px; }

/* Verificación */
.v-status { min-height:24px; font-size:.9rem; font-weight:700; color:var(--c-ink-2); display:flex; align-items:center; gap:8px; margin-top:4px; }
.v-ok { color:var(--c-si); }
.spin { width:15px; height:15px; border:2.5px solid var(--c-border-2); border-top-color:var(--c-brand); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }

/* ============ TOAST / FOOTER / EMPTY ============ */
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--c-ink); color:var(--c-surface); padding:13px 20px; border-radius:12px; font-weight:700; font-size:.92rem; box-shadow:var(--shadow-2); z-index:1500; opacity:0; transition:all .3s cubic-bezier(.2,.8,.3,1); max-width:90vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast[hidden] { display:block; }
.app-footer { padding:12px 24px; text-align:center; border-top:1px solid var(--c-border); background:var(--c-surface); }
.app-footer p { margin:0; font-size:.78rem; color:var(--c-ink-2); }
.empty { text-align:center; color:var(--c-ink-2); padding:40px 20px; }
.empty__gl { font-size:2.2rem; }

/* ============ ANIMACIONES ============ */
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }