@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');

/* ELIMINAR CUALQUIER VARIABLE DE GLOW O NEÓN */
:root {
    --bg-void: #050507;
    --border-hairline: rgba(255, 255, 255, 0.08);
}

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

/* Sombras reales (offset direccional) en lugar de halos de IA */
.bento-card {
    background-color: #0c0d11 !important;
    border: 1px solid var(--border-hairline) !important;
    /* Offset Y de 10px, NO un glow con offset 0 */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    transition: all 0.2s ease;
}

.btn-haptic, button {
    border-radius: 9999px !important;
    transition: transform 150ms ease !important;
    /* Sombras duras y direccionales para botones */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.btn-haptic:active, button:active {
    transform: scale(0.97) !important;
}

/* ====================================================
 * 1. COLOR ENGINE & DYNAMIC THEMES (CSS VARIABLES)
 * "The Underground Atelier" - OLED Precision Stack
 * ==================================================== */

/* Preset Default: Monocromo Spot (The Underground Atelier - Activo por defecto) */
:root,
[data-theme="default"],
[data-theme="monochrome"],
body[data-theme="default"],
body[data-theme="monochrome"] {
  /* OLED Precision Stack */
  --bg-primary: #050507;        /* Nivel 0: Page Canvas / Void */
  --bg-surface: #0d0e12;        /* Nivel 1: Bento Surfaces / Carbon */
  --bg-elevated: #15161c;       /* Nivel 2: Elevated Panels / Obsidian */
  --border-color: rgba(255, 255, 255, 0.08); /* Hairline Structural (#23252a equivalent) */
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --accent-color: #ffffff;
  --accent-contrast: #000000;
  --accent-glow: rgba(255, 255, 255, 0.16);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.25);
  --bg-card: rgba(13, 14, 18, 0.88);
  --ambient-orb: rgba(255, 255, 255, 0.08);
  --card-bg-gradient: linear-gradient(180deg, rgba(21, 22, 28, 0.85) 0%, rgba(13, 14, 18, 0.98) 100%);
  --hairline-border: 1px solid rgba(255, 255, 255, 0.08);
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Preset 1: Royal Blue / Dark Mode */
[data-theme="royal-blue"],
[data-theme="royal-blue-dark"],
body[data-theme="royal-blue"],
body[data-theme="royal-blue-dark"] {
  --bg-primary: #050B14;
  --bg-surface: #0c1728;
  --bg-elevated: #162540;
  --border-color: #1a3055;
  --text-primary: #F8F3F0;
  --text-secondary: #8CA3C7;
  --accent-color: #1E6BFF;
  --accent-contrast: #FFFFFF;
  --accent-glow: rgba(30, 107, 255, 0.3);
  --border-subtle: #1a3055;
  --border-highlight: #2a4c82;
  --bg-card: rgba(12, 23, 40, 0.88);
  --ambient-orb: rgba(30, 107, 255, 0.15);
  --card-bg-gradient: linear-gradient(180deg, rgba(14, 28, 50, 0.85) 0%, rgba(8, 16, 30, 0.98) 100%);
  --hairline-border: 1px solid #1a3055;
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Preset 1: Royal Blue / Light Cream (Light / Vibrant) */
[data-theme="royal-blue-light"],
body[data-theme="royal-blue-light"] {
  --bg-primary: #F8F3F0;
  --bg-surface: #FFFFFF;
  --bg-elevated: #EFE8E2;
  --border-color: #E2D9D2;
  --text-primary: #050B14;
  --text-secondary: #525866;
  --accent-color: #014BAA;
  --accent-contrast: #FFFFFF;
  --accent-glow: rgba(1, 75, 170, 0.2);
  --border-subtle: #E2D9D2;
  --border-highlight: #014BAA;
  --bg-card: rgba(255, 255, 255, 0.95);
  --ambient-orb: rgba(1, 75, 170, 0.08);
  --card-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #F5EFEB 100%);
  --hairline-border: 1px solid #E2D9D2;
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Preset 2: Tiffany / Dark Grey */
[data-theme="tiffany"],
body[data-theme="tiffany"] {
  --bg-primary: #0C0C0D;
  --bg-surface: #171717;
  --bg-elevated: #222223;
  --border-color: #282829;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A5;
  --accent-color: #22F1A9;
  --accent-contrast: #000000;
  --accent-glow: rgba(34, 241, 169, 0.28);
  --border-subtle: #282829;
  --border-highlight: rgba(34, 241, 169, 0.4);
  --bg-card: rgba(23, 23, 23, 0.88);
  --ambient-orb: rgba(34, 241, 169, 0.12);
  --card-bg-gradient: linear-gradient(180deg, rgba(28, 28, 28, 0.85) 0%, rgba(18, 18, 18, 0.98) 100%);
  --hairline-border: 1px solid #282829;
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Preset 3: Turmeric / Malt */
[data-theme="turmeric"],
body[data-theme="turmeric"] {
  --bg-primary: #121008;
  --bg-surface: #201C0D;
  --bg-elevated: #2f2913;
  --border-color: #383116;
  --text-primary: #FFF8E7;
  --text-secondary: #A69B7C;
  --accent-color: #FFBF0B;
  --accent-contrast: #000000;
  --accent-glow: rgba(255, 191, 11, 0.28);
  --border-subtle: #383116;
  --border-highlight: rgba(255, 191, 11, 0.4);
  --bg-card: rgba(32, 28, 13, 0.88);
  --ambient-orb: rgba(255, 191, 11, 0.12);
  --card-bg-gradient: linear-gradient(180deg, rgba(38, 33, 16, 0.85) 0%, rgba(20, 18, 9, 0.98) 100%);
  --hairline-border: 1px solid #383116;
  --card-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ====================================================
 * 2. BASE RESETS & TYPOGRAPHY
 * ==================================================== */
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
  background: var(--accent-color);
  color: var(--accent-contrast);
}

/* Titulares Display: Space Grotesk con tracking ceñido calibrado (-0.03em) */
.font-display {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
}

.tracking-display {
  letter-spacing: -0.03em;
}

/* Textos Guía (Micro-Eyebrows): Estilo consola de control / Linear / Perk */
.micro-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.6875rem; /* ~11px */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1;
}

/* Microinteracciones Hápticas (Haptic Feedback) */
.btn-haptic {
  transition: all 150ms ease;
  user-select: none;
}
.btn-haptic:active {
  transform: scale(0.98);
}

/* Sensación táctil nativa global en botones y llamadas a la acción */
button,
[data-service-cta],
[data-supply-buy],
.nav-pill {
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

button:active:not(:disabled),
[data-service-cta]:active:not(:disabled),
[data-supply-buy]:active:not(:disabled) {
  transform: scale(0.98);
}

/* ====================================================
 * 3. NAVIGATION PILLS (BRUTALIST CAPSULES)
 * ==================================================== */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: rgba(18, 18, 22, 0.7);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  position: relative;
  user-select: none;
}

.nav-pill:hover {
  color: var(--text-primary);
  background: rgba(30, 30, 36, 0.85);
  border-color: var(--border-highlight);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.8);
}

.nav-pill:active {
  transform: scale(0.97);
}

.nav-pill.active {
  color: var(--accent-contrast);
  background: var(--accent-color);
  border-color: var(--accent-color);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.nav-pill.active i,
.nav-pill.active svg {
  color: var(--accent-contrast) !important;
}

.nav-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: var(--accent-contrast);
  display: inline-block;
}

/* ====================================================
 * 4. CUSTOM FORM CONTROLS
 * ==================================================== */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.85rem 2.75rem 0.85rem 1.1rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  width: 100%;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.custom-select:hover {
  border-color: var(--border-highlight);
}

.custom-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.select-arrow {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
  color: var(--text-secondary);
}

.custom-select-wrapper:focus-within .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--text-primary);
}

.custom-select option {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  padding: 14px 18px;
  font-size: 0.85rem;
}

.custom-input {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.85rem 1.1rem;
  font-family: inherit;
  font-size: 0.8rem;
  width: 100%;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.custom-input:hover {
  border-color: var(--border-highlight);
}

.custom-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* ====================================================
 * 5. BENTO BOX & CRAFT CARDS (HAIRLINE PRECISION)
 * ==================================================== */
.bento-card {
  background-color: #0c0d11 !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Hairline border utility (Linear Precision) */
.border-hairline {
  border: 1px solid var(--border-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ====================================================
 * 6. RADIUS VOCABULARY & DISCIPLINE (THE UNDERGROUND ATELIER)
 * - Tarjetas / Bento Blocks: rounded-2xl a rounded-3xl (20px-24px)
 * - Inputs / Controles / Íconos: rounded-xl (10px-12px)
 * - Botones CTA / Badges / Nav Pills: rounded-full (9999px)
 * ==================================================== */
.rounded-bento {
  border-radius: 1.5rem !important; /* 24px */
}
.rounded-card {
  border-radius: 1.25rem !important; /* 20px */
}
.rounded-control {
  border-radius: 0.75rem !important; /* 12px */
}
.rounded-pill {
  border-radius: 9999px !important;
}

/* Glow Badges */
.badge-mono {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: 9999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Scrollbar utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ambient glow orbs disabled (Pure Craft Monochrome) */
.ambient-glow {
  display: none !important;
}

/* ====================================================
 * 7. DYNAMIC THEME LIVE ADAPTATION OVERRIDES
 * ==================================================== */

/* Scoped adjustments when an active non-default theme is chosen */
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) header#main-navbar {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-spot-bg,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-black {
  background-color: var(--bg-primary) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-spot-surface,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-zinc-950,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-zinc-900,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .supply-product-card {
  background-color: var(--bg-surface) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-spot-elevated {
  background-color: var(--bg-elevated) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .border-zinc-800,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .border-white\/10,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .border-white\/5,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .border-white\/20 {
  border-color: var(--border-color) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .text-white {
  color: var(--text-primary) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .text-zinc-400,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .text-zinc-500,
[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .text-spot-muted {
  color: var(--text-secondary) !important;
}

[data-theme]:not([data-theme="default"]):not([data-theme="monochrome"]) .bg-white.text-black {
  background-color: var(--accent-color) !important;
  color: var(--accent-contrast) !important;
}

/* Light Mode Overrides for Preset Royal Blue Light */
[data-theme="royal-blue-light"] body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="royal-blue-light"] header#main-navbar {
  background-color: rgba(248, 243, 240, 0.95) !important;
  border-color: #E2D9D2 !important;
}

[data-theme="royal-blue-light"] .nav-pill {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #525866 !important;
  border-color: #E2D9D2 !important;
}

[data-theme="royal-blue-light"] .nav-pill:hover {
  background: #FFFFFF !important;
  color: #014BAA !important;
  border-color: #014BAA !important;
}

[data-theme="royal-blue-light"] .nav-pill.active {
  background: #014BAA !important;
  color: #FFFFFF !important;
  border-color: #014BAA !important;
}

[data-theme="royal-blue-light"] .bento-card {
  background: #FFFFFF !important;
  border-color: #E2D9D2 !important;
  box-shadow: 0 10px 30px -10px rgba(1, 75, 170, 0.08);
}

[data-theme="royal-blue-light"] .supply-product-card {
  background: #FFFFFF !important;
  border-color: #E2D9D2 !important;
}

[data-theme="royal-blue-light"] .ambient-glow {
  background-color: #014BAA !important;
  opacity: 0.06 !important;
}