/* MatchWork UI – Visual Hierarchy Pass (v20+)
   Goal: clearer hierarchy, spacing, and “Airbnb-ish” polish across the app.
   This file is additive/safe: it overrides inconsistent inline tweaks and
   provides reusable classes for list cards and headings.
*/

:root{
  --mw-radius-sm: 12px;
  --mw-radius-md: 16px;
  --mw-radius-lg: 20px;
  --mw-radius-xl: 24px;

  --mw-space-1: 8px;
  --mw-space-2: 12px;
  --mw-space-3: 16px;
  --mw-space-4: 20px;
  --mw-space-5: 28px;

  --mw-font-xxs: 12px;
  --mw-font-xs: 13px;
  --mw-font-sm: 14px;
  --mw-font-md: 16px;
  --mw-font-lg: 18px;
  --mw-font-xl: 22px;
  --mw-font-2xl: 28px;
  --mw-font-3xl: 34px;
}

/* Base layout */
body{
  /* Use more of the screen like the landing (adult-friendly, spacious) */
  padding: 22px 24px !important;
  line-height: 1.45;
}

.wrap{
  max-width: 1440px !important;
}

/* Sticky topbar = stronger hierarchy */
.topbar{
  position: sticky;
  top: 10px;
  z-index: 50;
  padding: 10px 12px;
  border-radius: var(--mw-radius-lg);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.brand{
  font-size: var(--mw-font-sm);
  font-weight: 850;
  letter-spacing: -0.2px;
}

.pill{
  font-size: var(--mw-font-xxs);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
}

/* Cards */
.card{
  border-radius: var(--mw-radius-lg) !important;
  padding: 20px !important;
}
.card.soft{
  border-radius: var(--mw-radius-lg) !important;
}

/* Typography hierarchy */
h1, h2, h3{
  letter-spacing: -0.3px;
}

h2{
  font-size: var(--mw-font-2xl) !important;
  font-weight: 900;
  margin: 0 0 6px !important;
  line-height: 1.15;
}

.mwSectionTitle{
  font-size: var(--mw-font-md) !important;
  font-weight: 850 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px;
}

.mwH3{
  font-size: var(--mw-font-lg) !important;
  font-weight: 850 !important;
  margin: 0 0 10px !important;
}

.muted{
  font-size: var(--mw-font-sm);
}

/* Spacer utility used throughout the page */
.sp{ height: 14px; }
.sp.lg{ height: 20px; }
.sp.xl{ height: 28px; }

/* Inputs & labels */
label.label,
label{
  font-size: var(--mw-font-xxs);
  font-weight: 700;
}

input,
.input,
textarea.input{
  min-height: 44px;
  font-size: var(--mw-font-sm);
  border-radius: var(--mw-radius-sm) !important;
}

textarea.input{
  min-height: 120px;
  resize: vertical;
}

/* Buttons */
button,
.btn{
  min-height: 44px;
  padding: 10px 14px;
  font-weight: 800;
  border-radius: var(--mw-radius-sm) !important;
}

.btn.primary,
button.primary{
  box-shadow: 0 12px 25px rgba(0,0,0,.12);
}

/* Dashboard spacing */
.dashShell{
  gap: 16px !important;
}

.sideMenu{
  border-radius: var(--mw-radius-xl) !important;
}

.menuBtn{
  border-radius: var(--mw-radius-md) !important;
  font-weight: 850;
}

/* Consistent two-column card grids */
.mwCardsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 720px){
  .mwCardsGrid{ grid-template-columns: 1fr; }
}

/* Listing cards (Discover / Saved) */
.mwListingCard{
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
}

.mwListingImage{
  height: 190px;
  background: #e5e7eb;
  background-size: cover;
  background-position: center;
}

.mwListingBody{
  padding: 14px 14px 16px;
}

.mwListingTitle{
  font-weight: 900;
  font-size: var(--mw-font-md);
  line-height: 1.2;
}

.mwListingMeta{
  margin-top: 6px;
  font-size: var(--mw-font-xs);
}

.mwClamp2{
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mwCardActions,
.mwListingActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.mwSavedItem{ position: relative; }
.mwSavedActions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 2px 0;
}

.mwCardFooterActions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 0;
}

/* Modal polish */
.mwModal{
  border-radius: var(--mw-radius-xl) !important;
  max-height: 86vh;
}

.mwModalBody{
  overflow: auto;
  max-height: calc(86vh - 140px);
}

.mwModalHeader b{ font-weight: 900; }

/* Small screens: keep density comfortable */
@media (max-width: 520px){
  body{ padding: 18px 12px !important; }
  .card{ padding: 16px !important; }
  h2{ font-size: 24px !important; }
  .mwListingImage{ height: 170px; }
}

/* Moved from app/index.html <style> */
:root{
      --bg1:#0b1220;
      --bg2:#0a1020;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.08);
      --border: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --primary:#2f7cff;
      --ok: rgba(0,255,120,.12);
      --err: rgba(255,0,0,.12);
    }

    * { box-sizing: border-box; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: radial-gradient(1000px 600px at 20% 10%, rgba(47,124,255,.20), transparent 60%),
                  radial-gradient(900px 600px at 80% 30%, rgba(0,255,120,.10), transparent 60%),
                  linear-gradient(180deg, var(--bg1), var(--bg2));
      min-height: 100vh;
      padding: 22px 14px;
    }

    .wrap { max-width: 980px; margin: 0 auto; }
    .topbar {
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; margin-bottom: 16px;
    }
    .brand { font-weight: 750; letter-spacing:.3px; }
    .muted { opacity: .78; font-size: 13px; color: var(--muted); }

    .card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 18px;
      backdrop-filter: blur(8px);
      box-shadow: 0 10px 40px rgba(0,0,0,.18);
    }
    .card.soft { background: var(--card2); }

    h2{ margin:0 0 8px; font-size: 22px; }
    label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
    input{
      width:100%;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 12px;
      padding: 12px 12px;
      color: var(--text);
      outline: none;
    }
    input:focus{ border-color: rgba(47,124,255,.55); box-shadow: 0 0 0 3px rgba(47,124,255,.12); }

    button, .btn{
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.08);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 14px;
      cursor: pointer;
      text-decoration:none;
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      user-select:none;
    }
    .btn:hover, button:hover{ background: rgba(255,255,255,.12); }
    .primary, .btn.primary{ background: var(--primary); border-color: rgba(255,255,255,.18); }
    .primary:hover, .btn.primary:hover{ filter: brightness(1.05); }
    .full{ width:100%; }

    .message { margin: 12px 0; padding: 10px 12px; border-radius: 12px; display:none; border: 1px solid transparent; }
    .message.show{ display:block; }
    #errorMessage{ background: var(--err); border-color: rgba(255,0,0,.25); }
    #successMessage{ background: var(--ok); border-color: rgba(0,255,120,.25); }

    .view{ display:none; }
    .view.active{ display:block; }

    .avatar{
      width: 56px; height: 56px; border-radius: 999px;
      background: rgba(255,255,255,.10);
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; border: 1px solid rgba(255,255,255,.16);
      flex: 0 0 auto;
    }
    .avatar img{ width:100%; height:100%; object-fit: cover; }

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      font-size: 13px;
    }

    .actionsRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .grid2{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
    @media (max-width: 880px){
      .grid2{ grid-template-columns: 1fr; }
    }

    /* Calendar Pro (Worker) — v285 */
.calProGrid{ display:grid; grid-template-columns: 1.25fr .75fr; gap:16px; align-items:start; }
@media (max-width: 980px){ .calProGrid{ grid-template-columns: 1fr; } }

.calTopRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 10px; }
.calTopActions{ display:flex; gap:10px; align-items:center; }

.calMain .calTitle{ font-weight: 950; font-size: 18px; letter-spacing: -0.2px; }

.calEditToggle{ display:inline-flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); font-weight: 800; cursor:pointer; user-select:none; }
.calEditToggle input{ width:16px; height:16px; accent-color: var(--primary); }

.calProCalendar{ border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); border-radius: 18px; padding: 12px; }

.calNav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.calMonth{ font-weight: 900; letter-spacing: -0.2px; }

.calGrid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 10px; }
.dow{ font-size: 12px; font-weight: 800; color: var(--muted); text-align:center; padding: 4px 0; }

.day{ position:relative; height: 44px; border-radius: 14px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--text); font-size: 14px; font-weight: 850; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .06s ease, background .12s ease, border-color .12s ease; }
@media (hover:hover){ .day:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--card2) 85%, transparent); } }
.day:active{ transform: translateY(0px) scale(.99); }
.day.isEmpty{ border:none; background: transparent; cursor:default; }
.day.isEmpty:hover{ transform:none; }

.day.isToday{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.day.isBlocked{ background: color-mix(in srgb, var(--primary) 16%, var(--card)); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.day.isSelected{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 42%, transparent); }
.day.isInRange{ background: color-mix(in srgb, var(--primary) 10%, var(--card)); }

/* Paid events indicator */
.day.hasEvents::after{ content:""; position:absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 85%, var(--primary) 15%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 38%, transparent); }
.day.hasEvents.isBlocked::after{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }

.calLegend{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.dot{ width:10px; height:10px; border-radius: 999px; display:inline-block; border: 1px solid color-mix(in srgb, var(--border) 88%, transparent); }
.dot.free{ background: color-mix(in srgb, var(--card2) 70%, transparent); }
.dot.blocked{ background: color-mix(in srgb, var(--primary) 35%, transparent); }
.dot.booked{ background: color-mix(in srgb, var(--ok) 85%, var(--primary) 15%); }

.calSide{ display:flex; flex-direction:column; gap: 12px; }
.calSideCard{ padding: 16px !important; }
.calSideTitle{ font-weight: 950; margin-bottom: 10px; }
.calSideRow{ display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; margin-top: 10px; }
.calStatus{ margin-top: 10px; }

.calSelectionLabel{ font-weight: 900; letter-spacing: -0.2px; margin-bottom: 10px; }
.calEventsList, .calUpcomingList{ display:flex; flex-direction:column; gap: 10px; }
.calEventItem{ border:1px solid var(--border); background: color-mix(in srgb, var(--card2) 75%, transparent); border-radius: 16px; padding: 12px; }
.calEventTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.calEventTitle{ font-weight: 950; }
.calEventMeta{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.calEventBadge{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; border:1px solid color-mix(in srgb, var(--ok) 38%, var(--border)); background: color-mix(in srgb, var(--ok) 70%, transparent); font-weight: 900; font-size: 12px; }


/* ===== Dashboard shell (menu like Uber/Airbnb) ===== */
.dashShell{
  display:flex;
  gap:18px;
  align-items:stretch;
}
.sideMenu{
  width:220px;
  min-width:220px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.sideMenu .sideTitle{
  font-weight:800;
  font-size:14px;
  opacity:.9;
  margin:4px 0 12px;
}
.menuBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px 12px;
  margin:8px 0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border .15s ease;
  text-align:left;
  font-weight:700;
}
.menuBtn:hover{ transform: translateY(-1px); background:rgba(0,0,0,.20); }
.menuBtn.active{
  background: rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.28);
  color: var(--text);
}
.dashMain{ flex:1; min-width:0; }
.section{ display:none; }
.section.active{ display:block; }

@media (max-width: 980px){
  .dashShell{ flex-direction:column; }
  .sideMenu{ width:100%; min-width:0; }
  .menuBtn{ justify-content:center; }
}

/* ---- Worker Menu extras ---- */
.mwMenuGrid{ display:grid; grid-template-columns: 1.35fr 0.9fr; gap:16px; }
@media (max-width: 1000px){ .mwMenuGrid{ grid-template-columns: 1fr; } }
/* Worker home uses right rail; keep the feed full-width */
.mwMenuGrid.whGrid{ grid-template-columns: 1fr !important; }

.mwStack{ display:flex; flex-direction:column; gap:16px; }

.mwListingPreview{ border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.04); }
.mwListingImg{ width:100%; height:180px; background: radial-gradient(circle at 20% 20%, rgba(47,124,255,.38), rgba(0,0,0,.35)), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)); object-fit:cover; display:block; }
.mwListingBody{ padding:12px 12px 14px; }
.mwStars{ display:inline-flex; gap:4px; font-size:18px; letter-spacing:1px; }
.mwStars .off{ opacity:.25; }
.mwKpi{ display:flex; gap:10px; }
.mwKpi .pill{ flex:1; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.14); }
.mwKpi .pill b{ display:block; font-size:18px; }
.mwKpi .pill small{ opacity:.75; }

/* Listing modal */
.mwModalOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:18px; z-index:9999; }
.mwModalOverlay.active{ display:flex; }
.mwModal{ width:min(720px, 100%); border-radius:20px; border:1px solid rgba(255,255,255,.12); background:rgba(15,20,25,.96); box-shadow:0 18px 60px rgba(0,0,0,.6); overflow:auto; max-height: calc(100vh - 36px); overscroll-behavior: contain; }
.mwModalHeader{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.10); }
.mwModalHeader b{ font-size:16px; }
.mwModalBody{ padding:16px; }
.mwFormGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 720px){ .mwFormGrid{ grid-template-columns: 1fr; } }
.mwModalActions{ display:flex; gap:10px; justify-content:flex-end; padding:14px 16px; border-top:1px solid rgba(255,255,255,.10); }
.mwBtn{ padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); color:rgba(255,255,255,.92); cursor:pointer; font-weight:800; }
.mwBtn.primary{ background: linear-gradient(135deg, rgba(47,124,255,.95), rgba(29,78,216,.95)); border-color: rgba(47,124,255,.55); color:#ffffff; }
.mwBtn.danger{ background: rgba(255,86,86,.18); border-color: rgba(255,86,86,.35); }

/* ===== Portfolio (Portafolio) ===== */
.input, textarea.input{
  width:100%;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 12px 12px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.input:focus, textarea.input:focus{
  border-color: rgba(47,124,255,.55);
  box-shadow: 0 0 0 3px rgba(47,124,255,.12);
}

.pfGrid{
  display:grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap:16px;
  margin-top:14px;
  align-items:start;
}
@media (max-width: 1000px){
  .pfGrid{ grid-template-columns: 1fr; }
}
.pfHeader{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.pfAvatar{
  width:86px; height:86px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.pfAvatar img{ width:100%; height:100%; object-fit:cover; }
.pfPhotoRow{ display:flex; gap:10px; flex-wrap:wrap; }
.pfCodeRow{ display:flex; gap:10px; }
.pfCodeRow .input{ flex:1; }

.pfServiceAdd{
  display:grid;
  grid-template-columns: 1.2fr .7fr .7fr auto;
  gap:10px;
}
@media (max-width: 520px){
  .pfServiceAdd{ grid-template-columns: 1fr 1fr; }
  .pfServiceAdd button{ grid-column: 1 / -1; }
}

.pfList{ display:flex; flex-direction:column; gap:10px; }
.pfItem{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
}
.pfItemLeft{ display:flex; gap:10px; align-items:center; min-width:0; }
.pfThumb{
  width:46px; height:46px; border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}
.pfThumb img{ width:100%; height:100%; object-fit:cover; }
.pfItemText{ min-width:0; }
.pfItemText b{ display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfItemText small{ display:block; color:rgba(255,255,255,.70); margin-top:2px; }
.pfItemActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pfVerifyRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }



/* ===== Anuncios (nuevo panel estilo marketplace) ===== */
.adsTopBar, .adsTopbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.adsTitle, .adsH1{ font-size:32px; font-weight:850; letter-spacing:-.4px; }
.adsTopActions{ display:flex; gap:10px; }
.adsIconBtn{ width:42px; height:42px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.92); color:#0b1220; cursor:pointer; font-weight:900; }
.adsIconBtn:hover{ filter: brightness(0.98); }

.adsCallouts{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px; }

.adsLayout{ display:grid; grid-template-columns: 1fr 420px; gap:14px; margin-top:18px; align-items:start; }
.adsLeftCol, .adsRightCol{ min-width:0; }
@media (max-width: 1100px){ .adsLayout{ grid-template-columns: 1fr 360px; } }
@media (max-width: 900px){ .adsLayout{ grid-template-columns: 1fr; } .adsRightCol{ order:2; } }

@media (max-width: 900px){ .adsCallouts{ grid-template-columns: 1fr; } }
.adsCallout{ border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.92); color:#0b1220; border-radius:18px; padding:14px; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.adsCalloutRow{ display:flex; gap:12px; align-items:center; }
.adsCalloutIcon{ width:42px; height:42px; border-radius:14px; background:rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; font-size:20px; }
.adsCalloutIcon.isOk{ background: rgba(47,124,255,.14); color: rgba(29,78,216,1); border:1px solid rgba(47,124,255,.22); }
.adsCalloutTitle{ font-weight:900; }

.adsGrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; margin-top:18px; }
@media (max-width: 1100px){ .adsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px){ .adsGrid{ grid-template-columns: 1fr; } }


.adsCard{ border-radius:24px; overflow:hidden; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.92); color:#0b1220; box-shadow: 0 14px 40px rgba(0,0,0,.14); position:relative; }
.adsImg{ height:300px; background: radial-gradient(circle at 20% 20%, rgba(47,124,255,.30), rgba(0,0,0,.12)), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.10)); background-size:cover; background-position:center; }
.adsPreview{ background: transparent; border:none; padding:0; }
.adsPreview .mwListingPreview{ background: transparent; }

@media (max-width: 520px){ .adsImg{ height:260px; } }
.adsBody{ padding:16px; }
.adsRow{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.adsText{ min-width:0; }
.adsText .mwListingTitle{ font-weight:900; font-size:20px; line-height:1.15; }
.adsText .mwListingMeta{ margin-top:4px; }
.adsOpenBtn{ width:42px; height:42px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.96); cursor:pointer; font-weight:900; }
.adsOpenBtn:disabled{ opacity:.45; cursor:not-allowed; }

.adsActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.adsBadge{ position:absolute; top:14px; left:14px; padding:8px 12px; border-radius:999px; font-weight:850; font-size:12px; border:1px solid rgba(0,0,0,.12); background:#fff; }
.adsBadge.isPublished{ background: rgba(29,78,216,.12); border-color: rgba(29,78,216,.28); }
.adsBadge.isDraft{ background: rgba(241, 196, 15, .22); border-color: rgba(241,196,15,.40); }

.adsCreateCard, .adsCreate{ border-radius:24px; border:2px dashed rgba(0,0,0,.18); background:rgba(255,255,255,.75); color:#0b1220; cursor:pointer; min-height: 340px; display:flex; align-items:center; justify-content:center; }
.adsCreate:hover{ filter: brightness(0.99); }
.adsCreateText, .adsCreateInner{ text-align:center; padding:18px; }
.adsCreatePlus, .adsPlus{ width:66px; height:66px; border-radius:22px; background:rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:900; margin:0 auto 10px; }
/* Ads checklist micro-polish */
.adsChecklist{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.adsCheckItem{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.82); font-weight:800; }
.adsCheckDot{ width:12px; height:12px; border-radius:999px; border:2px solid rgba(0,0,0,.22); background: transparent; display:inline-block; }
.adsCheckItem.isDone .adsCheckDot{ background: rgba(29,78,216,1); border-color: rgba(29,78,216,1); box-shadow: 0 0 0 3px rgba(29,78,216,.18); }
.adsCheckItem.isDone{ border-color: rgba(29,78,216,.22); }
.adsChecklistActions{ margin-top:12px; display:flex; justify-content:flex-end; }

.adsProgressRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.adsProgressTrack{ flex:1; height:10px; border-radius:999px; background: rgba(0,0,0,.06); overflow:hidden; }
.adsProgressBar{ height:100%; width:0%; border-radius:999px; background: rgba(29,78,216,.90); transition: width .25s ease; }
.adsProgressText{ font-weight:850; font-size:12px; color: var(--muted); min-width:46px; text-align:right; }



/* Status variants */
.adsBadge.isPaused{ background: rgba(148,163,184,.28); border-color: rgba(148,163,184,.48); }

/* Slot selection + empty/missing details */
.adsSlotCard{ position:relative; }
.adsSlotCard.isSelected{ box-shadow: 0 0 0 4px rgba(29,78,216,.18), 0 14px 40px rgba(0,0,0,.14); border-color: rgba(29,78,216,.28); }
.adsSlotTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.adsSlotLabel{ font-size:12px; font-weight:950; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.adsMissing{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.adsMissingPill{ font-size:12px; font-weight:850; padding:7px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); }
html[data-theme="dark"] .adsMissingPill{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

/* Notice / exact missing feedback */
.mwNotice{ border:1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); border-radius:16px; padding:10px 12px; font-weight:800; line-height:1.25; }
html[data-theme="dark"] .mwNotice{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

/* Dropzone dragover */
.listingDropzone.isDragOver{ border-color: rgba(29,78,216,.45); box-shadow: 0 0 0 4px rgba(29,78,216,.18); }

/* Listing modal (premium) */
.mwModalWide{ max-width: 1080px; width: min(1080px, calc(100vw - 28px)); }

/* Public profile modal (Cliente → Explorar) */
.publicProfileTop{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 16px 12px; border-bottom:1px solid var(--border);
}
.publicProfileHead{ display:flex; align-items:center; gap:12px; }
.publicProfileAvatar{
  width:54px; height:54px; border-radius:18px;
  background: rgba(47,124,255,.14); border:1px solid rgba(47,124,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  overflow:hidden;
}
.publicProfileAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.publicProfileName{ font-weight:950; letter-spacing:-.2px; font-size:18px; }
.publicProfileBody{ padding:16px; }
.publicProfileBio{ line-height:1.5; }


.listingModalTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; padding: 6px 2px 12px; border-bottom: 1px solid var(--border); }
.listingModalKicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); font-weight: 900; }
.listingModalTitle{ font-size:20px; font-weight: 950; letter-spacing:-.2px; margin-top:4px; }
.listingModalSub{ margin-top:4px; }
.listingModalTopRight{ display:flex; align-items:center; gap:10px; }

.listingModalGrid{ display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding-top: 14px; }
@media (max-width: 980px){ .listingModalGrid{ grid-template-columns: 1fr; } }

.listingSection{ padding: 14px; border:1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.06); margin-bottom: 14px; }
.listingSectionTitle{ font-weight: 950; margin-bottom: 10px; letter-spacing: -.2px; }
.listingHelpRow{ display:flex; justify-content:space-between; gap:10px; margin-top:6px; }

.moneyInput{ position:relative; display:flex; align-items:center; }
.moneyPrefix{ position:absolute; left:12px; font-weight: 900; opacity: .85; }
.moneyField{ padding-left: 28px !important; }

.listingDropzone{ position:relative; border:2px dashed rgba(0,0,0,.18); border-radius: 20px; background: rgba(255,255,255,.70); padding: 14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
html[data-theme="dark"] .listingDropzone{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.listingDropzone:focus{ outline:none; box-shadow: 0 0 0 4px rgba(29,78,216,.18); border-color: rgba(29,78,216,.35); }
.listingDzLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.listingDzThumb{ width:56px; height:56px; border-radius: 16px; border:1px solid rgba(0,0,0,.10); background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.22), rgba(0,0,0,.06)); background-size:cover; background-position:center; flex:0 0 auto; }
html[data-theme="dark"] .listingDzThumb{ border-color: rgba(255,255,255,.14); }
.listingDzText{ min-width:0; }
.listingDzTitle{ font-weight: 950; }
.listingDzName{ margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listingDzAction{ padding: 10px 12px; border-radius: 999px; border:1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.92); font-weight: 900; }
html[data-theme="dark"] .listingDzAction{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.listingFileInput{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

.listingPolicyRow{ display:flex; gap:10px; align-items:flex-start; }
.listingActions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top: 10px; }

.listingPreviewCard{ padding: 16px !important; }
.listingPreviewHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.listingPreviewTitle{ font-size: 16px; font-weight: 950; }
.listingLiveCard{ margin-top: 12px; border:1px solid var(--border); border-radius: 22px; overflow:hidden; background: color-mix(in srgb, var(--card) 92%, transparent); }
.listingLiveImg{ aspect-ratio: 16 / 9; height: auto; background: radial-gradient(circle at 20% 20%, rgba(29,78,216,.22), rgba(0,0,0,.08)), linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.10)); background-size:cover; background-position:center; }
.listingLiveBody{ padding: 14px; }
.listingLiveTitle{ font-weight: 950; font-size: 18px; letter-spacing: -.2px; }
.listingLiveMeta{ margin-top: 6px; }
.listingLiveDesc{ margin-top: 10px; line-height: 1.35; }
.listingPreviewHint{ margin-top: 12px; }


/* =========================
   THEME (Airbnb-style)
   - Default: Light
   - Toggle: Dark
   ========================= */
html{ color-scheme: light; }
html[data-theme="light"]{
  /* Match the landing palette (blue, clean, adult-friendly) */
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --card: #ffffff;
  --card-soft: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #475569;
  --primary: #1d4ed8; /* azul sobrio */
  --primaryText: #ffffff;
  --btnBg: #ffffff;
  --btnBgHover: var(--bg-soft);
  --inputBg: #ffffff;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg: radial-gradient(1000px 600px at 20% 10%, rgba(29,78,216,.20), transparent 60%),
        radial-gradient(900px 600px at 80% 30%, rgba(147,197,253,.14), transparent 60%),
        linear-gradient(180deg, #0b1220, #0a1020);
  --card: rgba(255,255,255,.06);
  --card-soft: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --primary: #2f7cff;
  --primaryText: #ffffff;
  --btnBg: rgba(255,255,255,.08);
  --btnBgHover: rgba(255,255,255,.12);
  --inputBg: rgba(0,0,0,.18);
  --shadow: 0 10px 40px rgba(0,0,0,.18);
}

body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

.muted{ color: var(--muted) !important; }

.card{
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.card.soft{ background: var(--card-soft) !important; }

button, .btn{
  background: var(--btnBg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
button:hover, .btn:hover{ background: var(--btnBgHover) !important; }

.primary, .btn.primary{
  background: var(--primary) !important;
  color: var(--primaryText) !important;
  border-color: rgba(0,0,0,.08) !important;
}

input, .input, textarea.input{
  background: var(--inputBg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
input:focus, .input:focus, textarea.input:focus{
  border-color: rgba(22,163,74,.55) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18) !important;
}

.link{
  color: var(--primary) !important;
  font-weight: 700;
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

.sideMenu{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.menuBtn{
  background: var(--btnBg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.menuBtn.active{
  background: rgba(22,163,74,.18) !important;
  border-color: rgba(22,163,74,.35) !important;
  color: var(--text) !important;
}

.mwModal{ background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
.mwModalHeader{ border-bottom-color: var(--border) !important; }
.mwModalActions{ border-top-color: var(--border) !important; }

@media (max-width: 720px){
  #discoverList, #savedList{ grid-template-columns: 1fr !important; }
}


/* Calendar readability on Light */
html[data-theme="light"] .dow{ color: rgba(17,24,39,.70) !important; }
html[data-theme="light"] .day{
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(0,0,0,.10) !important;
}
html[data-theme="light"] .day.isBlocked{
  background: rgba(47,124,255,.12) !important;
  border-color: rgba(47,124,255,.25) !important;
}
html[data-theme="light"] .day.isToday{ outline: 2px solid rgba(17,24,39,.14) !important; }


    /* Route-style navigation (back screens) */
    .topbar .brand{ user-select:none; }
    .dashShell.subpage{ grid-template-columns: 1fr !important; }
    .dashShell.subpage .sideMenu{ display:none !important; }
    .dashShell.subpage .section{ margin-left:0 !important; }
    /* Make sections feel like full screens */
    .section{ width:100%; }


/* Password reveal (Airbnb-like: Mostrar / Ocultar) */
.pwWrap{ position: relative; }
.pwWrap input{ padding-right: 84px; }
.pwToggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(17,24,39,.70) !important;
  font-size: 12px;
  font-weight: 700;
  padding: 0 !important;
  cursor: pointer;
}
.pwToggle:hover{ text-decoration: underline; }
.pwToggle:active{ transform: translateY(-50%) scale(.98); }
.pwToggle:focus, .pwToggle:focus-visible{ outline: none !important; box-shadow: none !important; }



/* Auth layout sizing */
.authCard{
  max-width: 520px;
  margin: 0 auto;
}

/* Auth shell (modal over branded background) */
body.authMode{
  min-height: 100vh;
  /* Auth uses a real hero background (must override theme body background !important) */
  background: url('/assets/images/landing/hero-scene.jpg') center/cover no-repeat fixed !important;
}

body.authMode::before{
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 20, .45);
  backdrop-filter: blur(10px);
  z-index: 0;
}
body.authMode .wrap{ position: relative; z-index: 1; }

body.authMode .topbar{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 18px 18px;
}

/* Auth topbar controls should look intentional on the hero background */
body.authMode .topbar .btn{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  border-radius: 14px !important;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
@media (hover:hover){
  body.authMode .topbar .btn:hover{ background: rgba(0,0,0,.24) !important; transform: translateY(-1px); }
}
body.authMode .topbar .btn:active{ transform: translateY(0); }
body.authMode #routeTitle,
body.authMode #appModePill{ display:none !important; }

body.authMode #errorMessage,
body.authMode #successMessage{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

body.authMode .view.active{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 72px);
  padding: 24px;
}

body.authMode .card.authCard{
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(17,24,39,.12) !important;
  color: #111827 !important;

  /* Premium depth (multi-layer shadow + crisp radius) */
  border-radius: 24px !important;
  /* Softer, more "Airbnb-like" depth */
  box-shadow:
    0 18px 48px rgba(0,0,0,.18),
    0 44px 140px rgba(0,0,0,.18) !important;
}

/* In Auth we always keep a "light" surface even if the site is in dark mode.
   This avoids unreadable secondary buttons / legal text when html[data-theme="dark"]
   sets button/input colors with !important. */
body.authMode .authCard button,
body.authMode .authCard .btn{
  /* reset global theme button styles */
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(17,24,39,.14) !important;
  color: #111827 !important;
}
body.authMode .authCard button:hover,
body.authMode .authCard .btn:hover{
  background: rgba(17,24,39,.04) !important;
}
body.authMode .authCard .primary,
body.authMode .authCard .btn.primary,
body.authMode .authCard button.primary{
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* Divider + legal text must stay readable */
body.authMode .authCard .orDivider{ color: rgba(17,24,39,.55) !important; }
body.authMode .authCard .orDivider span{ background: rgba(17,24,39,.12) !important; }
body.authMode .authCard .legal{ color: rgba(17,24,39,.62) !important; }
body.authMode .authCard .legal a{ color: rgba(17,24,39,.62) !important; }

/* Global .muted becomes white in dark theme; keep it readable on the light auth card */
body.authMode .authCard .muted{ color: rgba(17,24,39,.55) !important; }

/* Browser autofill can force dark backgrounds in dark mode. Force a light fill. */
body.authMode .authCard input:-webkit-autofill,
body.authMode .authCard input:-webkit-autofill:hover,
body.authMode .authCard input:-webkit-autofill:focus,
body.authMode .authCard input:-webkit-autofill:active{
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827 !important;
  box-shadow: 0 0 0px 1000px rgba(239,246,255,.92) inset !important;
  border: 1px solid rgba(17,24,39,.20) !important;
}

/* Password toggle must never look like a button */
body.authMode .pwToggle{
  background: transparent !important;
  border: none !important;
  color: rgba(17,24,39,.70) !important;
  box-shadow: none !important;
}

.authHeader{ margin-bottom: 16px; }
.authKicker{ font-size: 13px; color: rgba(17,24,39,.65); font-weight: 600; }
.authTitle{ font-size: 28px; line-height: 1.15; margin: 6px 0 6px; }
.authSub{ color: rgba(17,24,39,.65); margin: 0 0 10px; }

.orDivider{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: rgba(17,24,39,.55);
  font-size: 13px;
}
.orDivider span{ height: 1px; background: rgba(17,24,39,.12); }
.orDivider .orText{ padding: 0 2px; }

.legal{ font-size: 12px; color: rgba(17,24,39,.60); margin: 10px 0 0; }
.legal a{ color: inherit; text-decoration: underline; }

/* CTA sizing */
button.primary.full, .btn.primary.full{ height: 52px; border-radius: 14px; }

/* Make auth inputs feel more "Airbnb" */
body.authMode .authCard label{ font-weight: 600; color: rgba(17,24,39,.80) !important; }
/* IMPORTANT: In dark theme, `.muted` becomes light text (var(--muted)) and disappears on a light auth card.
   Force readable muted color for inline helpers like "(opcional)". */
body.authMode .authCard .muted{ color: rgba(17,24,39,.55) !important; }
body.authMode .authCard input{
  padding: 14px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(17,24,39,.18) !important;
  background: rgba(255,255,255,.92) !important;
  color: #111827 !important;
}
body.authMode .authCard input::placeholder{ color: rgba(17,24,39,.55) !important; }
body.authMode .authCard input:focus{
  outline: none !important;
  border-color: rgba(47,124,255,.70) !important;
  box-shadow: 0 0 0 5px rgba(47,124,255,.20) !important;
}

/* Premium micro-interactions (Auth) */
body.authMode .authCard input{
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
@media (hover:hover){
  body.authMode .authCard input:hover{
    border-color: rgba(17,24,39,.30) !important;
    background: rgba(255,255,255,.98) !important;
  }
}

/* Primary CTA feels alive */
body.authMode .authCard .primary{
  transition: transform .10s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 12px 28px rgba(37,99,235,.28) !important;
}
@media (hover:hover){
  body.authMode .authCard .primary:hover{
    filter: brightness(.97);
    box-shadow: 0 16px 36px rgba(37,99,235,.32) !important;
    transform: translateY(-1px);
  }
}
body.authMode .authCard .primary:active{
  transform: translateY(0);
  filter: brightness(.95);
}

/* Secondary button (Crear cuenta / Iniciar sesión) */
body.authMode .authCard .btn.full{
  transition: transform .10s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
@media (hover:hover){
  body.authMode .authCard .btn.full:hover{
    background: rgba(17,24,39,.03) !important;
    transform: translateY(-1px);
  }
}
body.authMode .authCard .btn.full:active{ transform: translateY(0); }

/* Top-left brand in auth needs contrast on hero bg */
body.authMode .topbar .brand{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Small frosted pill so the brand doesn't get lost on the hero */
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

/* Forgot link subtle */
.authForgot{ margin-top: 8px; text-align: left; }
.authForgot .link{ font-size: 13px; color: rgba(17,24,39,.65) !important; }
.authForgot .link:hover{ text-decoration: underline; }

body.dark .menuBtn.active{ background: rgba(47,124,255,.18); border-color: rgba(47,124,255,.32); }

body.dark .adsCalloutIcon.isOk{ background: rgba(47,124,255,.20); color: rgba(255,255,255,.92); border-color: rgba(47,124,255,.28); }

/* MW Modal flex polish */
.mwModalBackdrop .mwModal{
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mwModalBackdrop .mwModalBody{
  overflow: auto;
}
.mwModalBackdrop .mwModalActions{
  position: sticky;
  bottom: 0;
  background: var(--card);
  padding-top: 12px;
  margin-top: 0;
  box-shadow: 0 -8px 16px rgba(0,0,0,0.04);
}


/* Calendar Airbnb (Worker) — v289 */
.mwCalShell{ display:grid; grid-template-columns: 280px 1fr 360px; gap:18px; align-items:stretch; }
@media (max-width: 1180px){ .mwCalShell{ grid-template-columns: 240px 1fr 340px; } }
@media (max-width: 980px){ .mwCalShell{ grid-template-columns: 1fr; } }

.mwCalLeft{ border-right: 1px solid var(--border); padding-right: 14px; }
@media (max-width: 980px){ .mwCalLeft{ border-right:none; padding-right:0; } }
.mwCalLeftHeader{ display:flex; flex-direction:column; gap:4px; margin-bottom: 12px; }
.mwCalLeftTitle{ font-weight: 950; font-size: 18px; letter-spacing:-.2px; }
.mwCalServiceList{ display:flex; flex-direction:column; gap:10px; }
.mwCalServiceBtn{ width:100%; display:flex; align-items:center; gap:12px; padding:12px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); cursor:pointer; text-align:left; transition: transform .06s ease, background .12s ease, border-color .12s ease; }
@media (hover:hover){ .mwCalServiceBtn:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--card2) 92%, transparent); } }
.mwCalServiceBtn.isActive{ border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.mwCalSvcThumb{ width:44px; height:44px; border-radius: 12px; border:1px solid var(--border); background: color-mix(in srgb, var(--card2) 82%, transparent); display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; }
.mwCalSvcThumb img{ width:100%; height:100%; object-fit:cover; }
.mwCalSvcText b{ display:block; font-weight: 950; }
.mwCalSvcText small{ display:block; color: var(--muted); margin-top: 2px; }
.mwCalLeftHint{ margin-top: 10px; }

.mwCalCenter{ min-width:0; }

/* Right column: always-visible control center (white) + drawer overlay (black) */
.mwCalRightCol{ min-width:0; position:relative; }
.mwCalRightPanel{ position: sticky; top: 14px; border-left: 1px solid var(--border); padding-left: 14px; }
@media (max-width: 980px){ .mwCalRightPanel{ position: static; border-left:none; padding-left:0; margin-top: 14px; } }

.mwCalRightHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.mwCalRightTitle{ font-weight: 950; font-size: 18px; letter-spacing:-.2px; }

.mwCalWhiteCard{ border-radius: 18px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); padding: 14px; margin-bottom: 12px; }
.mwCalWhiteTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.mwCalWhiteTitle{ font-weight: 950; margin-bottom: 6px; }

/* Detail view like Airbnb (right panel) */
.mwCalDetailTop{ display:flex; align-items:center; gap: 10px; margin-bottom: 12px; }
.mwCalBackBtn{ width:42px; height:42px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); font-weight: 950; cursor:pointer; }
.mwCalHelpBtn{ width:42px; height:42px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 92%, transparent); font-weight: 950; cursor:pointer; }
.mwCalDetailHead{ flex:1; min-width:0; }
.mwCalDetailTitle{ font-weight: 950; font-size: 18px; letter-spacing:-.2px; }
.mwCalDetailSub{ margin-top: 2px; }

.mwCalDetailCard{ border-radius: 18px; border:1px solid var(--border); background: var(--card); padding: 14px; }
.mwCalDetailCard + .mwCalDetailCard{ margin-top: 12px; }
.mwCalDetailBig{ font-weight: 950; font-size: 88px; letter-spacing:-1.6px; margin: 10px 0 16px; line-height: 1; }
.mwCalDetailRow{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.mwCalDetailRow .btn{ white-space:nowrap; }
.mwCalDetailActions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

/* Help modal */
.mwHelpOverlay{ position:fixed; inset:0; background: rgba(0,0,0,.50); display:flex; align-items:center; justify-content:center; z-index: 80; padding: 18px; }

/* Respect the HTML `hidden` attribute.
   Without this, `.mwHelpOverlay { display:flex }` overrides the UA stylesheet and the modal shows everywhere,
   plus the close button cannot hide it by toggling `hidden`.
*/
.mwHelpOverlay[hidden]{ display:none !important; }
.mwHelpModal{ width: min(720px, 96vw); border-radius: 22px; background: var(--card); border:1px solid var(--border); box-shadow: 0 18px 60px rgba(0,0,0,.25); overflow:hidden; }
.mwHelpTop{ display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom:1px solid var(--border); }
.mwHelpTitle{ font-weight: 950; }
.mwHelpClose{ background: color-mix(in srgb, var(--card2) 92%, transparent); color: var(--text); }
.mwHelpBody{ padding: 14px; color: var(--text); }
.mwHelpBody p{ margin: 0 0 10px; }
.mwHelpBody ul{ margin: 0 0 10px 18px; }
.mwCalTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; flex-wrap:wrap; margin-bottom: 10px; }
.mwCalMonthLabel{ font-weight: 950; font-size: 44px; line-height: 1; letter-spacing:-.8px; }
@media (max-width: 520px){ .mwCalMonthLabel{ font-size: 34px; } }
.mwCalTopActions{ display:flex; align-items:center; gap: 10px; }
.mwCalViewPill{ display:inline-flex; align-items:center; padding: 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); }
.mwCalPillBtn{ border:none; background: transparent; padding: 8px 12px; border-radius: 999px; font-weight: 700; cursor:pointer; color: var(--text); }
.mwCalPillBtn:disabled{ opacity:.45; cursor:not-allowed; }
.mwCalPillBtn.isActive{ background: color-mix(in srgb, var(--primary) 12%, transparent); border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border)); }
.mwCalToday{ border:1px solid var(--border); background: var(--card); padding: 10px 14px; border-radius: 999px; font-weight: 700; cursor:pointer; }

.mwCalGridWrap{ border-top: 1px solid var(--border); padding-top: 10px; }
.mwCalDows{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 10px; color: var(--muted); font-weight: 700; font-size: 13px; margin: 8px 0 10px; }
.mwCalDows div{ text-transform:none; }
.mwCalBody{ display:grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items:start; }
.mwCalNavBtn{ width:44px; height:44px; border-radius: 999px; border:1px solid var(--border); background: var(--card); font-weight: 700; cursor:pointer; }

.mwCalGrid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items:stretch; }
@media (max-width: 680px){ .mwCalBody{ grid-template-columns: 1fr; } .mwCalNavBtn{ display:none; } .mwCalGrid{ gap: 10px; } }

.mwCalDay{ position:relative; height: 96px; border-radius: 18px; border:1px solid var(--border); background: var(--card); cursor:pointer; text-align:left; padding: 12px 14px; display:flex; flex-direction:column; justify-content:space-between; transition: transform .06s ease, background .12s ease, border-color .12s ease; }
@media (hover:hover){ .mwCalDay:hover{ transform: translateY(-1px); background: var(--card2); } }
.mwCalDay:disabled{ cursor:not-allowed; transform:none !important; }
.mwCalDay:disabled:hover{ transform:none !important; }
.mwCalDay.isEmpty{ border:none; background: transparent; cursor:default; padding:0; }
.mwCalDayNum{ font-weight: 650; font-size: 16px; letter-spacing: -0.01em; color: color-mix(in srgb, var(--text) 92%, black); }
.mwCalDayPrice{ font-weight: 520; font-size: 14px; color: var(--muted); letter-spacing: -0.01em; }
.mwCalDayBadge{ display:inline-flex; align-items:center; width: fit-content; font-weight: 600; font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--card2); color: var(--muted); }
.mwCalDayBadge.isPaid{ background: color-mix(in srgb, var(--primary) 12%, var(--card2)); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); color: color-mix(in srgb, var(--text) 78%, var(--primary)); }
.mwCalDayBadge.isBlocked{ background: color-mix(in srgb, var(--card2) 88%, transparent); border-color: color-mix(in srgb, var(--border) 72%, var(--text)); color: color-mix(in srgb, var(--text) 70%, transparent); }
.mwCalDay.isToday .mwCalDayNum{ background: color-mix(in srgb, var(--primary) 18%, transparent); border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); padding: 6px 10px; border-radius: 999px; display:inline-flex; align-items:center; }
.mwCalDay.isPast{
  opacity: 1;
  background: var(--card);
  border-color: var(--border);
  cursor: not-allowed;
  pointer-events: none;
}
.mwCalDay.isPast .mwCalDayNum{ color: var(--muted); }
/* "No disponible" debe sentirse bloqueado como Airbnb (sin hover lift) */
.mwCalDay.isBlocked{ opacity: 1; background: color-mix(in srgb, var(--card2) 86%, transparent); border-color: color-mix(in srgb, var(--border) 75%, var(--text)); }
@media (hover:hover){ .mwCalDay.isBlocked:hover{ transform:none; background: color-mix(in srgb, var(--card2) 86%, transparent); } }
.mwCalDay.isBlocked .mwCalDayNum{ color: color-mix(in srgb, var(--text) 68%, transparent); }
/* Cuando está no disponible, la selección NO debe verse "azul editable" */
.mwCalDay.isBlocked.isSelected{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 12%, transparent); border-color: color-mix(in srgb, var(--text) 18%, var(--border)); }
.mwCalDay.isBlocked.isInRange{ background: color-mix(in srgb, var(--card2) 86%, transparent); }
.mwCalDay.isSelected{ box-shadow: none; border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.mwCalDay.isSelected .mwCalDayNum{
  background: var(--primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  min-width: 34px;
}
.mwCalDay.isInRange{ background: color-mix(in srgb, var(--primary) 10%, var(--card)); }

.mwCalPaidDot{ position:absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 85%, var(--primary) 15%); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 22%, transparent); }

.mwCalLegend{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

/* Drawer overlay (black) — only when user clicks a day */
.mwCalDrawer{ position:absolute; inset: 0; display:none; z-index: 10; pointer-events:none; }
.mwCalDrawer.isOpen{ display:block; pointer-events:auto; }
.mwCalDrawerInner{ position: sticky; top: 14px; max-height: none; overflow: visible; }
@media (max-width: 980px){
  .mwCalDrawer{ position:fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.50); padding: 14px; }
  .mwCalDrawerInner{ height: auto; max-height:none; overflow: visible; position:relative; top:0; }
}

.mwCalDrawerInner{ border-radius: 22px; background: #0b0b0c; color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.10); padding: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }

.mwCalCardDark{ border-color:rgba(255,255,255,.10) !important; background: rgba(255,255,255,.06) !important; }

.mwCalDrawerTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 12px; }
.mwCalDatePill{ padding: 10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-weight: 950; }
.mwCalIconBtn{ width:40px; height:40px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); cursor:pointer; font-weight: 950; }

.mwCalCard{ border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); padding: 14px; margin-bottom: 12px; }
.mwCalCardTitle{ font-weight: 950; margin-bottom: 10px; }
.mwCalList{ display:flex; flex-direction:column; gap: 10px; }

.mwCalAvailRow{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.mwCalAvailLabel{ font-weight: 950; display:flex; align-items:center; gap: 10px; }
.mwCalAvailLabel::after{ content:""; width:8px; height:8px; border-radius:999px; background: #36c972; display:inline-block; }
.mwCalAvailLabel.isUnavailable::after{ background: #ff5a5f; }
.mwCalAvailLabel.isPaid::after{ background: #7dd3fc; }
.mwCalAvailSub{ color: rgba(255,255,255,.72); font-size: 13px; margin-top: 4px; }

.mwCalAvailBtns{ display:flex; gap: 10px; }
.mwCalMiniBtn{ width:44px; height:44px; border-radius: 14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); cursor:pointer; font-weight: 950; }
.mwCalMiniBtn.isPrimary{ background: rgba(255,255,255,.86); color: #111; border-color: rgba(255,255,255,.86); }

.mwCalAccordionBtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: 10px; border:none; background: transparent; color: rgba(255,255,255,.92); font-weight: 950; cursor:pointer; padding: 0; }
.mwCalPlus{ width:28px; height:28px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); }
.mwCalAccordionBody{ margin-top: 12px; }
.mwCalFormGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 1180px){ .mwCalFormGrid{ grid-template-columns: 1fr; } }
.mwCalRuleActions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; }

/* Make inputs readable in dark drawer */
.mwCalDrawerInner .input{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.92); }
.mwCalDrawerInner .label{ color: rgba(255,255,255,.85); }
.mwCalDrawerInner .muted{ color: rgba(255,255,255,.60); }


/* --- Calendar Pro v290 --- */
.mwCalSkeleton{
  position:relative;
  background:rgba(0,0,0,.06);
  border-radius:14px;
  overflow:hidden;
}
.mwCalSkeleton::after{
  content:'';
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation:mwShimmer 1.1s infinite;
}
@keyframes mwShimmer{
  100%{transform:translateX(100%);}
}

.mwCalIntelGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:8px;
}
@media (min-width: 1100px){
  .mwCalIntelGrid{grid-template-columns:1fr 1fr;}
}
.mwCalIntelCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.mwCalIntelLabel{
  font-size:12px;
  color:rgba(0,0,0,.6);
  margin-bottom:6px;
}
.mwCalIntelValue{
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.mwCalIntelSub{
  margin-top:4px;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

.mwCalSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  margin-bottom:8px;
}
.mwCalSectionTitle{
  font-weight:800;
  letter-spacing:-0.01em;
}

.mwCalFieldRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 420px){
  .mwCalFieldRow{grid-template-columns:1fr;}
}

.mwCalWeekdayGrid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
}
@media (max-width: 520px){
  .mwCalWeekdayGrid{grid-template-columns:repeat(4, 1fr);}
}
.mwCalWeekdayCell{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.mwCalWeekdayTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.mwCalWeekdayName{
  font-weight:800;
  font-size:12px;
}
.mwCalSmallInput{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  font-weight:700;
}

.mwCalOverrides{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mwCalOverrideCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  background:#fff;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.mwCalOverrideMain{
  min-width:0;
}
.mwCalOverrideTitle{
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:2px;
}
.mwCalOverrideSub{
  font-size:12px;
  color:rgba(0,0,0,.6);
}
.mwCalDanger{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.mwCalDanger:hover{
  border-color:rgba(0,0,0,.2);
}

.mwCalDivider{
  height:1px;
  background:rgba(0,0,0,.08);
  margin:14px 0;
}

.mwCalMicroCopy{
  font-size:12px;
  color:rgba(0,0,0,.55);
}


/* compatibility for weekday grid */
.mwCalWeekRow{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.mwCalWeekTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.mwCalWeekName{
  font-weight:800;
  font-size:12px;
}
.mwCalInputSm{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  font-weight:700;
}


/* Calendar pro toggles & validation */
.mwCalToggleGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
@media (max-width: 520px){.mwCalToggleGrid{grid-template-columns:repeat(4,1fr);}}
.mwCalToggle{border:1px solid rgba(0,0,0,.10);background:#fff;border-radius:14px;padding:10px 0;font-weight:900;cursor:pointer;}
.mwCalToggle.isOn{background:color-mix(in srgb, var(--primary) 12%, #fff);border-color:color-mix(in srgb, var(--primary) 35%, rgba(0,0,0,.10));}
.mwCalWarn{margin-top:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:rgba(255,80,80,.10);font-weight:800;}
.mwCalOk{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(54,201,114,.12);font-weight:900;}
.mwCalBad{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(255,80,80,.12);font-weight:900;}


/* Calendar/Proposal small grids */
.mwGrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.mwGrid2{grid-template-columns:1fr}}


/* Airbnb-like list rows + focused editors */
.mwCalRowBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  text-align:left;
}
.mwCalRowBtn:hover{ box-shadow:0 6px 22px rgba(16,24,40,.08); }
.mwCalRowTitle{ font-weight:700; }
.mwCalRowSub{ color:var(--muted); font-size:13px; margin-top:2px; }
.mwCalRowVal{ color:var(--text); font-weight:700; }
.mwCalChev{ color:var(--muted); font-size:18px; line-height:1; }

.mwCalEditHero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 0 14px;
}
.mwCalBigNumberInput{
  width:100%;
  font-size:72px;
  font-weight:800;
  letter-spacing:-0.04em;
  text-align:center;
  border:none;
  outline:none;
  background:transparent;
  padding:8px 0;
  max-width:420px;
  color:#111827;
}

.mwCalBigNumberInput::placeholder{
  font-size:20px;
  font-weight:700;
  color:rgba(17,24,39,0.35);
}

.mwCalOptionList{
  margin-top:10px;
  border:1px solid #e6eef9;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.mwCalOptionRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.mwCalOptionRow + .mwCalOptionRow{ border-top:1px solid #eef2f8; }
.mwCalOptionRow:hover{ background:rgba(14,116,217,0.04); }
.mwCalOptionTxt{ font-weight:700; color:#111827; }
.mwCalOptionSub{ font-size:12px; color:#6b7280; margin-top:2px; }
.mwCalOptionCheck{ font-weight:900; color:#0e74d9; }

@media (max-width: 900px){
  .mwCalBigNumberInput{ font-size:56px; max-width:340px; }
}

.mwCalBigInputWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px 0 6px;
}

.mwCalBigAffix{
  font-size:86px;
  font-weight:800;
  letter-spacing:-0.04em;
  color:#111827;
  line-height:1;
}
.mwCalBigNumberHint{ color:var(--muted); font-size:13px; text-align:center; max-width:360px; }
.mwCalEditFooter{
  position:sticky;
  bottom:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line);
  padding:12px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* --- Calendar (Airbnb-like) right panel: single page scroll --- */
.mwRightPanelWrap{overflow:visible !important;}
#mwCalDetailBody{overflow:visible !important;}