:root{
  --nav-h: 50px;
  --menu-bottom-gap: 12px;
  --app-bg: #eef1f5;
  --app-surface: #ffffff;
  --app-text: #111827;
  --app-muted: #6b7280;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;
  --surface-border: rgba(17,24,39,.12);
  --field-bg: #ffffff;
  --field-border: #d1d5db;
  --field-text: #111827;
  --field-placeholder: #6b7280;
  --outline-btn-color: #111827;
  --outline-btn-border: rgba(17,24,39,.45);
  --outline-btn-hover-bg: #111827;
  --outline-btn-hover-color: #ffffff;

  --navbar-bg: linear-gradient(90deg, #1f2937 0%, #111827 100%);
  --navbar-border: rgba(255,255,255,.08);
  --nav-link-color: rgba(255,255,255,.72);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #111827;
  --drawer-border: rgba(255,255,255,.08);
  --drawer-item-bg: rgba(255,255,255,.08);
  --drawer-item-border: rgba(255,255,255,.14);
  --drawer-item-active-bg: rgba(255,255,255,.18);
  --drawer-item-active-border: rgba(255,255,255,.3);
  --drawer-link-color: rgba(255,255,255,.92);
  --drawer-link-active-color: #ffffff;

  --bg-pattern-image: none;
  --bg-pattern-size: 360px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: 0;
  --bg-pattern-saturate: .9;
  --bg-pattern-brightness: 1;
}

/* Shared POS navigation pattern for desktop, tablet and Android WebView. */
.pos-back-link{
  align-items:center;
  background:var(--surface-1, var(--app-surface, #fff));
  border:1px solid var(--surface-border, rgba(148,163,184,.28));
  border-radius:10px;
  color:var(--app-text, #111827);
  display:inline-flex;
  gap:.45rem;
  min-height:2.5rem;
  padding:.45rem .7rem;
  text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
  margin-bottom:.75rem;
}
.pos-back-link strong{ color:var(--app-muted, #6b7280); font-size:.82rem; font-weight:600; margin-left:.15rem; }
.pos-back-link:hover{ background:var(--surface-2, #f8fafc); border-color:var(--app-muted, #6b7280); color:var(--app-text, #111827); }
.pos-back-link:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--app-text, #111827) 22%, transparent); outline:0; }
.pos-back-link:active{ transform:translateY(1px); }
@media (max-width: 767px){
  .pos-back-link{ min-height:2.75rem; padding:.6rem .8rem; }
  .pos-back-link strong{ font-size:.78rem; }
}
@media (prefers-reduced-motion: reduce){ .pos-back-link{ transition:none; } }

.menu-wrap > .pos-back-link,
.inv-wrap > .pos-back-link,
.reports-container > .pos-back-link,
.corte-container > .pos-back-link,
.printer-page > .pos-back-link{ width:max-content; }

@media (max-width: 767px){
  .menu-wrap > .pos-back-link,
  .inv-wrap > .pos-back-link,
  .reports-container > .pos-back-link,
  .corte-container > .pos-back-link,
  .printer-page > .pos-back-link{ max-width:100%; }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape){
  .pos-back-link{ min-height:2.25rem; margin-bottom:.45rem; padding:.35rem .6rem; }
  .pos-back-link strong{ font-size:.72rem; }
}
body[data-theme="noche"]{
  --app-bg: #0b1220;
  --app-surface: #0f172a;
  --app-text: #e5e7eb;
  --app-muted: #94a3b8;
  --surface-1: #111827;
  --surface-2: #0b1325;
  --surface-border: rgba(148,163,184,.28);
  --field-bg: #0b1325;
  --field-border: #334155;
  --field-text: #e5e7eb;
  --field-placeholder: #94a3b8;
  --outline-btn-color: #dbe4f0;
  --outline-btn-border: rgba(148,163,184,.58);
  --outline-btn-hover-bg: #dbe4f0;
  --outline-btn-hover-color: #0f172a;

  --navbar-bg: linear-gradient(90deg, #0f172a 0%, #020617 100%);
  --navbar-border: rgba(148,163,184,.25);
  --nav-link-color: rgba(226,232,240,.78);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #f8fafc;

  --drawer-bg: #020617;
  --drawer-border: rgba(148,163,184,.35);
  --drawer-item-bg: rgba(148,163,184,.09);
  --drawer-item-border: rgba(148,163,184,.28);
  --drawer-item-active-bg: rgba(148,163,184,.18);
  --drawer-item-active-border: rgba(203,213,225,.45);
  --drawer-link-color: #e2e8f0;
  --drawer-link-active-color: #ffffff;
}
body[data-theme="luxury"]{
  --app-bg: #0b0b0b;
  --app-surface: #121212;
  --app-text: #f5e8c6;
  --app-muted: #c1a777;
  --surface-1: #17130f;
  --surface-2: #0f0d0a;
  --surface-border: rgba(193,167,119,.34);
  --field-bg: #120f0c;
  --field-border: #7a6337;
  --field-text: #f5e8c6;
  --field-placeholder: #c1a777;
  --outline-btn-color: #f3deb2;
  --outline-btn-border: rgba(193,167,119,.72);
  --outline-btn-hover-bg: #f3deb2;
  --outline-btn-hover-color: #14110d;

  --navbar-bg: linear-gradient(90deg, #1a1711 0%, #090807 100%);
  --navbar-border: rgba(193,167,119,.4);
  --nav-link-color: rgba(238,211,151,.82);
  --nav-link-active-color: #ffe0a3;
  --nav-brand-color: #ffe0a3;

  --drawer-bg: #090807;
  --drawer-border: rgba(193,167,119,.42);
  --drawer-item-bg: rgba(193,167,119,.10);
  --drawer-item-border: rgba(193,167,119,.35);
  --drawer-item-active-bg: rgba(193,167,119,.20);
  --drawer-item-active-border: rgba(222,192,131,.6);
  --drawer-link-color: #f3deb2;
  --drawer-link-active-color: #ffe4ad;
}
body[data-theme="pinky"]{
  --app-bg: #f7ebff;
  --app-surface: #fff4fd;
  --app-text: #3d1b4f;
  --app-muted: #8f63ac;
  --surface-1: #fffaff;
  --surface-2: #f6e9ff;
  --surface-border: rgba(170,91,216,.34);
  --field-bg: #fff9ff;
  --field-border: #d8b9ee;
  --field-text: #3d1b4f;
  --field-placeholder: #9d74ba;
  --outline-btn-color: #7b2cbf;
  --outline-btn-border: rgba(123,44,191,.55);
  --outline-btn-hover-bg: #7b2cbf;
  --outline-btn-hover-color: #ffffff;

  --navbar-bg: linear-gradient(90deg, #be4bdb 0%, #7b2cbf 100%);
  --navbar-border: rgba(255,255,255,.22);
  --nav-link-color: rgba(255,255,255,.9);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #6b21a8;
  --drawer-border: rgba(255,255,255,.24);
  --drawer-item-bg: rgba(255,255,255,.14);
  --drawer-item-border: rgba(255,255,255,.26);
  --drawer-item-active-bg: rgba(255,255,255,.22);
  --drawer-item-active-border: rgba(255,255,255,.4);
  --drawer-link-color: #fdf4ff;
  --drawer-link-active-color: #ffffff;
}
body[data-theme="shiny"]{
  --app-bg: #edf2f7;
  --app-surface: #f8fbff;
  --app-text: #111827;
  --app-muted: #64748b;
  --surface-1: #ffffff;
  --surface-2: #f3f7fc;
  --surface-border: rgba(179,191,208,.58);
  --field-bg: #ffffff;
  --field-border: #b9c7d8;
  --field-text: #111827;
  --field-placeholder: #64748b;
  --outline-btn-color: #334155;
  --outline-btn-border: rgba(100,116,139,.62);
  --outline-btn-hover-bg: #334155;
  --outline-btn-hover-color: #f8fafc;

  --navbar-bg: linear-gradient(90deg, #4b5563 0%, #1f2937 100%);
  --navbar-border: rgba(226,232,240,.46);
  --nav-link-color: rgba(241,245,249,.95);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #1f2937;
  --drawer-border: rgba(226,232,240,.36);
  --drawer-item-bg: rgba(226,232,240,.14);
  --drawer-item-border: rgba(226,232,240,.3);
  --drawer-item-active-bg: rgba(226,232,240,.24);
  --drawer-item-active-border: rgba(241,245,249,.46);
  --drawer-link-color: #f8fafc;
  --drawer-link-active-color: #ffffff;
  --shiny-glow: rgba(226,232,240,.92);
  --shiny-glow-soft: rgba(148,163,184,.4);
}
body[data-theme="aqua"]{
  --app-bg: #e8f8fb;
  --app-surface: #f4fdff;
  --app-text: #0f2f35;
  --app-muted: #4b7d87;
  --surface-1: #ffffff;
  --surface-2: #eaf8fc;
  --surface-border: rgba(71,157,173,.34);
  --field-bg: #ffffff;
  --field-border: #a9d9e3;
  --field-text: #0f2f35;
  --field-placeholder: #588d96;
  --outline-btn-color: #0f5f6c;
  --outline-btn-border: rgba(15,95,108,.45);
  --outline-btn-hover-bg: #0f5f6c;
  --outline-btn-hover-color: #ffffff;

  --navbar-bg: linear-gradient(90deg, #2ba8bf 0%, #0f5f6c 100%);
  --navbar-border: rgba(255,255,255,.24);
  --nav-link-color: rgba(255,255,255,.9);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #0f5f6c;
  --drawer-border: rgba(255,255,255,.26);
  --drawer-item-bg: rgba(255,255,255,.14);
  --drawer-item-border: rgba(255,255,255,.28);
  --drawer-item-active-bg: rgba(255,255,255,.22);
  --drawer-item-active-border: rgba(255,255,255,.42);
  --drawer-link-color: #ecfeff;
  --drawer-link-active-color: #ffffff;
}
body[data-theme="girly"]{
  --app-bg: #fff3f7;
  --app-surface: #fff8fb;
  --app-text: #5b2437;
  --app-muted: #a85d77;
  --surface-1: #ffffff;
  --surface-2: #ffeef5;
  --surface-border: rgba(236,140,171,.36);
  --field-bg: #ffffff;
  --field-border: #f2b7cb;
  --field-text: #5b2437;
  --field-placeholder: #b76e88;
  --outline-btn-color: #b7446d;
  --outline-btn-border: rgba(183,68,109,.48);
  --outline-btn-hover-bg: #d45783;
  --outline-btn-hover-color: #ffffff;

  --navbar-bg: linear-gradient(90deg, #ff98bb 0%, #f06292 100%);
  --navbar-border: rgba(255,255,255,.3);
  --nav-link-color: rgba(255,255,255,.94);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #f06292;
  --drawer-border: rgba(255,255,255,.28);
  --drawer-item-bg: rgba(255,255,255,.16);
  --drawer-item-border: rgba(255,255,255,.3);
  --drawer-item-active-bg: rgba(255,255,255,.26);
  --drawer-item-active-border: rgba(255,255,255,.46);
  --drawer-link-color: #fff7fb;
  --drawer-link-active-color: #ffffff;
}
body[data-theme="ghostgirl"]{
  --app-bg: #ff98bb;
  --app-surface: #e55f94;
  --app-text: #ffffff;
  --app-muted: #ffe3f2;
  --surface-1: #9f1d62;
  --surface-2: #84174f;
  --surface-border: rgba(255,198,226,.46);
  --field-bg: #8a1a55;
  --field-border: #ff9ccc;
  --field-text: #ffffff;
  --field-placeholder: #ffd4ea;
  --outline-btn-color: #fff0f8;
  --outline-btn-border: rgba(255,188,224,.72);
  --outline-btn-hover-bg: #ff7ab6;
  --outline-btn-hover-color: #5e0f3b;

  --navbar-bg: linear-gradient(90deg, #ff98bb 0%, #f06292 100%);
  --navbar-border: rgba(255,255,255,.34);
  --nav-link-color: rgba(255,245,252,.96);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #d64b86;
  --drawer-border: rgba(255,255,255,.34);
  --drawer-item-bg: rgba(255,255,255,.18);
  --drawer-item-border: rgba(255,255,255,.3);
  --drawer-item-active-bg: rgba(255,255,255,.28);
  --drawer-item-active-border: rgba(255,255,255,.5);
  --drawer-link-color: #fff7fb;
  --drawer-link-active-color: #ffffff;

  --ghostgirl-upgrade-gradient: linear-gradient(
    115deg,
    #ffd1ea,
    #ff6db8,
    #ff2f95,
    #ffd1ea
  );
  --ghostgirl-upgrade-aura-gradient: linear-gradient(
    120deg,
    rgba(255,209,234,.34),
    rgba(255,109,184,.28),
    rgba(255,47,149,.28),
    rgba(255,209,234,.34)
  );
  --ghostgirl-upgrade-inner-bg: linear-gradient(145deg, #6f123f, #b4256b);
  --ghostgirl-upgrade-border-size: 280% 280%;
  --ghostgirl-glow-color: rgba(255,109,184,.56);
  --ghostgirl-glow-soft: rgba(255,209,234,.24);
}
body[data-theme="scarlet"]{
  --app-bg: #fff1f2;
  --app-surface: #fff7f8;
  --app-text: #4a0d13;
  --app-muted: #8c3b44;
  --surface-1: #ffffff;
  --surface-2: #ffe9ec;
  --surface-border: rgba(204,35,53,.34);
  --field-bg: #ffffff;
  --field-border: #efb3ba;
  --field-text: #4a0d13;
  --field-placeholder: #b06068;
  --outline-btn-color: #b42332;
  --outline-btn-border: rgba(180,35,50,.52);
  --outline-btn-hover-bg: #b42332;
  --outline-btn-hover-color: #ffffff;

  --navbar-bg: linear-gradient(90deg, #cc2335 0%, #86111f 100%);
  --navbar-border: rgba(255,255,255,.28);
  --nav-link-color: rgba(255,245,246,.92);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #86111f;
  --drawer-border: rgba(255,255,255,.28);
  --drawer-item-bg: rgba(255,255,255,.14);
  --drawer-item-border: rgba(255,255,255,.3);
  --drawer-item-active-bg: rgba(255,255,255,.24);
  --drawer-item-active-border: rgba(255,255,255,.44);
  --drawer-link-color: #fff6f7;
  --drawer-link-active-color: #ffffff;
}
body[data-theme="glow"]{
  --app-bg: #070b16;
  --app-surface: #0b1224;
  --app-text: #e8f6ff;
  --app-muted: #99bdd1;
  --surface-1: #101a31;
  --surface-2: #0b152c;
  --surface-border: rgba(74,182,255,.38);
  --field-bg: #0a152c;
  --field-border: #2f6ea7;
  --field-text: #e8f6ff;
  --field-placeholder: #8eb4cb;
  --outline-btn-color: #b2e8ff;
  --outline-btn-border: rgba(74,182,255,.7);
  --outline-btn-hover-bg: #4ab6ff;
  --outline-btn-hover-color: #06101d;

  --navbar-bg: linear-gradient(90deg, #0a1730 0%, #061327 100%);
  --navbar-border: rgba(74,182,255,.42);
  --nav-link-color: rgba(207,236,255,.92);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;

  --drawer-bg: #061327;
  --drawer-border: rgba(74,182,255,.42);
  --drawer-item-bg: rgba(74,182,255,.16);
  --drawer-item-border: rgba(74,182,255,.32);
  --drawer-item-active-bg: rgba(74,182,255,.24);
  --drawer-item-active-border: rgba(160,228,255,.55);
  --drawer-link-color: #d8f2ff;
  --drawer-link-active-color: #ffffff;
  --glow-color: rgba(74,182,255,.75);
  --glow-soft: rgba(120,212,255,.28);
  --glow-accent-cyan: #00f5ff;
  --glow-accent-indigo: #4f46e5;
  --glow-accent-fuchsia: #ff00d4;
  --glow-upgrade-gradient: linear-gradient(
    115deg,
    var(--glow-accent-cyan),
    var(--glow-accent-indigo),
    var(--glow-accent-fuchsia),
    var(--glow-accent-cyan)
  );
  --glow-upgrade-aura-gradient: linear-gradient(
    120deg,
    rgba(0,245,255,.28),
    rgba(79,70,229,.22),
    rgba(255,0,212,.25),
    rgba(0,245,255,.28)
  );
  --glow-upgrade-inner-bg: linear-gradient(145deg, #0b1124, #111827);
  --glow-upgrade-border-size: 280% 280%;
}
@media (max-width: 1199.98px){
  :root{ --nav-h: 56px; }
}

/* Navbar fija */
.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
}

html, body{
  height: 100%;
  margin: 0;
  background: var(--app-bg);
  overflow-x: hidden;
  color: var(--app-text);
}

main.app-content{
  background: var(--app-surface);
  color: var(--app-text);
  padding-top: calc(var(--nav-h) + 14px);
  overflow-x: hidden;
  height: 101%;
  position: relative;
}

main.app-content::before{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h);
  bottom: 0;
  background-image: var(--bg-pattern-image);
  background-size: var(--bg-pattern-size);
  background-repeat: var(--bg-pattern-repeat);
  background-position: var(--bg-pattern-position);
  opacity: var(--bg-pattern-opacity);
  filter: saturate(var(--bg-pattern-saturate)) brightness(var(--bg-pattern-brightness));
  pointer-events: none;
  z-index: 0;
}

/* Evita sobreescribir el stacking/positioning nativo de Bootstrap en modales. */
main.app-content > :not(.modal):not(.modal-backdrop){
  position: relative;
  z-index: 1;
}

body[data-bg-pattern="none"]{
  --bg-pattern-image: none;
  --bg-pattern-opacity: 0;
}
body[data-bg-pattern="kitchen_tools_soft"]{
  --bg-pattern-image:
    repeating-linear-gradient(
      45deg,
      rgba(55, 65, 81, .10) 0 3px,
      transparent 3px 18px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(148, 163, 184, .10) 0 3px,
      transparent 3px 18px
    );
  --bg-pattern-size: 340px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .25;
  --bg-pattern-saturate: .86;
}
body[data-bg-pattern="kitchen_vintage_set"]{
  --bg-pattern-image:
    repeating-radial-gradient(
      circle at 22% 22%,
      rgba(120, 53, 15, .12) 0 2px,
      transparent 2px 16px
    ),
    repeating-radial-gradient(
      circle at 78% 72%,
      rgba(146, 64, 14, .10) 0 2px,
      transparent 2px 20px
    );
  --bg-pattern-size: 360px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .88;
}
body[data-bg-pattern="kitchen_utensils_shapes"]{
  --bg-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='180'%20viewBox='0%200%20240%20180'%3E%3Cg%20fill='none'%20stroke='%230f766e'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-opacity='0.34'%3E%3Cpath%20d='M26%2028h28M40%2028v40M34%2040h12M34%2054h12'/%3E%3Cpath%20d='M94%2024c10%200%2018%208%2018%2018s-8%2018-18%2018-18-8-18-18%208-18%2018-18zm0%2036v28'/%3E%3Cpath%20d='M152%2022v28M152%2050v40M144%2036h16M140%2028h24'/%3E%3Cpath%20d='M198%2024c0%2013-10%2023-23%2023M198%2024v60M175%2047v37'/%3E%3Cpath%20d='M36%20112h30M51%20112v42M45%20126h12M45%20140h12'/%3E%3Cpath%20d='M104%20108c10%200%2018%208%2018%2018s-8%2018-18%2018-18-8-18-18%208-18%2018-18zm0%2036v28'/%3E%3Cpath%20d='M168%20106v30M168%20136v34M160%20118h16M156%20110h24'/%3E%3Cpath%20d='M216%20108c0%2013-10%2023-23%2023M216%20108v60M193%20131v37'/%3E%3C/g%3E%3C/svg%3E");
  --bg-pattern-size: 360px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .28;
  --bg-pattern-saturate: .9;
}
body[data-bg-pattern="strawberry_textures"]{
  --bg-pattern-image:
    radial-gradient(circle at 20% 20%, rgba(225, 29, 72, .12) 0 12%, transparent 12% 100%),
    radial-gradient(circle at 70% 35%, rgba(219, 39, 119, .10) 0 10%, transparent 10% 100%),
    radial-gradient(circle at 45% 75%, rgba(190, 24, 93, .12) 0 11%, transparent 11% 100%);
  --bg-pattern-size: 300px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .22;
  --bg-pattern-saturate: .92;
}
body[data-bg-pattern="herbs_lineart"]{
  --bg-pattern-image:
    repeating-linear-gradient(
      120deg,
      rgba(21, 128, 61, .10) 0 2px,
      transparent 2px 24px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(22, 163, 74, .08) 0 2px,
      transparent 2px 24px
    );
  --bg-pattern-size: 330px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .23;
  --bg-pattern-saturate: .84;
}
body[data-bg-pattern="hearts"]{
  --bg-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3E%3Cg%20fill='%23e11d48'%20fill-opacity='0.42'%3E%3Cpath%20d='M36%2030c-5-8-17-7-21%201-3%207%201%2015%207%2020l14%2012%2014-12c6-5%2010-13%207-20-4-8-16-9-21-1z'/%3E%3Cpath%20d='M88%2072c-4-6-13-5-16%201-2%206%201%2012%205%2016l11%209%2011-9c5-4%208-10%205-16-3-6-12-7-16-1z'/%3E%3C/g%3E%3C/svg%3E");
  --bg-pattern-size: 240px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .96;
}
body[data-bg-pattern="stars"]{
  --bg-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='%23f59e0b'%20fill-opacity='0.48'%3E%3Cpolygon%20points='24,14%2030,28%2045,28%2033,37%2038,51%2024,42%2010,51%2015,37%203,28%2018,28'/%3E%3Cpolygon%20points='100,34%20106,48%20121,48%20109,57%20114,71%20100,62%2086,71%2091,57%2079,48%2094,48'/%3E%3Cpolygon%20points='56,78%2062,92%2077,92%2065,101%2070,115%2056,106%2042,115%2047,101%2035,92%2050,92'/%3E%3C/g%3E%3Cg%20fill='%23fbbf24'%20fill-opacity='0.35'%3E%3Ccircle%20cx='118'%20cy='96'%20r='4'/%3E%3Ccircle%20cx='20'%20cy='102'%20r='3'/%3E%3C/g%3E%3C/svg%3E");
  --bg-pattern-size: 290px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .26;
  --bg-pattern-saturate: 1;
}
body[data-bg-pattern="chef_hats"]{
  --bg-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='120'%20viewBox='0%200%20170%20120'%3E%3Cg%20fill='%230f766e'%20fill-opacity='0.36'%3E%3Cpath%20d='M24%2058h56c4%200%208%203%208%208v16H16V66c0-5%204-8%208-8z'/%3E%3Cpath%20d='M20%2058c-8%200-14-6-14-13s6-13%2014-13c4%200%208%202%2010%204%202-7%209-12%2018-12%209%200%2016%205%2018%2012%203-2%206-4%2010-4%208%200%2014%206%2014%2013s-6%2013-14%2013z'/%3E%3C/g%3E%3Cg%20transform='translate(82%208)'%20fill='%2314b8a6'%20fill-opacity='0.30'%3E%3Cpath%20d='M24%2058h56c4%200%208%203%208%208v16H16V66c0-5%204-8%208-8z'/%3E%3Cpath%20d='M20%2058c-8%200-14-6-14-13s6-13%2014-13c4%200%208%202%2010%204%202-7%209-12%2018-12%209%200%2016%205%2018%2012%203-2%206-4%2010-4%208%200%2014%206%2014%2013s-6%2013-14%2013z'/%3E%3C/g%3E%3C/svg%3E");
  --bg-pattern-size: 360px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .92;
}
body[data-bg-pattern="snowflakes"]{
  --bg-pattern-image:
    radial-gradient(circle at 18% 24%, rgba(219, 234, 254, .56) 0 4px, transparent 4px 100%),
    radial-gradient(circle at 74% 36%, rgba(191, 219, 254, .52) 0 3px, transparent 3px 100%),
    radial-gradient(circle at 48% 78%, rgba(147, 197, 253, .5) 0 3px, transparent 3px 100%),
    repeating-linear-gradient(
      60deg,
      rgba(219, 234, 254, .16) 0 1px,
      transparent 1px 22px
    );
  --bg-pattern-size: 260px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .3;
  --bg-pattern-saturate: .95;
}
body[data-bg-pattern="rectangles"]{
  --bg-pattern-image:
    repeating-linear-gradient(
      90deg,
      rgba(30, 64, 175, .2) 0 14px,
      transparent 14px 34px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(59, 130, 246, .2) 0 10px,
      transparent 10px 30px
    );
  --bg-pattern-size: 260px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .9;
}
body[data-bg-pattern="triangles"]{
  --bg-pattern-image:
    repeating-conic-gradient(
      from 30deg at 25% 25%,
      rgba(236, 72, 153, .24) 0 14deg,
      transparent 14deg 60deg
    ),
    repeating-conic-gradient(
      from -20deg at 70% 65%,
      rgba(244, 114, 182, .2) 0 14deg,
      transparent 14deg 60deg
    );
  --bg-pattern-size: 300px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .92;
}
body[data-bg-pattern="leaves"]{
  --bg-pattern-image:
    radial-gradient(ellipse at 25% 30%, rgba(22, 163, 74, .22) 0 14%, transparent 14% 100%),
    radial-gradient(ellipse at 70% 62%, rgba(34, 197, 94, .2) 0 12%, transparent 12% 100%),
    repeating-linear-gradient(
      135deg,
      rgba(21, 128, 61, .14) 0 2px,
      transparent 2px 24px
    );
  --bg-pattern-size: 320px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .86;
}
body[data-bg-pattern="snail_spirals"]{
  --bg-pattern-image:
    repeating-radial-gradient(
      circle at 24% 28%,
      rgba(120, 53, 15, .22) 0 2px,
      transparent 2px 8px,
      rgba(120, 53, 15, .14) 8px 10px,
      transparent 10px 18px
    ),
    repeating-radial-gradient(
      circle at 72% 68%,
      rgba(146, 64, 14, .2) 0 2px,
      transparent 2px 7px,
      rgba(146, 64, 14, .14) 7px 9px,
      transparent 9px 16px
    );
  --bg-pattern-size: 280px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .26;
  --bg-pattern-saturate: .9;
}
body[data-bg-pattern="paw_prints"]{
  --bg-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='140'%20viewBox='0%200%20180%20140'%3E%3Cg%20fill='%237c3aed'%20fill-opacity='0.34'%3E%3Cellipse%20cx='44'%20cy='78'%20rx='14'%20ry='12'/%3E%3Ccircle%20cx='30'%20cy='60'%20r='5'/%3E%3Ccircle%20cx='41'%20cy='54'%20r='5'/%3E%3Ccircle%20cx='52'%20cy='54'%20r='5'/%3E%3Ccircle%20cx='61'%20cy='60'%20r='5'/%3E%3C/g%3E%3Cg%20fill='%236366f1'%20fill-opacity='0.28'%20transform='translate(82%2018)%20rotate(-10)'%3E%3Cellipse%20cx='44'%20cy='78'%20rx='14'%20ry='12'/%3E%3Ccircle%20cx='30'%20cy='60'%20r='5'/%3E%3Ccircle%20cx='41'%20cy='54'%20r='5'/%3E%3Ccircle%20cx='52'%20cy='54'%20r='5'/%3E%3Ccircle%20cx='61'%20cy='60'%20r='5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-pattern-size: 320px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .96;
}
body[data-bg-pattern="waves"]{
  --bg-pattern-image:
    repeating-radial-gradient(
      circle at 0 50%,
      rgba(14, 116, 144, .2) 0 10px,
      transparent 10px 22px
    ),
    repeating-radial-gradient(
      circle at 100% 50%,
      rgba(6, 182, 212, .18) 0 9px,
      transparent 9px 21px
    );
  --bg-pattern-size: 320px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .23;
  --bg-pattern-saturate: .9;
}
body[data-bg-pattern="polka_dots"]{
  --bg-pattern-image:
    radial-gradient(circle, rgba(190, 24, 93, .26) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(236, 72, 153, .2) 0 5px, transparent 6px);
  --bg-pattern-size: 42px 42px, 42px 42px;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: 0 0, 21px 21px;
  --bg-pattern-opacity: .23;
  --bg-pattern-saturate: .94;
}
body[data-bg-pattern="confetti"]{
  --bg-pattern-image:
    repeating-linear-gradient(
      25deg,
      rgba(234, 88, 12, .24) 0 6px,
      transparent 6px 26px
    ),
    repeating-linear-gradient(
      -35deg,
      rgba(16, 185, 129, .2) 0 5px,
      transparent 5px 24px
    ),
    repeating-linear-gradient(
      75deg,
      rgba(59, 130, 246, .18) 0 4px,
      transparent 4px 22px
    );
  --bg-pattern-size: 240px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .26;
  --bg-pattern-saturate: .98;
}
body[data-bg-pattern="honeycomb"]{
  --bg-pattern-image:
    linear-gradient(30deg, rgba(161, 98, 7, .2) 12%, transparent 12.5%, transparent 87%, rgba(161, 98, 7, .2) 87.5%, rgba(161, 98, 7, .2)),
    linear-gradient(150deg, rgba(161, 98, 7, .2) 12%, transparent 12.5%, transparent 87%, rgba(161, 98, 7, .2) 87.5%, rgba(161, 98, 7, .2)),
    linear-gradient(90deg, rgba(202, 138, 4, .16) 2%, transparent 2.5%, transparent 97%, rgba(202, 138, 4, .16) 97.5%, rgba(202, 138, 4, .16));
  --bg-pattern-size: 52px 90px;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: 0 0;
  --bg-pattern-opacity: .24;
  --bg-pattern-saturate: .9;
}
body[data-bg-pattern="constellations"]{
  --bg-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='200'%20viewBox='0%200%20260%20200'%3E%3Crect%20width='260'%20height='200'%20fill='none'/%3E%3Cg%20stroke='%2360a5fa'%20stroke-opacity='0.52'%20stroke-width='1.6'%3E%3Cline%20x1='30'%20y1='40'%20x2='86'%20y2='30'/%3E%3Cline%20x1='86'%20y1='30'%20x2='120'%20y2='72'/%3E%3Cline%20x1='160'%20y1='42'%20x2='202'%20y2='68'/%3E%3Cline%20x1='202'%20y1='68'%20x2='234'%20y2='38'/%3E%3Cline%20x1='64'%20y1='142'%20x2='106'%20y2='124'/%3E%3Cline%20x1='106'%20y1='124'%20x2='148'%20y2='152'/%3E%3Cline%20x1='148'%20y1='152'%20x2='188'%20y2='136'/%3E%3C/g%3E%3Cg%20fill='%23dbeafe'%20fill-opacity='0.96'%3E%3Ccircle%20cx='30'%20cy='40'%20r='2.9'/%3E%3Ccircle%20cx='86'%20cy='30'%20r='3.1'/%3E%3Ccircle%20cx='120'%20cy='72'%20r='2.6'/%3E%3Ccircle%20cx='160'%20cy='42'%20r='2.9'/%3E%3Ccircle%20cx='202'%20cy='68'%20r='2.8'/%3E%3Ccircle%20cx='234'%20cy='38'%20r='3'/%3E%3Ccircle%20cx='64'%20cy='142'%20r='2.8'/%3E%3Ccircle%20cx='106'%20cy='124'%20r='2.7'/%3E%3Ccircle%20cx='148'%20cy='152'%20r='2.9'/%3E%3Ccircle%20cx='188'%20cy='136'%20r='2.7'/%3E%3Ccircle%20cx='218'%20cy='146'%20r='2.2'/%3E%3Ccircle%20cx='38'%20cy='170'%20r='1.9'/%3E%3C/g%3E%3Cg%20fill='%2393c5fd'%20fill-opacity='0.55'%3E%3Ccircle%20cx='18'%20cy='88'%20r='1.3'/%3E%3Ccircle%20cx='246'%20cy='92'%20r='1.4'/%3E%3Ccircle%20cx='132'%20cy='18'%20r='1.2'/%3E%3Ccircle%20cx='144'%20cy='184'%20r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --bg-pattern-size: 360px auto;
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: center top;
  --bg-pattern-opacity: .46;
  --bg-pattern-saturate: 1.08;
  --bg-pattern-brightness: 1.08;
}

body[data-theme="noche"],
body[data-theme="luxury"],
body[data-theme="glow"],
body[data-theme="ghostgirl"]{
  color-scheme: dark;
  --bs-body-bg: var(--app-surface);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--surface-border);
  --bs-card-bg: var(--surface-1);
  --bs-card-color: var(--app-text);
  --bs-modal-bg: var(--surface-1);
  --bs-modal-color: var(--app-text);
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-color: var(--app-text);
  --bs-list-group-bg: var(--surface-1);
  --bs-list-group-color: var(--app-text);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--surface-border);
}
body[data-theme="pinky"],
body[data-theme="shiny"],
body[data-theme="aqua"],
body[data-theme="girly"],
body[data-theme="scarlet"]{
  --bs-body-bg: var(--app-surface);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--surface-border);
  --bs-card-bg: var(--surface-1);
  --bs-card-color: var(--app-text);
  --bs-modal-bg: var(--surface-1);
  --bs-modal-color: var(--app-text);
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-color: var(--app-text);
  --bs-list-group-bg: var(--surface-1);
  --bs-list-group-color: var(--app-text);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--surface-border);
}

body[data-theme="noche"] .text-muted,
body[data-theme="luxury"] .text-muted,
body[data-theme="pinky"] .text-muted,
body[data-theme="shiny"] .text-muted,
body[data-theme="aqua"] .text-muted,
body[data-theme="girly"] .text-muted,
body[data-theme="ghostgirl"] .text-muted,
body[data-theme="scarlet"] .text-muted,
body[data-theme="glow"] .text-muted{
  color: var(--app-muted) !important;
}

body[data-theme="noche"] .card,
body[data-theme="noche"] .modal-content,
body[data-theme="noche"] .dropdown-menu,
body[data-theme="noche"] .list-group-item,
body[data-theme="luxury"] .card,
body[data-theme="luxury"] .modal-content,
body[data-theme="luxury"] .dropdown-menu,
body[data-theme="luxury"] .list-group-item,
body[data-theme="pinky"] .card,
body[data-theme="pinky"] .modal-content,
body[data-theme="pinky"] .dropdown-menu,
body[data-theme="pinky"] .list-group-item,
body[data-theme="shiny"] .card,
body[data-theme="shiny"] .modal-content,
body[data-theme="shiny"] .dropdown-menu,
body[data-theme="shiny"] .list-group-item,
body[data-theme="aqua"] .card,
body[data-theme="aqua"] .modal-content,
body[data-theme="aqua"] .dropdown-menu,
body[data-theme="aqua"] .list-group-item,
body[data-theme="girly"] .card,
body[data-theme="girly"] .modal-content,
body[data-theme="girly"] .dropdown-menu,
body[data-theme="girly"] .list-group-item,
body[data-theme="ghostgirl"] .card,
body[data-theme="ghostgirl"] .modal-content,
body[data-theme="ghostgirl"] .dropdown-menu,
body[data-theme="ghostgirl"] .list-group-item,
body[data-theme="scarlet"] .card,
body[data-theme="scarlet"] .modal-content,
body[data-theme="scarlet"] .dropdown-menu,
body[data-theme="scarlet"] .list-group-item,
body[data-theme="glow"] .card,
body[data-theme="glow"] .modal-content,
body[data-theme="glow"] .dropdown-menu,
body[data-theme="glow"] .list-group-item{
  background: var(--surface-1);
  color: var(--app-text);
  border-color: var(--surface-border);
}

body[data-theme] .card-header{
  background: var(--surface-2);
  color: var(--app-text);
  border-color: var(--surface-border);
}

body[data-theme] .table{
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--surface-border);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--app-text);
  --bs-table-hover-color: var(--app-text);
}
body[data-theme] .table > :not(caption) > * > *{
  color: var(--app-text);
  border-bottom-color: var(--surface-border);
}
body[data-theme] .table thead th{
  background: var(--surface-2);
  color: var(--app-text);
}

body[data-theme] .badge.bg-light{
  background: var(--surface-2) !important;
  color: var(--app-text) !important;
  border-color: var(--surface-border) !important;
}

body[data-theme] .alert-success{
  background: color-mix(in srgb, #198754 16%, var(--surface-1));
  color: var(--app-text);
  border-color: color-mix(in srgb, #198754 40%, var(--surface-border));
}
body[data-theme] .alert-warning{
  background: color-mix(in srgb, #ffc107 17%, var(--surface-1));
  color: var(--app-text);
  border-color: color-mix(in srgb, #ffc107 45%, var(--surface-border));
}

body[data-theme="noche"] .form-control,
body[data-theme="noche"] .form-select,
body[data-theme="noche"] .input-group-text,
body[data-theme="luxury"] .form-control,
body[data-theme="luxury"] .form-select,
body[data-theme="luxury"] .input-group-text,
body[data-theme="pinky"] .form-control,
body[data-theme="pinky"] .form-select,
body[data-theme="pinky"] .input-group-text,
body[data-theme="shiny"] .form-control,
body[data-theme="shiny"] .form-select,
body[data-theme="shiny"] .input-group-text,
body[data-theme="aqua"] .form-control,
body[data-theme="aqua"] .form-select,
body[data-theme="aqua"] .input-group-text,
body[data-theme="girly"] .form-control,
body[data-theme="girly"] .form-select,
body[data-theme="girly"] .input-group-text,
body[data-theme="ghostgirl"] .form-control,
body[data-theme="ghostgirl"] .form-select,
body[data-theme="ghostgirl"] .input-group-text,
body[data-theme="scarlet"] .form-control,
body[data-theme="scarlet"] .form-select,
body[data-theme="scarlet"] .input-group-text,
body[data-theme="glow"] .form-control,
body[data-theme="glow"] .form-select,
body[data-theme="glow"] .input-group-text{
  background: var(--field-bg);
  color: var(--field-text);
  border-color: var(--field-border);
}

body[data-theme="noche"] .form-control::placeholder,
body[data-theme="luxury"] .form-control::placeholder,
body[data-theme="pinky"] .form-control::placeholder,
body[data-theme="shiny"] .form-control::placeholder,
body[data-theme="aqua"] .form-control::placeholder,
body[data-theme="girly"] .form-control::placeholder,
body[data-theme="ghostgirl"] .form-control::placeholder,
body[data-theme="scarlet"] .form-control::placeholder,
body[data-theme="glow"] .form-control::placeholder{
  color: var(--field-placeholder);
  opacity: 1;
}

body[data-theme="noche"] .btn-outline-dark,
body[data-theme="luxury"] .btn-outline-dark,
body[data-theme="pinky"] .btn-outline-dark,
body[data-theme="shiny"] .btn-outline-dark,
body[data-theme="aqua"] .btn-outline-dark,
body[data-theme="girly"] .btn-outline-dark,
body[data-theme="ghostgirl"] .btn-outline-dark,
body[data-theme="scarlet"] .btn-outline-dark,
body[data-theme="glow"] .btn-outline-dark{
  --bs-btn-color: var(--outline-btn-color);
  --bs-btn-border-color: var(--outline-btn-border);
  --bs-btn-hover-color: var(--outline-btn-hover-color);
  --bs-btn-hover-bg: var(--outline-btn-hover-bg);
  --bs-btn-hover-border-color: var(--outline-btn-hover-bg);
  --bs-btn-active-color: var(--outline-btn-hover-color);
  --bs-btn-active-bg: var(--outline-btn-hover-bg);
  --bs-btn-active-border-color: var(--outline-btn-hover-bg);
}

body[data-theme="noche"] .btn-outline-secondary,
body[data-theme="luxury"] .btn-outline-secondary,
body[data-theme="pinky"] .btn-outline-secondary,
body[data-theme="shiny"] .btn-outline-secondary,
body[data-theme="aqua"] .btn-outline-secondary,
body[data-theme="girly"] .btn-outline-secondary,
body[data-theme="ghostgirl"] .btn-outline-secondary,
body[data-theme="scarlet"] .btn-outline-secondary,
body[data-theme="glow"] .btn-outline-secondary{
  --bs-btn-color: var(--app-muted);
  --bs-btn-border-color: var(--surface-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--surface-border);
}

body[data-theme] .form-text{
  color: var(--app-muted) !important;
}

/* Shiny: bordes plateados + glow global */
body[data-theme="shiny"] .card,
body[data-theme="shiny"] .modal-content,
body[data-theme="shiny"] .dropdown-menu,
body[data-theme="shiny"] .list-group-item,
body[data-theme="shiny"] .form-control,
body[data-theme="shiny"] .form-select,
body[data-theme="shiny"] .input-group-text,
body[data-theme="shiny"] .table,
body[data-theme="shiny"] .btn{
  border-color: color-mix(in oklab, var(--surface-border) 74%, #ffffff 26%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.62),
    0 0 12px var(--shiny-glow-soft) !important;
}
body[data-theme="shiny"] .btn:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72),
    0 0 16px var(--shiny-glow) !important;
}
body[data-theme="shiny"] .navbar.navbar-dark.bg-dark{
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.42),
    0 6px 18px rgba(148,163,184,.32);
}
body[data-theme="shiny"] .navbar .navbar-toggler{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.58),
    0 0 10px var(--shiny-glow-soft);
}
body[data-theme="shiny"] .navbar-nav .nav-link{
  text-shadow: 0 0 6px rgba(255,255,255,.28);
}
body[data-theme="shiny"] .section,
body[data-theme="shiny"] .panel,
body[data-theme="shiny"] .soft-card,
body[data-theme="shiny"] .table-wrap,
body[data-theme="shiny"] .chart-card,
body[data-theme="shiny"] .table-card,
body[data-theme="shiny"] .reports-hero,
body[data-theme="shiny"] .quick-glance,
body[data-theme="shiny"] .inv-topbar,
body[data-theme="shiny"] .inv-row-card,
body[data-theme="shiny"] .rest-card,
body[data-theme="shiny"] .form-card{
  border-color: color-mix(in oklab, var(--surface-border) 72%, #ffffff 28%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72),
    0 0 14px var(--shiny-glow-soft),
    0 10px 20px rgba(148,163,184,.22) !important;
}
body[data-theme="shiny"] .badge,
body[data-theme="shiny"] .badge-soft,
body[data-theme="shiny"] .mov-pill{
  border-color: color-mix(in oklab, var(--surface-border) 68%, #ffffff 32%) !important;
  box-shadow: 0 0 8px rgba(226,232,240,.55);
}

@keyframes glowElectricBorder{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowElectricPulse{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08) inset,
      0 0 14px rgba(79,70,229,.26),
      0 0 20px rgba(0,245,255,.11);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.16) inset,
      0 0 18px rgba(0,245,255,.26),
      0 0 24px rgba(255,0,212,.18);
  }
}
body[data-theme="glow"] .card,
body[data-theme="glow"] .modal-content,
body[data-theme="glow"] .dropdown-menu,
body[data-theme="glow"] .list-group-item,
body[data-theme="glow"] .section,
body[data-theme="glow"] .panel,
body[data-theme="glow"] .soft-card,
body[data-theme="glow"] .table-wrap,
body[data-theme="glow"] .chart-card,
body[data-theme="glow"] .table-card,
body[data-theme="glow"] .reports-hero,
body[data-theme="glow"] .quick-glance,
body[data-theme="glow"] .inv-topbar,
body[data-theme="glow"] .inv-row-card,
body[data-theme="glow"] .rest-card,
body[data-theme="glow"] .form-card{
  border: 1px solid transparent !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-1) 90%, #050b1b 10%),
      color-mix(in srgb, var(--surface-1) 96%, #101a35 4%)
    ) padding-box,
    var(--glow-upgrade-gradient) border-box !important;
  background-size: 100% 100%, var(--glow-upgrade-border-size);
  animation:
    glowElectricBorder 3.2s linear infinite,
    glowElectricPulse 2.8s ease-in-out infinite;
}
body[data-theme="glow"] .form-control,
body[data-theme="glow"] .form-select,
body[data-theme="glow"] .input-group-text{
  border: 1px solid transparent !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--field-bg) 92%, #050b1b 8%),
      var(--field-bg)
    ) padding-box,
    var(--glow-upgrade-gradient) border-box !important;
  background-size: 100% 100%, var(--glow-upgrade-border-size);
  animation:
    glowElectricBorder 3.2s linear infinite,
    glowElectricPulse 2.8s ease-in-out infinite;
}
body[data-theme="glow"] .table{
  border-color: color-mix(in oklab, var(--surface-border) 68%, #c9ecff 32%) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 10px rgba(79,70,229,.2);
}
body[data-theme="glow"] .btn:not(.btn-link){
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid transparent !important;
  background-color: #0b1124;
  background:
    var(--glow-upgrade-inner-bg) padding-box,
    var(--glow-upgrade-gradient) border-box !important;
  background-size: 100% 100%, var(--glow-upgrade-border-size);
  color: #f0f9ff !important;
  font-weight: 700;
  letter-spacing: .18px;
  text-shadow: 0 0 8px rgba(0,245,255,.24);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 14px rgba(79,70,229,.38);
  animation:
    glowElectricBorder 3.2s linear infinite !important,
    glowElectricPulse 2.4s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}
body[data-theme="glow"] .btn:not(.btn-link)::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  background: var(--glow-upgrade-aura-gradient);
  background-size: var(--glow-upgrade-border-size);
  filter: blur(7px);
  opacity: .92;
  animation: glowElectricBorder 3.8s linear infinite;
  pointer-events: none;
}
body[data-theme="glow"] .btn:not(.btn-link):hover,
body[data-theme="glow"] .btn:not(.btn-link):focus-visible{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 18px rgba(0,245,255,.28),
    0 0 24px rgba(255,0,212,.2);
}
body[data-theme="glow"] .btn:not(.btn-link):active{
  transform: translateY(0);
}
body[data-theme="glow"] .btn:not(.btn-link):disabled,
body[data-theme="glow"] .btn:not(.btn-link).disabled{
  animation: none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
  filter: saturate(.8) brightness(.9);
}
body[data-theme="glow"] .btn:not(.btn-link):disabled::after,
body[data-theme="glow"] .btn:not(.btn-link).disabled::after{
  animation: none !important;
  opacity: 0;
}

@keyframes ghostGirlElectricBorder{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes ghostGirlElectricPulse{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.14) inset,
      0 0 14px rgba(255,109,184,.28),
      0 0 20px rgba(255,209,234,.2);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.22) inset,
      0 0 20px rgba(255,109,184,.36),
      0 0 28px rgba(255,47,149,.28);
  }
}
body[data-theme="ghostgirl"] .card,
body[data-theme="ghostgirl"] .modal-content,
body[data-theme="ghostgirl"] .dropdown-menu,
body[data-theme="ghostgirl"] .list-group-item,
body[data-theme="ghostgirl"] .section,
body[data-theme="ghostgirl"] .panel,
body[data-theme="ghostgirl"] .soft-card,
body[data-theme="ghostgirl"] .table-wrap,
body[data-theme="ghostgirl"] .chart-card,
body[data-theme="ghostgirl"] .table-card,
body[data-theme="ghostgirl"] .reports-hero,
body[data-theme="ghostgirl"] .quick-glance,
body[data-theme="ghostgirl"] .inv-topbar,
body[data-theme="ghostgirl"] .inv-row-card,
body[data-theme="ghostgirl"] .rest-card,
body[data-theme="ghostgirl"] .form-card{
  border: 1px solid transparent !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-1) 91%, #701543 9%),
      color-mix(in srgb, var(--surface-1) 96%, #c23278 4%)
    ) padding-box,
    var(--ghostgirl-upgrade-gradient) border-box !important;
  background-size: 100% 100%, var(--ghostgirl-upgrade-border-size);
  animation:
    ghostGirlElectricBorder 3.2s linear infinite,
    ghostGirlElectricPulse 2.8s ease-in-out infinite;
}
body[data-theme="ghostgirl"] .form-control,
body[data-theme="ghostgirl"] .form-select,
body[data-theme="ghostgirl"] .input-group-text{
  border: 1px solid transparent !important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--field-bg) 91%, #6c133f 9%),
      var(--field-bg)
    ) padding-box,
    var(--ghostgirl-upgrade-gradient) border-box !important;
  background-size: 100% 100%, var(--ghostgirl-upgrade-border-size);
  animation:
    ghostGirlElectricBorder 3.2s linear infinite,
    ghostGirlElectricPulse 2.8s ease-in-out infinite;
}
body[data-theme="ghostgirl"] .table{
  border-color: color-mix(in oklab, var(--surface-border) 68%, #ffd2ea 32%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 12px var(--ghostgirl-glow-color);
}
body[data-theme="ghostgirl"] .table > :not(caption) > * > *{
  border-bottom-color: color-mix(in oklab, var(--surface-border) 62%, #ffd2ea 38%) !important;
}
body[data-theme="ghostgirl"] .badge,
body[data-theme="ghostgirl"] .badge-soft,
body[data-theme="ghostgirl"] .mov-pill{
  border-color: color-mix(in oklab, var(--surface-border) 62%, #ffe6f4 38%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 0 10px var(--ghostgirl-glow-soft);
}
body[data-theme="ghostgirl"] .btn:not(.btn-link){
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid transparent !important;
  background-color: #7f1749;
  background:
    var(--ghostgirl-upgrade-inner-bg) padding-box,
    var(--ghostgirl-upgrade-gradient) border-box !important;
  background-size: 100% 100%, var(--ghostgirl-upgrade-border-size);
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: .18px;
  text-shadow: 0 0 8px rgba(255,214,235,.42);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 14px rgba(255,109,184,.4);
  animation:
    ghostGirlElectricBorder 3.2s linear infinite !important,
    ghostGirlElectricPulse 2.4s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease;
}
body[data-theme="ghostgirl"] .btn:not(.btn-link)::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  background: var(--ghostgirl-upgrade-aura-gradient);
  background-size: var(--ghostgirl-upgrade-border-size);
  filter: blur(7px);
  opacity: .94;
  animation: ghostGirlElectricBorder 3.8s linear infinite;
  pointer-events: none;
}
body[data-theme="ghostgirl"] .btn:not(.btn-link):hover,
body[data-theme="ghostgirl"] .btn:not(.btn-link):focus-visible{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.24) inset,
    0 0 20px rgba(255,109,184,.42),
    0 0 28px rgba(255,47,149,.28);
}
body[data-theme="ghostgirl"] .btn:not(.btn-link):active{
  transform: translateY(0);
}
body[data-theme="ghostgirl"] .btn:not(.btn-link):disabled,
body[data-theme="ghostgirl"] .btn:not(.btn-link).disabled{
  animation: none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  filter: saturate(.75) brightness(.9);
}
body[data-theme="ghostgirl"] .btn:not(.btn-link):disabled::after,
body[data-theme="ghostgirl"] .btn:not(.btn-link).disabled::after{
  animation: none !important;
  opacity: 0;
}
body[data-theme="ghostgirl"] .navbar.navbar-dark.bg-dark{
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.24),
    0 6px 18px rgba(170,44,112,.32);
}
body[data-theme="ghostgirl"] .navbar-nav .nav-link{
  text-shadow: 0 0 8px rgba(255,231,244,.4);
}
@media (prefers-reduced-motion: reduce){
  body[data-theme="glow"] .card,
  body[data-theme="glow"] .modal-content,
  body[data-theme="glow"] .dropdown-menu,
  body[data-theme="glow"] .list-group-item,
  body[data-theme="glow"] .section,
  body[data-theme="glow"] .panel,
  body[data-theme="glow"] .soft-card,
  body[data-theme="glow"] .table-wrap,
  body[data-theme="glow"] .chart-card,
  body[data-theme="glow"] .table-card,
  body[data-theme="glow"] .reports-hero,
  body[data-theme="glow"] .quick-glance,
  body[data-theme="glow"] .inv-topbar,
  body[data-theme="glow"] .inv-row-card,
  body[data-theme="glow"] .rest-card,
  body[data-theme="glow"] .form-card,
  body[data-theme="glow"] .form-control,
  body[data-theme="glow"] .form-select,
  body[data-theme="glow"] .input-group-text,
  body[data-theme="glow"] .btn{
    animation: none !important;
  }
  body[data-theme="glow"] .btn::after{
    animation: none !important;
  }
  body[data-theme="ghostgirl"] .card,
  body[data-theme="ghostgirl"] .modal-content,
  body[data-theme="ghostgirl"] .dropdown-menu,
  body[data-theme="ghostgirl"] .list-group-item,
  body[data-theme="ghostgirl"] .section,
  body[data-theme="ghostgirl"] .panel,
  body[data-theme="ghostgirl"] .soft-card,
  body[data-theme="ghostgirl"] .table-wrap,
  body[data-theme="ghostgirl"] .chart-card,
  body[data-theme="ghostgirl"] .table-card,
  body[data-theme="ghostgirl"] .reports-hero,
  body[data-theme="ghostgirl"] .quick-glance,
  body[data-theme="ghostgirl"] .inv-topbar,
  body[data-theme="ghostgirl"] .inv-row-card,
  body[data-theme="ghostgirl"] .rest-card,
  body[data-theme="ghostgirl"] .form-card,
  body[data-theme="ghostgirl"] .form-control,
  body[data-theme="ghostgirl"] .form-select,
  body[data-theme="ghostgirl"] .input-group-text,
  body[data-theme="ghostgirl"] .btn,
  body[data-theme="ghostgirl"] .btn::after{
    animation: none !important;
  }
}

.navbar.navbar-dark.bg-dark{
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--navbar-border);
}
.navbar .container-fluid{
  position: relative;
}
.navbar-domain-center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(.78rem, 1.35vw, 1.02rem);
  letter-spacing: .2em;
  color: rgba(255,255,255,.34);
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.navbar .navbar-brand{
  position: relative;
  z-index: 1;
  color: var(--nav-brand-color) !important;
}
.navbar .navbar-toggler,
.navbar .navbar-collapse{
  position: relative;
  z-index: 1;
}
.navbar-drawer-backdrop{
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
  inset: 0;
  position: fixed;
  z-index: 1035;
}
.navbar-nav .nav-link{
  color: var(--nav-link-color) !important;
}
.navbar-nav .nav-link.active{
  color: var(--nav-link-active-color) !important;
}
.navbar-nav .nav-item .logout-link{
  color: var(--nav-link-color) !important;
  text-decoration: none;
}
.navbar-nav .nav-item .logout-link:hover{
  color: var(--nav-link-active-color) !important;
}
.drawer-header{ display: none; }

@media (max-width: 1199.98px){
  .navbar-domain-center{
    display: none;
  }
}

/* ======================================================
   MOBILE: drawer lateral + botones gorditos (FIX clicks)
   ====================================================== */
@media (max-width: 1199.98px){

  .navbar .navbar-toggler{
    align-items: center;
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: 10px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    box-shadow: none;
    color: var(--pos-text);
    width: 44px;
  }
  .navbar .navbar-toggler:hover{
    background: color-mix(in srgb, var(--pos-accent) 8%, var(--pos-surface));
  }
  .navbar .navbar-toggler:focus{
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-accent) 28%, transparent);
  }
  .navbar .navbar-toggler-icon{
    background-image:
      linear-gradient(var(--pos-text), var(--pos-text)),
      linear-gradient(var(--pos-text), var(--pos-text)),
      linear-gradient(var(--pos-text), var(--pos-text));
    background-position: center 3px, center 10px, center 17px;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    height: 22px;
    width: 22px;
  }

  /* Drawer */
  .navbar .navbar-collapse{
    position: fixed;
    top: var(--nav-h);
    right: 0;
    height: calc(100dvh - var(--nav-h));
    width: clamp(300px, 38vw, 340px);
    max-width: 340px;

    align-items: stretch;
    background: var(--pos-surface);
    border-left: 1px solid var(--pos-border);
    display: flex !important;
    flex-direction: column;
    padding: 14px 14px 16px;

    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    transform: translateX(110%);
    transition: transform .22s ease;

    z-index: 1040;
  }

  .drawer-header{
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 0 14px;
  }
  .drawer-identity{
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .drawer-product-name{
    color: var(--pos-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .drawer-workspace-name{
    color: var(--pos-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .drawer-close{
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--pos-text-muted);
    display: inline-flex;
    flex: 0 0 40px;
    height: 40px;
    justify-content: center;
    width: 40px;
  }
  .drawer-close:hover,
  .drawer-close:focus-visible{
    background: var(--pos-surface-hover);
    color: var(--pos-text);
    outline: 0;
  }
  .drawer-close i{ font-size: 18px; }

  body.nav-drawer-open .navbar .navbar-brand{ visibility: hidden; }

  /* Abierto */
  .navbar .navbar-collapse.show{
    transform: translateX(0);
  }

  /* Lista */
  .navbar-nav{
    align-items: stretch !important;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    margin: 0 !important;
    min-height: 0;
    width: 100%;
  }

  /* Botones */
  .navbar-nav .nav-link{
    position: relative;
    z-index: 1041; /* 👈 clickeables */

    display: flex;
    align-items: center;
    gap: .7rem;

    min-height: 48px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;

    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--pos-text) !important;
    text-decoration: none !important;
  }
  .navbar-nav .nav-link i{
    color: var(--pos-text-muted);
    font-size: 20px;
    min-width: 22px;
    text-align: center;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus-visible{
    background: var(--pos-surface-hover);
    outline: 0;
  }

  /* Activo */
  .navbar-nav .nav-link.active{
    background: color-mix(in srgb, var(--pos-accent) 14%, var(--pos-surface));
    color: var(--pos-text) !important;
    font-weight: 750;
  }
  .navbar-nav .nav-link.active::before{
    background: var(--pos-accent);
    border-radius: 0 3px 3px 0;
    content: "";
    height: 22px;
    left: 0;
    position: absolute;
    width: 3px;
  }
  .navbar-nav .nav-link.active i{
    color: var(--pos-accent);
  }

  /* Botón Salir */
  .navbar-nav .nav-item form{
    width: 100%;
  }

  .navbar-nav > .nav-item:last-child{
    border-top: 1px solid var(--pos-border);
    margin-top: auto;
    padding-top: 10px;
  }

  .navbar-nav .nav-item form .nav-link.btn.btn-link{
    position: relative;
    z-index: 1041;

    width: 100%;
    text-align: left;

    min-height: 48px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;

    color: var(--pos-text) !important;
    background: transparent;
    border: 0;
    border-radius: 8px;

    text-decoration: none !important;
  }

  .navbar-nav .nav-item form .logout-link i{ color: var(--pos-text-muted); }
}
/* =========================
   Brand name responsive
   ========================= */
.brand-name{
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65vw; /* mobile vertical */
}

/* Mobile portrait */
@media (max-width: 575.98px){
  .brand-name{
    font-size: .85rem;
    max-width: 55vw;
  }
}

/* Mobile landscape */
@media (max-width: 991.98px) and (orientation: landscape){
  .brand-name{
    font-size: .8rem;
    max-width: 45vw;
  }
}

/* Desktop */
@media (min-width: 992px){
  .brand-name{
    font-size: 1rem;
    max-width: none;
  }
}

/* ======================================================
   DominioPOS operational design tokens
   Kept additive so existing theme overrides remain intact.
====================================================== */
:root{
  --pos-primary: #172033;
  --pos-primary-hover: #202a43;
  --pos-accent: #ef7046;
  --pos-on-accent: #ffffff;
  --pos-on-primary: #ffffff;

  --pos-bg: #edf1f6;
  --pos-surface: #ffffff;
  --pos-surface-raised: #ffffff;
  --pos-surface-muted: #f5f7fa;
  --pos-surface-soft: var(--pos-surface);
  --pos-surface-hover: color-mix(in srgb, var(--pos-surface) 90%, var(--pos-primary) 10%);

  /* Product catalog layering: navigation → catalog canvas → interactive card. */
  --pos-catalog-nav-surface: color-mix(in srgb, var(--pos-surface-muted) 90%, var(--pos-primary) 10%);
  --pos-catalog-surface: color-mix(in srgb, var(--pos-surface-muted) 58%, var(--pos-surface) 42%);
  --pos-product-card-surface: var(--pos-surface-raised);
  --pos-product-card-border: color-mix(in srgb, var(--pos-border) 78%, var(--pos-primary) 22%);
  --pos-product-card-hover: color-mix(in srgb, var(--pos-product-card-surface) 88%, var(--pos-primary) 12%);
  --pos-product-card-text: var(--pos-text);
  --pos-product-card-secondary: var(--pos-text-muted);
  --pos-product-card-price: var(--pos-primary);
  --pos-product-card-accent: var(--pos-accent);

  --pos-category-surface: var(--pos-product-card-surface);
  --pos-category-text: var(--pos-text-secondary);
  --pos-category-border: var(--pos-product-card-border);

  --pos-text: #172033;
  --pos-text-secondary: #526176;
  --pos-text-muted: #617087;
  --pos-text-subtle: #8793a5;
  --pos-border: #dce3ec;
  --pos-focus: #b94d2c;
  --pos-focus-ring: rgba(185,77,44,.34);
  --pos-category-active-bg: var(--pos-primary);
  --pos-on-category-active: var(--pos-on-primary);
  --pos-category-active-border: var(--pos-primary);

  --pos-input-bg: var(--pos-surface);
  --pos-input-text: var(--pos-text);
  --pos-input-placeholder: var(--pos-text-subtle);
  --pos-input-border: #cbd5e1;

  --pos-order-surface: var(--pos-surface-raised);
  --pos-order-text: var(--pos-text);
  --pos-order-secondary: var(--pos-text-muted);
  --pos-order-item-surface: color-mix(in srgb, var(--pos-order-surface) 92%, var(--pos-surface-muted) 8%);
  --pos-order-divider: color-mix(in srgb, var(--pos-border) 62%, var(--pos-order-item-surface));
  --pos-order-control-surface: var(--pos-surface-muted);
  --pos-order-action-surface: var(--pos-surface-muted);

  --pos-success: #198754;
  --pos-success-hover: #146c43;
  --pos-on-success: #ffffff;
  --pos-warning: #b77900;
  --pos-on-warning: #1f1600;
  --pos-danger: #c43d4b;
  --pos-danger-hover: #a8323e;
  --pos-on-danger: #ffffff;
  --pos-info: #2f6fba;
  --pos-on-info: #ffffff;
  --pos-success-soft: color-mix(in srgb, var(--pos-success) 10%, var(--pos-surface));
  --pos-warning-soft: color-mix(in srgb, var(--pos-warning) 12%, var(--pos-surface));
  --pos-danger-soft: color-mix(in srgb, var(--pos-danger) 10%, var(--pos-surface));
  --pos-info-soft: color-mix(in srgb, var(--pos-info) 10%, var(--pos-surface));

  --pos-radius-sm: 6px;
  --pos-radius-md: 10px;
  --pos-radius-lg: 14px;
  --pos-radius-xl: 18px;

  --pos-shadow-sm: 0 1px 3px rgba(23,32,51,.06);
  --pos-shadow-md: 0 8px 20px rgba(23,32,51,.08);
  --pos-shadow-card: 0 4px 16px rgba(23,32,51,.06);

  --pos-space-1: .25rem;
  --pos-space-2: .5rem;
  --pos-space-3: .75rem;
  --pos-space-4: 1rem;
  --pos-space-5: 1.5rem;

  --pos-font-page-title: 1.35rem;
  --pos-font-section-title: 1.05rem;
  --pos-font-card-title: .95rem;
  --pos-font-body: .9rem;
  --pos-font-small: .78rem;
  --pos-font-number: 1.15rem;
  --pos-font-money: 1.35rem;

  /* Default/day theme aliases. More expressive themes still win below. */
  --app-bg: var(--pos-bg);
  --app-surface: var(--pos-surface);
  --app-text: var(--pos-text);
  --app-muted: var(--pos-text-muted);
  --surface-1: var(--pos-surface-raised);
  --surface-2: var(--pos-surface-muted);
  --surface-border: var(--pos-border);
  --field-bg: var(--pos-surface);
  --field-border: #cbd5e1;
  --field-text: var(--pos-text);
  --field-placeholder: var(--pos-text-subtle);
  --navbar-bg: var(--pos-primary);
  --navbar-border: rgba(255,255,255,.12);
  --nav-link-color: rgba(255,255,255,.78);
  --nav-link-active-color: #ffffff;
  --nav-brand-color: #ffffff;
}

body[data-theme="dia"]{
  --navbar-bg: var(--pos-primary);
  --drawer-bg: var(--pos-primary);
  --drawer-border: rgba(255,255,255,.12);
  --drawer-item-bg: rgba(255,255,255,.08);
  --drawer-item-border: rgba(255,255,255,.14);
  --drawer-item-active-bg: rgba(239,112,70,.22);
  --drawer-item-active-border: rgba(239,112,70,.55);
  --drawer-link-color: #f8fafc;
  --drawer-link-active-color: #ffffff;
}

/* Let component surfaces follow every selected theme without replacing its background. */
body[data-theme]:not([data-theme="dia"]){
  --pos-bg: var(--app-bg);
  --pos-primary: var(--outline-btn-hover-bg);
  --pos-primary-hover: color-mix(in srgb, var(--outline-btn-hover-bg) 86%, var(--app-text));
  --pos-accent: var(--outline-btn-hover-bg);
  --pos-on-accent: var(--outline-btn-hover-color);
  --pos-focus: var(--outline-btn-hover-bg);
  --pos-focus-ring: color-mix(in srgb, var(--outline-btn-hover-bg) 32%, transparent);
  --pos-surface: var(--surface-1);
  --pos-surface-raised: var(--surface-1);
  --pos-surface-muted: var(--surface-2);
  --pos-surface-soft: var(--surface-1);
  --pos-surface-hover: color-mix(in srgb, var(--surface-1) 90%, var(--app-text) 10%);
  --pos-text: var(--app-text);
  --pos-text-muted: var(--app-muted);
  --pos-text-subtle: var(--field-placeholder);
  --pos-border: var(--surface-border);
  --field-border: var(--surface-border);
}

/*
 * Theme semantic contract.  Components consume these names; each theme owns
 * its foregrounds explicitly instead of assuming white works everywhere.
 */
body[data-theme="dia"]{
  --pos-category-active-bg: #c84f2c;
  --pos-on-category-active: var(--pos-on-accent);
  --pos-category-active-border: #c84f2c;
  --pos-on-primary: #ffffff;
  --pos-on-accent: #ffffff;
  --pos-text-secondary: #526176;
  --pos-input-bg: #ffffff;
  --pos-input-text: #172033;
  --pos-input-placeholder: #617087;
  --pos-input-border: #b8c4d3;
}
body[data-theme="noche"]{
  --pos-on-primary: #0f172a;
  --pos-on-accent: #0f172a;
  --pos-text-secondary: #cbd5e1;
  --pos-input-bg: #0b1325;
  --pos-input-text: #e5e7eb;
  --pos-input-placeholder: #aab8ca;
  --pos-input-border: #52657c;
  --pos-success: #36b878;
  --pos-success-hover: #4dca8c;
  --pos-on-success: #061b10;
  --pos-danger: #f06b78;
  --pos-danger-hover: #ff8490;
  --pos-on-danger: #24060a;
}
body[data-theme="luxury"]{
  --pos-on-primary: #14110d;
  --pos-on-accent: #14110d;
  --pos-text-secondary: #dbc89f;
  --pos-input-bg: #120f0c;
  --pos-input-text: #f5e8c6;
  --pos-input-placeholder: #d0b981;
  --pos-input-border: #927846;
  --pos-success: #6dbb87;
  --pos-success-hover: #83cd9d;
  --pos-on-success: #0b1b10;
  --pos-danger: #e37777;
  --pos-danger-hover: #f18c8c;
  --pos-on-danger: #250909;
}
body[data-theme="pinky"]{
  --pos-on-primary: #ffffff;
  --pos-on-accent: #ffffff;
  --pos-text-secondary: #70447f;
  --pos-input-bg: #fff9ff;
  --pos-input-text: #3d1b4f;
  --pos-input-placeholder: #805396;
  --pos-input-border: #bd8ed4;
  --pos-success: #237a4c;
  --pos-success-hover: #185d38;
  --pos-on-success: #ffffff;
}
body[data-theme="shiny"]{
  --pos-on-primary: #f8fafc;
  --pos-on-accent: #f8fafc;
  --pos-text-secondary: #475569;
  --pos-input-bg: #ffffff;
  --pos-input-text: #111827;
  --pos-input-placeholder: #52657d;
  --pos-input-border: #94a7bd;
}
body[data-theme="aqua"]{
  --pos-on-primary: #ffffff;
  --pos-on-accent: #ffffff;
  --pos-text-secondary: #36626b;
  --pos-input-bg: #ffffff;
  --pos-input-text: #0f2f35;
  --pos-input-placeholder: #426f78;
  --pos-input-border: #78bdca;
  --pos-success: #167044;
  --pos-success-hover: #0e5834;
  --pos-on-success: #ffffff;
}
body[data-theme="girly"]{
  --pos-primary: #b7446d;
  --pos-primary-hover: #963657;
  --pos-accent: #b7446d;
  --pos-on-primary: #ffffff;
  --pos-on-accent: #ffffff;
  --pos-text-secondary: #813f59;
  --pos-input-bg: #ffffff;
  --pos-input-text: #5b2437;
  --pos-input-placeholder: #8e4761;
  --pos-input-border: #df8cac;
  --pos-success: #2b7b4d;
  --pos-success-hover: #1f603a;
  --pos-on-success: #ffffff;
}
body[data-theme="ghostgirl"]{
  --pos-primary: #fff0f8;
  --pos-primary-hover: #ffb8dc;
  --pos-accent: #fff0f8;
  --pos-on-primary: #5e0f3b;
  --pos-on-accent: #5e0f3b;
  --pos-text-secondary: #ffe3f2;
  --pos-input-bg: #8a1a55;
  --pos-input-text: #ffffff;
  --pos-input-placeholder: #ffd4ea;
  --pos-input-border: #ff9ccc;
  --pos-success: #a7f0bd;
  --pos-success-hover: #c2f7d1;
  --pos-on-success: #123d23;
  --pos-danger: #ffd0da;
  --pos-danger-hover: #ffe1e7;
  --pos-on-danger: #6d1027;
}
body[data-theme="scarlet"]{
  --pos-on-primary: #ffffff;
  --pos-on-accent: #ffffff;
  --pos-text-secondary: #74313a;
  --pos-input-bg: #ffffff;
  --pos-input-text: #4a0d13;
  --pos-input-placeholder: #914650;
  --pos-input-border: #db7d87;
  --pos-success: #23784a;
  --pos-success-hover: #185d38;
  --pos-on-success: #ffffff;
}
body[data-theme="glow"]{
  --pos-primary: #b2e8ff;
  --pos-primary-hover: #d1f2ff;
  --pos-accent: #b2e8ff;
  --pos-on-primary: #06101d;
  --pos-on-accent: #06101d;
  --pos-text-secondary: #c2e3f5;
  --pos-input-bg: #0a152c;
  --pos-input-text: #e8f6ff;
  --pos-input-placeholder: #afdaef;
  --pos-input-border: #4a91c7;
  --pos-success: #69e6a1;
  --pos-success-hover: #92f0bd;
  --pos-on-success: #06341e;
  --pos-danger: #ff9baa;
  --pos-danger-hover: #ffb6c1;
  --pos-on-danger: #4a0611;
}

body[data-theme="dia"] .navbar.navbar-dark.bg-dark{
  background: var(--pos-primary) !important;
  box-shadow: 0 2px 10px rgba(23,32,51,.14);
}

body[data-theme="dia"] .navbar .navbar-brand{
  letter-spacing: -.01em;
}

body[data-theme="dia"] main.app-content{
  background: var(--pos-bg);
}

/* Safe, global component normalization. */
main.app-content .card,
main.app-content .modal-content,
main.app-content .list-group-item{
  border-color: var(--surface-border);
  border-radius: var(--pos-radius-lg);
  box-shadow: var(--pos-shadow-card);
}

main.app-content .card-header{
  border-bottom-color: var(--surface-border);
  font-weight: 700;
}

main.app-content .btn{
  border-radius: var(--pos-radius-md);
  font-size: var(--pos-font-body);
  font-weight: 650;
  min-height: 38px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

main.app-content .btn-sm{
  min-height: 34px;
  font-size: var(--pos-font-small);
}

body[data-theme="dia"] main.app-content .btn-primary{
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: var(--pos-on-primary);
}

body[data-theme="dia"] main.app-content .btn-primary:hover,
body[data-theme="dia"] main.app-content .btn-primary:focus-visible{
  background: var(--pos-primary-hover);
  border-color: var(--pos-primary-hover);
}

main.app-content .btn:focus-visible,
main.app-content .form-control:focus-visible,
main.app-content .form-select:focus-visible,
main.app-content .form-check-input:focus-visible,
.navbar .navbar-toggler:focus-visible{
  border-color: var(--pos-accent);
  box-shadow: 0 0 0 3px var(--pos-focus-ring);
  outline: 0;
}

main.app-content .form-control,
main.app-content .form-select,
main.app-content textarea.form-control,
main.app-content .input-group-text{
  background: var(--pos-input-bg);
  border-color: var(--pos-input-border);
  border-radius: var(--pos-radius-md);
  color: var(--pos-input-text);
  min-height: 38px;
}

main.app-content .form-control:focus,
main.app-content .form-select:focus{
  border-color: var(--pos-focus);
  box-shadow: 0 0 0 3px var(--pos-focus-ring);
}

main.app-content .form-control::placeholder,
main.app-content textarea.form-control::placeholder{
  color: var(--pos-input-placeholder);
  opacity: 1;
}

main.app-content .btn-primary{
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: var(--pos-on-primary);
}
main.app-content .btn-primary:hover,
main.app-content .btn-primary:active,
main.app-content .btn-primary:focus-visible{
  background: var(--pos-primary-hover);
  border-color: var(--pos-primary-hover);
  color: var(--pos-on-primary);
}
main.app-content .btn-success{
  background: var(--pos-success);
  border-color: var(--pos-success);
  color: var(--pos-on-success);
}
main.app-content .btn-success:hover,
main.app-content .btn-success:active,
main.app-content .btn-success:focus-visible{
  background: var(--pos-success-hover);
  border-color: var(--pos-success-hover);
  color: var(--pos-on-success);
}
main.app-content .btn-danger{
  background: var(--pos-danger);
  border-color: var(--pos-danger);
  color: var(--pos-on-danger);
}
main.app-content .btn-danger:hover,
main.app-content .btn-danger:active,
main.app-content .btn-danger:focus-visible{
  background: var(--pos-danger-hover);
  border-color: var(--pos-danger-hover);
  color: var(--pos-on-danger);
}

main.app-content .form-label,
main.app-content label{
  color: var(--app-text);
  font-size: var(--pos-font-small);
  font-weight: 650;
}

main.app-content .table{
  color: var(--app-text);
  font-size: var(--pos-font-body);
}

main.app-content .table thead th{
  color: var(--app-muted);
  font-size: var(--pos-font-small);
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

main.app-content .table tbody tr:hover{
  background: color-mix(in srgb, var(--pos-accent) 5%, var(--surface-1));
}

main.app-content .badge{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}

main.app-content .badge.bg-success,
main.app-content .badge.text-bg-success{
  background: var(--pos-success-soft) !important;
  color: var(--pos-success) !important;
}
main.app-content .badge.bg-warning,
main.app-content .badge.text-bg-warning{
  background: var(--pos-warning-soft) !important;
  color: var(--pos-warning) !important;
}
main.app-content .badge.bg-danger,
main.app-content .badge.text-bg-danger{
  background: var(--pos-danger-soft) !important;
  color: var(--pos-danger) !important;
}
main.app-content .badge.bg-info,
main.app-content .badge.text-bg-info{
  background: var(--pos-info-soft) !important;
  color: var(--pos-info) !important;
}

@media (max-width: 1199.98px){
  .navbar .navbar-collapse{
    width: clamp(300px, 38vw, 340px);
    max-width: 340px;
  }

  .navbar .navbar-nav .nav-link,
  .navbar .navbar-nav .nav-item form .nav-link.btn.btn-link{
    min-height: 48px;
  }
}

@media (max-width: 575.98px){
  .navbar .navbar-collapse{
    width: min(86vw, 340px);
    min-width: 300px;
  }
}

@media (max-width: 1199.98px){
  body.nav-drawer-open{
    overflow: hidden;
    touch-action: none;
  }
}

@media (prefers-reduced-motion: reduce){
  main.app-content .btn,
  .navbar .navbar-collapse{
    transition: none;
  }
}