/* La Abuela portal dark-mode alignment.
   Loaded after page-level CSS so the approval portal matches the reskin source. */

html[data-la-brand="la-abuela"] body.theme-dark {
  --bg: var(--la-red-deep);
  --card: rgba(147, 17, 19, .88);
  --card2: #8a1418;
  --surface: #4a090a;
  --text: #fff7dd;
  --body: #f4dfb8;
  --muted: #d2b184;
  --label: #e2c791;
  --accent: var(--la-gold);
  --accent-2: var(--la-teal);
  --cta: var(--la-orange);
  --line: rgba(249, 178, 51, .28);
  --soft-line: rgba(236, 236, 188, .13);
  --preview-bg: rgba(59, 7, 8, .94);
  --preview-line: rgba(249, 178, 51, .28);
  --input-bg: rgba(59, 7, 8, .92);
  --input-border: rgba(249, 178, 51, .28);
  --brand-ribbon: linear-gradient(90deg, transparent 0%, rgba(236, 236, 188, 0) 2%, rgba(249, 178, 51, .9) 22%, rgba(213, 115, 42, .9) 46%, rgba(91, 185, 183, .86) 70%, rgba(147, 17, 19, .9) 92%, transparent 100%);
  background: var(--bg);
  color: var(--text);
}

html[data-la-brand="la-abuela"] body.theme-dark nav {
  background:
    linear-gradient(rgba(147, 17, 19, .88), rgba(59, 7, 8, .94)),
    var(--la-mosaic-strip),
    var(--la-red-deep);
  background-size: auto, 260px auto, auto;
  background-position: center, center 45%, center;
  border-bottom-color: rgba(249, 178, 51, .22);
  box-shadow: 0 16px 40px rgba(59, 7, 8, .44);
}

html[data-la-brand="la-abuela"] body.theme-dark .portal-hero,
html[data-la-brand="la-abuela"] body.theme-dark .page-hdr,
html[data-la-brand="la-abuela"] body.theme-dark .lunch-hero,
html[data-la-brand="la-abuela"] body.theme-dark .lp-hero,
html[data-la-brand="la-abuela"] body.theme-dark .menu-hero,
html[data-la-brand="la-abuela"] body.theme-dark .res-hero {
  background:
    radial-gradient(circle at 18% 14%, rgba(213, 115, 42, .16), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(91, 185, 183, .12), transparent 30%),
    linear-gradient(rgba(59, 7, 8, .72), rgba(59, 7, 8, .86));
  border-color: rgba(249, 178, 51, .22);
}

/* menu-preview.html / reservas-preview.html hero titles — guest-facing
   preview pages outside the portal color-role cleanup scope. Left gold. */
html[data-la-brand="la-abuela"] body.theme-dark .menu-hero h1,
html[data-la-brand="la-abuela"] body.theme-dark .res-hero h1 {
  color: var(--la-gold);
  text-shadow: 0 3px 0 rgba(147, 17, 19, .42), 0 18px 42px rgba(0, 0, 0, .2);
}

/* Content headings/titles across the portal dashboard pages — role 1
   (cream) under the 3-role dark-mode framework: this is primary text
   the user reads, not a status/badge. */
html[data-la-brand="la-abuela"] body.theme-dark .lunch-hero h1,
html[data-la-brand="la-abuela"] body.theme-dark .lp-hero h1,
html[data-la-brand="la-abuela"] body.theme-dark .section-title,
html[data-la-brand="la-abuela"] body.theme-dark .ph-ttl h2,
html[data-la-brand="la-abuela"] body.theme-dark .phase-info h2,
html[data-la-brand="la-abuela"] body.theme-dark .loc-name,
html[data-la-brand="la-abuela"] body.theme-dark .card-title,
html[data-la-brand="la-abuela"] body.theme-dark .card-ad-name,
html[data-la-brand="la-abuela"] body.theme-dark .asset-name {
  color: var(--la-cream);
  text-shadow: 0 3px 0 rgba(147, 17, 19, .42), 0 18px 42px rgba(0, 0, 0, .2);
}

html[data-la-brand="la-abuela"] body.theme-dark .portal-title,
html[data-la-brand="la-abuela"] body.theme-dark .page-title {
  color: var(--la-cream);
  text-shadow: 0 3px 0 rgba(147, 17, 19, .42), 0 18px 42px rgba(0, 0, 0, .2);
}

html[data-la-brand="la-abuela"] body.theme-dark .portal-eyebrow,
html[data-la-brand="la-abuela"] body.theme-dark .page-eyebrow,
html[data-la-brand="la-abuela"] body.theme-dark .menu-card-cat,
html[data-la-brand="la-abuela"] body.theme-dark .loc-badge,
html[data-la-brand="la-abuela"] body.theme-dark .legend-dot.owner + span {
  color: var(--la-teal);
}

html[data-la-brand="la-abuela"] body.theme-dark .pnav-link,
html[data-la-brand="la-abuela"] body.theme-dark .pnav,
html[data-la-brand="la-abuela"] body.theme-dark .registry-btn,
html[data-la-brand="la-abuela"] body.theme-dark .action-btn,
html[data-la-brand="la-abuela"] body.theme-dark .ap-btn,
html[data-la-brand="la-abuela"] body.theme-dark .btn-cancel,
html[data-la-brand="la-abuela"] body.theme-dark .cat-btn {
  background: rgba(147, 17, 19, .72);
  border-color: rgba(249, 178, 51, .26);
  color: #f4dfb8;
  box-shadow: 0 8px 22px rgba(59, 7, 8, .22);
}

/* Active/selected state — role 3 (gold, kept deliberately): the
   current nav pill and the selected category tab. */
html[data-la-brand="la-abuela"] body.theme-dark .pnav-link.active,
html[data-la-brand="la-abuela"] body.theme-dark .pnav.on,
html[data-la-brand="la-abuela"] body.theme-dark .cat-btn.active {
  background: rgba(147, 17, 19, .96);
  border-color: rgba(249, 178, 51, .42);
  color: var(--la-gold);
  box-shadow: 0 0 0 3px rgba(249, 178, 51, .08), 0 12px 28px rgba(59, 7, 8, .26);
}

/* "Ver página/sitio →" preview links — role 2 (teal): a link is an
   interactive-accent element per the framework, not a badge. */
html[data-la-brand="la-abuela"] body.theme-dark .preview-link {
  background: rgba(147, 17, 19, .96);
  border-color: rgba(91, 185, 183, .42);
  color: var(--la-teal);
  box-shadow: 0 0 0 3px rgba(91, 185, 183, .08), 0 12px 28px rgba(59, 7, 8, .26);
}

/* Primary "Save" CTA buttons — role 1 (cream): primary button label
   text under the framework. */
html[data-la-brand="la-abuela"] body.theme-dark .btn-save,
html[data-la-brand="la-abuela"] body.theme-dark .btn-review-save {
  background: rgba(147, 17, 19, .96);
  border-color: rgba(236, 232, 184, .42);
  color: var(--la-cream);
  box-shadow: 0 0 0 3px rgba(236, 232, 184, .08), 0 12px 28px rgba(59, 7, 8, .26);
}

html[data-la-brand="la-abuela"] body.theme-dark .pnav-link:hover {
  background: rgba(147, 17, 19, .96);
  border-color: rgba(91, 185, 183, .42);
  color: var(--la-teal);
  box-shadow: 0 0 0 3px rgba(91, 185, 183, .08), 0 12px 28px rgba(59, 7, 8, .26);
}

html[data-la-brand="la-abuela"] body.theme-dark .registry-btn.ready {
  background: rgba(236, 232, 184, .1);
  border-color: rgba(236, 232, 184, .42);
  color: var(--la-cream);
  box-shadow: 0 0 0 3px rgba(236, 232, 184, .08), 0 12px 28px rgba(59, 7, 8, .26);
}

html[data-la-brand="la-abuela"] body.theme-dark .lang {
  background: rgba(59, 7, 8, .52);
  border-color: rgba(249, 178, 51, .28);
}

html[data-la-brand="la-abuela"] body.theme-dark .lang button {
  color: #d2b184;
}

html[data-la-brand="la-abuela"] body.theme-dark .lang button.active {
  background: var(--la-gold);
  color: var(--la-red-deep);
}

/* Toggle control (opens mobile nav) — role 2 (teal), matching the
   theme-toggle icon+border treatment and the existing teal accent
   already used for .hamburger-btn.open / .mobile-nav-drawer.open. */
html[data-la-brand="la-abuela"] body.theme-dark .hamburger-btn {
  background: rgba(147, 17, 19, .92);
  border-color: rgba(91, 185, 183, .4);
  color: var(--la-teal);
  box-shadow: inset 0 1px 0 rgba(255, 247, 221, .12), 0 8px 22px rgba(59, 7, 8, .28);
}

html[data-la-brand="la-abuela"] body.theme-dark .theme-toggle {
  background: rgba(147, 17, 19, .92);
  border-color: rgba(91, 185, 183, .4);
  color: var(--la-teal);
  box-shadow: inset 0 1px 0 rgba(255, 247, 221, .12), 0 8px 22px rgba(59, 7, 8, .28);
}

/* Shared glass-card treatment (both themes). The mockup standard is a
   translucent card + subtle backdrop blur, never a fully solid block.
   The portal's native dashboard cards (stats-bar, registry-strip, card,
   content-card, decision-card, etc.) render on plain --card tokens with
   no blur, which reads as flat/opaque against the mosaic-pattern page
   background. Adding a subtle blur here brings them in line with the
   nav / dropdown / modal / menu-card treatment used everywhere else. */
html[data-la-brand="la-abuela"] .stats-bar,
html[data-la-brand="la-abuela"] .registry-strip,
html[data-la-brand="la-abuela"] .progress-block,
html[data-la-brand="la-abuela"] .card,
html[data-la-brand="la-abuela"] .asset-row,
html[data-la-brand="la-abuela"] .content-card,
html[data-la-brand="la-abuela"] .action-card,
html[data-la-brand="la-abuela"] .access-card,
html[data-la-brand="la-abuela"] .rec-tip,
html[data-la-brand="la-abuela"] .sum-chip,
html[data-la-brand="la-abuela"] .qgs-panel,
html[data-la-brand="la-abuela"] .confirm-card,
html[data-la-brand="la-abuela"] .uitem,
html[data-la-brand="la-abuela"] .kpi-card,
html[data-la-brand="la-abuela"] .metric-card,
html[data-la-brand="la-abuela"] .insight-card,
html[data-la-brand="la-abuela"] .lunch-panel,
html[data-la-brand="la-abuela"] .snapshot-panel,
html[data-la-brand="la-abuela"] .decision-card,
html[data-la-brand="la-abuela"] .strategy-panel,
html[data-la-brand="la-abuela"] .scenario-panel,
html[data-la-brand="la-abuela"] .lp-section {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-la-brand="la-abuela"] body.theme-dark .stats-bar,
html[data-la-brand="la-abuela"] body.theme-dark .registry-strip,
html[data-la-brand="la-abuela"] body.theme-dark .progress-block,
html[data-la-brand="la-abuela"] body.theme-dark .card,
html[data-la-brand="la-abuela"] body.theme-dark .asset-row,
html[data-la-brand="la-abuela"] body.theme-dark .content-card,
html[data-la-brand="la-abuela"] body.theme-dark .action-card,
html[data-la-brand="la-abuela"] body.theme-dark .access-card,
html[data-la-brand="la-abuela"] body.theme-dark .rec-tip,
html[data-la-brand="la-abuela"] body.theme-dark .sum-chip,
html[data-la-brand="la-abuela"] body.theme-dark .qgs-panel,
html[data-la-brand="la-abuela"] body.theme-dark .confirm-card,
html[data-la-brand="la-abuela"] body.theme-dark .menu-card,
html[data-la-brand="la-abuela"] body.theme-dark .res-card,
html[data-la-brand="la-abuela"] body.theme-dark .modal-dialog,
html[data-la-brand="la-abuela"] body.theme-dark .loc-card,
html[data-la-brand="la-abuela"] body.theme-dark .metric-card,
html[data-la-brand="la-abuela"] body.theme-dark .insight-card,
html[data-la-brand="la-abuela"] body.theme-dark .lunch-panel,
html[data-la-brand="la-abuela"] body.theme-dark .snapshot-panel,
html[data-la-brand="la-abuela"] body.theme-dark .decision-card,
html[data-la-brand="la-abuela"] body.theme-dark .strategy-panel,
html[data-la-brand="la-abuela"] body.theme-dark .scenario-panel,
html[data-la-brand="la-abuela"] body.theme-dark .lp-section {
  /* Alpha lowered from .78/.92 to .56/.7 — at the old values the card's
     own background was near-opaque, so backdrop-filter:blur(14px) above
     had almost nothing to show through and the card read as flat/solid
     rather than glass, even though blur was technically applied. */
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 18%), rgba(249, 178, 51, var(--halo-alpha, 0)), transparent 58%) padding-box,
    linear-gradient(rgba(147, 17, 19, .56), rgba(147, 17, 19, .7)) padding-box,
    linear-gradient(135deg, rgba(249, 178, 51, .26), rgba(91, 185, 183, .2), rgba(147, 17, 19, .36)) border-box;
  border-color: transparent;
  box-shadow: 0 16px 38px rgba(59, 7, 8, .28);
}

/* Light-mode equivalent — previously missing, so light-mode dashboard
   cards fell back to the stock --card:.9 token with no dedicated glass
   treatment and read fully solid/opaque against the cream mosaic page. */
html[data-la-brand="la-abuela"] body.theme-light .stats-bar,
html[data-la-brand="la-abuela"] body.theme-light .registry-strip,
html[data-la-brand="la-abuela"] body.theme-light .progress-block,
html[data-la-brand="la-abuela"] body.theme-light .card,
html[data-la-brand="la-abuela"] body.theme-light .asset-row,
html[data-la-brand="la-abuela"] body.theme-light .content-card,
html[data-la-brand="la-abuela"] body.theme-light .action-card,
html[data-la-brand="la-abuela"] body.theme-light .access-card,
html[data-la-brand="la-abuela"] body.theme-light .rec-tip,
html[data-la-brand="la-abuela"] body.theme-light .sum-chip,
html[data-la-brand="la-abuela"] body.theme-light .qgs-panel,
html[data-la-brand="la-abuela"] body.theme-light .confirm-card,
html[data-la-brand="la-abuela"] body.theme-light .menu-card,
html[data-la-brand="la-abuela"] body.theme-light .res-card,
html[data-la-brand="la-abuela"] body.theme-light .modal-dialog,
html[data-la-brand="la-abuela"] body.theme-light .loc-card,
html[data-la-brand="la-abuela"] body.theme-light .metric-card,
html[data-la-brand="la-abuela"] body.theme-light .insight-card,
html[data-la-brand="la-abuela"] body.theme-light .lunch-panel,
html[data-la-brand="la-abuela"] body.theme-light .snapshot-panel,
html[data-la-brand="la-abuela"] body.theme-light .decision-card,
html[data-la-brand="la-abuela"] body.theme-light .strategy-panel,
html[data-la-brand="la-abuela"] body.theme-light .scenario-panel,
html[data-la-brand="la-abuela"] body.theme-light .lp-section {
  background:
    linear-gradient(rgba(255, 250, 230, .58), rgba(255, 248, 223, .68)) padding-box,
    linear-gradient(135deg, rgba(213, 115, 42, .22), rgba(91, 185, 183, .22), rgba(147, 17, 19, .16)) border-box;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(70, 30, 12, .1);
}

html[data-la-brand="la-abuela"] body.theme-dark .stats-bar::before,
html[data-la-brand="la-abuela"] body.theme-dark .registry-strip::before,
html[data-la-brand="la-abuela"] body.theme-dark .card::before,
html[data-la-brand="la-abuela"] body.theme-dark .uitem::before,
html[data-la-brand="la-abuela"] body.theme-dark .res-card::before,
html[data-la-brand="la-abuela"] body.theme-dark .modal-dialog::before {
  background: var(--la-mosaic-strip) center / auto 100% repeat-x;
  opacity: 1;
}

html[data-la-brand="la-abuela"] body.theme-dark .card:hover,
html[data-la-brand="la-abuela"] body.theme-dark .asset-row:hover,
html[data-la-brand="la-abuela"] body.theme-dark .content-card:hover,
html[data-la-brand="la-abuela"] body.theme-dark .registry-strip:hover,
html[data-la-brand="la-abuela"] body.theme-dark .menu-card:hover {
  border-color: rgba(91, 185, 183, .32);
  box-shadow: 0 22px 54px rgba(59, 7, 8, .36);
}

html[data-la-brand="la-abuela"] body.theme-dark .card-foot,
html[data-la-brand="la-abuela"] body.theme-dark .card-head,
html[data-la-brand="la-abuela"] body.theme-dark .caption-wrap,
html[data-la-brand="la-abuela"] body.theme-dark .media-wrap,
html[data-la-brand="la-abuela"] body.theme-dark .action-row,
html[data-la-brand="la-abuela"] body.theme-dark .edit-panel,
html[data-la-brand="la-abuela"] body.theme-dark footer {
  background: rgba(59, 7, 8, .34);
  border-color: rgba(249, 178, 51, .2);
}

html[data-la-brand="la-abuela"] body.theme-dark input,
html[data-la-brand="la-abuela"] body.theme-dark textarea,
html[data-la-brand="la-abuela"] body.theme-dark select,
html[data-la-brand="la-abuela"] body.theme-dark .notes-field,
html[data-la-brand="la-abuela"] body.theme-dark .notes-wrap textarea,
html[data-la-brand="la-abuela"] body.theme-dark .edit-field input,
html[data-la-brand="la-abuela"] body.theme-dark .edit-field textarea,
html[data-la-brand="la-abuela"] body.theme-dark .custom-select-trigger,
html[data-la-brand="la-abuela"] body.theme-dark .loc-trigger {
  background: rgba(59, 7, 8, .92);
  border-color: rgba(249, 178, 51, .28);
  color: #fff7dd;
  box-shadow: inset 0 1px 0 rgba(255, 247, 221, .12);
}

html[data-la-brand="la-abuela"] body.theme-dark input:focus,
html[data-la-brand="la-abuela"] body.theme-dark textarea:focus,
html[data-la-brand="la-abuela"] body.theme-dark select:focus,
html[data-la-brand="la-abuela"] body.theme-dark .custom-select-trigger:hover,
html[data-la-brand="la-abuela"] body.theme-dark .custom-select.open .custom-select-trigger,
html[data-la-brand="la-abuela"] body.theme-dark .loc-trigger:hover,
html[data-la-brand="la-abuela"] body.theme-dark .loc-trigger:focus-visible {
  background: rgba(59, 7, 8, .98);
  border-color: var(--la-teal);
  box-shadow: 0 0 0 3px rgba(91, 185, 183, .14), inset 0 1px 0 rgba(255, 247, 221, .12);
}

html[data-la-brand="la-abuela"] body.theme-dark input::placeholder,
html[data-la-brand="la-abuela"] body.theme-dark textarea::placeholder {
  color: rgba(210, 177, 132, .72);
}

html[data-la-brand="la-abuela"] body.theme-dark .custom-select-menu,
html[data-la-brand="la-abuela"] body.theme-dark .loc-list,
html[data-la-brand="la-abuela"] body.theme-dark .mobile-nav-drawer {
  background:
    linear-gradient(rgba(59, 7, 8, .98), rgba(59, 7, 8, .98)),
    var(--la-mosaic-strip);
  border-color: rgba(249, 178, 51, .28);
  box-shadow: 0 20px 48px rgba(59, 7, 8, .42);
}

html[data-la-brand="la-abuela"] body.theme-dark .badge,
html[data-la-brand="la-abuela"] body.theme-dark .bbadge,
html[data-la-brand="la-abuela"] body.theme-dark .pbadge,
html[data-la-brand="la-abuela"] body.theme-dark .status-pill,
html[data-la-brand="la-abuela"] body.theme-dark .meta-chip,
html[data-la-brand="la-abuela"] body.theme-dark .prog-pill,
html[data-la-brand="la-abuela"] body.theme-dark .spill,
html[data-la-brand="la-abuela"] body.theme-dark .hero-pill,
html[data-la-brand="la-abuela"] body.theme-dark .phase-badge {
  background: rgba(147, 17, 19, .74);
  border-color: rgba(249, 178, 51, .24);
  color: #f4dfb8;
}

html[data-la-brand="la-abuela"] body.theme-dark .badge-owner,
html[data-la-brand="la-abuela"] body.theme-dark .badge-qgs,
html[data-la-brand="la-abuela"] body.theme-dark .badge-cat-social,
html[data-la-brand="la-abuela"] body.theme-dark .badge-cat-website,
html[data-la-brand="la-abuela"] body.theme-dark .spill.act,
html[data-la-brand="la-abuela"] body.theme-dark .sum-chip.approved,
html[data-la-brand="la-abuela"] body.theme-dark .status-pill.approved {
  background: rgba(91, 185, 183, .12);
  border-color: rgba(91, 185, 183, .34);
  color: var(--la-teal);
}

html[data-la-brand="la-abuela"] body.theme-dark .badge-status-ip,
html[data-la-brand="la-abuela"] body.theme-dark .badge-priority-medium,
html[data-la-brand="la-abuela"] body.theme-dark .status-pill.needs-revision,
html[data-la-brand="la-abuela"] body.theme-dark .sum-chip.revision,
html[data-la-brand="la-abuela"] body.theme-dark .pbadge.high,
html[data-la-brand="la-abuela"] body.theme-dark .phase-badge {
  background: rgba(249, 178, 51, .1);
  border-color: rgba(249, 178, 51, .32);
  color: var(--la-gold);
}

html[data-la-brand="la-abuela"] body.theme-dark .sbar,
html[data-la-brand="la-abuela"] body.theme-dark .prog-bar-bg {
  background: rgba(249, 178, 51, .13);
}

html[data-la-brand="la-abuela"] body.theme-dark .sfill,
html[data-la-brand="la-abuela"] body.theme-dark .prog-bar-fill,
html[data-la-brand="la-abuela"] body.theme-dark .ribbon-line,
html[data-la-brand="la-abuela"] body.theme-dark .cat-tabs::after,
html[data-la-brand="la-abuela"] body.theme-dark #prog {
  background: linear-gradient(90deg, var(--la-red), var(--la-orange), var(--la-gold), var(--la-teal));
}

html[data-la-brand="la-abuela"] body.theme-dark #toast,
html[data-la-brand="la-abuela"] body.theme-dark .preview-banner {
  background: rgba(59, 7, 8, .96);
  border-color: rgba(249, 178, 51, .26);
  color: #fff7dd;
}

@media (max-width: 720px) {
  html[data-la-brand="la-abuela"] body.theme-dark .mobile-nav-drawer {
    top: 64px;
  }
}