/* ==========================================================================
   AIRCAN SYSTEM STUDIO - LIGHT THEME (Constructor de Sistemas a Medida)
   Diseño minimalista, luminoso, espacioso y sin saturación visual.
   ========================================================================== */

:root {
  --builder-primary: #0154f9;
  --builder-primary-glow: rgba(1, 84, 249, 0.25);
  --sim-accent: #0154f9;
  --sim-accent-glow: rgba(1, 84, 249, 0.28);
  --sim-accent-soft: rgba(1, 84, 249, 0.10);
  --sim-accent-hover-soft: rgba(1, 84, 249, 0.16);
  --sim-accent-contrast: #ffffff;
  --builder-primary-glow: rgba(1, 84, 249, 0.25);
  --builder-radius: 12px;
  --builder-font: 'Poppins', sans-serif;
  --builder-bg: #f8fafc;
  --builder-surface: #ffffff;
  --builder-surface-subtle: #f1f5f9;
  --builder-border: rgba(226, 232, 240, 0.95);
  --builder-border-focus: rgba(1, 84, 249, 0.45);
  --builder-text: #0f172a;
  --builder-text-muted: #64748b;
  --builder-card-bg: #ffffff;
}

/* Base de la Página en Tema Claro */
.builder-page {
  background-color: var(--builder-bg);
  color: var(--builder-text);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  padding-top: 64px;
  padding-bottom: 40px;
}

/* Auras ambientales de fondo (suaves en tema claro) */
.builder-auras {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.builder-aura-1 {
  position: absolute;
  top: -80px;
  left: 15%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 84, 249, 0.08) 0%, transparent 70%);
  filter: blur(80px);
}

.builder-aura-2 {
  position: absolute;
  top: 35%;
  right: -50px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
  filter: blur(80px);
}

.builder-aura-3 {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 500px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
  filter: blur(80px);
}

/* ==========================================================================
   HEADER / NOTCH NAVBAR MINIMALISTA (Solo Logo Studio, Volver y Login)
   ========================================================================== */
.builder-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.builder-nav__inner {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  background: #000000;
  padding: 0.44rem 0.95rem 0.52rem 1.15rem;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-top: none;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: builder-notch-down 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  will-change: transform, opacity;
}

@keyframes builder-notch-down {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Curvaturas cóncavas orgánicas idénticas a la página principal (ears / notch) */
.builder-nav__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -18px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 0 100%, transparent 17.5px, #000000 18px);
  pointer-events: none;
}

.builder-nav__inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 100% 100%, transparent 17.5px, #000000 18px);
  pointer-events: none;
}

.builder-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.builder-nav__brand-img {
  height: 24px;
  width: auto;
}

.builder-nav__brand-name {
  font-size: 1.02rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.builder-nav__badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #60a5fa;
  background: rgba(1, 84, 249, 0.2);
  border: 1px solid rgba(1, 84, 249, 0.35);
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.builder-nav__return-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  text-decoration: none !important;
  transition: all 0.18s ease;
}

.builder-nav__return-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateX(-2px);
  color: #ffffff;
}

.builder-nav .nav__login-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.18s ease;
}

.builder-nav .nav__login-btn:hover {
  background: #0154f9;
  color: #ffffff;
  transform: scale(1.05);
}

/* ==========================================================================
   LAYOUT DEL STUDIO (Canvas Superior en Vivo + Centro de Configuración)
   ========================================================================== */
.builder-container {
  width: min(calc(100% - 32px), 1160px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* 1. SECCIÓN SUPERIOR: SIMULADOR DE SISTEMA OPERATIVO EN VIVO */
.builder-simulator-section {
  width: 100%;
}

/* ==========================================================================
   2. PANEL DE CONFIGURACIÓN Y PERSONALIZACIÓN MODULAR
   ========================================================================== */
.builder-panel {
  background: #ffffff;
  border: 1px solid var(--builder-border);
  border-radius: 20px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Stepper / Tabs de navegación en píldora */
.builder-tabs {
  display: flex;
  background: #f1f5f9;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  padding: 0.35rem;
  gap: 0.35rem;
}

.builder-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--builder-text-muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.builder-tab svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.builder-tab:hover {
  color: #0f172a;
}

.builder-tab.is-active {
  color: #ffffff;
  background: var(--builder-primary);
  box-shadow: 0 4px 12px var(--builder-primary-glow);
}

.builder-tab.is-active svg {
  stroke: #ffffff;
}

/* Paneles de Contenido (Tabs) */
.builder-tab-pane {
  display: none;
  animation: tabFadeIn 0.22s ease forwards;
}

.builder-tab-pane.is-active {
  display: block;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.builder-section-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.builder-section-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.builder-section-title svg {
  width: 18px;
  height: 18px;
  stroke: var(--builder-primary);
  stroke-width: 2;
  flex-shrink: 0;
}

.builder-section-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0154f9;
  background: #eff6ff;
  border: 1px solid rgba(1, 84, 249, 0.2);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

/* ==========================================================================
   TAB 1: MÓDULOS EN GRID COMPACTO DE 2 COLUMNAS
   ========================================================================== */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}

.module-toggle-card {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  padding: 1.1rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.module-toggle-card:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.module-toggle-card.is-selected {
  background: #ffffff;
  border-color: var(--builder-primary);
  box-shadow: 0 8px 25px rgba(1, 84, 249, 0.12), inset 0 0 0 1px var(--builder-primary);
}

/* Iconos de alta gama con sutil paleta ejecutiva */
.module-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-card-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.1;
  stroke: currentColor;
  transition: all 0.2s ease;
}

/* Paleta ejecutiva sofisticada (tonos corporativos profesionales) */
.module-icon--ventas       { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
.module-icon--cajas        { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.module-icon--inventarios  { background: #fff7ed; color: #d97706; border-color: #ffedd5; }
.module-icon--clientes     { background: #f0fdfa; color: #0d9488; border-color: #ccfbf1; }
.module-icon--compras      { background: #f5f3ff; color: #7c3aed; border-color: #ede9fe; }
.module-icon--gastos       { background: #fff1f2; color: #e11d48; border-color: #ffe4e6; }
.module-icon--reportes     { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.module-icon--admin        { background: #faf5ff; color: #9333ea; border-color: #f3e8ff; }

/* Efecto elegante al estar seleccionado: icono iluminado con su propia identidad cromática */
.module-toggle-card.is-selected .module-icon--ventas       { background: #2563eb; color: #ffffff; border-color: #2563eb; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); }
.module-toggle-card.is-selected .module-icon--cajas        { background: #059669; color: #ffffff; border-color: #059669; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35); }
.module-toggle-card.is-selected .module-icon--inventarios  { background: #d97706; color: #ffffff; border-color: #d97706; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35); }
.module-toggle-card.is-selected .module-icon--clientes     { background: #0d9488; color: #ffffff; border-color: #0d9488; box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35); }
.module-toggle-card.is-selected .module-icon--compras      { background: #7c3aed; color: #ffffff; border-color: #7c3aed; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); }
.module-toggle-card.is-selected .module-icon--gastos       { background: #e11d48; color: #ffffff; border-color: #e11d48; box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35); }
.module-toggle-card.is-selected .module-icon--reportes     { background: #334155; color: #ffffff; border-color: #334155; box-shadow: 0 4px 14px rgba(51, 65, 85, 0.35); }
.module-toggle-card.is-selected .module-icon--admin        { background: #9333ea; color: #ffffff; border-color: #9333ea; box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35); }

.module-card-body {
  flex: 1;
  min-width: 0;
}

.module-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.module-tag-chip {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  background: #f1f5f9;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.module-card-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}

.module-card-sub {
  font-size: 0.74rem;
  color: var(--builder-text-muted);
  line-height: 1.35;
  display: block;
}

/* Switch Táctil On/Off */
.module-switch {
  width: 42px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.22s ease;
  margin-left: 0.25rem;
}

.module-switch__handle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.module-toggle-card.is-selected .module-switch {
  background: var(--builder-primary);
}

.module-toggle-card.is-selected .module-switch__handle {
  transform: translateX(18px);
}

/* ==========================================================================
   TAB 2: PALETA DE COLORES, MODOS Y RADIOS (DISEÑO ESTUDIO PROFESIONAL)
   ========================================================================== */
.theme-config-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 980px) {
  .theme-config-grid {
    grid-template-columns: 1fr;
  }
}

.theme-config-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* TARJETAS DE CONFIGURACIÓN */
.config-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.config-group-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
  display: block;
}

/* SELECTOR DE ENTORNO VISUAL (CLARO / OSCURO / GLASS) */
.theme-mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.theme-mode-options--4 {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

@media (min-width: 900px) {
  .theme-mode-options--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.theme-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 0.5rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  color: #475569;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-mode-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.theme-mode-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.theme-mode-btn.is-active {
  background: #eff6ff;
  border-color: var(--builder-primary);
  color: var(--builder-primary);
  box-shadow: 0 4px 12px var(--builder-primary-glow);
}

.theme-mode-btn.is-active svg {
  stroke: var(--builder-primary);
}

/* SELECTOR DE ESQUINAS Y ACABADOS */
.radius-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.radius-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.45rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  color: #475569;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.radius-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

.radius-btn.is-active {
  background: #eff6ff;
  border-color: var(--builder-primary);
  color: var(--builder-primary);
  font-weight: 700;
  box-shadow: 0 4px 12px var(--builder-primary-glow);
}

/* ==========================================================================
   ESTUDIO DE COLOR PROFESIONAL (PANEL DERECHO)
   ========================================================================== */
.color-studio-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.color-studio-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.color-studio-sub {
  font-size: 0.76rem;
  color: #64748b;
  margin: 0.2rem 0 0;
  line-height: 1.4;
}

.color-active-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  background: #f8fafc;
  color: #0f172a;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  letter-spacing: 0.02em;
}

/* SWATCHES CIRCULARES DE COLOR (IDÉNTICO A IMAGEN 1) */
.color-swatches-wrap {
  margin: 0.1rem 0;
}

.color-swatches {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.2rem 0;
}

.color-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  outline: none;
}

.color-swatch:hover {
  transform: scale(1.12);
}

.color-swatch.is-active {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px var(--swatch-color), 0 8px 22px var(--swatch-glow);
}

.color-swatch.is-active::after {
  content: "✓";
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* SELECTOR PROFESIONAL 2D Y CONTROLES (IDÉNTICO A IMAGEN 2) */
.color-picker-pro-box {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.15rem;
}

.color-spectrum-wrapper {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  user-select: none;
  touch-action: none;
}

.color-spectrum-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.color-spectrum-pointer {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65), inset 0 0 2px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.05s ease;
}

.color-hue-slider-row {
  width: 100%;
  padding: 0.2rem 0;
}

.color-hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
}

.color-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.color-hue-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.color-hue-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* FILA DE ENTRADA HEXADECIMAL */
.color-inputs-pro-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.color-preview-trigger {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.color-preview-swatch {
  width: 100%;
  height: 100%;
  transition: background-color 0.15s ease;
}

.color-native-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.color-hex-field-container {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 0.85rem;
  height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-hex-field-container:focus-within {
  border-color: var(--builder-primary);
  box-shadow: 0 0 0 3px var(--builder-primary-glow);
}

.color-hex-tag {
  font-size: 0.76rem;
  font-weight: 800;
  color: #94a3b8;
  margin-right: 0.45rem;
  user-select: none;
}

.color-hex-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  padding: 0;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.color-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 1.15rem;
  height: 44px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.color-copy-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}


/* ==========================================================================
   TAB 3: TIPOGRAFÍA & FUENTES (Grid de 3 Columnas)
   ========================================================================== */
.font-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.font-options--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.font-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.2rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  color: #475569;
  transition: all 0.18s ease;
  text-align: left;
}

.font-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.font-btn.is-active {
  background: #eff6ff;
  border-color: var(--builder-primary);
  color: var(--builder-primary);
  box-shadow: 0 4px 14px rgba(1, 84, 249, 0.12);
}

.font-btn__name {
  font-size: 0.98rem;
  font-weight: 700;
  display: block;
  color: #0f172a;
  margin-bottom: 0.2rem;
}

.font-btn__sample {
  font-size: 0.74rem;
  color: var(--builder-text-muted);
}

.font-btn__check {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--builder-primary);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.18s ease;
}

.font-btn.is-active .font-btn__check {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   TAB 4: BOTONES & COMPONENTES UI (Grid de 3 Columnas)
   ========================================================================== */
.btn-style-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.btn-style-options--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.btn-style-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-style-card:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.btn-style-card.is-active {
  background: #eff6ff;
  border-color: var(--builder-primary);
  box-shadow: 0 4px 14px rgba(1, 84, 249, 0.12);
}

.btn-style-meta h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.15rem;
}

.btn-style-meta p {
  font-size: 0.72rem;
  color: var(--builder-text-muted);
  margin: 0;
}

.btn-style-sample {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  pointer-events: none;
}

.sample--3d {
  background: var(--builder-primary);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 0 #0036a8, 0 6px 12px rgba(0, 0, 0, 0.15);
}

.sample--glow {
  background: linear-gradient(135deg, var(--builder-primary), #60a5fa);
  color: #ffffff;
  box-shadow: 0 0 14px var(--builder-primary-glow);
  border: none;
}

.sample--flat {
  background: transparent;
  color: var(--builder-primary);
  border: 1.5px solid var(--builder-primary);
}

/* ==========================================================================
   SIMULADOR EN VIVO (Canvas Interactivo)
   ========================================================================== */

.simulator-frame {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: max-width 0.52s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.52s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease,
              transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1),
              margin 0.45s ease;
  will-change: max-width, border-radius, transform, box-shadow;
}

/* Barra superior de la ventana del simulador */
.simulator-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.55rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  min-height: 32px;
}

.simulator-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sim-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sim-dot--red    { background: #ef4444; }
.sim-dot--yellow { background: #f59e0b; }
.sim-dot--green  { background: #10b981; }

.simulator-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sim-live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid rgba(5, 150, 105, 0.25);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.3rem;
}

.sim-live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.simulator-device-toggle {
  display: flex;
  background: #e2e8f0;
  border-radius: 8px;
  padding: 2px;
}

.device-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  color: var(--builder-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.device-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}

.device-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.device-btn.is-active svg {
  stroke: #0f172a;
}

/* ==========================================================================
   CANVAS DE LA APLICACIÓN SIMULADA (Live App Screen)
   ========================================================================== */
.sim-app-viewport {
  min-height: 400px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  font-family: var(--builder-font);
  zoom: 0.88;
}

/* TEMAS DEL SIMULADOR */
.sim-theme--light {
  background: #f8fafc;
  color: #0f172a;
}

.sim-theme--dark {
  background: #0f172a;
  color: #f8fafc;
}

.sim-theme--glass {
  background: radial-gradient(circle at 15% 15%, #1e1b4b 0%, #0f172a 45%, #030712 100%);
  color: #ffffff;
  position: relative;
}

/* SIDEBAR SIMULADO (Módulos Activos en Vivo) */
.sim-sidebar {
  width: 172px;
  border-right: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 0.75rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
  transition: width 0.25s ease;
}

.sim-theme--dark .sim-sidebar {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.sim-logo-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.3rem;
}

.sim-logo-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--builder-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 900;
}

.sim-logo-text {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sim-nav-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--builder-text-muted);
  padding: 0 0.3rem;
  letter-spacing: 0.04em;
}

.sim-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sim-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  border-radius: var(--builder-radius);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--builder-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sim-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sim-nav-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.sim-nav-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-nav-item:hover,
.sim-nav-item.is-active {
  background: var(--builder-primary);
  color: #ffffff;
}

.sim-nav-item__badge {
  margin-left: auto;
  font-size: 0.58rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sim-nav-item:hover .sim-nav-item__badge,
.sim-nav-item.is-active .sim-nav-item__badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Footer de Usuario en Sidebar */
.sim-user-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}

.sim-theme--dark .sim-user-footer {
  border-color: rgba(255, 255, 255, 0.08);
}

.sim-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sim-theme--dark .sim-user-avatar {
  background: var(--builder-primary);
}

.sim-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.sim-user-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-theme--dark .sim-user-name {
  color: #f8fafc;
}

.sim-user-role {
  font-size: 0.58rem;
  color: var(--builder-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ÁREA PRINCIPAL DEL DASHBOARD */
.sim-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  background: #f8fafc;
}

/* Topbar del Dashboard */
.sim-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sim-greeting h4 {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0;
}

.sim-greeting p {
  font-size: 0.72rem;
  color: var(--builder-text-muted);
  margin: 0;
}

.sim-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sim-btn-primary {
  padding: 0.42rem 0.85rem;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: var(--builder-radius);
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: transform 0.18s ease;
}

.sim-btn-primary:hover {
  transform: translateY(-1px);
}

/* Estilos dinámicos de botones en el simulador */
.btn-style--3d {
  background: var(--builder-primary);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 0 #0036a8, 0 5px 10px rgba(0, 0, 0, 0.18);
}

.btn-style--glow {
  background: linear-gradient(135deg, var(--builder-primary), #60a5fa);
  color: #ffffff;
  box-shadow: 0 0 14px var(--builder-primary-glow);
}

.btn-style--flat {
  background: transparent;
  color: var(--builder-primary);
  border: 1.5px solid var(--builder-primary);
}

/* GRID DE METRIC CARDS */
.sim-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.sim-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--builder-radius);
  padding: 0.85rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.sim-theme--dark .sim-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.sim-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.sim-card-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--builder-text-muted);
}

.sim-card-icon-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sim-card-icon-badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.sim-icon-badge--blue   { background: #eff6ff; color: #1d4ed8; }
.sim-icon-badge--purple { background: #f5f3ff; color: #6d28d9; }
.sim-icon-badge--green  { background: #ecfdf5; color: #047857; }

.sim-theme--dark .sim-icon-badge--blue   { background: rgba(29, 78, 216, 0.2); color: #93c5fd; }
.sim-theme--dark .sim-icon-badge--purple { background: rgba(109, 40, 217, 0.2); color: #c4b5fd; }
.sim-theme--dark .sim-icon-badge--green  { background: rgba(4, 120, 87, 0.2); color: #6ee7b7; }

.sim-card-val {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.sim-card-growth {
  font-size: 0.66rem;
  font-weight: 700;
  color: #059669;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

/* ÁREA DE GRÁFICO / REPORTES SIMULADOS */
.sim-chart-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--builder-radius);
  padding: 0.9rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.sim-theme--dark .sim-chart-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.sim-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.sim-chart-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0;
}

/* Mini barras de gráfico */
.sim-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  height: 80px;
  padding-top: 0.4rem;
}

.sim-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  height: 100%;
  justify-content: flex-end;
}

.sim-bar {
  width: 100%;
  max-width: 24px;
  background: var(--builder-primary);
  border-radius: 4px 4px 0 0;
  transition: height 0.35s ease, background 0.2s ease;
  opacity: 0.9;
}

.sim-bar-label {
  font-size: 0.62rem;
  color: var(--builder-text-muted);
}

/* TABLA DE REGISTROS SIMULADA */
.sim-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--builder-radius);
  padding: 0.85rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.sim-theme--dark .sim-table-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.sim-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.52rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.74rem;
  gap: 0.75rem;
}

.sim-theme--dark .sim-table-row {
  border-color: rgba(255, 255, 255, 0.05);
}

.sim-table-row:last-child {
  border-bottom: none;
}

.sim-table-col-main {
  display: flex;
  flex-direction: column;
  flex: 1.2;
  min-width: 0;
  line-height: 1.25;
}

.sim-table-col-main strong {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-theme--dark .sim-table-col-main strong {
  color: #f8fafc;
}

.sim-table-col-main span {
  font-size: 0.62rem;
  color: var(--builder-text-muted);
}

.sim-table-col-module {
  font-size: 0.66rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  flex: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-theme--dark .sim-table-col-module {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.sim-table-col-amount {
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sim-theme--dark .sim-table-col-amount {
  color: #f8fafc;
}

.sim-badge {
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sim-badge--success {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.sim-badge--active {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* ==========================================================================
   SIMULADOR SMARTPHONE FLAGSHIP ULTRA-REALISTA (TITANIUM CURVED BODY)
   ========================================================================== */

/* 1. Elementos Móviles Ocultos por Defecto en Vista Escritorio */
.sim-phone-island,
.sim-phone-time,
.sim-phone-status-icons {
  display: none !important;
}

/* 2. Chasis del Teléfono Flagship (Compacto, Proporciones de iPhone 15 Pro / Galaxy S24 Ultra) */
.simulator-frame.is-mobile-view {
  max-width: 325px !important;
  margin: 1.5rem auto 2.5rem !important;
  border-radius: 46px !important;
  /* Chasis de Titanio cepillado con bordes limpios sin fondos negros remanentes */
  background: #ffffff !important;
  box-shadow: 
    0 0 0 3px #2b3445,
    0 0 0 7px #0f172a,
    0 0 0 8.5px #3b4252,
    0 25px 60px -10px rgba(0, 0, 0, 0.5),
    0 12px 25px -5px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: max-width 0.52s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.52s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease,
              transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1),
              margin 0.45s ease !important;
}

/* Adaptación del bisel en Temas Dark y Glass */
.simulator-frame.is-mobile-view[data-theme="dark"],
.simulator-frame.is-mobile-view:has(.sim-theme--dark) {
  background: #05070d !important;
  box-shadow: 
    0 0 0 3px #1e293b,
    0 0 0 7px #020617,
    0 0 0 8.5px #334155,
    0 30px 70px -10px rgba(0, 0, 0, 0.85),
    0 15px 30px -5px rgba(0, 0, 0, 0.5) !important;
}

.simulator-frame.is-mobile-view[data-theme="glass"],
.simulator-frame.is-mobile-view:has(.sim-theme--glass) {
  background: #02040a !important;
  box-shadow: 
    0 0 0 3px rgba(255, 255, 255, 0.15),
    0 0 0 7px #030712,
    0 0 0 8.5px rgba(255, 255, 255, 0.22),
    0 30px 80px -10px rgba(0, 0, 0, 0.9),
    0 15px 35px -5px rgba(0, 0, 0, 0.6) !important;
}

/* 3. Barra Superior / Status Bar de Smartphone */
.simulator-frame.is-mobile-view .simulator-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  padding: 0.65rem 1.15rem 0.5rem !important;
  min-height: 42px !important;
  background: #090d16 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

/* Ocultar botones de ventana macOS en el teléfono */
.simulator-frame.is-mobile-view .simulator-controls {
  display: none !important;
}
.simulator-frame.is-mobile-view .simulator-title {
  display: none !important;
}
.simulator-frame.is-mobile-view .simulator-topbar::after {
  display: none !important; /* Desactivar content anterior */
}

/* Hora real a la izquierda en la Status Bar */
.simulator-frame.is-mobile-view .sim-phone-time {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.02em !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
  min-width: 42px !important;
  z-index: 5 !important;
}

/* Dynamic Island Centrada con Lente de Cámara Frontal y Sensor TrueDepth */
.simulator-frame.is-mobile-view .sim-phone-island {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 82px !important;
  height: 20px !important;
  background: #000000 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  gap: 12px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  z-index: 6 !important;
}

/* Lente de Cámara frontal con reflejo óptico realista azul zafiro */
.simulator-frame.is-mobile-view .sim-phone-camera {
  width: 9.5px !important;
  height: 9.5px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #1e3a8a 0%, #090e1a 60%, #000000 100%) !important;
  box-shadow: 0 0 2px rgba(59, 130, 246, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  position: relative !important;
}
.simulator-frame.is-mobile-view .sim-phone-camera::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 2.5px !important;
  height: 2.5px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border-radius: 50% !important;
}

/* Sensor TrueDepth / Infrarrojo */
.simulator-frame.is-mobile-view .sim-phone-sensor {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #111827 !important;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

/* Iconos de Estado (Señal 5G, WiFi, Batería con %) a la Derecha */
.simulator-frame.is-mobile-view .sim-phone-status-icons {
  display: flex !important;
  align-items: center !important;
  gap: 0.38rem !important;
  color: #f8fafc !important;
  z-index: 5 !important;
}

/* Barras de Señal 5G */
.simulator-frame.is-mobile-view .sim-phone-signal {
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 1.5px !important;
  height: 10px !important;
}
.simulator-frame.is-mobile-view .sim-sig-bar {
  width: 2.5px !important;
  background: #f8fafc !important;
  border-radius: 0.5px !important;
}
.simulator-frame.is-mobile-view .sim-sig-1 { height: 3.5px !important; }
.simulator-frame.is-mobile-view .sim-sig-2 { height: 5.5px !important; }
.simulator-frame.is-mobile-view .sim-sig-3 { height: 8px !important; }
.simulator-frame.is-mobile-view .sim-sig-4 { height: 10px !important; }

/* Icono WiFi SVG */
.simulator-frame.is-mobile-view .sim-phone-wifi-icon {
  width: 13px !important;
  height: 13px !important;
  stroke: #f8fafc !important;
}

/* Cápsula de Batería con Porcentaje Real */
.simulator-frame.is-mobile-view .sim-phone-battery-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}
.simulator-frame.is-mobile-view .sim-phone-battery-pct {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f8fafc !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.simulator-frame.is-mobile-view .sim-phone-battery-shell {
  width: 20px !important;
  height: 10px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 3.5px !important;
  padding: 1px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.simulator-frame.is-mobile-view .sim-phone-battery-shell::after {
  content: '' !important;
  position: absolute !important;
  right: -3px !important;
  top: 2.2px !important;
  width: 2px !important;
  height: 3.6px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border-radius: 0 1.5px 1.5px 0 !important;
}
.simulator-frame.is-mobile-view .sim-phone-battery-level {
  height: 100% !important;
  border-radius: 1.5px !important;
  background: #10b981 !important;
  transition: width 0.3s ease, background 0.3s ease !important;
}
.simulator-frame.is-mobile-view .sim-phone-battery-bolt {
  position: absolute !important;
  font-size: 7px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* 4. Menú Lateral Móvil Desplegable (Side Drawer tipo App Nativa) */
.simulator-frame.is-mobile-view .sim-sidebar-backdrop {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 80;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.simulator-frame.is-mobile-view .sim-sidebar-backdrop.is-active {
  display: block;
  opacity: 1;
}

.simulator-frame.is-mobile-view .sim-sidebar {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 220px !important;
  height: 100% !important;
  z-index: 90 !important;
  background: #ffffff !important;
  box-shadow: 4px 0 25px rgba(0, 0, 0, 0.28) !important;
  transform: translateX(-105%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-right: 1px solid rgba(226, 232, 240, 0.9) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.simulator-frame.is-mobile-view .sim-sidebar.is-mobile-open {
  transform: translateX(0) !important;
}

/* Adaptación del Drawer lateral en Modo Oscuro */
.simulator-frame.is-mobile-view[data-theme="dark"] .sim-sidebar,
.simulator-frame.is-mobile-view:has(.sim-theme--dark) .sim-sidebar {
  background: #0f172a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.7) !important;
}

/* Adaptación del Drawer lateral en Modo Glass */
.simulator-frame.is-mobile-view[data-theme="glass"] .sim-sidebar,
.simulator-frame.is-mobile-view:has(.sim-theme--glass) .sim-sidebar {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-sidebar,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-sidebar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* 5. Viewport Móvil con Pantalla Completa sin Banda Negra */
.simulator-frame.is-mobile-view .sim-app-viewport {
  max-height: 565px !important;
  height: 565px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
  background: #ffffff !important;
}
.simulator-frame.is-mobile-view .sim-app-viewport::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Edge */
  width: 0 !important;
  height: 0 !important;
}

/* 6. Barra de Navegación Móvil */
.simulator-frame.is-mobile-view .sim-navbar-header {
  padding: 0.55rem 0.75rem !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.simulator-frame.is-mobile-view .sim-dash-title {
  font-size: 0.88rem !important;
}
.simulator-frame.is-mobile-view .sim-nav-right {
  gap: 0.35rem !important;
}
.simulator-frame.is-mobile-view .simulator-zoom-widget {
  display: none !important;
}
.simulator-frame.is-mobile-view .sim-user-pill-name {
  display: none !important;
}
.simulator-frame.is-mobile-view .sim-user-pill {
  padding: 0.2rem !important;
  border-radius: 50% !important;
}
.simulator-frame.is-mobile-view .sim-user-pill svg {
  display: none !important;
}

/* 7. Barra de Filtros y Fechas Móvil */
.simulator-frame.is-mobile-view .sim-filter-bar {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.45rem !important;
  padding: 0.5rem 0.75rem 0.35rem !important;
}
.simulator-frame.is-mobile-view .sim-date-input-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.simulator-frame.is-mobile-view .sim-date-field {
  flex: 1 !important;
  justify-content: space-between !important;
  font-size: 0.72rem !important;
  padding: 0.32rem 0.55rem !important;
}
.simulator-frame.is-mobile-view .sim-btn-filter {
  width: 100% !important;
  justify-content: center !important;
  padding: 0.45rem !important;
  font-size: 0.75rem !important;
}
.simulator-frame.is-mobile-view .sim-btn-action-lime {
  width: 100% !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  font-size: 0.78rem !important;
}

/* 8. Cuadrículas de KPIs del Tablero en 2 Columnas Móviles */
.simulator-frame.is-mobile-view .sim-kpi-5-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.45rem !important;
  padding: 0.35rem 0.75rem !important;
}
.simulator-frame.is-mobile-view .sim-kpi-5-grid > .sim-kpi-pill-card:last-child {
  grid-column: 1 / -1 !important;
}
.simulator-frame.is-mobile-view .sim-kpi-pill-card {
  padding: 0.65rem 0.45rem !important;
}
.simulator-frame.is-mobile-view .sim-kpi-big-val {
  font-size: 0.98rem !important;
}

/* Layout Inferior del Tablero */
.simulator-frame.is-mobile-view .sim-lower-grid {
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
  padding: 0.35rem 0.75rem 0.85rem !important;
}

/* Cuadrículas de Vistas Modulares (4 KPIs a 2x2) */
.simulator-frame.is-mobile-view .sim-kpi-4-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.45rem !important;
  padding: 0.35rem 0.75rem 0.55rem !important;
}
.simulator-frame.is-mobile-view .sim-kpi-mini-card {
  padding: 0.55rem 0.65rem !important;
}
.simulator-frame.is-mobile-view .sim-kpi-mini-val {
  font-size: 1rem !important;
}

/* Header bar de vistas modulares */
.simulator-frame.is-mobile-view .sim-view-header-bar {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  padding: 0.55rem 0.75rem 0.35rem !important;
}
.simulator-frame.is-mobile-view .sim-search-box {
  width: 100% !important;
  box-sizing: border-box !important;
}
.simulator-frame.is-mobile-view .sim-view-actions {
  flex-direction: column !important;
  width: 100% !important;
  gap: 0.4rem !important;
}
.simulator-frame.is-mobile-view .sim-btn-secondary {
  width: 100% !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
}
.simulator-frame.is-mobile-view .sim-caja-status-pill {
  width: 100% !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 0.75rem !important;
}

/* Tarjetas de Tablas en Móvil con Scroll Horizontal Táctil Suave */
.simulator-frame.is-mobile-view .sim-table-card {
  margin: 0 0.75rem 0.85rem !important;
  border-radius: 12px !important;
}
.simulator-frame.is-mobile-view .sim-data-table th,
.simulator-frame.is-mobile-view .sim-data-table td {
  padding: 0.48rem 0.6rem !important;
  font-size: 0.68rem !important;
  white-space: nowrap !important;
}

/* 9. Barra Flotante Home Indicator Estilo iOS/Android (Superpuesta limpiamente sobre la pantalla, sin banda negra) */
.simulator-frame.is-mobile-view::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 105px !important;
  height: 4.5px !important;
  background: rgba(15, 23, 42, 0.35) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  z-index: 70 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* En tema oscuro o glass, el Home Indicator brilla con tono blanco translúcido */
.simulator-frame.is-mobile-view[data-theme="dark"]::after,
.simulator-frame.is-mobile-view:has(.sim-theme--dark)::after,
.simulator-frame.is-mobile-view[data-theme="glass"]::after,
.simulator-frame.is-mobile-view:has(.sim-theme--glass)::after {
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* En temas dark / glass, el viewport toma el fondo correspondiente */
.simulator-frame.is-mobile-view[data-theme="dark"] .sim-app-viewport,
.simulator-frame.is-mobile-view:has(.sim-theme--dark) .sim-app-viewport {
  background: #090d16 !important;
}
.simulator-frame.is-mobile-view[data-theme="glass"] .sim-app-viewport,
.simulator-frame.is-mobile-view:has(.sim-theme--glass) .sim-app-viewport {
  background: radial-gradient(circle at 15% 15%, #1e1b4b 0%, #0f172a 45%, #030712 100%) !important;
}



/* ==========================================================================
   ANIMACIONES CINEMATOGRÁFICAS DE TRANSICIÓN PC <-> SMARTPHONE
   ========================================================================== */

/* Efecto de morphing elástico con rebote sutil cuando pasa a teléfono móvil */
.simulator-frame.is-morphing-to-mobile {
  animation: simMorphToPhone 0.54s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

@keyframes simMorphToPhone {
  0% {
    transform: scale(1) translateY(0);
  }
  30% {
    transform: scale(0.96) translateY(-4px);
  }
  70% {
    transform: scale(1.02) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* Efecto expansivo cinematográfico cuando regresa a computadora / escritorio */
.simulator-frame.is-morphing-to-desktop {
  animation: simMorphToDesktop 0.52s cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
}

@keyframes simMorphToDesktop {
  0% {
    transform: scale(0.94) translateY(6px);
  }
  50% {
    transform: scale(1.015) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* Transición suave para los elementos de la Status Bar y Dynamic Island */
.simulator-frame .sim-phone-island,
.simulator-frame .sim-phone-time,
.simulator-frame .sim-phone-status-icons {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.simulator-frame.is-mobile-view .sim-phone-island {
  animation: simIslandPop 0.42s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}

@keyframes simIslandPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.simulator-frame.is-mobile-view .sim-phone-time {
  animation: simFadeSlideLeft 0.38s ease forwards;
}
@keyframes simFadeSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.simulator-frame.is-mobile-view .sim-phone-status-icons {
  animation: simFadeSlideRight 0.38s ease forwards;
}
@keyframes simFadeSlideRight {
  0% {
    opacity: 0;
    transform: translateX(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animación sutil de los botones selectores de dispositivo (PC / Teléfono) */
.device-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.device-btn:active {
  transform: scale(0.9);
}
.device-btn.is-active {
  box-shadow: 0 2px 8px rgba(1, 84, 249, 0.25);
  transform: scale(1.05);
}


/* Mensaje guiado cuando el cliente empieza desde cero (sin módulos elegidos aún) */
.sim-empty-nav-hint {
  margin: 1.25rem 0.6rem 0.5rem;
  padding: 1.15rem 0.85rem;
  background: rgba(1, 84, 249, 0.04);
  border: 1px dashed rgba(1, 84, 249, 0.25);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  animation: simFadeInHint 0.4s ease forwards;
}

@keyframes simFadeInHint {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sim-empty-nav-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.sim-empty-nav-hint strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--builder-dark, #0f172a);
  letter-spacing: -0.01em;
}

.sim-empty-nav-hint p {
  font-size: 0.68rem;
  line-height: 1.35;
  color: #64748b;
  margin: 0;
}

.sim-theme--dark .sim-empty-nav-hint {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}
.sim-theme--dark .sim-empty-nav-hint strong {
  color: #f1f5f9;
}
.sim-theme--dark .sim-empty-nav-hint p {
  color: #94a3b8;
}

.sim-theme--glass .sim-empty-nav-hint,
.sim-theme--glass-light .sim-empty-nav-hint {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}
.sim-theme--glass .sim-empty-nav-hint strong { color: #ffffff; }
.sim-theme--glass .sim-empty-nav-hint p { color: rgba(255, 255, 255, 0.75); }


/* ==========================================================================
   DROPDOWN DE PERFIL DE USUARIO ULTRA-PROFESIONAL (ADGMINGYM)
   ========================================================================== */

.sim-user-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Botón User Pill (Limpio, sin marcos oscuros alrededor de la imagen) */
.sim-user-pill {
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.28rem 0.65rem 0.28rem 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sim-user-pill:hover,
.sim-user-pill.is-active {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

/* Contenedor del avatar: SIN fondo negro, SIN marcos raros, imagen limpia */
.sim-user-avatar-wrap {
  position: relative;
  width: 26px;
  height: 26px;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent !important;
}

/* Punto de estado En Línea (Verde esmeralda flotante como en la imagen) */
.sim-user-avatar-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8.5px;
  height: 8.5px;
  border-radius: 50%;
  background: #10b981 !important; /* Verde vivo */
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

.sim-user-chevron {
  transition: transform 0.25s ease;
  color: #64748b;
}

.sim-user-pill.is-active .sim-user-chevron {
  transform: rotate(180deg);
  color: #0f172a;
}

/* Panel Desplegable Flotante (Pop-up Card) */
.sim-profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 255px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.05);
  padding: 0.95rem;
  z-index: 120;
  box-sizing: border-box;
  animation: simProfilePop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

.sim-profile-dropdown.is-open {
  display: block;
}

@keyframes simProfilePop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Cabecera del usuario dentro del menú */
.sim-profile-dropdown__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.5rem;
}

.sim-profile-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
  box-sizing: border-box;
}

.sim-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sim-profile-user-info {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.sim-profile-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.sim-profile-email {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Insignia Super Admin */
.sim-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 0.2rem;
  width: fit-content;
}

.sim-profile-dropdown__divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0.65rem 0;
}

/* Lista de Acciones del Menú */
.sim-profile-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sim-profile-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.18s ease;
  background: transparent;
}

.sim-profile-item:hover {
  background: #f8fafc;
  transform: translateX(2px);
}

.sim-profile-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sim-profile-item__icon--profile {
  background: #f1f5f9;
  color: #334155;
}

.sim-profile-item__icon--logout {
  background: #fee2e2;
  color: #dc2626;
}

.sim-profile-item__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sim-profile-item__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
}

.sim-profile-item__desc {
  font-size: 0.65rem;
  color: #64748b;
}

.sim-profile-item--danger:hover {
  background: #fef2f2;
}

.sim-profile-item--danger .sim-profile-item__title {
  color: #dc2626;
}

/* ==========================================
   ADAPTACIÓN EN TEMA OSCURO
   ========================================== */
.sim-theme--dark .sim-profile-dropdown {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
}
.sim-theme--dark .sim-user-avatar-dot {
  border-color: #0f172a !important;
}
.sim-theme--dark .sim-profile-avatar-box {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}
.sim-theme--dark .sim-profile-name {
  color: #f8fafc;
}
.sim-theme--dark .sim-profile-email {
  color: #94a3b8;
}
.sim-theme--dark .sim-profile-badge {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
}
.sim-theme--dark .sim-profile-dropdown__divider {
  background: rgba(255, 255, 255, 0.06);
}
.sim-theme--dark .sim-profile-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.sim-theme--dark .sim-profile-item__icon--profile {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
.sim-theme--dark .sim-profile-item__title {
  color: #f1f5f9;
}
.sim-theme--dark .sim-profile-item__desc {
  color: #94a3b8;
}
.sim-theme--dark .sim-profile-item--danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* ==========================================
   ADAPTACIÓN EN TEMA GLASS
   ========================================== */
.sim-theme--glass .sim-profile-dropdown {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
}
.sim-theme--glass .sim-user-avatar-dot {
  border-color: #0b1120 !important;
}
.sim-theme--glass .sim-profile-avatar-box {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.sim-theme--glass .sim-profile-name { color: #ffffff; }
.sim-theme--glass .sim-profile-email { color: rgba(255, 255, 255, 0.7); }
.sim-theme--glass .sim-profile-dropdown__divider { background: rgba(255, 255, 255, 0.1); }
.sim-theme--glass .sim-profile-item:hover { background: rgba(255, 255, 255, 0.1); }
.sim-theme--glass .sim-profile-item__title { color: #ffffff; }
.sim-theme--glass .sim-profile-item__desc { color: rgba(255, 255, 255, 0.65); }


/* ==========================================================================
   CORRECCIONES DE VISIBILIDAD: GLASS CLARO EN MÓVIL Y CONTRASTE TEMA OSCURO
   ========================================================================== */

/* 1. VISIBILIDAD DE DETALLES DEL SMARTPHONE EN TEMA GLASS CLARO */
.simulator-frame.is-mobile-view[data-theme="glass-light"],
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) {
  background: #f8fafc !important;
  box-shadow: 
    0 0 0 3px #cbd5e1,
    0 0 0 7px #94a3b8,
    0 0 0 8.5px #cbd5e1,
    0 25px 60px -10px rgba(99, 102, 241, 0.25),
    0 12px 25px -5px rgba(15, 23, 42, 0.12) !important;
}

/* En glass claro, la Status Bar superior del teléfono debe tener elementos oscuros de alto contraste */
.simulator-frame.is-mobile-view[data-theme="glass-light"] .simulator-topbar,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .simulator-topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-phone-time,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-phone-time {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-phone-status-icons,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-phone-status-icons {
  color: #0f172a !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-sig-bar,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-sig-bar {
  background: #0f172a !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-phone-wifi-icon,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-phone-wifi-icon {
  stroke: #0f172a !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-phone-battery-pct,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-phone-battery-pct {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-phone-battery-shell,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-phone-battery-shell {
  border-color: #0f172a !important;
}

.simulator-frame.is-mobile-view[data-theme="glass-light"] .sim-phone-battery-shell::after,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light) .sim-phone-battery-shell::after {
  background: #0f172a !important;
}

/* Home Indicator inferior en glass-light */
.simulator-frame.is-mobile-view[data-theme="glass-light"]::after,
.simulator-frame.is-mobile-view:has(.sim-theme--glass-light)::after {
  background: rgba(15, 23, 42, 0.45) !important;
}

/* 2. CORRECCIONES DE CONTRASTE Y LEGIBILIDAD EN TEMA OSCURO */

/* Nombre y marca en el sidebar */
.sim-theme--dark .sim-brand-title {
  color: #ffffff !important;
}

/* Toggle de Dispositivo (PC / Móvil) en Tema Oscuro */
.sim-theme--dark .simulator-device-toggle {
  background: #162032 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.sim-theme--dark .device-btn {
  color: #94a3b8 !important;
}

.sim-theme--dark .device-btn:hover {
  color: #f8fafc !important;
}

.sim-theme--dark .device-btn.is-active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}
.sim-theme--dark .device-btn.is-active svg {
  stroke: #ffffff !important;
}

/* Widget de Zoom en Tema Oscuro */
.sim-theme--dark .simulator-zoom-widget {
  background: #162032 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.sim-theme--dark .sim-zoom-btn {
  color: #94a3b8 !important;
}
.sim-theme--dark .sim-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.sim-theme--dark .sim-zoom-badge {
  color: #f1f5f9 !important;
}

/* Botón y filtro de fechas en Tema Oscuro */
.sim-theme--dark .sim-date-input-wrap {
  color: #94a3b8 !important;
}
.sim-theme--dark .sim-date-label {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}
.sim-theme--dark .sim-date-field {
  background: #162032 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.sim-theme--dark .sim-date-field span {
  color: #f8fafc !important;
}
.sim-theme--dark .sim-date-field svg {
  stroke: #94a3b8 !important;
}

.sim-theme--dark .sim-btn-filter {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}
.sim-theme--dark .sim-btn-filter:hover {
  background: #334155 !important;
}

/* Pastilla de usuario en Tema Oscuro */
.sim-theme--dark .sim-user-pill {
  background: #162032 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.sim-theme--dark .sim-user-pill:hover,
.sim-theme--dark .sim-user-pill.is-active {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.sim-theme--dark .sim-user-pill-name {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.sim-theme--dark .sim-user-chevron {
  color: #cbd5e1 !important;
}

/* Empty nav hint estilizado y profesional */
.sim-empty-nav-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(1, 84, 249, 0.08);
  color: var(--sim-accent, #0154f9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.sim-theme--dark .sim-empty-nav-icon {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.sim-theme--glass .sim-empty-nav-icon,
.sim-theme--glass-light .sim-empty-nav-icon {
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
}

.builder-action-bar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  margin: 0.5rem 0 2rem;
  background: #ffffff;
  border: 1px solid rgba(1, 84, 249, 0.2);
  border-radius: 20px;
  padding: 1.15rem 1.6rem;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(1, 84, 249, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.builder-summary-info {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.summary-stat {
  display: flex;
  flex-direction: column;
}

.summary-stat__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--builder-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.summary-stat__val {
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
}

.summary-stat__val--accent {
  color: #0154f9;
}

.builder-actions-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.btn-builder-quote {
  background: linear-gradient(135deg, #0154f9 0%, #1d4ed8 100%);
  color: #ffffff;
  padding: 0.62rem 1.25rem;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 6px 18px rgba(1, 84, 249, 0.35);
  border: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.btn-builder-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(1, 84, 249, 0.45);
  color: #ffffff;
}

.quote-text-mobile {
  display: none;
}

.quote-text-full {
  display: inline;
}

.btn-builder-copy {
  background: #f1f5f9;
  color: #0f172a;
  padding: 0.62rem 0.95rem;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.18s ease;
}

.btn-builder-copy:hover {
  background: #e2e8f0;
}

/* Toast de notificación rápida */
.builder-toast {
  position: fixed;
  top: 86px;
  right: 24px;
  background: #059669;
  color: #ffffff;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  z-index: 2000;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.22s ease;
  pointer-events: none;
}

.builder-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   ADAPTACIONES RESPONSIVAS
   ========================================================================== */


@media (max-width: 860px) {
  .theme-config-grid,
  .font-options--grid,
  .btn-style-options--grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .modules-grid {
    grid-template-columns: 1fr;
  }
  .builder-page {
    padding-top: 60px;
    padding-bottom: 30px;
  }

  .builder-panel {
    padding: 1.1rem;
  }

  .builder-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.85rem 0.95rem !important;
    gap: 0.75rem !important;
    border-radius: 16px !important;
    margin: 0.5rem 0 1.5rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(1, 84, 249, 0.18) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(1, 84, 249, 0.04) !important;
    box-sizing: border-box !important;
  }

  .builder-summary-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    padding-bottom: 0.65rem !important;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.9) !important;
  }

  .summary-stat__label {
    font-size: 0.62rem !important;
    letter-spacing: 0.05em !important;
  }

  .summary-stat__val {
    font-size: 0.88rem !important;
  }

  .builder-actions-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-builder-copy {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 0.95rem !important;
    border-radius: 11px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.18s ease !important;
  }

  .btn-builder-copy svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  .btn-builder-quote {
    flex: 1 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    border-radius: 11px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #0154f9 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(1, 84, 249, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: center !important;
  }

  .btn-builder-quote svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  .quote-text-full {
    display: none !important;
  }

  .quote-text-mobile {
    display: inline !important;
  }

  .btn-builder-quote:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(1, 84, 249, 0.25) !important;
  }

  .btn-builder-copy:active {
    transform: scale(0.98) !important;
    background: #e2e8f0 !important;
  }

  .sim-metrics-grid {
    grid-template-columns: 1fr;
  }

  .sim-sidebar {
    width: 145px;
  }
}

@media (max-width: 580px) {
  .modules-grid {
    grid-template-columns: 1fr;
  }

  .builder-tabs {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .builder-tab {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
  }

  .sim-sidebar {
    display: none;
  }
}

.sim-icon-badge--red   { background: #fef2f2; color: #b91c1c; }
.sim-theme--dark .sim-icon-badge--red { background: rgba(185, 28, 28, 0.2); color: #fca5a5; }


/* ==========================================================================
   ESTILOS EXACTOS AL DASHBOARD DEL SCREENSHOT DE AIRCAN STUDIO
   ========================================================================== */

/* BRAND TOP SIDEBAR - Centrado minimalista sin recuadros */
.sim-brand-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1.15rem 0.75rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sim-brand-logo-img {
  width: 38px;
  height: 38px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-favicon-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(1, 84, 249, 0.25));
}

.sim-brand-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  text-align: center;
}

.sim-theme--dark .sim-brand-top {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.sim-theme--glass .sim-brand-top {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sim-theme--glass-light .sim-brand-top {
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

/* SIDEBAR SCROLL & ROWS */
.sim-side-nav-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem 0.5rem;
  overflow-y: auto;
}

.sim-side-cat-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.06em;
  padding: 0.75rem 0.65rem 0.25rem;
  display: block;
}

.sim-side-nav-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sim-nav-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.46rem 0.65rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.sim-nav-row:hover {
  background: #f8fafc;
  color: #0f172a;
}

.sim-nav-row.is-active-tablero {
  background: var(--sim-accent-soft, rgba(1, 84, 249, 0.08));
  color: var(--sim-accent, #0154f9);
  font-weight: 700;
}

/* LA BARRA VERTICAL NEON LIME DEL ITEM ACTIVO 'TABLERO' */
.sim-nav-row.is-active-tablero::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--sim-accent, #0154f9);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--sim-accent-glow, rgba(1, 84, 249, 0.4));
}

.sim-nav-row-icon {
  flex-shrink: 0;
  color: #64748b;
}

.sim-nav-row.is-active-tablero .sim-nav-row-icon {
  color: #0f172a;
}

.sim-chevron-right {
  margin-left: auto;
  font-size: 0.82rem;
  color: #cbd5e1;
}

/* TOPBAR INTERNO DEL DASHBOARD */
.sim-navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.95rem;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.sim-nav-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sim-hamburger-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  transition: transform 0.15s ease;
}

.sim-hamburger-btn:hover {
  transform: scale(1.05);
}

.sim-dash-badge-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sim-speedo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sim-accent-soft, rgba(1, 84, 249, 0.1));
  color: var(--sim-accent, #0154f9);
  border: 1px solid var(--sim-accent-glow, rgba(1, 84, 249, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.sim-dash-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sim-dash-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sim-dash-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.sim-pro-pill {
  font-size: 0.58rem;
  font-weight: 800;
  background: var(--sim-accent, #0154f9);
  color: var(--sim-accent-contrast, #ffffff);
  padding: 0.1rem 0.42rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px var(--sim-accent-glow, rgba(1, 84, 249, 0.25));
  transition: background 0.2s ease, color 0.2s ease;
}

.sim-dash-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}

.sim-nav-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sim-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

/* PERFIL DE USUARIO EXACTO AL SCREENSHOT */
.sim-user-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0.25rem 0.65rem 0.25rem 0.35rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sim-user-avatar-wrap {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #181d24;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-user-avatar-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: var(--sim-accent, #0154f9);
  border: 1.5px solid #ffffff;
  transition: background 0.2s ease;
}

.sim-user-pill-name {
  font-size: 0.75rem;
  color: #1e293b;
}

/* BARRA DE FILTRO SUPERIOR */
.sim-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem 0.3rem;
  flex-wrap: wrap;
}

.sim-date-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #475569;
  font-weight: 600;
}

.sim-date-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.26rem 0.55rem;
  font-size: 0.72rem;
  color: #0f172a;
  font-weight: 600;
}

.sim-btn-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #1e293b;
  color: #ffffff;
  border: none;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sim-btn-filter:hover {
  opacity: 0.9;
}

/* BOTÓN ACCIÓN DINÁMICO (+ NUEVO REGISTRO / PRODUCTO / CLIENTE) */
.sim-btn-action-lime {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--sim-accent, #0154f9) !important;
  color: var(--sim-accent-contrast, #ffffff) !important;
  border: none;
  padding: 0.44rem 0.95rem;
  border-radius: var(--builder-radius, 6px);
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--sim-accent-glow, rgba(1, 84, 249, 0.25)) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s ease, box-shadow 0.18s ease;
}

.sim-btn-action-lime:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 6px 18px var(--sim-accent-glow, rgba(1, 84, 249, 0.38)) !important;
}

.sim-btn-action-lime:active {
  transform: translateY(0);
}

/* ROW DE 5 KPI CARDS (EXACTO AL SCREENSHOT) */
.sim-kpi-5-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  padding: 0.3rem 0.85rem;
}

.sim-kpi-pill-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 0.65rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sim-kpi-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.15rem;
}

.sim-kpi-icon--green  { background: #ecfdf5; color: #10b981; }
.sim-kpi-icon--purple { background: #f5f3ff; color: #8b5cf6; }
.sim-kpi-icon--blue   { background: #eff6ff; color: #0284c7; }
.sim-kpi-icon--violet { background: #faf5ff; color: #7c3aed; }
.sim-kpi-icon--orange { background: #fff7ed; color: #ea580c; }

.sim-kpi-label {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.sim-kpi-big-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin: 0.05rem 0;
}

.sim-kpi-trend {
  font-size: 0.65rem;
  font-weight: 700;
}

.trend--up     { color: #10b981; }
.trend--subtle { color: #64748b; }
.trend--info   { color: #0284c7; }

/* SECCIÓN INFERIOR EN DOS COLUMNAS */
.sim-lower-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0.85rem 0.85rem;
  align-items: start;
}

.sim-chart-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
}

.sim-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sim-chart-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.sim-chart-period-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.65rem;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
}

.sim-chart-axis-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #94a3b8;
  margin: 0.75rem 0 0.5rem;
}

.sim-chart-canvas-mock {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.5rem 0 1rem;
}

.sim-grid-line-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sim-grid-num {
  font-size: 0.65rem;
  color: #94a3b8;
  width: 18px;
  text-align: center;
}

.sim-grid-line {
  flex: 1;
  border-bottom: 1px dashed #e2e8f0;
}

.sim-right-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sim-widget-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sim-widget-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.sim-empty-state-p {
  padding: 1.25rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: #94a3b8;
}

.sim-widget-btn-all {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.15s ease;
}

.sim-widget-btn-all:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* THE DARK TITANIUM CARD (ESTADO DE ASISTENCIA) */
.sim-attendance-dark-card {
  background: #181d24;
  color: #ffffff;
  border-radius: 16px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sim-dark-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
}

.sim-dark-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sim-dark-card-label {
  font-size: 0.75rem;
  color: #94a3b8;
}

.sim-dark-card-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #bef264;
}

/* SIDEBAR COLAPSADO (BOTÓN HAMBURGUESA) */
.sim-sidebar.is-collapsed {
  width: 62px;
  min-width: 62px;
}

.sim-sidebar.is-collapsed .sim-brand-title,
.sim-sidebar.is-collapsed .sim-side-cat-label,
.sim-sidebar.is-collapsed .sim-nav-row span:not(.sim-nav-row-icon),
.sim-sidebar.is-collapsed .sim-chevron-right {
  display: none;
}

.sim-sidebar.is-collapsed .sim-nav-row {
  justify-content: center;
  padding: 0.5rem;
}

/* ==========================================================================
   SISTEMA DE TEMA OSCURO PROFESIONAL (ULTRA-CLEAN DARK SUITE)
   ========================================================================== */

/* Frame de ventana del simulador cuando está en modo oscuro */
.simulator-frame[data-theme="dark"],
.simulator-frame:has(.sim-theme--dark) {
  background: #090d16;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.simulator-frame[data-theme="dark"] .simulator-topbar,
.simulator-frame:has(.sim-theme--dark) .simulator-topbar {
  background: #0d121f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.simulator-frame[data-theme="dark"] .simulator-title,
.simulator-frame:has(.sim-theme--dark) .simulator-title {
  color: #94a3b8;
}

/* Base del viewport y canvas principal */
.sim-theme--dark {
  background: #090d16;
  color: #f1f5f9;
}

.sim-theme--dark .sim-main {
  background: #090d16;
}

/* Header Navbar del Dashboard */
.sim-theme--dark .sim-navbar-header {
  background: #0d1322;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sim-theme--dark .sim-hamburger-btn {
  color: #cbd5e1;
}

.sim-theme--dark .sim-dash-title {
  color: #f8fafc;
}

.sim-theme--dark .sim-dash-sub {
  color: #64748b;
}

/* Barra de filtros de fecha y acción */
.sim-theme--dark .sim-date-input-wrap {
  color: #94a3b8;
}

.sim-theme--dark .sim-date-field {
  background: #131a29;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

.sim-theme--dark .sim-btn-filter {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

.sim-theme--dark .sim-btn-filter:hover {
  background: #334155;
}

/* User pill en Navbar */
.sim-theme--dark .sim-user-pill {
  background: #131a29;
  border-color: rgba(255, 255, 255, 0.08);
}

.sim-theme--dark .sim-user-pill-name {
  color: #f1f5f9;
}

/* Sidebar en Modo Oscuro */
.sim-theme--dark .sim-sidebar {
  background: #0d1322;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sim-theme--dark .sim-side-cat-label {
  color: #64748b;
}

.sim-theme--dark .sim-nav-row {
  color: #94a3b8;
}

.sim-theme--dark .sim-nav-row:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
}

.sim-theme--dark .sim-nav-row.is-active-tablero {
  background: rgba(var(--sim-accent-rgb, 1, 84, 249), 0.12);
  color: #ffffff;
}

.sim-theme--dark .sim-nav-row.is-active-tablero .sim-nav-row-icon {
  color: var(--sim-accent, #0154f9) !important;
}

.sim-theme--dark .sim-chevron-right {
  color: #475569;
}

/* Cards del Tablero (5 KPIs, Gráfico, Widgets) */
.sim-theme--dark .sim-kpi-pill-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.sim-theme--dark .sim-kpi-label {
  color: #94a3b8;
}

.sim-theme--dark .sim-kpi-big-val {
  color: #f8fafc;
}

/* Badges de iconos de los KPIs en modo oscuro con fondos suavizados */
.sim-theme--dark .sim-kpi-icon--green  { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.sim-theme--dark .sim-kpi-icon--purple { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.sim-theme--dark .sim-kpi-icon--blue   { background: rgba(2, 132, 199, 0.15); color: #38bdf8; }
.sim-theme--dark .sim-kpi-icon--violet { background: rgba(124, 58, 237, 0.15); color: #c084fc; }
.sim-theme--dark .sim-kpi-icon--orange { background: rgba(234, 88, 12, 0.15); color: #fb923c; }

/* Tarjeta del Gráfico */
.sim-theme--dark .sim-chart-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.sim-theme--dark .sim-chart-title {
  color: #f8fafc;
}

.sim-theme--dark .sim-chart-period-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.09);
  color: #cbd5e1;
}

.sim-theme--dark .sim-chart-period-btn:hover {
  background: #334155;
  color: #ffffff;
}

.sim-theme--dark .sim-grid-line {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.sim-theme--dark .sim-chart-axis-labels,
.sim-theme--dark .sim-grid-num {
  color: #64748b;
}

/* Tarjeta de Actividad Reciente */
.sim-theme--dark .sim-widget-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.sim-theme--dark .sim-widget-title {
  color: #f8fafc;
}

.sim-theme--dark .sim-empty-state-p {
  color: #64748b;
}

.sim-theme--dark .sim-widget-btn-all {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.sim-theme--dark .sim-widget-btn-all:hover {
  background: #334155;
  color: #ffffff;
}

/* Tarjeta de Estado del Sistema */
.sim-theme--dark .sim-attendance-dark-card {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* MODO OSCURO PARA TODAS LAS VISTAS MODULARES */
.sim-theme--dark .sim-views-container {
  background: #090d16;
}

.sim-theme--dark .sim-kpi-mini-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sim-theme--dark .sim-kpi-mini-title {
  color: #94a3b8;
}

.sim-theme--dark .sim-kpi-mini-val {
  color: #f8fafc;
}

.sim-theme--dark .sim-table-card {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.sim-theme--dark .sim-data-table th {
  background: #0d1322;
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.06);
}

.sim-theme--dark .sim-data-table td {
  border-color: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

.sim-theme--dark .sim-data-table td strong {
  color: #f8fafc;
}

.sim-theme--dark .sim-data-table td code {
  background: #1e293b;
  color: #93c5fd;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sim-theme--dark .sim-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.sim-theme--dark .sim-search-box {
  background: #131a29;
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

.sim-theme--dark .sim-search-input {
  background: transparent;
  color: #f1f5f9;
}

.sim-theme--dark .sim-btn-secondary {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.sim-theme--dark .sim-btn-secondary:hover {
  background: #334155;
  color: #ffffff;
}

.sim-theme--dark .sim-caja-status-pill {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

/* ==========================================================================
   SISTEMA DE GLASSMORFISM PREMIUM ULTRA-LUXURY (AEROGLASS SUITE)
   ========================================================================== */

/* Frame de ventana exterior en Glass */
.simulator-frame[data-theme="glass"],
.simulator-frame:has(.sim-theme--glass) {
  background: radial-gradient(135% 135% at 10% 10%, #1e1b4b 0%, #0f172a 40%, #030712 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.7), 0 0 45px rgba(99, 102, 241, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

.simulator-frame[data-theme="glass"] .simulator-topbar,
.simulator-frame:has(.sim-theme--glass) .simulator-topbar {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.simulator-frame[data-theme="glass"] .simulator-title,
.simulator-frame:has(.sim-theme--glass) .simulator-title {
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Lienzo de la aplicación */
.sim-theme--glass {
  background: radial-gradient(135% 135% at 20% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
              radial-gradient(135% 135% at 85% 90%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
              linear-gradient(180deg, #0f172a 0%, #030712 100%) !important;
  color: #f8fafc;
}

.sim-theme--glass .sim-main {
  background: transparent !important;
}

.sim-theme--glass .sim-views-container {
  background: transparent !important;
}

/* Barra de navegación superior */
.sim-theme--glass .sim-navbar-header {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

.sim-theme--glass .sim-hamburger-btn {
  color: #f1f5f9;
}

.sim-theme--glass .sim-dash-title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sim-theme--glass .sim-dash-sub {
  color: #94a3b8;
}

/* Sidebar translúcido esmerilado */
.sim-theme--glass .sim-sidebar {
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sim-theme--glass .sim-side-cat-label {
  color: #818cf8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sim-theme--glass .sim-nav-row {
  color: #cbd5e1;
}

.sim-theme--glass .sim-nav-row:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sim-theme--glass .sim-nav-row.is-active-tablero {
  background: rgba(var(--sim-accent-rgb, 1, 84, 249), 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.sim-theme--glass .sim-nav-row.is-active-tablero .sim-nav-row-icon {
  color: #ffffff !important;
}

.sim-theme--glass .sim-chevron-right {
  color: rgba(255, 255, 255, 0.35);
}

/* User pill & Search Box & Inputs en Glass */
.sim-theme--glass .sim-user-pill {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.sim-theme--glass .sim-user-pill-name {
  color: #f8fafc;
}

.sim-theme--glass .sim-date-input-wrap {
  color: #cbd5e1;
}

.sim-theme--glass .sim-date-field {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff;
}

.sim-theme--glass .sim-search-box {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.sim-theme--glass .sim-search-input {
  background: transparent !important;
  color: #ffffff !important;
}

.sim-theme--glass .sim-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.sim-theme--glass .sim-btn-filter,
.sim-theme--glass .sim-btn-secondary {
  background: rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transition: all 0.2s ease;
}

.sim-theme--glass .sim-btn-filter:hover,
.sim-theme--glass .sim-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.sim-theme--glass .sim-caja-status-pill {
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f1f5f9;
}

/* Tarjetas de Cristal Líquido (KPIs, Gráficos, Widgets y Tablas) */
.sim-theme--glass .sim-kpi-pill-card,
.sim-theme--glass .sim-kpi-mini-card,
.sim-theme--glass .sim-chart-card,
.sim-theme--glass .sim-widget-card,
.sim-theme--glass .sim-table-card,
.sim-theme--glass .sim-attendance-dark-card {
  background: rgba(17, 24, 39, 0.55) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc;
}

.sim-theme--glass .sim-kpi-pill-card:hover,
.sim-theme--glass .sim-kpi-mini-card:hover {
  background: rgba(17, 24, 39, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.sim-theme--glass .sim-kpi-label,
.sim-theme--glass .sim-kpi-mini-title {
  color: #cbd5e1;
}

.sim-theme--glass .sim-kpi-big-val,
.sim-theme--glass .sim-kpi-mini-val,
.sim-theme--glass .sim-chart-title,
.sim-theme--glass .sim-widget-title {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sim-theme--glass .sim-chart-period-btn,
.sim-theme--glass .sim-widget-btn-all {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0;
}

.sim-theme--glass .sim-chart-period-btn:hover,
.sim-theme--glass .sim-widget-btn-all:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff;
}

.sim-theme--glass .sim-grid-line {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.sim-theme--glass .sim-chart-axis-labels,
.sim-theme--glass .sim-grid-num,
.sim-theme--glass .sim-empty-state-p {
  color: #94a3b8;
}

/* Badges de íconos en Glass */
.sim-theme--glass .sim-kpi-icon--green  { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.3); }
.sim-theme--glass .sim-kpi-icon--purple { background: rgba(139, 92, 246, 0.22); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.3); }
.sim-theme--glass .sim-kpi-icon--blue   { background: rgba(2, 132, 199, 0.22); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); }
.sim-theme--glass .sim-kpi-icon--violet { background: rgba(124, 58, 237, 0.22); color: #d8b4fe; border: 1px solid rgba(192, 132, 252, 0.3); }
.sim-theme--glass .sim-kpi-icon--orange { background: rgba(234, 88, 12, 0.22); color: #fdba74; border: 1px solid rgba(251, 146, 60, 0.3); }

/* Tablas en Glass */
.sim-theme--glass .sim-data-table th {
  background: rgba(15, 23, 42, 0.65) !important;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) !important;
}

.sim-theme--glass .sim-data-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0;
}

.sim-theme--glass .sim-data-table td strong {
  color: #ffffff;
}

.sim-theme--glass .sim-data-table td code {
  background: rgba(255, 255, 255, 0.08);
  color: #93c5fd;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sim-theme--glass .sim-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
}

/* Zoom y device toggle en Glass */
.sim-theme--glass .simulator-zoom-widget,
.sim-theme--glass .simulator-device-toggle {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.sim-theme--glass .sim-zoom-btn,
.sim-theme--glass .device-btn {
  color: #cbd5e1;
}

.sim-theme--glass .sim-zoom-btn:hover,
.sim-theme--glass .device-btn.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.sim-theme--glass .sim-zoom-badge {
  color: #ffffff;
}

/* ==========================================================================
   SISTEMA DE GLASSMORFISM CLARO ULTRA-LUXURY (FROSTED WHITE CRYSTAL)
   ========================================================================== */

/* Frame exterior en Glass Claro */
.simulator-frame[data-theme="glass-light"],
.simulator-frame:has(.sim-theme--glass-light) {
  background: linear-gradient(135deg, #eef2ff 0%, #f1f5f9 45%, #e0e7ff 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 25px 55px -10px rgba(99, 102, 241, 0.15), 0 10px 20px -5px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}

.simulator-frame[data-theme="glass-light"] .simulator-topbar,
.simulator-frame:has(.sim-theme--glass-light) .simulator-topbar {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.simulator-frame[data-theme="glass-light"] .simulator-title,
.simulator-frame:has(.sim-theme--glass-light) .simulator-title {
  color: #1e293b;
  font-weight: 700;
}

/* Lienzo de la aplicación Glass Claro */
.sim-theme--glass-light {
  background: radial-gradient(135% 135% at 15% 10%, rgba(99, 102, 241, 0.14) 0%, transparent 60%),
              radial-gradient(135% 135% at 85% 85%, rgba(236, 72, 153, 0.12) 0%, transparent 60%),
              radial-gradient(120% 120% at 50% 50%, rgba(56, 189, 248, 0.1) 0%, transparent 60%),
              linear-gradient(145deg, #f8fafc 0%, #eff6ff 50%, #f1f5f9 100%) !important;
  color: #0f172a;
}

.sim-theme--glass-light .sim-main {
  background: transparent !important;
}

.sim-theme--glass-light .sim-views-container {
  background: transparent !important;
}

/* Header Navbar en Glass Claro */
.sim-theme--glass-light .sim-navbar-header {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
}

.sim-theme--glass-light .sim-hamburger-btn {
  color: #1e293b;
}

.sim-theme--glass-light .sim-dash-title {
  color: #0f172a;
  font-weight: 800;
}

.sim-theme--glass-light .sim-dash-sub {
  color: #64748b;
}

/* Sidebar en Glass Claro */
.sim-theme--glass-light .sim-sidebar {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.7) !important;
}

.sim-theme--glass-light .sim-side-cat-label {
  color: #6366f1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sim-theme--glass-light .sim-nav-row {
  color: #475569;
}

.sim-theme--glass-light .sim-nav-row:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sim-theme--glass-light .sim-nav-row.is-active-tablero {
  background: rgba(var(--sim-accent-rgb, 1, 84, 249), 0.12);
  border: 1px solid rgba(var(--sim-accent-rgb, 1, 84, 249), 0.25);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(var(--sim-accent-rgb, 1, 84, 249), 0.15);
}

.sim-theme--glass-light .sim-nav-row.is-active-tablero .sim-nav-row-icon {
  color: var(--sim-accent, #0154f9) !important;
}

.sim-theme--glass-light .sim-chevron-right {
  color: #94a3b8;
}

/* User pill & Inputs en Glass Claro */
.sim-theme--glass-light .sim-user-pill {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

.sim-theme--glass-light .sim-user-pill-name {
  color: #1e293b;
}

.sim-theme--glass-light .sim-date-input-wrap {
  color: #475569;
}

.sim-theme--glass-light .sim-date-field {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

.sim-theme--glass-light .sim-search-box {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.sim-theme--glass-light .sim-search-input {
  background: transparent !important;
  color: #0f172a !important;
}

.sim-theme--glass-light .sim-search-input::placeholder {
  color: #94a3b8;
}

.sim-theme--glass-light .sim-btn-filter,
.sim-theme--glass-light .sim-btn-secondary {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease;
}

.sim-theme--glass-light .sim-btn-filter:hover,
.sim-theme--glass-light .sim-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.sim-theme--glass-light .sim-caja-status-pill {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  color: #0f172a;
}

/* Tarjetas Cristal Blanco Esmerilado (Frosted Crystal Glass) */
.sim-theme--glass-light .sim-kpi-pill-card,
.sim-theme--glass-light .sim-kpi-mini-card,
.sim-theme--glass-light .sim-chart-card,
.sim-theme--glass-light .sim-widget-card,
.sim-theme--glass-light .sim-table-card,
.sim-theme--glass-light .sim-attendance-dark-card {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
  color: #0f172a;
}

.sim-theme--glass-light .sim-kpi-pill-card:hover,
.sim-theme--glass-light .sim-kpi-mini-card:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
}

.sim-theme--glass-light .sim-kpi-label,
.sim-theme--glass-light .sim-kpi-mini-title {
  color: #64748b;
}

.sim-theme--glass-light .sim-kpi-big-val,
.sim-theme--glass-light .sim-kpi-mini-val,
.sim-theme--glass-light .sim-chart-title,
.sim-theme--glass-light .sim-widget-title {
  color: #0f172a;
}

.sim-theme--glass-light .sim-chart-period-btn,
.sim-theme--glass-light .sim-widget-btn-all {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  color: #334155;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.sim-theme--glass-light .sim-chart-period-btn:hover,
.sim-theme--glass-light .sim-widget-btn-all:hover {
  background: #ffffff !important;
  color: #0f172a;
}

.sim-theme--glass-light .sim-grid-line {
  border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
}

.sim-theme--glass-light .sim-chart-axis-labels,
.sim-theme--glass-light .sim-grid-num,
.sim-theme--glass-light .sim-empty-state-p {
  color: #64748b;
}

/* Badges de íconos en Glass Claro */
.sim-theme--glass-light .sim-kpi-icon--green  { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.25); }
.sim-theme--glass-light .sim-kpi-icon--purple { background: rgba(139, 92, 246, 0.15); color: #7c3aed; border: 1px solid rgba(139, 92, 246, 0.25); }
.sim-theme--glass-light .sim-kpi-icon--blue   { background: rgba(2, 132, 199, 0.15); color: #0284c7; border: 1px solid rgba(2, 132, 199, 0.25); }
.sim-theme--glass-light .sim-kpi-icon--violet { background: rgba(124, 58, 237, 0.15); color: #6d28d9; border: 1px solid rgba(124, 58, 237, 0.25); }
.sim-theme--glass-light .sim-kpi-icon--orange { background: rgba(234, 88, 12, 0.15); color: #ea580c; border: 1px solid rgba(234, 88, 12, 0.25); }

/* Tablas en Glass Claro */
.sim-theme--glass-light .sim-data-table th {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #475569;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(14px) !important;
}

.sim-theme--glass-light .sim-data-table td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
  color: #334155;
}

.sim-theme--glass-light .sim-data-table td strong {
  color: #0f172a;
}

.sim-theme--glass-light .sim-data-table td code {
  background: rgba(255, 255, 255, 0.85);
  color: #1e40af;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.sim-theme--glass-light .sim-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.6);
}

/* Zoom y device toggle en Glass Claro */
.sim-theme--glass-light .simulator-zoom-widget,
.sim-theme--glass-light .simulator-device-toggle {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.sim-theme--glass-light .sim-zoom-btn,
.sim-theme--glass-light .device-btn {
  color: #475569;
}

.sim-theme--glass-light .sim-zoom-btn:hover,
.sim-theme--glass-light .device-btn.is-active {
  background: #ffffff;
  color: #0f172a;
}

.sim-theme--glass-light .sim-zoom-badge {
  color: #0f172a;
}



/* ==========================================================================
   ESTILOS DE VISTAS INTERNAS DEL SIMULADOR (MODULAR VIEWS ENGINE)
   ========================================================================== */
.sim-views-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sim-view {
  display: none;
  flex-direction: column;
  animation: simViewFadeIn 0.22s ease forwards;
}

.sim-view.is-active {
  display: flex;
}

@keyframes simViewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* TOP VIEW HEADER BAR */
.sim-view-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem 0.5rem;
  flex-wrap: wrap;
}

.sim-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.38rem 0.75rem;
  font-size: 0.73rem;
  color: #475569;
  width: min(100%, 300px);
}

.sim-search-box svg {
  color: #94a3b8;
  flex-shrink: 0;
}

.sim-caja-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  color: #0f172a;
}

.sim-view-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sim-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.38rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sim-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* 4 MINI KPIS ROW */
.sim-kpi-4-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  padding: 0.4rem 1.15rem 0.75rem;
}

.sim-kpi-mini-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.sim-kpi-mini-title {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
}

.sim-kpi-mini-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}

.sim-kpi-mini-sub {
  font-size: 0.64rem;
  font-weight: 700;
  color: #10b981;
}

/* DATA TABLE CARD */
.sim-table-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  margin: 0 1.15rem 1.15rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.sim-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sim-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.73rem;
}

.sim-data-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e2e8f0;
}

.sim-data-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}

.sim-data-table td code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.68rem;
  color: #0f172a;
}

.sim-data-table tr:hover td {
  background: #f8fafc;
}

.sim-table-action {
  color: var(--sim-accent, #0154f9);
  font-weight: 700;
  font-size: 0.68rem;
  cursor: pointer;
  transition: color 0.15s ease, filter 0.15s ease;
}

.sim-table-action:hover {
  text-decoration: underline;
}

/* BADGES */
.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sim-badge--green { background: #dcfce7; color: #15803d; }
.sim-badge--amber { background: #fef3c7; color: #b45309; }
.sim-badge--red   { background: #fee2e2; color: #b91c1c; }
.sim-badge--blue  { background: #e0f2fe; color: #0369a1; }

/* Vista Modular: modo oscuro integrado en sistema unificado */


/* ==========================================================================
   DYNAMIC SIMULATOR ACCENT COLOR THEME EXTENSIONS
   ========================================================================== */
#sim-breadcrumb-view-name {
  color: var(--sim-accent, #0154f9);
  font-weight: 700;
}

.sim-nav-row.is-active-tablero .sim-nav-row-icon {
  color: var(--sim-accent, #0154f9) !important;
}

.sim-chart-bar-active,
.sim-chart-bars .sim-chart-bar:last-child {
  background: var(--sim-accent, #0154f9) !important;
  box-shadow: 0 4px 12px var(--sim-accent-glow, rgba(1, 84, 249, 0.35)) !important;
}

.sim-search-box:focus-within {
  border-color: var(--sim-accent, #0154f9);
  box-shadow: 0 0 0 3px var(--sim-accent-soft, rgba(1, 84, 249, 0.12));
}

.sim-kpi-icon--blue {
  background: var(--sim-accent-soft, rgba(1, 84, 249, 0.1)) !important;
  color: var(--sim-accent, #0154f9) !important;
}

.sim-badge--success {
  background: var(--sim-accent-soft, rgba(16, 185, 129, 0.12));
  color: var(--sim-accent, #059669);
  border: 1px solid var(--sim-accent-glow, rgba(16, 185, 129, 0.25));
}


/* ESCALADO COMPACTO DE ALTA DEFINICIÓN (SIN ZOOM EXCESIVO) */
@supports not (zoom: 1) {
  .sim-app-viewport {
    transform: scale(0.88);
    transform-origin: top left;
    width: 113.63%;
    margin-bottom: -12%;
  }
}


/* ==========================================================================
   HERRAMIENTAS INTEGRADAS EN EL NAVBAR DEL PANEL (ZOOM + RESPONSIVE)
   ========================================================================== */
.sim-navbar-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: 0.25rem;
}

.simulator-zoom-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 2px 4px;
}

.sim-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #475569;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.sim-zoom-btn:hover {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sim-zoom-btn:active {
  transform: scale(0.92);
}

.sim-zoom-btn--reset {
  color: #94a3b8;
}

.sim-zoom-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #1e293b;
  min-width: 28px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  user-select: none;
}

.sim-theme--dark .simulator-zoom-widget {
  background: #1e293b;
  border-color: #334155;
}

.sim-theme--dark .sim-zoom-btn {
  color: #cbd5e1;
}

.sim-theme--dark .sim-zoom-btn:hover {
  background: #0f172a;
  color: #ffffff;
}

.sim-theme--dark .sim-zoom-badge {
  color: #f1f5f9;
}

.sim-theme--dark .simulator-device-toggle {
  background: #1e293b;
  border: 1px solid #334155;
}

.sim-theme--dark .device-btn {
  color: #94a3b8;
}

.sim-theme--dark .device-btn.is-active {
  background: #0f172a;
  color: #ffffff;
}

/* MINIATURAS DE PRODUCTOS EN TABLA DE INVENTARIOS */
.sim-td-thumb {
  width: 52px;
  padding: 0.4rem 0.5rem !important;
  text-align: center;
}

.sim-product-thumb-box {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sim-product-thumb-box:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sim-product-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
  display: block;
}

.sim-product-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sim-product-sub-desc {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 500;
}

.sim-theme--dark .sim-product-thumb-box {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.sim-theme--glass .sim-product-thumb-box {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sim-theme--glass-light .sim-product-thumb-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   CATÁLOGO DE 50 TIPOGRAFÍAS - HEADER, BUSCADOR Y FILTROS
   ========================================================================== */
.typography-header-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.typography-header-sub {
  font-size: 0.78rem;
  color: var(--builder-text-muted);
  margin-top: 0.25rem;
}

.typography-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--builder-primary-soft, rgba(1, 84, 249, 0.08));
  border: 1px solid var(--builder-primary-glow, rgba(1, 84, 249, 0.25));
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.78rem;
}

.typography-active-pill__label {
  color: var(--builder-text-muted);
  font-weight: 600;
}

.typography-active-pill strong {
  color: var(--builder-primary);
  font-weight: 800;
}

.typography-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.typography-search-box {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.42rem 0.85rem;
  width: min(100%, 320px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.typography-search-box:focus-within {
  border-color: var(--builder-primary);
  box-shadow: 0 0 0 3px var(--builder-primary-glow);
}

.typography-search-box svg {
  color: #94a3b8;
  flex-shrink: 0;
}

.typography-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.82rem;
  font-family: inherit;
  color: #0f172a;
  width: 100%;
}

.typography-category-pills {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.font-cat-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.18s ease;
}

.font-cat-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.font-cat-btn.is-active {
  background: var(--builder-primary);
  border-color: var(--builder-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--builder-primary-glow);
}

.typography-minimal-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}

.font-options--grid-50 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
  padding: 0.35rem 0;
  max-height: none !important;
  overflow: visible !important;
}

.fonts-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
  color: #94a3b8;
  font-size: 0.85rem;
}

/* ==========================================================================
   CATÁLOGO COMPLETO DE ESTILOS DE BOTONES PROFESIONALES (24 ESTILOS GLOBALES)
   ========================================================================== */
.buttons-minimal-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}

.buttons-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--builder-primary-soft, rgba(1, 84, 249, 0.08));
  border: 1px solid var(--builder-primary-glow, rgba(1, 84, 249, 0.25));
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.78rem;
}

.buttons-active-pill__label {
  color: var(--builder-text-muted);
  font-weight: 600;
}

.buttons-active-pill strong {
  color: var(--builder-primary);
  font-weight: 800;
}

.btn-style-options--grid-all {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
  padding: 0.35rem 0;
}

/* ==========================================================================
   DEFINICIÓN DE LOS 24 ESTILOS DE BOTONES (VISTA PREVIA Y SIMULADOR)
   ========================================================================== */

/* 1. 3D Relieve */
.sample--3d, .btn-style--3d {
  background: var(--sim-accent, #0154f9) !important;
  color: var(--sim-accent-contrast, #ffffff) !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(0);
}
.btn-style--3d:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Gradient Glow */
.sample--glow, .btn-style--glow {
  background: linear-gradient(135deg, var(--sim-accent, #0154f9) 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 0 16px var(--sim-accent-glow, rgba(1, 84, 249, 0.5)) !important;
}

/* 3. Minimal Flat */
.sample--flat, .btn-style--flat {
  background: transparent !important;
  color: var(--sim-accent, #0154f9) !important;
  border: 1.5px solid var(--sim-accent, #0154f9) !important;
  box-shadow: none !important;
}

/* 4. Glass Frosted */
.sample--glass, .btn-style--glass {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  color: var(--sim-accent, #0154f9) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

/* 5. Neumorphism Soft */
.sample--neumorphic, .btn-style--neumorphic {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 4px 4px 10px rgba(15, 23, 42, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.9) !important;
}

/* 6. Cyber Neo-Brutalist */
.sample--cyber, .btn-style--cyber {
  background: var(--sim-accent, #0154f9) !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
}
.btn-style--cyber:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0px #000000 !important;
}
.btn-style--cyber:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

/* 7. Liquid Aurora Gradient */
.sample--aurora, .btn-style--aurora {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, var(--sim-accent, #0154f9) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.35) !important;
}

/* 8. Luxury Gold Border */
.sample--luxury, .btn-style--luxury {
  background: #111827 !important;
  color: #fef08a !important;
  border: 1.5px solid #eab308 !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.2) !important;
  letter-spacing: 0.04em !important;
}

/* 9. Neon Matrix Glow */
.sample--neon, .btn-style--neon {
  background: #050505 !important;
  color: #10b981 !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5), inset 0 0 8px rgba(16, 185, 129, 0.2) !important;
}

/* 10. Pill Ultra-Round */
.sample--pill, .btn-style--pill {
  background: var(--sim-accent, #0154f9) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 12px var(--sim-accent-glow, rgba(1, 84, 249, 0.3)) !important;
  padding: 0.44rem 1.25rem !important;
}

/* 11. Ghost Hover Border */
.sample--ghost, .btn-style--ghost {
  background: rgba(15, 23, 42, 0.04) !important;
  color: #334155 !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: none !important;
}
.btn-style--ghost:hover {
  background: var(--sim-accent, #0154f9) !important;
  color: #ffffff !important;
  border-color: var(--sim-accent, #0154f9) !important;
}

/* 12. Sunset Radiant */
.sample--sunset, .btn-style--sunset {
  background: linear-gradient(135deg, #f97316 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4) !important;
}

/* 13. Titanium Dark Metallic */
.sample--metallic, .btn-style--metallic {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  border-top-color: #64748b !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 14. Retro Arcade 8-Bit */
.sample--arcade, .btn-style--arcade {
  background: #facc15 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #dc2626 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* 15. Holographic Opal */
.sample--holographic, .btn-style--holographic {
  background: linear-gradient(135deg, #a7f3d0 0%, #bae6fd 50%, #fbcfe8 100%) !important;
  color: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 4px 14px rgba(186, 230, 253, 0.5) !important;
}

/* 16. Emerald Forest */
.sample--emerald, .btn-style--emerald {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.35) !important;
}

/* 17. Electric Violet Flash */
.sample--violet, .btn-style--violet {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
}

/* 18. Clean Outline Accent */
.sample--outline, .btn-style--outline {
  background: transparent !important;
  color: var(--sim-accent, #0154f9) !important;
  border: 2px solid var(--sim-accent, #0154f9) !important;
  box-shadow: none !important;
}
.btn-style--outline:hover {
  background: var(--sim-accent-soft, rgba(1, 84, 249, 0.1)) !important;
}

/* 19. Deep Velvet Crimson */
.sample--crimson, .btn-style--crimson {
  background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4) !important;
}

/* 20. Soft Pastel Cloud */
.sample--pastel, .btn-style--pastel {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.1) !important;
}

/* 21. Stealth Carbon */
.sample--carbon, .btn-style--carbon {
  background: #18181b !important;
  color: #f4f4f5 !important;
  border: 1px solid #27272a !important;
  border-top-color: #3f3f46 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 22. Amber Sparkle */
.sample--amber, .btn-style--amber {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
}

/* 23. Cyan Laser */
.sample--cyan, .btn-style--cyan {
  background: #06b6d4 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.5) !important;
}

/* 24. Elegant Slate Minimal */
.sample--slate, .btn-style--slate {
  background: #e2e8f0 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   ESTILOS DE BOTONES ADICIONALES (25 A 40)
   ========================================================================== */

/* 25. Plasma Magenta */
.sample--plasma, .btn-style--plasma {
  background: linear-gradient(135deg, #d946ef 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(217, 70, 239, 0.45) !important;
}

/* 26. Dark Crystal Glass */
.sample--glass-dark, .btn-style--glass-dark {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* 27. Synthwave 80s */
.sample--retro-wave, .btn-style--retro-wave {
  background: linear-gradient(135deg, #f43f5e 0%, #a855f7 50%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(244, 63, 94, 0.5) !important;
  letter-spacing: 0.05em !important;
}

/* 28. Emerald Pill Pro */
.sample--emerald-pill, .btn-style--emerald-pill {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  padding: 0.44rem 1.25rem !important;
}

/* 29. Silver Mirror Edge */
.sample--silver-edge, .btn-style--silver-edge {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 #ffffff !important;
}
.btn-style--silver-edge:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

/* 30. Deep Cosmic Blue */
.sample--cosmic, .btn-style--cosmic {
  background: linear-gradient(135deg, #1e1b4b 0%, #1e3a8a 100%) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  box-shadow: 0 4px 16px rgba(30, 27, 75, 0.5) !important;
}

/* 31. Paper Elevation */
.sample--paper-shadow, .btn-style--paper-shadow {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* 32. Toxic Lime Flash */
.sample--toxic-lime, .btn-style--toxic-lime {
  background: #bef264 !important;
  color: #1a2e05 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(190, 242, 100, 0.45) !important;
}

/* 33. Nordic Frost Ice */
.sample--frosted-ice, .btn-style--frosted-ice {
  background: rgba(224, 242, 254, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  color: #0369a1 !important;
  border: 1.5px solid #bae6fd !important;
  box-shadow: 0 4px 12px rgba(186, 230, 253, 0.4) !important;
}

/* 34. Sweet Candy Pop */
.sample--candy-gradient, .btn-style--candy-gradient {
  background: linear-gradient(135deg, #fb7185 0%, #f472b6 50%, #c084fc 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(251, 113, 133, 0.4) !important;
}

/* 35. Royal Ruby Gem */
.sample--ruby-luxury, .btn-style--ruby-luxury {
  background: linear-gradient(135deg, #be123c 0%, #881337 100%) !important;
  color: #ffe4e6 !important;
  border: 1px solid rgba(254, 205, 211, 0.3) !important;
  box-shadow: 0 4px 18px rgba(190, 18, 60, 0.45) !important;
}

/* 36. Midnight Aero Glass */
.sample--midnight-glass, .btn-style--midnight-glass {
  background: rgba(3, 7, 18, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6) !important;
}

/* 37. Industrial Tech Bolt */
.sample--industrial, .btn-style--industrial {
  background: #f59e0b !important;
  color: #000000 !important;
  border: 2px dashed #000000 !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

/* 38. Pacific Ocean Wave */
.sample--ocean-wave, .btn-style--ocean-wave {
  background: linear-gradient(135deg, #0284c7 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
}

/* 39. Lavender Mist Glow */
.sample--lavender-mist, .btn-style--lavender-mist {
  background: #f3e8ff !important;
  color: #7e22ce !important;
  border: 1.5px solid #d8b4fe !important;
  box-shadow: 0 4px 14px rgba(216, 180, 254, 0.4) !important;
}

/* 40. Pure Contrast Ultra */
.sample--pure-contrast, .btn-style--pure-contrast {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   ESTILOS DE BOTONES ADICIONALES (41 A 60 - FORMAS ESPECIALES Y ACABADOS)
   ========================================================================== */

/* 41. Chamfer Cut Tech (Esquinas cortadas en bisel diagonal) */
.sample--chamfer, .btn-style--chamfer {
  background: var(--sim-accent, #0154f9) !important;
  color: #ffffff !important;
  border: none !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
  box-shadow: 0 4px 14px var(--sim-accent-glow, rgba(1, 84, 249, 0.4)) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

/* 42. Speed Skew Cyber (Inclinación deportiva en cursiva paralela) */
.sample--skewed, .btn-style--skewed {
  background: linear-gradient(135deg, #0284c7 0%, var(--sim-accent, #0154f9) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  transform: skewX(-12deg) !important;
  box-shadow: 4px 4px 14px rgba(2, 132, 199, 0.4) !important;
  border-radius: 4px !important;
}
.btn-style--skewed:hover {
  transform: skewX(-12deg) translateY(-2px) !important;
}

/* 43. Hexagon Angular */
.sample--hexagon, .btn-style--hexagon {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  border: none !important;
  clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%) !important;
  border-radius: 0 !important;
  padding: 0.44rem 1.4rem !important;
}

/* 44. Ticket Voucher Tag */
.sample--tag-ticket, .btn-style--tag-ticket {
  background: #fef08a !important;
  color: #854d0e !important;
  border: 1.5px dashed #ca8a04 !important;
  box-shadow: 0 3px 10px rgba(202, 138, 4, 0.25) !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
}

/* 45. Double Ring Stadium */
.sample--stadium-double, .btn-style--stadium-double {
  background: var(--sim-accent, #0154f9) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  outline: 2px solid var(--sim-accent, #0154f9) !important;
  box-shadow: 0 4px 14px var(--sim-accent-glow, rgba(1, 84, 249, 0.35)) !important;
}

/* 46. Cyberpunk Neon Yellow */
.sample--neon-cyberpunk, .btn-style--neon-cyberpunk {
  background: #facc15 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.6) !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
}

/* 47. Gradient Rainbow Border */
.sample--gradient-border, .btn-style--gradient-border {
  background: #ffffff !important;
  color: #0f172a !important;
  position: relative !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  outline: 2px solid #38bdf8 !important;
}
.sim-theme--dark .btn-style--gradient-border {
  background: #0f172a !important;
  color: #ffffff !important;
}

/* 48. Carved Inset Stone */
.sample--inset-carved, .btn-style--inset-carved {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
}

/* 49. Floating Cloud Shadow */
.sample--floating-shadow, .btn-style--floating-shadow {
  background: #ffffff !important;
  color: var(--sim-accent, #0154f9) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 14px 28px rgba(1, 84, 249, 0.18), 0 8px 10px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* 50. Liquid Prism Crystal */
.sample--glass-prism, .btn-style--glass-prism {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2), inset 0 1px 1px #ffffff !important;
}
.sim-theme--dark .btn-style--glass-prism {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* 51. Brushed Copper Metal */
.sample--brushed-copper, .btn-style--brushed-copper {
  background: linear-gradient(180deg, #ea580c 0%, #c2410c 50%, #9a3412 100%) !important;
  color: #ffedd5 !important;
  border: 1px solid #fed7aa !important;
  border-top-color: #ffedd5 !important;
  box-shadow: 0 4px 12px rgba(154, 52, 18, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* 52. Matte Obsidian Edge */
.sample--matte-obsidian, .btn-style--matte-obsidian {
  background: #090d16 !important;
  color: #f8fafc !important;
  border: 1.5px solid #1e293b !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

/* 53. Vaporwave Sunset Teal */
.sample--vaporwave, .btn-style--vaporwave {
  background: linear-gradient(135deg, #06b6d4 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.45) !important;
}

/* 54. Electric Cobalt Glow */
.sample--electric-blue-glow, .btn-style--electric-blue-glow {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid #60a5fa !important;
  box-shadow: 0 0 20px rgba(29, 78, 216, 0.7), inset 0 0 10px rgba(96, 165, 250, 0.4) !important;
}

/* 55. Glossy Bubble Gum */
.sample--bubble-gum, .btn-style--bubble-gum {
  background: linear-gradient(180deg, #f472b6 0%, #db2777 100%) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.6) !important;
  padding: 0.44rem 1.25rem !important;
}

/* 56. Architect Blueprint */
.sample--dashed-architect, .btn-style--dashed-architect {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1.5px dashed #e0f2fe !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3) !important;
}

/* 57. 24K Solid Gold Bar */
.sample--gold-ingot, .btn-style--gold-ingot {
  background: linear-gradient(180deg, #fef08a 0%, #eab308 50%, #ca8a04 100%) !important;
  color: #422006 !important;
  border: 1px solid #fef08a !important;
  box-shadow: 0 4px 16px rgba(202, 138, 4, 0.5), inset 0 1px 0 #ffffff !important;
  font-weight: 800 !important;
}

/* 58. Matrix Hacker Monospace */
.sample--matrix-terminal, .btn-style--matrix-terminal {
  background: #000000 !important;
  color: #22c55e !important;
  border: 1px solid #22c55e !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4) !important;
  letter-spacing: 0.08em !important;
}

/* 59. Minimal Accent Dot */
.sample--ultra-minimal-dot, .btn-style--ultra-minimal-dot {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  padding-left: 1.4rem !important;
}
.sample--ultra-minimal-dot::before, .btn-style--ultra-minimal-dot::before {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sim-accent, #0154f9);
  box-shadow: 0 0 6px var(--sim-accent, #0154f9);
}

/* 60. Fiery Ember Blaze */
.sample--fire-ember, .btn-style--fire-ember {
  background: linear-gradient(135deg, #ef4444 0%, #ea580c 50%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5), 0 0 25px rgba(245, 158, 11, 0.3) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   CURVA VECTORIAL Y GRÁFICOS ILUMINADOS (SIMULADOR DE DASHBOARD)
   ========================================================================== */
.sim-chart-canvas-mock {
  position: relative !important;
}

.sim-chart-svg {
  position: absolute !important;
  top: 6px !important;
  left: 24px !important;
  right: 24px !important;
  width: calc(100% - 48px) !important;
  height: calc(100% - 14px) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.sim-chart-path-line {
  stroke: var(--sim-accent, #0154f9) !important;
  filter: drop-shadow(0 3px 6px var(--sim-accent-glow, rgba(1, 84, 249, 0.35))) !important;
  transition: stroke 0.3s ease, filter 0.3s ease !important;
}

.sim-chart-path-area {
  fill: url(#simChartGrad) !important;
  transition: fill 0.3s ease !important;
}

.sim-theme--dark .sim-chart-path-line {
  filter: drop-shadow(0 4px 10px var(--sim-accent-glow, rgba(1, 84, 249, 0.55))) !important;
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE MÓVIL DEL SISTEMA EN VIVO (VISTA COMPUTADOR EN MÓVIL)
   Garantiza que el sistema en computador se vea 100% profesional y simétrico en teléfonos
   ========================================================================== */

@media (max-width: 768px) {
  /* Contenedor y estructura de la página */
  .builder-container {
    width: 100% !important;
    padding: 0 0.5rem !important;
    gap: 1.25rem !important;
    box-sizing: border-box !important;
  }

  .builder-simulator-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .simulator-frame {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
  }

  /* Barra superior macOS */
  .simulator-topbar {
    padding: 0.5rem 0.85rem !important;
    min-height: 30px !important;
  }

  /* Viewport del simulador (desactiva zoom conflictivo en móviles para cálculo natural nítido) */
  .sim-app-viewport {
    zoom: 1 !important;
    min-height: auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Sidebar móvil deslizable (Drawer táctil con backdrop) */
  .sim-sidebar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
    width: 220px !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
  }

  .sim-sidebar.is-mobile-open {
    transform: translateX(0) !important;
  }

  .sim-sidebar-backdrop {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.5) !important;
    z-index: 90 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }

  .sim-sidebar-backdrop.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sim-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 1. Header Navbar del Dashboard */
  .sim-navbar-header {
    padding: 0.55rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
  }

  .sim-nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .sim-dash-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  .sim-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .sim-navbar-tools {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  /* Ocultar botones de zoom manual en pantallas móviles para dar espacio al toggle de dispositivo */
  .simulator-zoom-widget {
    display: none !important;
  }

  .simulator-device-toggle {
    padding: 2px !important;
  }

  .device-btn {
    padding: 0.25rem 0.45rem !important;
  }

  .device-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .sim-user-pill {
    padding: 0.25rem 0.45rem !important;
    gap: 0.3rem !important;
  }

  .sim-user-avatar-wrap {
    width: 20px !important;
    height: 20px !important;
  }

  .sim-user-pill-name {
    font-size: 0.7rem !important;
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 2. Barra de Filtro de Fechas y Botones de Acción */
  .sim-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    padding: 0.55rem 0.75rem 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sim-date-input-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    width: 100% !important;
  }

  .sim-date-label {
    font-size: 0.65rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
  }

  .sim-date-field {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    padding: 0.32rem 0.5rem !important;
    font-size: 0.7rem !important;
    border-radius: 8px !important;
  }

  .sim-date-field span {
    font-size: 0.68rem !important;
  }

  .sim-btn-filter {
    grid-column: 1 / 2 !important;
    justify-content: center !important;
    padding: 0.46rem 0.5rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    width: 100% !important;
  }

  .sim-btn-action-lime {
    grid-column: 2 / 3 !important;
    justify-content: center !important;
    padding: 0.46rem 0.5rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  /* 3. Cuadrícula de 5 KPI Cards en Móvil (Todas visibles sin cortes horizontales) */
  .sim-kpi-5-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.45rem 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sim-kpi-5-grid > .sim-kpi-pill-card:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.65rem 0.95rem !important;
    text-align: left !important;
  }

  .sim-kpi-5-grid > .sim-kpi-pill-card:last-child .sim-kpi-icon-box {
    margin-bottom: 0 !important;
  }

  .sim-kpi-pill-card {
    padding: 0.7rem 0.5rem !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }

  .sim-kpi-icon-box {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
  }

  .sim-kpi-icon-box svg {
    width: 16px !important;
    height: 16px !important;
  }

  .sim-kpi-label {
    font-size: 0.7rem !important;
  }

  .sim-kpi-big-val {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin: 0.08rem 0 !important;
  }

  .sim-kpi-trend {
    font-size: 0.65rem !important;
  }

  /* 4. Sección Inferior: Gráfico Rendimiento y Widgets en Columna Única */
  .sim-lower-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0.4rem 0.75rem 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sim-chart-card {
    width: 100% !important;
    padding: 0.85rem !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .sim-chart-header {
    margin-bottom: 0.35rem !important;
  }

  .sim-chart-title {
    font-size: 0.82rem !important;
  }

  .sim-chart-period-btn {
    padding: 0.22rem 0.48rem !important;
    font-size: 0.66rem !important;
  }

  .sim-chart-axis-labels {
    font-size: 0.62rem !important;
    margin: 0.45rem 0 0.35rem !important;
  }

  .sim-chart-canvas-mock {
    gap: 0.95rem !important;
    padding: 0.35rem 0 0.75rem !important;
  }

  .sim-right-col {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .sim-widget-card {
    padding: 0.85rem !important;
    border-radius: 16px !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
  }

  .sim-widget-title {
    font-size: 0.82rem !important;
  }

  .sim-empty-state-p {
    padding: 0.85rem 0 !important;
    font-size: 0.72rem !important;
  }

  .sim-widget-btn-all {
    padding: 0.4rem !important;
    font-size: 0.7rem !important;
  }

  .sim-attendance-dark-card {
    border-radius: 16px !important;
    padding: 0.95rem !important;
    box-sizing: border-box !important;
  }

  /* 5. Vistas Modulares del Sistema (Ventas, Cajas, Inventarios, etc.) */
  .sim-kpi-4-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.75rem !important;
  }

  .sim-kpi-mini-card {
    padding: 0.6rem !important;
    border-radius: 12px !important;
  }

  .sim-kpi-mini-title {
    font-size: 0.7rem !important;
  }

  .sim-kpi-mini-val {
    font-size: 1rem !important;
  }

  .sim-view-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  .sim-search-box {
    width: 100% !important;
  }

  .sim-view-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    width: 100% !important;
  }

  .sim-btn-secondary,
  .sim-caja-status-pill {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    padding: 0.42rem 0.55rem !important;
  }

  .sim-table-card {
    margin: 0.35rem 0.75rem 0.75rem !important;
    border-radius: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sim-data-table {
    min-width: 480px !important;
  }

  .sim-data-table th,
  .sim-data-table td {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.7rem !important;
  }
}

/* Teléfonos Estándar (≤ 480px) */
@media (max-width: 480px) {
  .sim-filter-bar {
    padding: 0.45rem 0.6rem 0.3rem !important;
    gap: 0.4rem !important;
  }

  .sim-kpi-5-grid {
    padding: 0.35rem 0.6rem !important;
    gap: 0.4rem !important;
  }

  .sim-kpi-pill-card {
    padding: 0.65rem 0.4rem !important;
    border-radius: 12px !important;
  }

  .sim-kpi-big-val {
    font-size: 1.05rem !important;
  }

  .sim-lower-grid {
    padding: 0.35rem 0.6rem 0.75rem !important;
  }

  .sim-chart-card {
    padding: 0.75rem !important;
  }

  .sim-widget-card {
    padding: 0.75rem !important;
  }

  .sim-table-card {
    margin: 0.25rem 0.6rem 0.6rem !important;
  }
}

/* Pantallas Extra Pequeñas (≤ 360px p. ej. iPhone SE) */
@media (max-width: 360px) {
  .sim-navbar-header {
    padding: 0.45rem 0.5rem !important;
  }

  .sim-dash-title {
    font-size: 0.8rem !important;
  }

  .sim-user-pill-name {
    display: none !important;
  }

  .sim-kpi-big-val {
    font-size: 0.95rem !important;
  }

  .sim-kpi-label {
    font-size: 0.64rem !important;
  }
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVE MÓVIL DEL PANEL DE PERSONALIZACIÓN Y PESTAÑAS
   Soluciona desbordamientos en Tab Tema, Tipografías, Botones y Pestañas
   ========================================================================== */

/* Bloqueo total de desbordamiento horizontal en la página */
html, body.builder-page {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

.builder-container {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* Panel de Personalización */
  .builder-panel {
    padding: 0.85rem !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Pestañas de Navegación */
  .builder-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 0.35rem !important;
    padding: 0.28rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .builder-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .builder-tab {
    flex: 1 0 auto !important;
    padding: 0.48rem 0.75rem !important;
    font-size: 0.78rem !important;
    border-radius: 9px !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
  }

  .builder-tab svg {
    width: 14px !important;
    height: 14px !important;
  }

  .builder-tab-pane {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .builder-section-intro {
    margin-bottom: 0.85rem !important;
  }

  .builder-section-title {
    font-size: 0.95rem !important;
  }

  /* ----------------------------------------------------
     TAB 2: TEMA & IDENTIDAD VISUAL (100% AJUSTADO AL ANCHO)
     ---------------------------------------------------- */
  .theme-config-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-config-side-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .config-card {
    padding: 0.95rem 0.8rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.75rem !important;
  }

  .config-group-label {
    font-size: 0.8rem !important;
    margin-bottom: 0.1rem !important;
  }

  /* Entorno Visual (4 Modos en 2x2 simétrico sin salirse) */
  .theme-mode-options--4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-mode-btn {
    padding: 0.65rem 0.4rem !important;
    font-size: 0.74rem !important;
    border-radius: 10px !important;
    gap: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .theme-mode-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Esquinas & Acabados (3 Botones proporcionales) */
  .radius-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .radius-btn {
    padding: 0.65rem 0.25rem !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .radius-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Estudio de Color (Panel Principal) */
  .color-studio-card {
    padding: 0.95rem 0.8rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.85rem !important;
  }

  .color-studio-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .color-studio-sub {
    font-size: 0.72rem !important;
    margin-top: 0.15rem !important;
    line-height: 1.35 !important;
  }

  .color-active-pill {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.65rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Swatches circulares de color */
  .color-swatches {
    gap: 0.55rem !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .color-swatch {
    width: 38px !important;
    height: 38px !important;
  }

  /* Caja del selector profesional 2D */
  .color-picker-pro-box {
    padding: 0.85rem 0.7rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 0.75rem !important;
  }

  .color-spectrum-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: 125px !important;
    box-sizing: border-box !important;
  }

  .color-spectrum-canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .color-hue-slider-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .color-hue-slider {
    width: 100% !important;
  }

  /* Fila de controles HEX + Muestra + Copiar */
  .color-inputs-pro-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .color-preview-trigger {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }

  .color-hex-field-container {
    flex: 1 !important;
    min-width: 120px !important;
    height: 38px !important;
    padding: 0 0.65rem !important;
    border-radius: 8px !important;
  }

  .color-hex-tag {
    font-size: 0.7rem !important;
    margin-right: 0.3rem !important;
  }

  .color-hex-input {
    font-size: 0.84rem !important;
  }

  .color-copy-btn {
    height: 38px !important;
    padding: 0 0.85rem !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  /* ----------------------------------------------------
     TAB 3: TIPOGRAFÍAS (Catálogo sin desbordes)
     ---------------------------------------------------- */
  .font-options--grid-50 {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .font-card {
    padding: 0.75rem !important;
    border-radius: 12px !important;
  }

  /* ----------------------------------------------------
     TAB 4: BOTONES (Catálogo sin desbordes)
     ---------------------------------------------------- */
  .btn-style-options--grid-60 {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .btn-style-card {
    padding: 0.75rem !important;
    border-radius: 12px !important;
  }
}

/* Teléfonos Pequeños (≤ 380px) */
@media (max-width: 380px) {
  .builder-panel {
    padding: 0.65rem !important;
  }

  .config-card,
  .color-studio-card {
    padding: 0.75rem 0.6rem !important;
  }

  .radius-btn {
    font-size: 0.68rem !important;
    padding: 0.55rem 0.2rem !important;
  }

  .color-copy-btn {
    width: 100% !important;
  }

  .builder-action-bar {
    padding: 0.75rem 0.8rem !important;
    gap: 0.65rem !important;
  }

  .btn-builder-quote {
    font-size: 0.8rem !important;
    padding: 0 0.75rem !important;
    gap: 0.35rem !important;
  }

  .btn-builder-copy {
    padding: 0 0.75rem !important;
    font-size: 0.78rem !important;
    gap: 0.25rem !important;
  }
}