:root{--mc-build:"5beeeb29af";}
*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;line-height:1.2}
/* Tells the browser this page has its own deliberate theming and shouldn't
   be auto-repainted by a device/browser dark-mode setting (Samsung Internet
   and some other Chromium browsers do this aggressively by default, which
   fights our own dark header + light content palette and looks worse than
   either). "light" here means "render this as authored, don't force-dark
   it" — it does not mean the app itself looks light, most of it is dark by
   design already. */
:root{color-scheme:light}
:root{
  --wall:#fab400;--wall-dk:#f5670f;--wall-soft:#fddd8c;
  --gulf:#00309c;--gulf-dk:#001f65;--gulf-soft:#597ed1;
  --night:#000612;--night2:#00081c;--night3:#000c28;
  --paper:#fbf8f2;--paper2:#f3ecdd;--paper3:#eae1cc;
  --surface:#fff;
  --signal:#b8402a;--signal-bg:#faeae5;
  --palm:#3f6b52;--palm-bg:#e7efe4;
  --ink:#1c1c18;--ink2:#565349;--ink3:#8d8a7c;
  --line:rgba(28,28,24,0.09);--line2:rgba(28,28,24,0.16);
  --r:16px;--rs:11px;--rl:22px;
  --sh1:0 1px 2px rgba(20,25,20,.06),0 1px 1px rgba(20,25,20,.04);
  --sh2:0 4px 14px rgba(20,25,20,.09),0 1px 3px rgba(20,25,20,.06);
  --sh3:0 10px 30px rgba(15,20,18,.16),0 2px 6px rgba(15,20,18,.08);
}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#15171a;--paper2:#1b1d21;--paper3:#232529;
  --surface:#202226;
  --signal-bg:rgba(184,64,42,.22);--palm-bg:rgba(63,107,82,.26);
  --ink:#f1efe8;--ink2:#b7b4aa;--ink3:#8b8879;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --sh1:0 1px 2px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.25);
  --sh2:0 4px 14px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --sh3:0 10px 30px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
}
/* These controls sit on permanently-dark chrome — a --night button/pill
   background, or a translucent layer over the always-dark header/drawer —
   and author their text/icon color as var(--paper), i.e. the light-on-dark
   token. The dark theme flips --paper to a dark surface value, so re-pin
   their foreground to light here. Brand accent buttons deliberately keep
   their --night background, matching FIX 1's "look the same in both
   themes" intent. */
[data-theme="dark"] .fab,
[data-theme="dark"] .onboard-card-cta,
[data-theme="dark"] .subtog-btn.on,
[data-theme="dark"] .chip.on,
[data-theme="dark"] .rep-resolve-btn.on,
[data-theme="dark"] .seg-btn.on,
[data-theme="dark"] .mchip.on,
[data-theme="dark"] .submit-btn,
[data-theme="dark"] .toast,
[data-theme="dark"] .tb-icon,
[data-theme="dark"] .tb-wx,
[data-theme="dark"] .tb-acct,
[data-theme="dark"] .menu-close{color:#fbf8f2}
html,body{height:100%;height:100dvh;overflow:hidden;position:fixed;inset:0;width:100%;background:var(--night);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
svg{display:block}
.ico{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ═══ DESKTOP GATE (landing page) ═══ */
/* The desktop gate is always dark-on-dark by design and uses --paper as a
   "light text" token; re-pin it to its light value so the dark theme's
   --paper override (near-black) doesn't turn their text invisible. */
#desktop-gate{--paper:#fbf8f2}
#desktop-gate{display:none;position:fixed;inset:0;background:radial-gradient(120% 100% at 50% 0%,#1a3238 0%,var(--night) 62%);z-index:99999;overflow-y:auto}
#desktop-gate.on{display:block}
.gate-page{max-width:900px;margin:0 auto;padding:64px 40px 84px;color:var(--paper)}
.gate-icon{width:78px;height:78px;border-radius:20px;display:block;margin:0 auto 30px;box-shadow:var(--sh3)}
.gate-continue{display:block;margin:0 auto 30px;background:var(--wall);color:var(--night);font-family:inherit;font-size:15px;font-weight:700;border:none;border-radius:99px;padding:15px 34px;cursor:pointer;box-shadow:var(--sh2)}
.gate-qr{width:172px;height:172px;background:#fff;border-radius:20px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;padding:14px;box-shadow:var(--sh3)}
.gate-qr img{width:100%;height:100%}
.gate-url{font-size:13.5px;color:#8a978f;letter-spacing:.02em}
.gate-url b{color:var(--paper);font-weight:600}

.gate-hero{text-align:center;margin-bottom:60px}
.gate-hero h1{font-family:"Fraunces",Georgia,serif;font-size:38px;font-weight:600;margin-bottom:16px;letter-spacing:-0.015em;line-height:1.15}
.gate-lead{font-size:16px;line-height:1.65;color:#b9c4bf;max-width:560px;margin:0 auto}

.gate-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:56px}
.gate-feature{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:22px}
.gate-feature-ico{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--paper)}
.gate-feature-ico .ico{width:19px;height:19px}
.gate-feature h3{font-size:15px;font-weight:700;margin-bottom:6px}
.gate-feature p{font-size:13.5px;line-height:1.6;color:#b9c4bf}

.gate-about{max-width:600px;margin:0 auto 56px;display:flex;flex-direction:column;gap:22px}
.gate-about-block h3{font-size:15px;font-weight:700;margin-bottom:6px}
.gate-about-block p{font-size:13.5px;line-height:1.65;color:#b9c4bf}

.gate-cta{text-align:center}

@media (max-width:600px){
  .gate-page{padding:48px 24px 64px}
  .gate-features{grid-template-columns:1fr}
}

/* Tip gate — blocking per-section onboarding overlay (also hosts the install
   popup). 260 sits above .wx-lb-bg (250) and below .toast (300). */
#tip-gate{display:none;position:fixed;inset:0;z-index:260;background:rgba(18,32,29,.55);align-items:center;justify-content:center;padding:20px}
#tip-gate.on{display:flex}
#tip-gate .onboard-card{margin-bottom:0;max-width:360px;width:100%}
.install-pop-icon{width:38px;height:38px;border-radius:11px;flex-shrink:0}
.install-pop-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.install-pop-later{background:none;border:none;color:var(--ink3);font-family:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px}
.gate-steps{text-align:left;display:flex;flex-direction:column;gap:15px;margin:2px 0 14px}
.gate-step{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.gate-step b{color:var(--ink);font-weight:600}
.gate-step-ico{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--paper2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.gate-step-ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ═══ APP SHELL ═══ */
.app{max-width:430px;margin:0 auto;height:100vh;height:100svh;display:none;flex-direction:column;background:var(--paper2);position:relative;overflow:hidden}
.app.on{display:flex}

/* ═══ TOP CHROME (now just a header, no nav) ═══ */
.chrome{background:linear-gradient(165deg,var(--night3),var(--night));flex-shrink:0;padding-top:env(safe-area-inset-top);position:relative;z-index:1;box-shadow:0 2px 10px rgba(0,6,18,.22)}
.topbar{padding:12px 18px;min-height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.brand-logo{height:40px;width:auto;display:block;max-width:100%;object-fit:contain;object-position:left center}
@media (max-width:399px){.brand-logo{height:36px}}
@media (max-width:379px){.brand-logo{height:32px}}
@media (max-width:339px){.brand-logo{height:26px}}
.menu-hdr .brand-logo{height:24px}
.tb-icon{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:var(--paper);cursor:pointer;text-decoration:none}
.tb-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:99px;background:var(--signal);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1;border:1.5px solid var(--night)}
.tb-badge.on{display:flex}
.tb-wx{height:36px;padding:0 12px 0 9px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:6px;color:var(--paper);cursor:pointer;font-family:inherit;position:relative;transition:background .2s,border-color .2s}
.tb-wx .ico{width:18px;height:18px;color:var(--wall-soft)}
.tb-wx-temp{font-size:13.5px;font-weight:700}
.tb-wx.has-alert{background:rgba(184,64,42,.22);border-color:rgba(184,64,42,.4)}
.tb-wx.has-alert .ico{color:#ff9b82}
.tb-wx-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--signal);border:2px solid var(--night);animation:tbWxPulse 2s ease-in-out infinite}
@keyframes tbWxPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}}
.tb-icon .ico{width:17px;height:17px}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-search{display:none;flex:1;align-items:center;gap:8px;min-width:0;animation:tbSearchIn .18s ease-out}
.topbar.searching .brand,.topbar.searching .tb-right{display:none}
.topbar.searching .tb-search{display:flex}
.tb-search-field{flex:1;min-width:0;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.tb-search-field .ico{width:16px;height:16px;color:rgba(251,248,242,.7);flex-shrink:0}
.tb-search-field input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fbf8f2;font-family:inherit;font-size:16px;padding:0}
.tb-search-field input::placeholder{color:rgba(251,248,242,.55)}
.tb-search-field input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
@keyframes tbSearchIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.search-panel{display:none;position:absolute;inset:0;z-index:50;background:var(--paper2);overflow-y:auto;-webkit-overflow-scrolling:touch}
.search-panel.on{display:block}
.search-body{padding:6px 16px 28px}
.sr-hint{padding:44px 24px;text-align:center;color:var(--ink3);font-size:13.5px;line-height:1.55}
.sr-hint b{display:block;color:var(--ink2);font-size:15px;margin-bottom:4px}
.sr-group{margin-top:14px}
.sr-group-hdr{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:0 4px 6px}
.sr-group-hdr span{font-weight:600;letter-spacing:0}
.sr-row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:11px 12px;margin-bottom:6px;cursor:pointer;font-family:inherit;color:var(--ink);-webkit-tap-highlight-color:transparent}
.sr-row:active{background:var(--paper3)}
.sr-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-row-title{font-size:14px;font-weight:700;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-row-sub{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-row-arr{width:16px;height:16px;color:var(--ink3);flex-shrink:0}
.sr-more{background:none;border:none;color:var(--gulf);font-family:inherit;font-size:12.5px;font-weight:700;padding:4px 6px 8px;cursor:pointer}
[data-theme="dark"] .sr-more{color:var(--gulf-soft)}
.sr-thumb{width:46px;height:46px;border-radius:10px;flex-shrink:0;background:var(--paper3) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.sr-thumb .ico{width:20px;height:20px}
.sr-thumb.sr-ph{color:var(--ink3)}
.sr-thumb.sr-ico{color:#fff}
@keyframes searchFlash{0%,100%{box-shadow:0 0 0 0 rgba(250,180,0,0)}25%,70%{box-shadow:0 0 0 4px rgba(250,180,0,.9)}}
.search-flash{animation:searchFlash 2.2s ease}
.tb-acct{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;gap:6px;color:var(--paper);cursor:pointer;font-family:inherit;padding:0;position:relative;-webkit-tap-highlight-color:transparent}
.tb-acct .ico{width:17px;height:17px}
.tb-acct-lbl{display:none;font-size:13px;font-weight:700}
.tb-acct.signin{width:auto;border-radius:99px;padding:0 13px 0 11px}
.tb-acct.signin .tb-acct-lbl{display:inline}

/* ═══ BOTTOM NAV ═══ */
.bottom-nav{display:flex;flex-shrink:0;background:var(--surface);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(20,25,20,.05);position:relative;z-index:30}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border:none;background:none;cursor:pointer;font-family:inherit;color:var(--ink3);position:relative}
.bn .ico{width:22px;height:22px;stroke-width:1.7}
.bn span{font-size:10.5px;font-weight:600}
.bn.on{color:var(--gulf)}
.bn.on .ico{stroke-width:2}
/* Perfil tab's admin pending-count dot — same shape/color as .tb-badge
   (the header pill it replaces), sized down and anchored to the icon
   (horizontally centered within the wider flex tab) rather than the tab's
   own corner, and bordered with --surface (the bottom nav's own light
   background) instead of --night, since it no longer sits on the dark
   header bar. */
.bn-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:15px;height:15px;padding:0 3px;border-radius:99px;background:var(--signal);color:#fff;font-size:9.5px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1;border:1.5px solid var(--surface)}
.bn-badge.on{display:flex}
/* A subtle nudge while signed out — the old header pill widened to show
   "Entrar" as its own visual cue, which a fixed-width bottom-nav tab can't
   do; the label swap alone (see refreshHeaderAccount) carries most of that
   weight, this just echoes the same "notable tab" accent .bn.on already
   uses elsewhere in this row. */
.bn.signin{color:var(--gulf)}

/* ═══ SCREENS ═══ */
.screens{flex:1;overflow:hidden;position:relative;z-index:5}
.scr{display:none;flex-direction:column;overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;position:relative;z-index:5}
.scr.on{display:flex}
.scr.pull-active,.search-panel.pull-active{transition:none}
.scr.pull-snap,.search-panel.pull-snap{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* ═══ PULL TO REFRESH ═══ */
.pull-indicator{position:absolute;top:14px;left:50%;transform:translate(-50%,-50%) scale(.6) rotate(0deg);width:36px;height:36px;border-radius:50%;background:var(--surface);box-shadow:0 2px 12px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;opacity:0;z-index:55;pointer-events:none}
.pull-indicator .ico{width:18px;height:18px;color:var(--gulf)}
.pull-indicator.spinning .ico{animation:pull-spin .7s linear infinite}
@keyframes pull-spin{to{transform:rotate(360deg)}}

/* ═══ SHARED ═══ */
.pad{padding:18px 18px 0}
.sec-title{font-family:"Fraunces",Georgia,serif;font-size:23px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.sec-sub{font-size:13.5px;color:var(--ink3);margin-bottom:16px}
.fab{position:fixed;right:18px;bottom:calc(76px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;background:var(--night);color:var(--paper);border:none;box-shadow:var(--sh3);cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center}
.fab .ico{width:23px;height:23px;stroke-width:2}
.empty{padding:64px 30px;text-align:center;color:var(--ink3)}
.empty-ico{width:38px;height:38px;margin:0 auto 14px;color:var(--ink3);opacity:.6}
.empty p{font-size:14px;line-height:1.6}
.empty b{color:var(--ink)}

/* Pinned "how to use this section" onboarding card — a real UI card, not a
   dashed placeholder: white surface, soft shadow, amber accent, numbered
   step chips and a solid button. */
.onboard-card{position:relative;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh1);padding:17px 16px 18px;margin-bottom:14px;overflow:hidden}
.onboard-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--wall),var(--wall-dk))}
.onboard-card-x{position:absolute;top:11px;right:11px;width:26px;height:26px;border:none;background:var(--paper2);border-radius:50%;color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.onboard-card-x .ico{width:13px;height:13px}
.onboard-card-hd{display:flex;align-items:center;gap:11px;margin-bottom:10px;padding-right:26px}
.onboard-card-ico{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,var(--wall),var(--wall-dk));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.onboard-card-ico .ico{width:19px;height:19px}
.onboard-card-ttl{font-weight:800;font-size:15px;line-height:1.25;letter-spacing:-.01em}
.onboard-card-lead{font-size:12.5px;line-height:1.5;color:var(--ink3);margin-bottom:12px}
.onboard-steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:9px;margin:0 0 15px}
.onboard-steps li{display:flex;gap:10px;align-items:flex-start}
.onboard-steps li span{font-size:12.5px;line-height:1.45;color:var(--ink2);padding-top:1px}
.onboard-steps li::before{counter-increment:step;content:counter(step);flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--paper2);color:var(--ink2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.onboard-card-cta{display:inline-flex;align-items:center;gap:6px;background:var(--night);color:var(--paper);border:none;border-radius:11px;padding:11px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.onboard-card-cta:active{transform:translateY(1px)}
.onboard-card-cta .ico{width:14px;height:14px}

/* Sub-toggle used inside Anuncios (Productos/Empleos) and Reportar (Reportes/Alertas) */
.subtog{display:flex;background:var(--paper3);border-radius:99px;padding:3px;margin:8px 18px 8px;gap:2px}
.subtog-btn{flex:1;text-align:center;padding:9px 4px;border-radius:99px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink2);font-family:inherit;border:none;background:none;white-space:nowrap}
.subtog-btn.on{background:var(--night);color:var(--paper)}

/* ═══ OFERTAS (daily deal drop) ═══ */
.of-hdr{padding:0 18px 14px}
.of-hdr-txt{font-size:12px;font-weight:600;color:var(--ink3);display:flex;align-items:center;gap:6px}
.of-hdr-post-btn{margin-top:8px;background:none;border:1px dashed var(--line2);border-radius:99px;padding:8px 14px;font-size:12px;font-weight:700;color:var(--gulf);cursor:pointer;font-family:inherit}
.of-list{display:flex;width:100%;flex-shrink:0;align-items:center;gap:12px;overflow-x:auto;overflow-y:visible;padding:0 18px 12px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.of-list::-webkit-scrollbar{display:none}
.mkt-divider{display:flex;align-items:center;gap:10px;padding:2px 18px 8px;color:var(--ink3)}
.mkt-divider::before,.mkt-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.mkt-divider span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}

/* ═══ SLOT BOOKING CALENDAR (inside Publicar una Oferta) ═══ */
.slot-cal-note{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--ink3);margin-bottom:11px}
.slot-cal-note .ico{width:14px;height:14px}
.slot-cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:260px;overflow-y:auto;padding-right:2px}
.slot-day{border:1.5px solid var(--line2);border-radius:var(--rs);padding:9px 4px;text-align:center;cursor:pointer;background:var(--surface)}
.slot-day.full{background:var(--paper3);border-color:var(--line)}
.slot-day.sel{border-color:var(--gulf);background:var(--gulf);color:#fff}
.slot-day.sel-mid{border-color:var(--gulf-soft);background:var(--gulf-soft);color:#fff}
.slot-day.sel-mid .slot-day-status{color:rgba(255,255,255,.85)}
.slot-day-dow{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:inherit;opacity:.7}
.slot-day-num{font-family:"Fraunces",Georgia,serif;font-size:18px;font-weight:700;line-height:1.3;color:inherit}
.slot-day-mon{font-size:9.5px;font-weight:600;color:inherit;opacity:.7;margin-bottom:4px}
.slot-day-status{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--palm)}
.slot-day.full .slot-day-status{color:var(--signal)}
.slot-day.sel .slot-day-status{color:rgba(255,255,255,.85)}
.slot-cal-selected{margin-top:12px}
.mcal-wrap{max-width:280px;margin:0 auto}
.mcal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mcal-nav{background:none;border:none;padding:6px;cursor:pointer;color:var(--ink2);display:flex}
.mcal-prev .ico{transform:rotate(180deg)}
.mcal-label{font-family:"Fraunces",Georgia,serif;font-size:14px;font-weight:700;color:var(--ink);text-transform:capitalize}
.mcal-dow{display:grid;grid-template-columns:repeat(7,32px);gap:4px;margin-bottom:4px;justify-content:center}
.mcal-dow span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--ink3);text-align:center;display:block}
.mcal-grid{display:grid;grid-template-columns:repeat(7,32px);gap:4px;justify-content:center}
.mcal-day{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;background:var(--surface);border:1.5px solid transparent}
.mcal-day.empty{visibility:hidden;cursor:default;padding:0}
.mcal-day.today{border-color:var(--gulf-soft)}
.mcal-day.sel{background:var(--gulf);color:#fff;border-color:var(--gulf)}
.slot-cal-ok-msg,.slot-cal-full-msg{display:flex;align-items:flex-start;gap:8px;border-radius:var(--rs);padding:10px 12px;font-size:12px;font-weight:600;line-height:1.5}
.slot-cal-ok-msg{background:var(--palm-bg);color:var(--palm)}
.slot-cal-full-msg{background:var(--paper3);color:var(--ink2)}
.slot-cal-ok-msg .ico,.slot-cal-full-msg .ico{width:15px;height:15px;flex-shrink:0;margin-top:1px}
.of-card{position:relative;flex:0 0 72vw;max-width:320px;height:296px;scroll-snap-align:center;perspective:1400px;cursor:pointer;transition:transform .18s ease,opacity .18s ease;will-change:transform}
.of-today-ribbon{position:absolute;top:14px;right:-30px;transform:rotate(38deg);background:var(--wall);color:#1c1200;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 34px;z-index:2}
.of-flip-inner{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.of-card.flipped .of-flip-inner{transform:rotateY(180deg)}
.of-flip-front,.of-flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh1);overflow:hidden;display:flex;flex-direction:column}
.of-flip-back{transform:rotateY(180deg);padding:14px;overflow-y:auto}
.of-card.sold-out .of-flip-front,.of-card.sold-out .of-flip-back{opacity:.6}
.of-flip-hint{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.35);color:#fff;border-radius:99px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;z-index:2}
.of-flip-hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.of-hero-wrap{position:relative;height:172px;flex-shrink:0;overflow:hidden}
.of-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--paper2)}
.of-hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(180deg,rgba(18,32,29,0) 0%,rgba(18,32,29,.55) 45%,rgba(18,32,29,.95) 100%);color:#fff}
.of-hero-overlay .of-seller{color:rgba(255,255,255,.85)}
.of-hero-overlay .of-name{color:#fff}
.of-back-seller{font-size:10.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.of-back-title{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px}
.of-back-section-lbl{font-size:9.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 3px}
.of-back-text{font-size:12.5px;line-height:1.5;color:var(--ink2);white-space:pre-wrap}
.of-seller{font-size:10.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;display:flex;align-items:center;gap:5px}
.of-badge-premium{background:var(--wall);color:#fff;padding:1px 8px 1px 5px;border-radius:99px;font-size:9px;letter-spacing:.03em;display:inline-flex;align-items:center;gap:2px;vertical-align:middle}

/* ═══ Oferta del Día spotlight typography (Comercio screen) ═══ */
.of-spot-wrap{position:relative;text-align:center;padding:26px 18px 8px;overflow:visible}
.of-spot-glow{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:88%;max-width:360px;height:190px;
  background:radial-gradient(ellipse at center, rgba(250,180,0,.28) 0%, rgba(250,180,0,.09) 42%, transparent 72%);
  pointer-events:none;z-index:0;
  animation:ofSpotGlow 5.5s ease-in-out infinite;
}
@keyframes ofSpotGlow{
  0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.07)}
}
/* Slower on purpose: on a fast-loading screen the old .6s stagger was
   over before it was really seen. Each piece now takes 1.1s with wider
   gaps, so the full sequence reads as ~2.2s -- long enough to notice,
   still one pass, nothing loops except the glow and the wobble below. */
@keyframes ofSpotReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.of-spot-eyebrow,.of-spot-title,.of-spot-sub{position:relative;opacity:0;animation:ofSpotReveal 1.1s cubic-bezier(.16,.8,.3,1) forwards}
.of-spot-eyebrow{font-size:11.5px;font-weight:700;color:var(--wall-dk);letter-spacing:.02em;margin-bottom:6px;animation-delay:.15s}
.of-spot-title{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:32px;line-height:1.04;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;animation-delay:.55s}
.of-spot-sub{font-size:13px;color:var(--ink2);margin:0;line-height:1.5;animation-delay:1.05s}
/* The wobbling í -- isolated to just this glyph, starts once the title
   has settled (title finishes revealing at .55s+1.1s=1.65s), then keeps
   gently rocking, continuously, forever. */
@keyframes ofSpotIWobble{
  0%,100%{transform:rotate(0deg) translateY(0)}
  20%{transform:rotate(-7deg) translateY(-1px)}
  42%{transform:rotate(6deg) translateY(0)}
  64%{transform:rotate(-5deg) translateY(-1px)}
  84%{transform:rotate(3deg) translateY(0)}
}
.of-spot-i{display:inline-block;transform-origin:50% 88%;animation:ofSpotIWobble 2.6s ease-in-out 1.7s infinite}

@media (prefers-reduced-motion: reduce){
  .of-spot-glow{animation:none}
  .of-spot-eyebrow,.of-spot-title,.of-spot-sub{animation:none;opacity:1}
  .of-spot-i{animation:none}
  .of-card{transition:none}
}
.of-badge-premium .ico{width:10px;height:10px;stroke-width:2.5}
.of-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.of-price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.of-price-now{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:700;line-height:1;color:var(--ink)}
.of-price-was{font-size:13.5px;font-weight:600;color:var(--signal);text-decoration:line-through}
.of-pct{background:var(--signal-bg);color:var(--signal);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px}
.of-bottom{padding:12px 14px 14px}
.of-progress-track{height:6px;border-radius:99px;background:var(--paper3);overflow:hidden;margin-bottom:8px}
.of-progress-fill{height:100%;background:linear-gradient(90deg,var(--wall),var(--signal));border-radius:99px}
.of-claim-row{display:flex;align-items:center;justify-content:space-between}
.of-claimed-txt{font-size:11.5px;color:var(--ink3);font-weight:600}
.of-claim-btn{background:var(--night);color:#fff;border:none;border-radius:99px;padding:9px 18px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.of-soldout-ribbon{position:absolute;top:14px;right:-30px;transform:rotate(38deg);background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 34px;z-index:2}

/* ═══ INICIO (DASHBOARD) ═══ */
/* ═══ HEADER WEATHER BUTTON (advisory state applied here, see .tb-wx.has-alert below) ═══ */
.hero-alert .ico{width:16px;height:16px;flex-shrink:0}

/* ═══ INICIO — WELCOME HERO ═══
   A real, unobstructed photograph (no overlay, no filter — as bright as the
   file is) — the greeting sits on a translucent dark band anchored to the
   bottom of the photo; the rest of the photo is untouched. The time-of-day
   class (.wh-am/.wh-pm/.wh-noche, set by renderWelcomeHero() in js/app.js)
   only chooses the photo and its focal point. */
.welcome-hero{position:relative;flex-shrink:0;overflow:hidden}
.wh-photo{height:clamp(270px,46vh,400px);background-size:cover;background-position:var(--wh-pos,50% 50%);background-color:var(--paper3)}
/* ?v=2 is the asset version; bump when an image file changes (see CODEX-LOG 2026-10-10) */
.wh-am .wh-photo{background-image:url('/assets/images/MiCampeche-Hero.jpg?v=2');--wh-pos:32% 50%}
.wh-pm .wh-photo{background-image:url('/assets/images/MiCampeche-Hero-2.jpg?v=2');--wh-pos:50% 50%}
.wh-noche .wh-photo{background-image:url('/assets/images/MiCampeche-Hero-3.jpg?v=2');--wh-pos:60% 50%}
.wh-sheet{position:absolute;left:0;right:0;bottom:0;background:rgba(0,6,18,.56);padding:14px 20px 16px;color:#fbf8f2}
.wh-greet{font-size:12.5px;font-weight:700;color:var(--wall-soft);letter-spacing:.03em}
.wh-city{font-family:"Fraunces",Georgia,serif;font-size:clamp(22px,6.2vw,27px);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-top:2px;color:#fff}
.wh-tag{font-size:13px;color:rgba(251,248,242,.9);margin-top:4px;line-height:1.5}

/* Below-hero quick-nav row — 4 equal tiles, normal document flow (scrolls
   away with the page, never fixed/sticky). Icon badge modeled on
   .menu-item-ico's rounded-square weight, sized down a bit like
   .dash-hdr-ico since 4 need to fit one row comfortably. Each tile gets
   its own badge color via nth-child, for variety rather than 4 identical
   gray icons — colors pulled from the existing palette, no new tokens. */
#inicio-quicknav{display:flex;gap:6px;padding:18px 18px 4px}
.qn-tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;padding:4px 2px;border-radius:var(--r);cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}
.qn-tile:active{background:var(--paper2)}
.qn-tile-ico{width:46px;height:46px;border-radius:14px;background:var(--palm);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qn-tile-ico .ico{width:20px;height:20px}
.qn-tile-lbl{font-size:11.5px;font-weight:600;color:var(--ink);text-align:center}
.qn-tile:nth-child(2) .qn-tile-ico{background:var(--wall-dk)}
.qn-tile:nth-child(3) .qn-tile-ico{background:var(--gulf)}
.qn-tile:nth-child(4) .qn-tile-ico{background:var(--signal)}

.dash-section{padding:20px 18px 4px}
.dash-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dash-hdr-lft{display:flex;align-items:center;gap:9px}
.dash-hdr-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-hdr-ico .ico{width:16px;height:16px}
.dash-hdr h3{font-size:14.5px;font-weight:700;color:var(--ink)}
.dash-more{font-size:12.5px;font-weight:700;color:var(--gulf);background:none;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:3px}
.dash-more .ico{width:13px;height:13px}

.dash-card{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh1);border:1px solid var(--line);margin-bottom:9px;cursor:pointer;overflow:hidden}
.dash-card:active{box-shadow:var(--sh1);transform:translateY(1px)}

.dc-news{display:flex;flex-direction:column;gap:0;padding:0}
.dc-news-thumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:0;flex-shrink:0;background-size:cover;background-position:center;background-color:var(--paper2)}
.dc-news-body{min-width:0;flex:1;padding:10px 12px 12px}
.dc-news-src{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gulf);margin-bottom:3px}
.dc-news-title{font-size:13.5px;font-weight:700;line-height:1.32;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.dc-evt{display:flex;align-items:center;gap:12px;padding:12px 14px}
.dc-evt-thumb{width:44px;height:44px;border-radius:11px;background-size:cover;background-position:center;background-color:var(--paper2);flex-shrink:0}
.dc-evt-name{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.dc-evt-meta{font-size:11.5px;color:var(--ink3);margin-top:2px;display:flex;align-items:center;gap:5px}
.dc-evt-meta .ico{width:12px;height:12px;flex-shrink:0}

.dc-of-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--paper2)}
.dc-of-hero,.dc-ev-hero{position:relative;height:176px}
.dc-ev-hero{background:linear-gradient(160deg,var(--wall),var(--wall-dk))} /* fallback when an event has no image */
.dc-ev-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--paper2)}
.dc-of-hero-overlay,.dc-ev-hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:12px 12px 12px;background:linear-gradient(180deg,rgba(18,32,29,0) 0%,rgba(18,32,29,.55) 40%,rgba(18,32,29,.92) 100%);color:#fff}
.dc-of-hero-name,.dc-ev-hero-name{font-family:"Fraunces",Georgia,serif;font-size:15px;font-weight:600;line-height:1.22;text-shadow:0 2px 8px rgba(0,0,0,.4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-of-hero-price{font-size:14px;font-weight:700;margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.dc-of-hero-price span{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.75);text-decoration:line-through;margin-top:1px}
.dc-of-hero-pct{display:inline-block;font-style:normal;background:var(--signal);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:middle;text-shadow:none}
.dc-ev-hero-meta{font-size:11px;margin-top:3px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.dc-ev-hero-date{position:absolute;top:10px;right:10px;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:38px;padding:5px 7px;border-radius:10px;background:rgba(255,255,255,.94);color:var(--ink);line-height:1}
.dc-ev-hero-date b{font-family:"Fraunces",Georgia,serif;font-size:17px;font-weight:700}
.dc-ev-hero-date i{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* Row 1 (Oferta + Evento) and the paired Noticias row both use this same
   grid — gap matches .tienda-grid's existing card-gap convention. No
   padding here: #dash-row1 (placed directly in dash-body, not wrapped by
   dashSection()) carries its own; the Noticias pair is nested INSIDE a
   dashSection()'s own .dash-section padding and would double up otherwise. */
.dash-row-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.dash-row-pair.solo{grid-template-columns:1fr}
#dash-row1{padding:20px 18px 4px}
.dash-col{min-width:0}
.dash-col-hdr{display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-bottom:8px;padding-left:2px}
.dash-col-hdr h3{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25;white-space:nowrap}
.dash-col-hdr .dash-more{padding:0;font-size:12px;line-height:1.3}
.dc-row-kicker{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.45);color:#fff;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 8px;border-radius:99px;z-index:1;backdrop-filter:blur(2px)}

/* Special Slot — a single full-width admin-managed card, modeled on
   .dc-of-hero's photo-with-text-overlay treatment (the closest existing
   pattern) but full width, and with a solid dark fallback background so
   it still reads as a deliberate banner on the rare row with no image. */
.dc-special{position:relative;min-height:180px;background:var(--night)}
.dc-special-img{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--paper2)}
.dc-special-body{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(180deg,rgba(18,32,29,0) 0%,rgba(18,32,29,.55) 45%,rgba(18,32,29,.92) 100%);color:#fff}
.dc-special-title{font-family:"Fraunces",Georgia,serif;font-size:20px;font-weight:600;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.dc-special-sub{font-size:13px;margin-top:4px;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ═══ NEWS CARDS ═══ */
.news-list{padding:6px 18px 24px}
.news-card{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer}
.news-thumb{width:92px;height:92px;border-radius:var(--rs);flex-shrink:0;background-size:cover;background-position:center;background-color:var(--paper2);box-shadow:var(--sh1)}
.news-body{flex:1;min-width:0;display:flex;flex-direction:column}
.news-src{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gulf);margin-bottom:3px}
.news-head{font-size:15px;font-weight:700;line-height:1.32;color:var(--ink);margin-bottom:5px}
.news-desc{font-size:12.5px;color:var(--ink2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.news-meta{font-size:11px;color:var(--ink3);margin-top:6px}

/* News detail */
.detail-hero{width:100%;height:230px;background-size:cover;background-position:center;background-color:var(--paper2);flex-shrink:0}
/* Event posters: the whole image, never cropped. Inset + rounded so it
   reads as a framed poster — many feed posters have artwork bleeding off
   their own edges, and full-bleed made that look like the app cut them. */
.evt-hero-img{display:block;width:calc(100% - 36px);height:auto;margin:16px 18px 2px;border-radius:var(--rs);background:var(--paper2)}
.detail-body{padding:20px 18px 40px}
.detail-src{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gulf);margin-bottom:8px}
.detail-head{font-family:"Fraunces",Georgia,serif;font-size:25px;font-weight:600;line-height:1.28;margin-bottom:10px}
.detail-meta{font-size:12px;color:var(--ink3);margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.detail-desc{font-size:14.5px;line-height:1.7;color:var(--ink);margin-bottom:22px;white-space:pre-wrap}
.detail-desc a{color:var(--gulf);word-break:break-word}
.detail-link{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;text-decoration:none;color:var(--ink);box-shadow:var(--sh1)}
.detail-link-lbl{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.detail-link-name{font-size:14px;font-weight:700}
.detail-arr{width:18px;height:18px;color:var(--gulf);flex-shrink:0}
.detail-link+.detail-link{margin-top:10px}
.detail-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.detail-row{display:flex;justify-content:space-between;gap:14px;background:var(--surface);padding:11px 14px;font-size:13px}
.detail-row span{color:var(--ink3);flex-shrink:0}
.detail-row b{text-align:right}

/* ═══ FILTER CHIPS ═══ */
.chiprow{display:flex;align-items:center;gap:8px;padding:11px 18px 16px;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;background:var(--paper2);position:relative;z-index:6}
.chiprow::-webkit-scrollbar{display:none}
.filter-row{display:flex;gap:8px;margin-bottom:10px;padding:0 18px}
.filter-select-wrap{position:relative;flex:0 1 auto;min-width:0}
.filter-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;max-width:150px;background:var(--surface);border:1px solid var(--line2);border-radius:99px;padding:7px 26px 7px 14px;font-size:12.5px;font-weight:600;color:var(--ink2);font-family:inherit;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.filter-select-chevron{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--ink3);pointer-events:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.filter-colonia{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line2);border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink2);font-family:inherit}
.filter-colonia::placeholder{color:var(--ink3);font-weight:600}
.filter-search-row{position:relative;padding:0 18px 14px}
.filter-search{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:99px;padding:9px 14px 9px 36px;font-size:13px;font-family:inherit;color:var(--ink)}
.filter-search-ico{position:absolute;left:30px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink3);pointer-events:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Eventos stacks a date-filter row above the category row — tighten the
   space between them so they read as one filter zone. */
#evt-date-chips{padding-bottom:3px}
#evt-chips{padding-top:6px}
.chip{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line2);border-radius:99px;padding:7px 15px;font-size:12.5px;line-height:1.3;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap;font-family:inherit;position:relative;z-index:6}
.chip.on{background:var(--night);border-color:var(--night);color:var(--paper)}

/* ═══ EVENTOS (full page) ═══
   Cards match .prod-card's visual language (border/radius/shadow); each
   date's events — and the Destacados set — sit in a horizontal-scroll
   row (.evtg-row, same mechanics as Ofertas' .of-list): exactly 1 event
   goes full width (.solo), 2+ show 2 comfortably with a peeking hint of
   a 3rd to make "there's more" obvious. See evtRowHtml()/eventCardHtml()
   in app.js. */
.evt-list{display:flex;flex-direction:column;padding-bottom:8px}
.evt-group-hdr{font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em;padding:10px 18px 8px}
.evtg-row{display:flex;width:100%;align-items:stretch;gap:13px;overflow-x:auto;overflow-y:visible;padding:0 18px 24px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
.evtg-row::-webkit-scrollbar{display:none}
.evtg-row .evtg-card{flex:0 0 46%;scroll-snap-align:start;min-width:0}
.evtg-row.solo .evtg-card{flex:0 0 100%}
.evtg-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:pointer;box-shadow:var(--sh1)}
.evtg-card:active{transform:translateY(1px)}
.evtg-img{position:relative;width:100%;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--paper2)}
.evtg-badge{position:absolute;top:10px;left:10px;z-index:1;background:var(--wall-dk);color:#fff;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 9px;border-radius:99px}
.evtg-date{position:absolute;top:10px;right:10px;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:34px;padding:4px 6px;border-radius:9px;background:rgba(255,255,255,.94);color:var(--ink);line-height:1}
.evtg-date b{font-family:"Fraunces",Georgia,serif;font-size:15px;font-weight:700}
.evtg-date i{font-style:normal;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.evtg-body{padding:11px 12px 13px}
.evtg-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--wall-dk);margin-bottom:3px}
.evtg-name{font-size:13px;font-weight:700;color:var(--ink);line-height:1.32;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evtg-meta{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evtg-price{font-size:12.5px;font-weight:700;color:var(--palm);margin-top:4px}

/* ═══ TIENDA (Productos, inside Anuncios) ═══ */
.tienda-grid{padding:0 18px 24px;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.destacados-hdr{padding:8px 18px 8px;font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em}
#inicio-destacados-wrap{padding:20px 0 4px}
#inicio-destacados-wrap .dash-col-hdr{padding-left:18px}
.example-pill{display:inline-block;font-size:9px;font-weight:700;color:var(--ink3);background:var(--paper2);border:1px solid var(--line2);border-radius:99px;padding:2px 7px;text-transform:uppercase;letter-spacing:.03em;margin-left:6px;vertical-align:middle}
.prod-card{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:pointer;box-shadow:var(--sh1)}
.prod-img{width:100%;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--paper2)}
.prod-body{padding:11px 12px 13px}
.prod-name{font-size:13px;font-weight:700;color:var(--ink);line-height:1.32;margin-bottom:4px}
.prod-price{font-size:14.5px;font-weight:800;color:var(--palm)}
.prod-seller{font-size:10.5px;color:var(--ink3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-badge{position:absolute;top:14px;left:-32px;width:130px;padding:4px 0;background:var(--night);color:#fff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.05em;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.28);z-index:2;pointer-events:none}
.prod-badge-discount{position:absolute;top:14px;left:-32px;width:130px;padding:4px 0;background:var(--signal);color:#fff;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.05em;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.28);z-index:2;pointer-events:none}
.prod-badge-example{position:absolute;margin:9px;font-size:9px;font-weight:700;background:var(--ink3);color:#fff;padding:4px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em;z-index:2}
.prod-price-was{font-size:12px;color:var(--ink3);text-decoration:line-through;margin-right:6px}
.prod-wrap{position:relative}
.prod-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.prod-tag{font-size:9.5px;font-weight:700;color:var(--ink2);background:var(--paper2);border:1px solid var(--line2);border-radius:99px;padding:3px 8px;line-height:1.3}
.pv-hero{width:100%;height:200px;background-size:cover;background-position:center;background-color:var(--paper2);border-radius:var(--rs)}
.pv-rows{display:flex;flex-direction:column;gap:8px;background:var(--paper3);border-radius:var(--rs);padding:12px 14px}
.pv-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink2)}
.pv-row b{color:var(--ink);text-align:right}

/* ═══ PERDIDOS / MASCOTAS (full page — this card shape is now shared by Vecinos ▸ Mascotas) ═══ */
.pf-list{padding:0 18px 40px;display:flex;flex-direction:column;gap:11px}
.pf-card{display:flex;gap:13px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:12px;box-shadow:var(--sh1)}
.pf-img{position:relative;width:68px;height:68px;border-radius:var(--rs);background-size:cover;background-position:center;background-color:var(--paper2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.pf-img .ico{width:22px;height:22px}
.pf-body{flex:1;min-width:0}
.pf-tag{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:99px;margin-bottom:6px}
.pf-tag.perdido{background:var(--signal-bg);color:var(--signal)}
.pf-tag.encontrado{background:var(--palm-bg);color:var(--palm)}
.pf-tag.adopcion{background:var(--gulf-bg,var(--paper2));color:var(--gulf)}
.pf-tag.campana{background:var(--wall-bg,var(--paper2));color:var(--wall-dk)}
.ms-count{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:99px}
.pf-name{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.pf-desc{font-size:12px;color:var(--ink2);line-height:1.4}
.pf-loc{font-size:11px;color:var(--ink3);margin-top:6px;display:flex;align-items:center;gap:5px}
.pf-loc .ico{width:12px;height:12px}

/* ═══ ALERTAS (sub-view inside Reportar) ═══ */
.alert-list{padding:0 18px 12px;display:flex;flex-direction:column;gap:11px}
.alert-card{display:flex;gap:12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:13px 14px;border-left:3px solid var(--signal);box-shadow:var(--sh1);cursor:pointer}
.alert-card.info{border-left-color:var(--gulf)}
.alert-card.resolved{border-left-color:var(--palm);opacity:.72}
.alert-thumb{width:56px;height:56px;border-radius:var(--rs);flex-shrink:0;background-size:cover;background-position:center;background-color:var(--paper2)}
.alert-body{flex:1;min-width:0}
.alert-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.alert-type{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--signal)}
.alert-card.info .alert-type{color:var(--gulf)}
.alert-card.resolved .alert-type{color:var(--palm)}
.alert-time{font-size:11px;color:var(--ink3)}
.alert-headline{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:4px}
.alert-zone{font-size:11.5px;color:var(--ink3);margin-bottom:6px}
.alert-preview{font-size:12.5px;color:var(--ink2)}
/* One line each on the card; the detail modal (which reuses .alert-headline)
   opts back into wrapping via an inline white-space:normal. */
.alert-card .alert-headline,.alert-card .alert-zone,.alert-card .alert-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-desc{font-size:13px;color:var(--ink2);line-height:1.5;white-space:pre-wrap}

/* ═══ SERVICIOS ÚTILES (CFE / agua shortcuts) ═══ */
.su-list{padding:0 18px 24px;display:flex;flex-direction:column;gap:9px}
.su-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;text-decoration:none;box-shadow:var(--sh1)}
.su-ico{width:38px;height:38px;border-radius:11px;background:var(--gulf);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.su-ico .ico{width:19px;height:19px}
.su-body{flex:1;min-width:0}
.su-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.su-sub{font-size:11.5px;color:var(--ink3);margin-top:1px}
.su-ext{width:15px;height:15px;color:var(--ink3);flex-shrink:0}
.su-note{padding:0 18px 4px;font-size:11.5px;color:var(--ink3);line-height:1.5}

/* ═══ REPORTAR (Reportes sub-view) ═══ */
.rep-list{padding:0 18px 24px;display:flex;flex-direction:column;gap:11px}
.rep-card{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh1);overflow:hidden}
.rep-top{display:flex;gap:12px;padding:13px 14px 0}
.rep-img{width:56px;height:56px;border-radius:var(--rs);background-size:cover;background-position:center;background-color:var(--paper2);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.rep-img .ico{width:20px;height:20px}
.rep-body{flex:1;min-width:0}
.rep-cat{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:99px;background:var(--paper3);color:var(--ink2);margin-bottom:5px}
.rep-title{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:3px}
.rep-loc{font-size:11.5px;color:var(--ink3)}
.rep-desc{font-size:12.5px;color:var(--ink2);line-height:1.5;padding:10px 14px 0}
.rep-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;padding:11px 14px 13px;margin-top:8px}
.rep-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.rep-confirm-btn{display:flex;align-items:center;gap:6px;background:var(--paper2);border:1px solid var(--line2);border-radius:99px;padding:6px 13px;font-size:12px;font-weight:700;color:var(--ink2);cursor:pointer;font-family:inherit}
.rep-confirm-btn .ico{width:14px;height:14px}
.rep-confirm-btn.on{background:var(--palm-bg);border-color:var(--palm);color:var(--palm)}
/* Deliberately quieter than the confirm pill (outline, not filled) so
   "the problem is gone" doesn't read as another way to confirm it. Its
   pressed state is a solid dark fill — nothing like the confirm green. */
.rep-resolve-btn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line2);border-radius:99px;padding:6px 13px;font-size:12px;font-weight:700;color:var(--ink3);cursor:pointer;font-family:inherit}
.rep-resolve-btn .ico{width:14px;height:14px}
.rep-resolve-btn.on{background:var(--night);border-color:var(--night);color:var(--paper)}
.rep-time{font-size:11px;color:var(--ink3)}
.rep-resolved-badge{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--palm)}

/* ═══ VECINOS — Avisos (community noticeboard sub-view) ═══ */
.av-list{padding:0 18px 24px;display:flex;flex-direction:column;gap:11px}
.av-card{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh1);padding:14px}
.av-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.av-cat{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:99px;background:var(--gulf);color:#fff}
.av-time{font-size:11px;color:var(--ink3)}
.av-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:6px}
.av-main{display:flex;gap:10px;align-items:flex-start}
.av-main-body{flex:1;min-width:0}
.av-img{width:56px;height:56px;border-radius:10px;background-size:cover;background-position:center;background-color:var(--paper2);flex-shrink:0}
.av-desc{font-size:12.5px;color:var(--ink2);line-height:1.55;margin-bottom:11px}
.av-foot{display:flex;align-items:center;justify-content:space-between;padding-top:11px;border-top:1px solid var(--line)}
.av-author{font-size:11.5px;color:var(--ink3);font-weight:600}
.av-contact-btn{display:inline-flex;align-items:center;gap:6px;background:var(--night);color:#fff;border:none;border-radius:99px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;flex-shrink:0}
.av-contact-btn .ico{width:13px;height:13px}
/* Row of WhatsApp / call / SMS pills on an Avisos / Empleos / Perdidos card
   (contactCtaButtons). Wraps on narrow screens. */
.contact-cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}

/* ═══ EMPLEOS (sub-view inside Anuncios) ═══ */
.job-list{padding:0 18px 24px;display:flex;flex-direction:column;gap:11px}
.job-card{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:15px;box-shadow:var(--sh1)}
.job-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.job-title{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.job-pay{font-size:12.5px;font-weight:700;color:var(--palm);white-space:nowrap;flex-shrink:0}
.job-co{font-size:12px;color:var(--ink3);margin-bottom:9px}
.job-tags{display:flex;gap:6px;flex-wrap:wrap}
.job-tag{font-size:10.5px;font-weight:600;background:var(--paper2);color:var(--ink2);padding:4px 10px;border-radius:99px}

/* ═══ CÓMO FUNCIONA (info page) ═══ */
.info-body{padding:6px 18px 40px;display:flex;flex-direction:column;gap:16px}
.legal-body{padding:6px 18px 40px}
.legal-crosslink{display:inline-block;font-size:12.5px;color:var(--gulf);text-decoration:underline;margin-bottom:16px;cursor:pointer}
.legal-h{font-family:"Fraunces",Georgia,serif;font-size:15.5px;font-weight:700;color:var(--ink);margin:20px 0 6px}
.legal-h:first-of-type{margin-top:0}
.legal-p{font-size:14px;line-height:1.7;color:var(--ink2);margin-bottom:10px}
.legal-list{margin:0 0 10px 20px;padding:0}
.legal-list li{font-size:14px;line-height:1.6;color:var(--ink2);margin-bottom:5px}
.info-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh1)}
.info-block-hdr{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.info-block-ico{width:34px;height:34px;border-radius:10px;background:var(--gulf);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-block-ico .ico{width:17px;height:17px}
.info-block h3{font-size:14px;font-weight:700;color:var(--ink)}
.info-block p{font-size:13px;color:var(--ink2);line-height:1.6}

/* ═══ HAMBURGER MENU DRAWER ═══ */
.menu-bg{position:fixed;inset:0;background:rgba(18,32,29,.55);z-index:240;display:none;backdrop-filter:blur(2px)}
.menu-bg.on{display:block}
.menu-drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:var(--paper);box-shadow:8px 0 30px rgba(0,0,0,.25);transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column}
.menu-bg.on .menu-drawer{transform:translateX(0)}
.menu-hdr{background:linear-gradient(165deg,var(--night3),var(--night));padding:calc(env(safe-area-inset-top) + 18px) 18px 18px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.menu-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer}
.menu-close .ico{width:14px;height:14px}
.menu-body{padding:10px 12px;overflow-y:auto}
.menu-item{width:100%;display:flex;align-items:center;gap:13px;background:none;border:none;padding:13px 10px;border-radius:var(--r);cursor:pointer;font-family:inherit;text-align:left}
.menu-item:active{background:var(--paper2)}
.menu-item-ico{width:38px;height:38px;border-radius:11px;background:var(--gulf);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.menu-item-ico .ico{width:18px;height:18px}
.menu-item-txt{flex:1;min-width:0}
.menu-item-lbl{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.menu-item-sub{display:block;font-size:11.5px;color:var(--ink3);margin-top:1px}
.menu-item-arr{width:15px;height:15px;color:var(--ink3);flex-shrink:0;transition:transform .25s ease}
.menu-item-arr.open{transform:rotate(90deg)}
.menu-badge{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--signal);color:#fff;font-size:11.5px;font-weight:700;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.menu-badge.on{display:flex}
.menu-pill{display:inline-block;margin-left:6px;background:var(--signal);color:#fff;font-size:11px;font-weight:700;line-height:1;border-radius:99px;padding:3px 7px;vertical-align:1px}
/* Accordion: collapsed to 0 height by default, expands on .open — same
   .25s ease timing the drawer's own slide-in already uses. max-height
   (not height) since the content's real height varies and isn't known
   up front; the cap just needs to comfortably clear the tallest submenu
   (3 child rows). */
.menu-submenu{max-height:0;overflow:hidden;transition:max-height .25s ease}
.menu-submenu.open{max-height:220px}
.menu-item-child{padding-left:58px;margin-bottom:2px}
.menu-item-child .menu-item-lbl{font-size:13px;font-weight:600;color:var(--ink2)}
.menu-count{display:flex;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--paper2);color:var(--ink3);font-size:11.5px;font-weight:700;align-items:center;justify-content:center;line-height:1;flex-shrink:0;border:1.5px solid var(--line2)}

/* ═══ WEATHER LIGHTBOX ═══ */
.wx-lb-bg{position:fixed;inset:0;background:rgba(18,32,29,.6);z-index:250;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.wx-lb-bg.on{display:flex}
.wx-lb{background:var(--surface);width:100%;max-width:360px;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.wx-lb-hero{background:linear-gradient(160deg,var(--gulf-soft) 0%,var(--gulf) 55%,var(--gulf-dk) 100%);color:#fff;padding:22px 22px 20px;position:relative}
.wx-lb-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.wx-lb-close .ico{width:15px;height:15px}
.wx-lb-city{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wall-soft);margin-bottom:2px}
.wx-lb-when{font-size:12px;color:rgba(255,255,255,.72);margin-bottom:7px}
.wx-lb-cond{font-size:13px;color:rgba(255,255,255,.8)}
.wx-lb-temp-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.wx-lb-temp{font-family:"Fraunces",Georgia,serif;font-size:52px;font-weight:600;line-height:1}
.wx-lb-ico{width:46px;height:46px;color:var(--wall-soft)}
.wx-lb-range{font-size:12.5px;color:rgba(255,255,255,.75);margin-top:4px}
.wx-lb-alert{margin-top:14px;background:linear-gradient(135deg,#e2492f,#c2371f);border:1px solid rgba(0,0,0,.08);border-radius:11px;padding:11px 13px;font-size:12.5px;font-weight:700;color:#fff;display:flex;gap:9px;align-items:center;box-shadow:0 3px 10px rgba(184,64,42,.35)}
.wx-lb-alert .ico{width:15px;height:15px;flex-shrink:0;color:#fff}
.wx-lb-retry{margin-top:14px;background:rgba(255,255,255,.16);border:none;color:#fff;font-family:inherit;font-size:13px;font-weight:700;padding:9px 20px;border-radius:99px;cursor:pointer}
.wx-lb-hours{display:flex;gap:2px;overflow-x:auto;padding:14px 10px;background:var(--surface);border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.wx-hr{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:48px}
.wx-hr-t{font-size:11px;font-weight:700;color:var(--ink3)}
.wx-hr-ico{width:20px;height:20px;color:var(--gulf)}
.wx-hr-pop{font-size:10px;font-weight:700;color:var(--gulf-soft);min-height:13px;line-height:1}
.wx-hr-pop.none{visibility:hidden}
.wx-hr-temp{font-size:13.5px;font-weight:800;color:var(--ink)}
.wx-lb-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line)}
.wx-lb-stat{background:var(--surface);padding:14px 10px;text-align:center}
.wx-lb-stat-val{font-size:16px;font-weight:700;color:var(--ink)}
.wx-lb-stat-lbl{font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.wx-lb-foot{padding:16px 20px 20px}
.wx-lb-source{font-size:11px;color:var(--ink3);text-align:center}
.wx-lb-source a{color:var(--ink2);font-weight:600}

/* ═══ PHOTO UPLOAD (real file picker + preview) ═══ */
.photo-upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--paper2);border:1.5px dashed var(--line2);border-radius:var(--rs);padding:13px;font-size:13.5px;font-weight:700;color:var(--gulf);cursor:pointer;font-family:inherit}
.photo-upload-btn .ico{width:16px;height:16px}
.photo-upload-btn-sm{display:flex;align-items:center;justify-content:center;width:72px;height:72px;flex-shrink:0;background:var(--paper2);border:1.5px dashed var(--line2);border-radius:var(--rs);cursor:pointer;color:var(--gulf)}
.photo-upload-btn-sm .ico{width:20px;height:20px}
.pv-carousel{position:relative;border-radius:var(--rs);overflow:hidden;background:var(--paper2)}
.pv-car-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.pv-car-track::-webkit-scrollbar{display:none}
.pv-car-slide{flex:0 0 100%;scroll-snap-align:center;background:var(--paper2)}
.pv-car-slide img{display:block;width:100%;aspect-ratio:1/1;max-height:56vh;object-fit:contain;-webkit-user-drag:none;user-select:none}
.pv-car-count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;pointer-events:none}
.pv-car-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;padding:5px 9px;border-radius:99px;background:rgba(0,0,0,.35)}
.pv-car-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.pv-car-dot.on{background:#fff;transform:scale(1.25)}
.pv-car-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--sh1);align-items:center;justify-content:center;cursor:pointer;padding:0}
.pv-car-nav svg{width:16px;height:16px}
.pv-car-nav.prev{left:8px}
.pv-car-nav.prev svg{transform:scaleX(-1)}
.pv-car-nav.next{right:8px}
@media (hover:hover) and (pointer:fine){.pv-car-nav{display:flex}}

/* ═══ POST / SUBMISSION MODAL ═══ */
.modal-bg{position:fixed;inset:0;background:rgba(18,32,29,.55);z-index:200;display:none;align-items:flex-end;backdrop-filter:blur(2px)}
.modal-bg.on{display:flex}
.modal{background:var(--paper);width:100%;max-width:430px;margin:0 auto;border-radius:24px 24px 0 0;max-height:88vh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;background:var(--paper)}
.modal-title{font-family:"Fraunces",Georgia,serif;font-size:18.5px;font-weight:600}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--paper2);border:none;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close .ico{width:15px;height:15px}
.modal-body{padding:17px 18px 30px;display:flex;flex-direction:column;gap:14px}
.fl{font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;display:block}
.fi,.fs,.ft{font-family:inherit;font-size:14.5px;width:100%;background:var(--surface);border:1.5px solid var(--line2);border-radius:var(--rs);padding:12px 14px;color:var(--ink)}
.fi:focus,.fs:focus,.ft:focus{outline:none;border-color:var(--gulf)}
.ft{resize:vertical;min-height:80px}
.fi-money-wrap{position:relative}
.fi-money-wrap .fi-money-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:14.5px;font-weight:600;pointer-events:none}
.fi-money-wrap .fi-money{padding-left:26px}
.seg{display:flex;background:var(--paper3);border-radius:99px;padding:3px;gap:2px}
.seg-btn{flex:1;text-align:center;padding:9px;border-radius:99px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--ink2)}
.seg-btn.on{background:var(--night);color:var(--paper)}
.seg-btn-off{opacity:.32;pointer-events:none}
.fmulti{display:flex;flex-wrap:wrap;gap:8px}
.mchip{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--surface);border:1.5px solid var(--line2);border-radius:99px;padding:9px 15px;cursor:pointer}
.mchip.on{background:var(--night);border-color:var(--night);color:var(--paper)}
.field-note{font-size:11.5px;color:var(--ink3);line-height:1.5;margin-top:6px}
.field-note.ok{color:var(--palm);font-weight:700}
.field-note.warn{color:#8a5a00;font-weight:600}
[data-theme="dark"] .field-note.ok{color:#7fbf9a}
[data-theme="dark"] .field-note.warn{color:#e0b04a}
.field-note.callout{font-size:13px;color:var(--ink);line-height:1.5;padding:12px 14px;margin:6px 0 14px;background:var(--paper2);border-radius:var(--rs);border-left:4px solid var(--gulf)}
[data-theme="dark"] .field-note.callout{border-left-color:var(--gulf-soft)}
.submit-note{background:var(--paper3);border-radius:var(--rs);padding:12px 14px;font-size:12px;color:var(--ink2);line-height:1.55;display:flex;gap:9px}
.submit-note .ico{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--gulf)}
.submit-btn{background:var(--night);color:var(--paper);border:none;border-radius:var(--rs);padding:15px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:4px;box-shadow:var(--sh2)}

/* ═══ TOAST ═══ */
/* Desktop: the app is the 430px column centered on the dark body backdrop.
   Fixed overlays that anchor to a window edge are re-anchored to the column. */
@media (min-width:431px){
  .fab{right:calc(18px + (100vw - 430px)/2)}
  .menu-drawer{left:calc((100vw - 430px)/2);transform:translateX(-24px);opacity:0;transition:transform .25s ease,opacity .25s ease}
  .menu-bg.on .menu-drawer{transform:none;opacity:1}
}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--night);color:var(--paper);padding:13px 22px;border-radius:99px;font-size:13px;font-weight:600;z-index:300;display:none;box-shadow:var(--sh3);white-space:nowrap}
.toast.on{display:block;animation:toastIn .25s ease}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

.back-bar{padding:15px 18px;display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--paper2);position:relative;z-index:6}
.back-btn{background:none;border:none;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit}
.back-btn .ico{width:16px;height:16px}