/* ── Tokens globales (modo claro por defecto) ── */
    :root,
    html.bardev-panel-theme-light {
      /* Superficies — beis corporativo (mismo fondo que el menú lateral) */
      --ds-bg:          #FCF7EA;
      --ds-surface:     #FFFFFF;
      --ds-surface-2:   #F6EED8;
      --ds-surface-3:   #EDE3CC;

      /* Bordes */
      --ds-border:      #E5D9C4;
      --ds-border-2:    #D4C8B0;

      /* Tipografía */
      --ds-text-primary:   #0f1f17;
      --ds-text-secondary: #5b6b62;
      --ds-text-tertiary:  #7a6e5c;
      --ds-text-on-accent: #FFFFFF;

      /* Acento UI (esmeralda de interfaz) */
      --ds-accent:        var(--bv-g-059669, #059669);
      --ds-accent-hover:  var(--bv-g-047857, #047857);
      --ds-accent-light:  rgba(var(--bv-g-rgb-059669, 5, 150, 105),0.08);
      --ds-accent-light2: rgba(var(--bv-g-rgb-059669, 5, 150, 105),0.14);

      /* Marca Barveo — RGB exactos del logo 1×1 (bardev-logo.png?v=marca4) */
      --ds-brand-beige: #FCF7EA; /* rgb(252, 247, 234) — fondo del isotipo */
      --ds-brand-green:  var(--bv-g-114830, #114830); /* rgb(var(--bv-g-rgb-114830, 17, 72, 48)) — verde esmeralda del trazo */
      --ds-brand-brown:  var(--bv-b-8f6845, #8F6845); /* rgb(var(--bv-b-rgb-8f6845, 143, 104, 69)) — marrón de la hoja */
      --ds-brand-mint:    var(--bv-g-e4f6ec, #E4F6EC); /* rgb(var(--bv-g-rgb-e4f6ec, 228, 246, 236)) — verde menta claro */

      /* Semánticos */
      --ds-success:       var(--bv-g-10b981, #10B981);
      --ds-success-light: rgba(var(--bv-g-rgb-10b981, 16, 185, 129),0.10);
      --ds-danger:        #EF4444;
      --ds-danger-light:  rgba(239,68,68,0.10);
      --ds-warning:       #F59E0B;
      --ds-warning-light: rgba(245,158,11,0.10);
      --ds-info:          #3B82F6;
      --ds-info-light:    rgba(59,130,246,0.10);

      /* Sombras (ultra suaves) */
      --ds-shadow-xs: 0 1px 2px rgba(17,24,39,0.04);
      --ds-shadow-sm: 0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
      --ds-shadow-md: 0 4px 16px rgba(17,24,39,0.07), 0 1px 4px rgba(17,24,39,0.04);
      --ds-shadow-lg: 0 8px 32px rgba(17,24,39,0.08), 0 2px 8px rgba(17,24,39,0.04);
      --ds-shadow-xl: 0 20px 48px rgba(17,24,39,0.10), 0 4px 12px rgba(17,24,39,0.06);

      /* Radio */
      --ds-radius-xs: 4px;
      --ds-radius-sm: 8px;
      --ds-radius-md: 10px;
      --ds-radius-lg: 14px;
      --ds-radius-xl: 18px;
      --ds-radius-2xl: 24px;

      /* Spacing base 8px */
      --ds-space-1: 4px;
      --ds-space-2: 8px;
      --ds-space-3: 12px;
      --ds-space-4: 16px;
      --ds-space-5: 20px;
      --ds-space-6: 24px;
      --ds-space-8: 32px;
      --ds-space-10: 40px;
      --ds-space-12: 48px;

      /* Tipografía */
      --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --ds-font-size-xs:   11px;
      --ds-font-size-sm:   12px;
      --ds-font-size-base: 14px;
      --ds-font-size-md:   15px;
      --ds-font-size-lg:   18px;
      --ds-font-size-xl:   22px;
      --ds-font-size-2xl:  28px;

      /* Transiciones */
      --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --ds-duration-fast: 120ms;
      --ds-duration: 180ms;
      --ds-duration-slow: 260ms;

      /* Sidebar */
      --ds-sidebar-width: 232px;
      --ds-sidebar-bg: var(--ds-brand-beige);
      --ds-sidebar-border: #E5D9C4;

      /* Mapeo a variables existentes del panel */
      --bg:                   var(--ds-bg);
      --card:                 var(--ds-surface);
      --border:               var(--ds-border);
      --text:                 var(--ds-text-primary);
      --muted:                var(--ds-text-secondary);
      --ok:                   var(--ds-accent);
      --err:                  var(--ds-danger);
      --side:                 var(--ds-sidebar-bg);
      --side-active:          var(--ds-accent-light);
      --nav-active-text:      var(--ds-accent);
      --nav-active-indicator: var(--ds-accent);
      --tenant-brand-primary:   var(--ds-accent);
      --tenant-brand-secondary: var(--ds-accent-hover);
      --btn-gradient-end:       var(--ds-accent-hover);
      --btn-on-accent:          #FFFFFF;
      --bardev-tab-stroke:      var(--ds-border-2);
      --bardev-tab-line:        var(--ds-border);
      --bardev-tab-active-line: var(--ds-accent);

      /* Acentos de sección (píldoras h2) — neutros y elegantes */
      --bardev-section-inicio:        var(--bv-g-059669, #059669);
      --bardev-section-citas:         #8B5CF6;
      --bardev-section-tienda:        var(--bv-g-047857, #047857);
      --bardev-section-clientes:      #F59E0B;
      --bardev-section-finanzas:      #EF4444;
      --bardev-section-estadisticas:  #0EA5E9;
      --bardev-section-empleados:     #EC4899;
      --bardev-section-configuracion: #6B7280;
      --bardev-section-developer:     #9CA3AF;
    }

    /* ── Fuente global Inter ── */
    html.bardev-panel-theme-light body,
    html.bardev-panel-theme-light input,
    html.bardev-panel-theme-light select,
    html.bardev-panel-theme-light textarea,
    html.bardev-panel-theme-light button {
      font-family: var(--ds-font);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ── Body: fondo limpio sin degradado ── */
    html.bardev-panel-theme-light body {
      background: var(--ds-bg) !important;
      color: var(--ds-text-primary);
    }

    /* ── Layout general del dashboard ── */
    html.bardev-panel-theme-light #view-dashboard {
      background: var(--ds-bg);
    }

    /* ════════════════════════════════════════
       SIDEBAR premium
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .nav-side {
      background: var(--ds-sidebar-bg) !important;
      border-right: 1px solid var(--ds-sidebar-border) !important;
      font-family: var(--ds-font);
      box-shadow: none !important;
    }

    /* Logo / cabecera del sidebar */
    html.bardev-panel-theme-light .nav-side-header {
      padding: 20px 16px 12px !important;
      border-bottom: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .nav-side-header strong,
    html.bardev-panel-theme-light .nav-side-header span {
      color: var(--ds-text-primary) !important;
      font-weight: 700 !important;
      letter-spacing: -0.3px;
    }
    html.bardev-panel-theme-light .nav-header-logo-wrap {
      background: transparent !important;
      border: none !important;
      overflow: visible !important;
      box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.1) !important;
    }

    /* Items de nav */
    html.bardev-panel-theme-light .btn.nav-item {
      color: var(--ds-text-secondary) !important;
      border-radius: var(--ds-radius-sm) !important;
      font-size: var(--ds-font-size-base) !important;
      font-weight: 500 !important;
      transition: background var(--ds-duration-fast) var(--ds-ease),
                  color var(--ds-duration-fast) var(--ds-ease) !important;
      padding: 7px 10px !important;
      margin: 1px 6px !important;
    }
    html.bardev-panel-theme-light .btn.nav-item:hover {
      background: var(--ds-surface-2) !important;
      color: var(--ds-text-primary) !important;
    }
    /* Página activa con los roles del menú del tema (--bv-nav-active-*): el acento sobre su tinte suave no llegaba a
       4,5:1 (3,6:1 en Barveo Original, 3,05:1 en Marino). Sin tema, Barveo Original usa el acento oscurecido de la
       paleta (titular, 24-10-2026). */
    html.bardev-panel-theme-light .btn.nav-item.active,
    html.bardev-panel-theme-light .btn.nav-item[data-active="1"],
    html.bardev-panel-theme-light .btn.nav-item:focus-visible {
      background: var(--bv-nav-active-background, var(--ds-accent-light)) !important;
      color: var(--bv-nav-active-text, var(--ds-accent-hover)) !important;
      font-weight: 600 !important;
    }

    /* Grupos / toggles del sidebar */
    html.bardev-panel-theme-light .nav-group__toggle {
      color: var(--ds-text-tertiary) !important;
      font-size: var(--ds-font-size-xs) !important;
      font-weight: 600 !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
      padding: 14px 16px 4px !important;
    }
    html.bardev-panel-theme-light .nav-group__toggle:hover {
      background: transparent !important;
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .nav-toggle-arrow {
      border-color: transparent transparent transparent var(--ds-text-tertiary) !important;
    }

    /* Indicador activo lateral */
    html.bardev-panel-theme-light .btn.nav-item.active::before,
    html.bardev-panel-theme-light .btn.nav-item[data-active="1"]::before {
      background: var(--ds-accent) !important;
    }

    /* Footer sidebar: usuario y logout */
    html.bardev-panel-theme-light #dash-user {
      color: var(--ds-text-secondary) !important;
      font-size: var(--ds-font-size-sm) !important;
    }

    /* ════════════════════════════════════════
       MAIN AREA
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .main-area {
      background: var(--ds-bg) !important;
    }

    /* Títulos de sección (h2 de panel) */
    html.bardev-panel-theme-light .main-area .content-panel > h2,
    html.bardev-panel-theme-light .main-area .content-panel .informes-head > h2 {
      font-family: var(--ds-font) !important;
      font-size: var(--ds-font-size-xl) !important;
      font-weight: 700 !important;
      letter-spacing: -0.4px !important;
      color: var(--ds-text-primary) !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-4) !important;
      margin: 0 !important;
    }

    /* ════════════════════════════════════════
       BOTONES (3 variantes)
       ════════════════════════════════════════ */

    /* — Primary — */
    html.bardev-panel-theme-light .btn:not(.secondary):not(.nav-item):not(.tenant-delete):not(.ghost) {
      background: var(--ds-accent) !important;
      color: #FFFFFF !important;
      border: 1px solid var(--ds-accent) !important;
      box-shadow: var(--ds-shadow-sm) !important;
      border-radius: var(--ds-radius-md) !important;
      font-family: var(--ds-font) !important;
      font-weight: 600 !important;
      font-size: var(--ds-font-size-base) !important;
      height: 36px !important;
      padding: 0 16px !important;
      transition: background var(--ds-duration-fast) var(--ds-ease),
                  box-shadow var(--ds-duration-fast) var(--ds-ease),
                  transform var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light .btn:not(.secondary):not(.nav-item):not(.tenant-delete):not(.ghost):hover:not(:disabled) {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
      box-shadow: var(--ds-shadow-md) !important;
    }
    html.bardev-panel-theme-light .btn:not(.secondary):not(.nav-item):not(.tenant-delete):not(.ghost):active:not(:disabled) {
      transform: scale(0.98) !important;
    }

    /* — Secondary — */
    html.bardev-panel-theme-light .btn.secondary:not(.nav-item):not(.tenant-delete):not(.btn-icon) {
      background: var(--ds-surface) !important;
      color: var(--ds-text-primary) !important;
      border: 1px solid var(--ds-border-2) !important;
      box-shadow: var(--ds-shadow-xs) !important;
      border-radius: var(--ds-radius-md) !important;
      font-family: var(--ds-font) !important;
      font-weight: 500 !important;
      font-size: var(--ds-font-size-base) !important;
      height: 36px !important;
      padding: 0 16px !important;
      transition: background var(--ds-duration-fast) var(--ds-ease),
                  border-color var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light .btn.secondary:not(.nav-item):not(.tenant-delete):not(.btn-icon):hover:not(:disabled) {
      background: var(--ds-surface-2) !important;
      border-color: var(--ds-border-2) !important;
    }
    html.bardev-panel-theme-light .btn.secondary:not(.nav-item):not(.tenant-delete):not(.btn-icon):active:not(:disabled) {
      background: var(--ds-surface-3) !important;
    }
    html.bardev-panel-theme-light .btn.secondary.webapp-typo-size-btn {
      width: 32px !important;
      height: auto !important;
      min-width: 32px !important;
      max-width: 32px !important;
      padding: 0 !important;
      margin-top: 0 !important;
      border-radius: 0 !important;
      font-size: 1rem !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: none !important;
      border: none !important;
    }
    html.bardev-panel-theme-light .webapp-typo-size-group .webapp-typo-size-btn:hover:not(:disabled) {
      background: rgba(37, 99, 235, 0.08) !important;
    }

    /* ════════════════════════════════════════
       INPUTS / SELECTS / TEXTAREAS
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    html.bardev-panel-theme-light select,
    html.bardev-panel-theme-light textarea {
      background: var(--ds-surface) !important;
      color: var(--ds-text-primary) !important;
      border: 1px solid var(--ds-border-2) !important;
      border-radius: var(--ds-radius-md) !important;
      font-family: var(--ds-font) !important;
      font-size: var(--ds-font-size-base) !important;
      transition: border-color var(--ds-duration-fast) var(--ds-ease),
                  box-shadow var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,
    html.bardev-panel-theme-light select:focus,
    html.bardev-panel-theme-light textarea:focus {
      outline: none !important;
      border-color: var(--ds-accent) !important;
      box-shadow: 0 0 0 3px var(--ds-accent-light) !important;
    }
    html.bardev-panel-theme-light input::placeholder,
    html.bardev-panel-theme-light textarea::placeholder {
      color: var(--ds-text-tertiary) !important;
    }

    /* ════════════════════════════════════════
       CARDS / MODAL PANELS
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .agenda-modal-panel,
    html.bardev-panel-theme-light .modal-panel,
    html.bardev-panel-theme-light .bardev-float-login {
      background: var(--ds-surface) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-xl) !important;
      box-shadow: var(--ds-shadow-xl) !important;
      color: var(--ds-text-primary) !important;
    }

    /* ════════════════════════════════════════
       TABLES
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light table {
      border-collapse: collapse;
    }
    html.bardev-panel-theme-light th {
      background: var(--ds-surface-2) !important;
      color: var(--ds-text-secondary) !important;
      font-size: var(--ds-font-size-xs) !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light td {
      border-bottom: 1px solid var(--ds-border) !important;
      color: var(--ds-text-primary) !important;
      font-size: var(--ds-font-size-base) !important;
    }
    html.bardev-panel-theme-light tr:last-child td {
      border-bottom: none !important;
    }

    /* ════════════════════════════════════════
       AGENDA premium (fondo limpio)
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .agenda-grid-outer {
      border: 1px solid var(--ds-border) !important;
      background: var(--ds-surface) !important;
      box-shadow: var(--ds-shadow-sm) !important;
      border-radius: var(--ds-radius-lg) !important;
      overflow-x: auto !important;
      overflow-y: auto !important;
    }
    html.bardev-panel-theme-light .agenda-heads-row {
      background: var(--ds-surface-2) !important;
      box-shadow: 0 1px 0 var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-heads-row .agenda-col__head {
      background: var(--ds-surface-2) !important;
      border-bottom: 1px solid var(--ds-border) !important;
      border-right: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-time-rail-head {
      background: var(--ds-surface-2) !important;
      border-right: 1px solid var(--ds-border) !important;
      border-bottom: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-tracks-row .agenda-col__body,
    html.bardev-panel-theme-light .agenda-col {
      /* No usar shorthand background: anula background-image de la cuadrícula (inline) */
      background-color: var(--ds-brand-beige) !important;
      border-right: 1px solid var(--ds-border) !important;
      overflow-x: clip !important;
      overflow-y: clip !important;
    }
    html.bardev-panel-theme-light .agenda-tracks-row .agenda-col__body.agenda-col__body--vacacion {
      background-color: var(--ds-brand-beige) !important;
      background-image: repeating-linear-gradient(
        -45deg,
        rgba(var(--bv-g-rgb-114830, 17, 72, 48), 0.08) 0px,
        rgba(var(--bv-g-rgb-114830, 17, 72, 48), 0.08) 8px,
        rgba(var(--bv-g-rgb-e4f6ec, 228, 246, 236), 0.35) 8px,
        rgba(var(--bv-g-rgb-e4f6ec, 228, 246, 236), 0.35) 16px
      ) !important;
      background-size: auto !important;
      background-position: 0 0 !important;
      background-repeat: repeat !important;
      box-shadow: inset 0 0 0 1px rgba(var(--bv-g-rgb-114830, 17, 72, 48), 0.12) !important;
    }
    html.bardev-panel-theme-light .agenda-tracks-row .agenda-time-rail {
      background: var(--ds-surface-2) !important;
      border-right: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-time-label,
    html.bardev-panel-theme-light .agenda-time-label--hour {
      color: var(--ds-text-tertiary) !important;
      font-size: var(--ds-font-size-xs) !important;
      font-family: var(--ds-font) !important;
    }
    html.bardev-panel-theme-light .agenda-col__head-name {
      color: var(--ds-text-primary) !important;
      font-weight: 600 !important;
      font-family: var(--ds-font) !important;
    }
    html.bardev-panel-theme-light .agenda-col__sub {
      color: var(--ds-text-secondary) !important;
      font-size: var(--ds-font-size-sm) !important;
    }
    html.bardev-panel-theme-light .agenda-col__count {
      color: var(--ds-accent) !important;
      font-weight: 600 !important;
    }
    html.bardev-panel-theme-light .agenda-col__occ-label {
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .agenda-col__occ-bar {
      border-color: var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-col__avatar--ph {
      background: var(--ds-accent-light) !important;
      color: var(--ds-accent) !important;
    }

    /* Tarjetas de cita (sin color de servicio asignado) */
    html.bardev-panel-theme-light .agenda-card:not(.agenda-card--locked):not(.agenda-card--personal-block):not(.agenda-card--svc):not(.agenda-card--waitlist-ghost) {
      border: 1px solid var(--ds-border) !important;
      border-left: 3px solid var(--ds-accent) !important;
      background: var(--ds-surface) !important;
      box-shadow: var(--ds-shadow-sm) !important;
      border-radius: var(--ds-radius-sm) !important;
      transition: box-shadow var(--ds-duration-fast) var(--ds-ease),
                  transform var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light .agenda-card:not(.agenda-card--locked):not(.agenda-card--personal-block):not(.agenda-card--svc):not(.agenda-card--waitlist-ghost):hover {
      box-shadow: var(--ds-shadow-md) !important;
      transform: translateY(-1px) !important;
    }
    html.bardev-panel-theme-light .agenda-card__name {
      color: var(--ds-text-primary) !important;
      font-weight: 600 !important;
      font-size: var(--ds-font-size-sm) !important;
      text-shadow: none !important;
    }
    html.bardev-panel-theme-light .agenda-card__name-text {
      color: inherit !important;
      font-weight: inherit !important;
      font-size: inherit !important;
    }
    html.bardev-panel-theme-light .agenda-card__name-svc-sep {
      color: var(--ds-text-tertiary) !important;
      font-weight: 900 !important;
      font-size: calc(var(--agenda-text-scale) * clamp(0.62rem, 0.04rem + 15cqh, 1.02rem)) !important;
      text-shadow: none !important;
    }
    html.bardev-panel-theme-light .agenda-card__svc {
      color: var(--ds-text-secondary) !important;
      font-size: var(--ds-font-size-xs) !important;
      text-shadow: none !important;
    }
    html.bardev-panel-theme-light .agenda-card__time {
      color: var(--ds-text-secondary) !important;
      font-size: var(--ds-font-size-xs) !important;
      text-shadow: none !important;
    }
    html.bardev-panel-theme-light .agenda-card__dur {
      background: var(--ds-surface-2) !important;
      color: var(--ds-text-secondary) !important;
      border-radius: var(--ds-radius-xs) !important;
    }

    /* Barra de hora actual */
    html.bardev-panel-theme-light .agenda-now-pin__line {
      background: var(--ds-danger) !important;
    }
    html.bardev-panel-theme-light .agenda-now-pin__dot {
      background: var(--ds-danger) !important;
      box-shadow: 0 0 0 2px var(--ds-surface) !important;
    }
    html.bardev-panel-theme-light .agenda-now-pin__txt {
      color: #991b1b !important;
      background: #fee2e2 !important;
      border: 1px solid #f87171 !important;
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12) !important;
      border-radius: var(--ds-radius-xs) !important;
    }

    /* FAB nueva cita */
    html.bardev-panel-theme-light .agenda-fab--venta,
    html.bardev-panel-theme-light #agenda-btn-new.agenda-fab {
      background: var(--ds-accent) !important;
      color: #FFFFFF !important;
      -webkit-text-fill-color: #FFFFFF !important;
      box-shadow: 0 4px 18px rgba(var(--bv-g-rgb-047857, 4, 120, 87), 0.28) !important;
      border-radius: var(--ds-radius-lg) !important;
    }
    html.bardev-panel-theme-light .agenda-fab--venta svg,
    html.bardev-panel-theme-light .agenda-fab--venta svg * {
      color: #fff !important;
      stroke: #fff !important;
      filter: none !important;
    }
    html.bardev-panel-theme-light #agenda-btn-new.agenda-fab:hover,
    html.bardev-panel-theme-light .agenda-fab--venta:hover {
      background: var(--ds-accent-hover) !important;
      filter: none !important;
      box-shadow: 0 6px 24px rgba(var(--bv-g-rgb-047857, 4, 120, 87), 0.38) !important;
    }

    /* Topbar agenda */
    html.bardev-panel-theme-light .agenda-topbar__arrow {
      background: var(--ds-accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__arrow:hover {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
      border-radius: var(--ds-radius-sm) !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__date:hover {
      background: var(--ds-surface-2) !important;
      border-radius: var(--ds-radius-sm) !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__pill {
      border: 1px solid var(--ds-accent) !important;
      background: var(--ds-accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-radius: 999px !important;
      font-weight: 500 !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__pill:hover {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__icon-btn {
      background: var(--ds-accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__icon-btn svg,
    html.bardev-panel-theme-light .agenda-topbar__icon-btn svg * {
      color: #fff !important;
      stroke: #fff !important;
    }
    html.bardev-panel-theme-light .agenda-topbar__icon-btn:hover {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
      border-radius: var(--ds-radius-sm) !important;
    }

    html.bardev-panel-theme-light .nav-side-collapse-toggle {
      background: var(--ds-accent) !important;
      border-color: var(--ds-accent) !important;
      color: #fff !important;
    }
    html.bardev-panel-theme-light .nav-side-collapse-toggle:hover {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
      color: #fff !important;
    }
    html.bardev-panel-theme-light #btn-logout-dash.btn.secondary {
      background: var(--ds-accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light #btn-logout-dash.btn.secondary:hover:not(:disabled) {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
    }

    /* Lista de espera (agenda + modal): legible en tema claro, sin fondos grises */
    html.bardev-panel-theme-light .agenda-waitlist-date-pill {
      background: #fef3c7 !important;
      border: 1px solid #f59e0b !important;
      color: #78350f !important;
      -webkit-text-fill-color: #78350f !important;
      box-shadow: 0 1px 2px rgba(180, 83, 9, 0.1) !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-date-pill:hover {
      background: #fde68a !important;
      color: #451a03 !important;
      -webkit-text-fill-color: #451a03 !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-date-pill__dot {
      background: #d97706 !important;
      box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5) !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-date-pill--alert {
      animation: agenda-wl-pill-blink 0.5s ease-in-out infinite;
      border-color: rgba(245, 158, 11, 0.95) !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-date-pill--alert .agenda-waitlist-date-pill__dot {
      animation: agenda-wl-pill-blink 0.5s ease-in-out infinite;
    }
    html.bardev-panel-theme-light .agenda-waitlist-date-pill--presence-blink {
      animation: agenda-wl-pill-blink 0.5s ease-in-out infinite;
      border-color: rgba(245, 158, 11, 0.95) !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-date-pill--presence-blink .agenda-waitlist-date-pill__dot {
      animation: agenda-wl-pill-blink 0.5s ease-in-out infinite;
    }
    html.bardev-panel-theme-light #agenda-waitlist-modal > div {
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
    }
    html.bardev-panel-theme-light #agenda-waitlist-modal-title {
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light #agenda-waitlist-modal-sub {
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-detail-card {
      background: #ffffff !important;
      border: 1px solid rgba(245, 158, 11, 0.4) !important;
      box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-user-av {
      color: #78350f !important;
      background: linear-gradient(145deg, #fffbeb, #fde68a) !important;
      border-color: #fbbf24 !important;
    }
    html.bardev-panel-theme-light .agenda-wl-card__name {
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-card__phone,
    html.bardev-panel-theme-light .agenda-wl-card__phone:visited {
      color: #c2410c !important;
    }
    html.bardev-panel-theme-light .agenda-wl-ico {
      stroke: #ea580c !important;
      opacity: 1 !important;
    }
    html.bardev-panel-theme-light .agenda-wl-arrive {
      background: #fff7ed !important;
      color: #9a3412 !important;
      border: 1px solid #fed7aa !important;
    }
    html.bardev-panel-theme-light .agenda-wl-arrive__n {
      color: #7c2d12 !important;
      font-weight: 800 !important;
    }
    html.bardev-panel-theme-light .agenda-wl-card__service {
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-badges__lbl {
      color: var(--ds-text-secondary) !important;
      font-size: 0.62rem !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-day-chip {
      background: #fffbeb !important;
      color: #9a3412 !important;
      border: 1px solid #fde68a !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-day-chip--current {
      background: #ffedd5 !important;
      color: #7c2d12 !important;
      border-color: #fb923c !important;
      font-weight: 750 !important;
    }
    html.bardev-panel-theme-light .agenda-waitlist-day-chip--bookable {
      background: var(--bv-g-ecfdf5, #ecfdf5) !important;
      color: var(--bv-g-047857, #047857) !important;
      border-color: var(--bv-g-6ee7b7, #6ee7b7) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-pro {
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-pro__label {
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-pro__name {
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-card__notes {
      background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
      border-top: 1px solid rgba(251, 191, 36, 0.35) !important;
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .agenda-wl-card__notes-lbl {
      color: #b45309 !important;
    }
    html.bardev-panel-theme-light .agenda-wl-status-select {
      background: #ffffff !important;
      border: 1px solid #fcd34d !important;
      color: var(--ds-text-primary) !important;
    }

    /* ════════════════════════════════════════
       ANIMACIONES sutiles (CSS transitions)
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .content-panel {
      animation: bardev-fade-up var(--ds-duration-slow) var(--ds-ease);
    }
    @keyframes bardev-fade-up {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* ════════════════════════════════════════
       SCROLLBAR premium
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    html.bardev-panel-theme-light ::-webkit-scrollbar-track {
      background: transparent;
    }
    html.bardev-panel-theme-light ::-webkit-scrollbar-thumb {
      background: var(--ds-border-2);
      border-radius: 99px;
    }
    html.bardev-panel-theme-light ::-webkit-scrollbar-thumb:hover {
      background: var(--ds-text-tertiary);
    }

    /* ════════════════════════════════════════
       TENANT SWITCHER
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .nav-tenant-switcher {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__current {
      background: var(--ds-surface-2) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-md) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__item:hover {
      background: var(--ds-surface) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-logo-wrap {
      background: var(--ds-accent-light) !important;
      border-radius: var(--ds-radius-sm) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__item-placeholder {
      background: var(--ds-surface-2) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__name {
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__btn {
      background: var(--ds-accent-light) !important;
      border: 1px solid var(--ds-accent-light2) !important;
      color: var(--ds-accent) !important;
      border-radius: var(--ds-radius-xs) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__btn:hover {
      background: var(--ds-accent-light2) !important;
    }

    /* ════════════════════════════════════════
       FASE 2 — SIDEBAR PREMIUM (estructura plana)
       ════════════════════════════════════════ */

    /* El botón de plegar el menú se pega a su línea vertical: va a --nav-side-width, que debe valer lo que mide el
       menú (240px; 200px por debajo de 900px, abajo). Con el 260px de base quedaba 20-60px dentro del contenido,
       «a mitad de pantalla» cuando la ventana no está maximizada (titular, 18-10). Plegado (agenda-max) vale 52px. */
    html.bardev-panel-theme-light .app-shell:not(.app-shell--agenda-max) {
      --nav-side-width: 240px;
    }

    /* Sidebar: ancho 240px, fondo beis del logo */
    html.bardev-panel-theme-light .nav-side {
      width: 240px !important;
      flex-shrink: 0 !important;
      padding: 0 !important;
      background: var(--ds-brand-beige) !important;
      border-right: 1px solid var(--ds-border) !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
    }

    /* ── Header: solo logo (compacto) ── */
    html.bardev-panel-theme-light .nav-side-header {
      padding: 12px 14px 8px !important;
      border-bottom: none !important;
      margin-bottom: 0 !important;
      text-align: left !important;
      flex-shrink: 0 !important;
    }
    html.bardev-panel-theme-light .nav-side-header__brand-row {
      justify-content: flex-start !important;
      margin-bottom: 0 !important;
    }
    html.bardev-panel-theme-light .nav-header-logo-wrap {
      width: 100px !important;
      height: 100px !important;
      border-radius: 20px !important;
      background: transparent !important;
      border: none !important;
      overflow: visible !important;
      box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.1) !important;
    }
    html.bardev-panel-theme-light .nav-header-logo-placeholder {
      font-size: 2.75rem !important;
      color: var(--ds-accent) !important;
    }

    /* ── Logotipo del menú: horizontal y centrado con el menú desplegado; vertical en el plegado ── */
    .nav-header-logo-h {
      display: none;
    }
    #view-dashboard:not(.app-shell--agenda-max) .nav-side-header .nav-side-header__brand-row {
      justify-content: center !important;
    }
    #view-dashboard:not(.app-shell--agenda-max) .nav-side-header .nav-header-logo-wrap {
      width: 100% !important;
      height: auto !important;
      border-radius: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 10px 14px 6px !important;
      box-sizing: border-box !important;
    }
    #view-dashboard:not(.app-shell--agenda-max) .nav-side-header #nav-header-logo {
      display: none !important;
    }
    #view-dashboard:not(.app-shell--agenda-max) .nav-side-header #nav-header-logo-h {
      display: block !important;
      width: 100% !important;
      max-width: 180px !important;
      height: auto !important;
      margin: 0 auto !important;
      object-fit: contain !important;
      border-radius: 0 !important;
    }
    #nav-rail-floats #nav-header-logo-h,
    .app-shell--agenda-max #nav-header-logo-h {
      display: none !important;
    }

    /* ── TENANT SWITCHER: etiqueta fuera; caja gris solo en current ── */
    html.bardev-panel-theme-light .nav-tenant-switcher {
      margin: 0 14px 10px !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__head {
      margin: 0 0 6px !important;
      padding: 0 2px !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__label {
      color: var(--ds-text-tertiary) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__current {
      padding: 10px 12px !important;
      background: var(--ds-surface-2) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-md) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__title {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
      min-width: 0 !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__title .nav-tenant-switcher__name {
      flex: 1 !important;
      min-width: 0 !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__name {
      color: var(--ds-text-primary) !important;
      font-size: 13px !important;
      font-weight: 600 !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__meta #dash-user {
      color: var(--ds-text-secondary) !important;
      font-size: 11px !important;
      text-align: left !important;
      white-space: normal !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__btn {
      background: var(--ds-accent-light) !important;
      border: 1px solid var(--ds-accent-light2) !important;
      color: var(--ds-accent) !important;
      border-radius: var(--ds-radius-xs) !important;
      font-size: 11px !important;
    }
    html.bardev-panel-theme-light .nav-tenant-switcher__btn:hover {
      background: var(--ds-accent-light2) !important;
    }
    html.bardev-panel-theme-light .nav-tenant-logo-wrap {
      width: 28px !important;
      height: 28px !important;
      border-radius: var(--ds-radius-xs) !important;
      background: var(--ds-accent-light) !important;
    }

    /* ── Scroll area ── */
    html.bardev-panel-theme-light .nav-side-scroll {
      flex: 1 !important;
      padding: 8px 10px 4px !important;
      overflow-y: auto !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }
    html.bardev-panel-theme-light .nav-side-scroll::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    /* "MÓDULOS" section header via ::before */
    html.bardev-panel-theme-light .nav-side-scroll::before {
      content: 'MÓDULOS';
      display: block;
      font-family: var(--ds-font);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--ds-text-tertiary);
      padding: 8px 8px 4px;
      text-transform: uppercase;
    }

    /* ── ELIMINAR TODAS LAS LÍNEAS/RAIL ── */
    html.bardev-panel-theme-light .nav-group__rail-line,
    html.bardev-panel-theme-light .nav-side-rail-gap,
    html.bardev-panel-theme-light .nav-side-rail-gap__rail,
    html.bardev-panel-theme-light .nav-side-rail-gap__line,
    html.bardev-panel-theme-light .nav-side-rail-gap__spacer,
    html.bardev-panel-theme-light .nav-side-footer__rail,
    html.bardev-panel-theme-light .nav-side-footer__rail-svg {
      display: none !important;
    }
    html.bardev-panel-theme-light .nav-group.nav-group--draggable > .nav-group__shell > .nav-group__rail::after,
    html.bardev-panel-theme-light #nav-dev-section .nav-group__rail::after {
      display: none !important;
    }

    /* ── RAIL: solo el icono, sin interacción visual ── */
    html.bardev-panel-theme-light .nav-group__shell {
      gap: 2px !important;
    }
    html.bardev-panel-theme-light .nav-group.nav-group--draggable > .nav-group__shell {
      padding-bottom: 0 !important;
    }
    html.bardev-panel-theme-light .nav-group__rail {
      width: 30px !important;
      flex-shrink: 0 !important;
      align-self: flex-start !important;
    }
    html.bardev-panel-theme-light .nav-group__drag-dot {
      width: 30px !important;
      min-height: 34px !important;
      border-radius: var(--ds-radius-xs) !important;
      background: transparent !important;
      border: none !important;
      cursor: grab !important;
      pointer-events: auto !important;
      touch-action: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
    }
    html.bardev-panel-theme-light .nav-group__drag-dot:active {
      cursor: grabbing !important;
    }
    html.bardev-panel-theme-light .nav-group--draggable .nav-group__drag-dot:hover,
    html.bardev-panel-theme-light #nav-dev-section .nav-group__drag-dot:hover {
      background: var(--ds-accent-light) !important;
    }
    html.bardev-panel-theme-light .nav-section-icon {
      color: var(--ds-text-tertiary) !important;
    }
    html.bardev-panel-theme-light .nav-section-icon svg {
      width: 15px !important;
      height: 15px !important;
      flex-shrink: 0 !important;
    }

    /* Icono activo: color acento cuando la sección está abierta */
    html.bardev-panel-theme-light .nav-group.nav-group--open > .nav-group__shell > .nav-group__rail .nav-section-icon {
      color: var(--ds-accent) !important;
    }
    /* Agenda maximizada: rail colapsado — todos los iconos en verde corporativo (pisa --ds-text-tertiary) */
    html.bardev-panel-theme-light .app-shell--agenda-max .nav-section-icon {
      color: var(--ds-accent) !important;
    }

    /* ── TOGGLE DE GRUPO: texto normal, limpio ── */
    html.bardev-panel-theme-light .nav-group__toggle {
      width: 100% !important;
      padding: 7px 10px 7px 2px !important;
      margin: 1px 0 !important;
      border-radius: var(--ds-radius-sm) !important;
      background: transparent !important;
      color: var(--ds-text-secondary) !important;
      font-family: var(--ds-font) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      transition: background var(--ds-duration-fast) var(--ds-ease),
                  color var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light .nav-group__toggle:hover {
      background: var(--ds-surface-2) !important;
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light .nav-group.nav-group--open > .nav-group__main > .nav-group__head > .nav-group__toggle,
    html.bardev-panel-theme-light .nav-group.nav-group--open > .nav-group__toggle {
      color: var(--ds-text-primary) !important;
      font-weight: 600 !important;
    }
    html.bardev-panel-theme-light .nav-toggle-arrow {
      border-color: transparent transparent transparent var(--ds-text-tertiary) !important;
      border-width: 4px 0 4px 5px !important;
      opacity: 0.7 !important;
    }
    html.bardev-panel-theme-light .nav-toggle-label {
      flex: 1 !important;
      min-width: 0 !important;
    }

    /* Color dot (sub-grupos anidados): punto pequeño */
    html.bardev-panel-theme-light .nav-color-dot {
      width: 5px !important;
      height: 5px !important;
      border-radius: 50% !important;
      background: var(--group-color, var(--ds-text-tertiary)) !important;
      opacity: 0.6 !important;
      flex-shrink: 0 !important;
    }

    /* ── NAV ITEMS ── */
    html.bardev-panel-theme-light .btn.nav-item {
      width: 100% !important;
      text-align: left !important;
      border-radius: var(--ds-radius-sm) !important;
      padding: 6px 10px !important;
      margin: 1px 0 !important;
      font-family: var(--ds-font) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      color: var(--ds-text-secondary) !important;
      background: transparent !important;
      border: none !important;
      cursor: pointer !important;
      transition: background var(--ds-duration-fast) var(--ds-ease),
                  color var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light .btn.nav-item:hover {
      background: var(--ds-surface-2) !important;
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light .btn.nav-item.active,
    html.bardev-panel-theme-light .btn.nav-item[data-active="1"],
    html.bardev-panel-theme-light .nav-group__toggle--direct.nav-item.active {
      background: var(--bv-nav-active-background, var(--ds-accent-light)) !important;
      color: var(--bv-nav-active-text, var(--ds-accent-hover)) !important;
      font-weight: 600 !important;
    }
    /* Pedidos/proveedores (entrada directa): la píldora activa no pisa la barra lateral izquierda */
    html.bardev-panel-theme-light .nav-group__toggle--direct.nav-item.active {
      padding-left: 10px !important;
    }

    /* Sub-items: sin indentación extra agresiva */
    html.bardev-panel-theme-light .nav-item--sub {
      padding-left: 12px !important;
    }
    html.bardev-panel-theme-light [data-nav-group="finanzas"] .nav-subgroup--ingresos .nav-subgroup__icon {
      background: color-mix(in srgb, var(--bv-g-059669, #059669) 14%, #fff);
      color: var(--bv-g-059669, #059669);
      border-color: color-mix(in srgb, var(--bv-g-059669, #059669) 28%, transparent);
    }
    html.bardev-panel-theme-light [data-nav-group="finanzas"] .nav-subgroup--gastos .nav-subgroup__icon {
      background: color-mix(in srgb, #dc2626 12%, #fff);
      color: #dc2626;
      border-color: color-mix(in srgb, #dc2626 26%, transparent);
    }
    html.bardev-panel-theme-light .btn.nav-item.nav-item--sub.nav-item--iconed .nav-item__icon {
      color: color-mix(in srgb, var(--ds-text-secondary) 88%, var(--group-color, #64748b));
    }
    html.bardev-panel-theme-light .nav-group .nav-subgroup__icon {
      background: color-mix(in srgb, var(--group-color, #64748b) 10%, #fff);
      border-color: color-mix(in srgb, var(--group-color, #64748b) 22%, transparent);
    }
    html.bardev-panel-theme-light .nav-group--draggable .nav-group__main > .nav-group__body > .btn.nav-item.nav-item--sub,
    html.bardev-panel-theme-light .nav-menu-items .btn.nav-item.nav-item--sub {
      padding: 5px 8px 5px 12px !important;
    }
    html.bardev-panel-theme-light .nav-block__main .nav-group__body .btn.nav-item.nav-item--sub {
      color: var(--ds-text-secondary) !important;
    }
    html.bardev-panel-theme-light .nav-block__main .nav-group__body .btn.nav-item.nav-item--sub:disabled {
      color: var(--ds-text-tertiary) !important;
      opacity: 0.7 !important;
    }

    /* Nav block shell (developer section): sin gap */
    html.bardev-panel-theme-light .nav-block__shell {
      gap: 2px !important;
    }
    html.bardev-panel-theme-light #nav-dev-section .nav-block__shell {
      padding-bottom: 0 !important;
    }

    /* App del centro / App del staff */
    html.bardev-panel-theme-light .nav-webapp-link {
      background: rgba(var(--bv-g-rgb-10b981, 16, 185, 129),0.07) !important;
      border: 1px solid rgba(var(--bv-g-rgb-10b981, 16, 185, 129),0.18) !important;
      color: var(--ds-success) !important;
      border-radius: var(--ds-radius-sm) !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      padding: 7px 10px !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
    html.bardev-panel-theme-light .nav-webapp-link:hover {
      background: rgba(var(--bv-g-rgb-10b981, 16, 185, 129),0.12) !important;
    }
    html.bardev-panel-theme-light .nav-webapp-link--staff {
      background: rgba(14, 165, 233, 0.08) !important;
      border: 1px solid rgba(14, 165, 233, 0.22) !important;
      color: #0369a1 !important;
    }
    html.bardev-panel-theme-light .nav-webapp-link--staff:hover {
      background: rgba(14, 165, 233, 0.14) !important;
    }
    html.bardev-panel-theme-light .nav-webapp-link--buscador {
      background: rgba(167, 139, 250, 0.08) !important;
      border: 1px solid rgba(167, 139, 250, 0.22) !important;
      color: #6d28d9 !important;
    }
    html.bardev-panel-theme-light .nav-webapp-link--buscador:hover,
    html.bardev-panel-theme-light .nav-webapp-link--buscador.nav-item.active {
      background: rgba(167, 139, 250, 0.14) !important;
    }

    /* ── FOOTER: solo logout ── */
    html.bardev-panel-theme-light .nav-side-footer {
      display: flex !important;
      align-items: center !important;
      flex-shrink: 0 !important;
      padding: 10px 10px 14px !important;
      border-top: 1px solid var(--ds-border) !important;
      background: var(--ds-brand-beige) !important;
    }
    html.bardev-panel-theme-light .nav-side-footer__main {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;
    }
    html.bardev-panel-theme-light .nav-side-footer__main .btn {
      background: transparent !important;
      border: none !important;
      color: var(--ds-text-secondary) !important;
      font-family: var(--ds-font) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      padding: 7px 10px !important;
      border-radius: var(--ds-radius-sm) !important;
      text-align: left !important;
      cursor: pointer !important;
      transition: background var(--ds-duration-fast) var(--ds-ease),
                  color var(--ds-duration-fast) var(--ds-ease) !important;
    }
    html.bardev-panel-theme-light .nav-side-footer__main .btn:hover {
      background: var(--ds-danger-light) !important;
      color: var(--ds-danger) !important;
    }

    /* Reproductor de música: compacto en modo claro */
    html.bardev-panel-theme-light .nav-side-music {
      background: var(--ds-surface-2) !important;
      border-top: 1px solid var(--ds-border) !important;
      padding: 8px 12px !important;
    }
    html.bardev-panel-theme-light .nav-side-music__label {
      color: var(--ds-text-tertiary) !important;
      font-size: 10px !important;
    }
    html.bardev-panel-theme-light .nav-side-music__title {
      color: var(--ds-text-secondary) !important;
      font-size: 11px !important;
    }
    html.bardev-panel-theme-light .nav-side-music__open-list {
      color: var(--ds-text-secondary) !important;
    }

    /* ── MAIN AREA ── */
    html.bardev-panel-theme-light .main-area {
      margin-left: 0 !important;
      background: var(--ds-bg) !important;
      flex: 1 !important;
      min-width: 0 !important;
    }
    /* Cuando la agenda está activa: preservar layout flex + overflow:hidden del sistema base */
    html.bardev-panel-theme-light .main-area:has(#panel-agenda.active) {
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      padding: 10px 20px 12px !important;
      max-width: none !important;
    }
    /* Con zoom: no forzar 100dvh (deja faldón). La altura la marca JS + --bardev-panel-scale-inv. */
    html.bardev-panel-theme-light .app-shell:has(#panel-agenda.active) {
      overflow: hidden !important;
    }
    html.bardev-panel-scaled.bardev-panel-theme-light .app-shell:has(#panel-agenda.active),
    html.bardev-panel-scaled .app-shell:has(#panel-agenda.active) {
      height: calc(100dvh * var(--bardev-panel-scale-inv, 1)) !important;
      max-height: calc(100dvh * var(--bardev-panel-scale-inv, 1)) !important;
      min-height: calc(100dvh * var(--bardev-panel-scale-inv, 1)) !important;
    }
    /* Safari: fondo del viewport = panel (si queda 1px de gap no se ve blanco puro). */
    html.bardev-panel-theme-light,
    html.bardev-panel-theme-light body {
      background: var(--ds-bg, #FCF7EA) !important;
    }
    html.bardev-panel-theme-light .app-shell,
    html.bardev-panel-theme-light #view-dashboard {
      background: var(--ds-bg) !important;
      width: 100% !important;
      max-width: none !important;
    }
    html.bardev-panel-theme-light .content-panel {
      display: none;
    }
    /* #panel-agenda necesita display:flex para el layout de cuadrícula con scroll */
    html.bardev-panel-theme-light #panel-agenda.active {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding: 0 !important;
    }
    html.bardev-panel-theme-light .content-panel.active:not(#panel-agenda) {
      display: block !important;
      padding: 0 !important;
    }
    html.bardev-panel-theme-light #panel-inicio.active:has(#inicio-tab-panel-members.inicio-tab-panel--active) {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    html.bardev-panel-theme-light #panel-inicio.active:has(#inicio-tab-panel-members.inicio-tab-panel--active) > .inicio-layout {
      flex: 1 1 0% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    html.bardev-panel-theme-light #panel-inicio.active:has(#inicio-tab-panel-members.inicio-tab-panel--active) .inicio-main {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 0% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    html.bardev-panel-theme-light .main-area:has(#panel-inicio.active #inicio-tab-panel-members.inicio-tab-panel--active) {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 0% !important;
      overflow: hidden !important;
      min-height: 0 !important;
    }
    html.bardev-panel-theme-light .main-area:has(#panel-equipo.active),
    html.bardev-panel-theme-light .main-area:has(#panel-dev-facturacion.active),
    html.bardev-panel-theme-light .main-area:has(#panel-dev-envios.active),
    html.bardev-panel-theme-light .main-area:has(#panel-inventario.active) {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      display: block !important;
    }
    html.bardev-panel-theme-light #panel-equipo.active,
    html.bardev-panel-theme-light #panel-dev-facturacion.active,
    html.bardev-panel-theme-light #panel-dev-envios.active,
    html.bardev-panel-theme-light #panel-inventario.active {
      display: block !important;
      overflow: visible !important;
      transform: none !important;
    }

    /* ════════════════════════════════════════
       FASE 3 — MAIN AREA Y HEADER DE SECCIÓN
       ════════════════════════════════════════ */

    /* Main area: todo el ancho del navegador (sidebar + contenido). */
    html.bardev-panel-theme-light .main-area {
      padding: 32px 36px 56px !important;
      max-width: none !important;
      width: auto !important;
      flex: 1 1 auto !important;
    }

    /* Título de sección: heading moderno limpio */
    html.bardev-panel-theme-light .main-area .content-panel > h2,
    html.bardev-panel-theme-light .main-area .content-panel .informes-head > h2 {
      display: block !important;
      max-width: 100% !important;
      margin: 0 0 28px !important;
      padding: 0 !important;
      font-family: var(--ds-font) !important;
      font-size: 24px !important;
      font-weight: 700 !important;
      letter-spacing: -0.5px !important;
      text-transform: none !important;
      line-height: 1.2 !important;
      border-radius: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      color: var(--ds-text-primary) !important;
    }

    /* Login / card en pantalla de login */
    html.bardev-panel-theme-light .login-wrap {
      background: var(--ds-bg) !important;
    }
    html.bardev-panel-theme-light .login-wrap .card {
      background: var(--ds-surface) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-xl) !important;
      box-shadow: var(--ds-shadow-lg) !important;
      padding: 32px !important;
    }
    html.bardev-panel-theme-light .login-wrap .card h2 {
      color: var(--ds-text-primary) !important;
      font-family: var(--ds-font) !important;
      font-size: 20px !important;
      font-weight: 700 !important;
      letter-spacing: -0.3px !important;
    }

    /* Panel inicio: limpiar el gradiente oscuro */
    html.bardev-panel-theme-light #panel-inicio,
    html.bardev-panel-theme-light #panel-webapp {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }
    html.bardev-panel-theme-light #panel-inicio .inicio-members-block,
    html.bardev-panel-theme-light #panel-inicio .menu-comp-list-wrap,
    html.bardev-panel-theme-light #panel-webapp .menu-comp-list-wrap {
      background: var(--ds-surface) !important;
      backdrop-filter: none !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-lg) !important;
      box-shadow: var(--ds-shadow-sm) !important;
    }
    html.bardev-panel-theme-light #panel-inicio .panel-inicio-menu-pill,
    html.bardev-panel-theme-light #panel-webapp .panel-inicio-menu-pill {
      background: var(--ds-accent-light) !important;
      color: var(--ds-accent) !important;
      border-radius: var(--ds-radius-2xl) !important;
      box-shadow: none !important;
      border: 1px solid var(--ds-accent-light2) !important;
      font-size: 14px !important;
      font-weight: 600 !important;
    }

    /* ════════════════════════════════════════
       FASE 4 — CARDS / SURFACES GLOBALES
       ════════════════════════════════════════ */

    /* Tarjetas genéricas (solo el contenedor raíz: no hijos BEM *-card__… ni * __card__…) */
    html.bardev-panel-theme-light .card,
    html.bardev-panel-theme-light [class*="__card"]:not([class*="__card__"]),
    html.bardev-panel-theme-light [class*="-card"]:not(.agenda-card):not(.loyalty-card):not(.nav-item):not(.cita-card):not(.gv-cards):not(.equipo-wallet-card):not([class*="-card__"]):not([class*="fact-iva-card-"]):not(.informes-card-compare):not(.informes-card-compare-label):not(.informes-card-compare-wrap):not(.informes-card-compare-cap) {
      background: var(--ds-surface) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-xl) !important;
      box-shadow: var(--ds-shadow-sm) !important;
    }
    html.bardev-panel-theme-light #equipo-wallet-modal .equipo-wallet-card {
      background: var(--bv-g-0f3d24, #0f3d24) !important;
      background-color: var(--bv-g-0f3d24, #0f3d24) !important;
      background-image: none !important;
      border: none !important;
      color: #f5f0e4 !important;
    }

    /*
     * Scrim blanco unificado (Estilo Barveo).
     * Fuente única: --bd-modal-scrim / --bd-modal-scrim-blur en html.bardev-panel-theme-light.
     */
    html.bardev-panel-theme-light .modal-overlay,
    html.bardev-panel-theme-light .bardev-modal-overlay,
    html.bardev-panel-theme-light .impuestos-modal-overlay,
    html.bardev-panel-theme-light .agenda-wl-ghost-confirm,
    html.bardev-panel-theme-light .agenda-rec-incidents,
    html.bardev-panel-theme-light .agenda-cancel-scope,
    html.bardev-panel-theme-light .dev-barberias-modal,
    html.bardev-panel-theme-light .agenda-notify-scrim,
    html.bardev-panel-theme-light #gv-settings-modal,
    html.bardev-panel-theme-light #inv-scan-modal,
    html.bardev-panel-theme-light #waitlist-modal .wl-free-slot-dialog,
    html.bardev-panel-theme-light .ce-img-editor-modal,
    html.bardev-panel-theme-light .ce-img-editor-replace-backdrop,
    html.bardev-panel-theme-light .ce-img-editor-unsaved-backdrop,
    html.bardev-panel-theme-light #members-overlay.bardev-modal-overlay:not(.hidden),
    html.bardev-panel-theme-light #bardev-app-device-modal.bardev-modal-overlay {
      background: var(--bd-modal-scrim) !important;
      backdrop-filter: var(--bd-modal-scrim-blur) !important;
      -webkit-backdrop-filter: var(--bd-modal-scrim-blur) !important;
    }
    html.bardev-panel-theme-light .bardev-modal-surface {
      background: var(--ds-surface) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-xl) !important;
      box-shadow: var(--ds-shadow-xl) !important;
    }
    html.bardev-panel-theme-light .agenda-modal-panel,
    html.bardev-panel-theme-light .modal-panel {
      background: var(--ds-surface) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-xl) !important;
      box-shadow: var(--ds-shadow-xl) !important;
    }

    /* Badges / píldoras de estado */
    html.bardev-panel-theme-light .badge,
    html.bardev-panel-theme-light [class*="--badge"],
    html.bardev-panel-theme-light [class*="__badge"] {
      border-radius: 999px !important;
      font-size: var(--ds-font-size-xs) !important;
      font-weight: 600 !important;
      padding: 2px 8px !important;
    }

    /* Separadores de sección dentro del panel */
    html.bardev-panel-theme-light hr,
    html.bardev-panel-theme-light .section-divider {
      border: none !important;
      border-top: 1px solid var(--ds-border) !important;
      margin: 24px 0 !important;
    }

    /* Labels / sub-labels */
    html.bardev-panel-theme-light .sub,
    html.bardev-panel-theme-light label.sub,
    html.bardev-panel-theme-light .label-sub {
      color: var(--ds-text-secondary) !important;
      font-size: var(--ds-font-size-sm) !important;
      font-weight: 500 !important;
    }

    /* Alerts / notices */
    html.bardev-panel-theme-light .notice,
    html.bardev-panel-theme-light .alert,
    html.bardev-panel-theme-light [class*="notice-"],
    html.bardev-panel-theme-light [class*="alert-"] {
      border-radius: var(--ds-radius-md) !important;
      padding: var(--ds-space-3) var(--ds-space-4) !important;
      font-size: var(--ds-font-size-base) !important;
    }

    /* Toast (notificaciones) */
    html.bardev-panel-theme-light .bardev-toast {
      font-family: var(--ds-font) !important;
      border-radius: var(--ds-radius-lg) !important;
      box-shadow: var(--ds-shadow-lg) !important;
    }

    /* ════════════════════════════════════════
       FASE 4 — FORMS PREMIUM
       ════════════════════════════════════════ */

    /* Grupos de formulario */
    html.bardev-panel-theme-light .form-group,
    html.bardev-panel-theme-light .field-group {
      margin-bottom: var(--ds-space-5) !important;
    }

    /* Labels de formulario */
    html.bardev-panel-theme-light label {
      font-family: var(--ds-font) !important;
      font-size: var(--ds-font-size-sm) !important;
      font-weight: 600 !important;
      color: var(--ds-text-primary) !important;
      margin-bottom: var(--ds-space-1) !important;
    }

    /* Inputs, selects, textareas: altura mínima y padding */
    html.bardev-panel-theme-light input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]) {
      min-height: 38px !important;
      padding: 0 12px !important;
    }
    html.bardev-panel-theme-light select {
      min-height: 38px !important;
      padding: 0 12px !important;
    }
    html.bardev-panel-theme-light textarea {
      padding: 10px 12px !important;
      min-height: 80px !important;
      resize: vertical !important;
    }

    /* Checkboxes / radios: accent violeta */
    html.bardev-panel-theme-light input[type="checkbox"],
    html.bardev-panel-theme-light input[type="radio"] {
      accent-color: var(--ds-accent) !important;
      width: 15px !important;
      height: 15px !important;
    }

    /* Range */
    html.bardev-panel-theme-light input[type="range"] {
      accent-color: var(--ds-accent) !important;
    }

    /* ════════════════════════════════════════
       OCULTAR PESTAÑA "MODO DE VISUALIZACIÓN"
       (solo modo claro, pestaña innecesaria)
       ════════════════════════════════════════ */
    #personalizacion-tab-modo,
    #personalizacion-panel-modo {
      display: none !important;
    }

    /* ════════════════════════════════════════
       FASE 5 — AGENDA: refinements adicionales
       ════════════════════════════════════════ */

    /* Colores de servicio (pasteles vivos): el fondo refleja claramente el color del servicio */
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-blue:not(.agenda-card--personal-block) {
      border-left-color: #2563eb !important;
      background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-green:not(.agenda-card--personal-block) {
      border-left-color: var(--bv-g-059669, #059669) !important;
      background: linear-gradient(135deg, var(--bv-g-d1fae5, #d1fae5) 0%, var(--bv-g-ecfdf5, #ecfdf5) 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-orange:not(.agenda-card--personal-block) {
      border-left-color: #ea580c !important;
      background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-yellow:not(.agenda-card--personal-block) {
      border-left-color: #ca8a04 !important;
      background: linear-gradient(135deg, #fef9c3 0%, #fefce8 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-red:not(.agenda-card--personal-block) {
      border-left-color: #dc2626 !important;
      background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-purple:not(.agenda-card--personal-block) {
      border-left-color: #9333ea !important;
      background: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-cyan:not(.agenda-card--personal-block) {
      border-left-color: #0891b2 !important;
      background: linear-gradient(135deg, #cffafe 0%, #ecfeff 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-pink:not(.agenda-card--personal-block) {
      border-left-color: #db2777 !important;
      background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-lime:not(.agenda-card--personal-block) {
      border-left-color: #65a30d !important;
      background: linear-gradient(135deg, #ecfccb 0%, #f7fee7 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-indigo:not(.agenda-card--personal-block) {
      border-left-color: #4f46e5 !important;
      background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-rose:not(.agenda-card--personal-block) {
      border-left-color: #e11d48 !important;
      background: linear-gradient(135deg, #ffe4e6 0%, #fff1f2 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-teal:not(.agenda-card--personal-block) {
      border-left-color: #0d9488 !important;
      background: linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-amber:not(.agenda-card--personal-block) {
      border-left-color: #d97706 !important;
      background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-fuchsia:not(.agenda-card--personal-block) {
      border-left-color: #c026d3 !important;
      background: linear-gradient(135deg, #fae8ff 0%, #fdf4ff 100%) !important;
    }
    html.bardev-panel-theme-light .agenda-card.agenda-card--svc-sky:not(.agenda-card--personal-block) {
      border-left-color: #0284c7 !important;
      background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%) !important;
    }

    /* Panel de detalle de cita */
    html.bardev-panel-theme-light .agenda-detail-panel {
      background: var(--ds-surface) !important;
      box-shadow: var(--ds-shadow-xl) !important;
      border-left: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero {
      /* Color de base opaco: la cabecera va anclada y el contenido pasa por detrás. */
      background: linear-gradient(145deg, var(--ds-accent-light) 0%, var(--ds-surface-2) 100%),
        var(--ds-surface, #ffffff) !important;
      color: var(--ds-text-primary) !important;
      border-bottom: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero__back,
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero__edit {
      color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero__back:hover,
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero__edit:hover {
      background: var(--ds-accent-light) !important;
      border-radius: var(--ds-radius-sm) !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-timecard {
      background: var(--ds-surface-2) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-md) !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-sched-input {
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      color: var(--ds-text-primary) !important;
      border-radius: var(--ds-radius-sm) !important;
      color-scheme: light !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-footer__cobrar,
    html.bardev-panel-theme-light #agenda-d-cobrar.agenda-detail-footer__cobrar {
      background: var(--bv-g-047857, #047857) !important;
      border: 1px solid var(--bv-g-065f46, #065f46) !important;
      color: #ffffff !important;
      box-shadow: none !important;
      border-radius: var(--ds-radius-md) !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-footer__cobrar:hover,
    html.bardev-panel-theme-light #agenda-d-cobrar.agenda-detail-footer__cobrar:hover {
      background: var(--bv-g-065f46, #065f46) !important;
      filter: none !important;
      color: #ffffff !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero__more,
    html.bardev-panel-theme-light #agenda-detail-actions-toggle.agenda-detail-hero__more {
      background: var(--bv-g-047857, #047857) !important;
      border-color: var(--bv-g-065f46, #065f46) !important;
      color: #ffffff !important;
    }
    html.bardev-panel-theme-light .agenda-detail-panel .agenda-detail-hero__more:hover,
    html.bardev-panel-theme-light #agenda-detail-actions-toggle.agenda-detail-hero__more:hover {
      background: var(--bv-g-065f46, #065f46) !important;
      border-color: var(--bv-g-064e3b, #064e3b) !important;
      color: #ffffff !important;
    }
    html.bardev-panel-theme-light .agenda-cobro-panel--payment.agenda-cobro-panel {
      background: var(--ds-surface) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-xl) !important;
      box-shadow: var(--ds-shadow-xl) !important;
    }

    /* Avatar placeholder agenda */
    html.bardev-panel-theme-light .agenda-col__avatar--ph {
      border-radius: 50% !important;
    }

    /* Cerrado banner */
    html.bardev-panel-theme-light .agenda-cerrado-banner {
      background: var(--ds-surface-2) !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: var(--ds-radius-md) !important;
    }

    /* ════════════════════════════════════════
       FASE 6 — RESPONSIVE
       ════════════════════════════════════════ */
    @media (max-width: 900px) {
      html.bardev-panel-theme-light .main-area {
        padding: 20px 16px 40px !important;
        max-width: 100% !important;
      }
      html.bardev-panel-theme-light .nav-side {
        width: 200px !important;
      }
      html.bardev-panel-theme-light .app-shell:not(.app-shell--agenda-max) {
        --nav-side-width: 200px;
      }
    }
    @media (max-width: 680px) {
      html.bardev-panel-theme-light .main-area {
        padding: 16px 12px 32px !important;
      }
    }
    @media (max-width: 720px) {
      html.bardev-panel-theme-light .app-shell,
      html.bardev-panel-theme-light #view-dashboard {
        width: 100% !important;
        max-width: none !important;
      }
      html.bardev-panel-theme-light .nav-side {
        width: 100% !important;
        max-width: none !important;
      }
      html.bardev-panel-theme-light .main-area {
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 auto !important;
      }
    }
    @media (min-width: 1440px) {
      html.bardev-panel-theme-light .main-area {
        padding: 32px 48px 56px !important;
      }
    }

    /* ════════════════════════════════════════
       Agenda maximizada: sidebar por encima del contenido + iconos siempre activos
       (debe ir al final del bloque tema claro para ganar la cascada)
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .main-area {
      margin-left: 0 !important;
      width: auto !important;
      max-width: none !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max aside.nav-side {
      position: relative !important;
      z-index: 50 !important;
      overflow: visible !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .nav-side-footer {
      overflow: visible !important;
      background: transparent !important;
      border-top: 0 !important;
      padding: 10px 0 56px 0 !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .nav-side-footer__main #btn-logout-dash {
      position: absolute !important;
      left: 100% !important;
      bottom: 10px !important;
      transform: translateX(-50%) !important;
      margin: 0 !important;
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      background: var(--ds-accent) !important;
      border: 3px solid var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .nav-side-scroll {
      padding: 32px 0 4px !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .nav-side-header {
      display: flex !important;
      height: 96px !important;
      padding: 10px 0 8px !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      overflow: visible !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .nav-header-logo-wrap,
    html.bardev-panel-theme-light #nav-rail-floats .nav-header-logo-wrap {
      position: absolute !important;
      top: 10px !important;
      left: 100% !important;
      transform: translateX(-50%) !important;
      width: 75px !important;
      height: 75px !important;
      margin: 0 !important;
      border-radius: 50% !important;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%) !important;
      border: 3px solid #fff !important;
      box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 22px rgba(15, 23, 42, 0.16) !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max .nav-header-logo-wrap img,
    html.bardev-panel-theme-light #nav-rail-floats .nav-header-logo-wrap img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      border-radius: 50% !important;
      padding: 5px !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max aside.nav-side .nav-group__rail,
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max aside.nav-side .nav-group__shell {
      pointer-events: auto !important;
      width: 100% !important;
      justify-content: center !important;
      align-items: center !important;
      align-self: stretch !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max aside.nav-side button.nav-group__drag-dot {
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: manipulation !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max aside.nav-side .nav-section-icon,
    html.bardev-panel-theme-light #view-dashboard.app-shell--agenda-max aside.nav-side .nav-section-icon svg {
      pointer-events: none !important;
    }

    /* ════════════════════════════════════════
       Agenda — tarjeta: sin marcos en líneas ni iconos (cascada final tema claro)
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .agenda-card .agenda-card__time,
    html.bardev-panel-theme-light .agenda-card .agenda-card__name-row,
    html.bardev-panel-theme-light .agenda-card .agenda-card__name,
    html.bardev-panel-theme-light .agenda-card .agenda-card__name-text,
    html.bardev-panel-theme-light .agenda-card .agenda-card__name-svc-group,
    html.bardev-panel-theme-light .agenda-card .agenda-card__name-svc-sep,
    html.bardev-panel-theme-light .agenda-card .agenda-card__svc {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__dur {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
      padding: 0 0 0 4px !important;
      border-radius: 0 !important;
      font-weight: 700 !important;
      opacity: 0.9 !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__client-ack {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: rgba(34, 197, 94, 0.14) !important;
      color: #15803d !important;
      padding: 0 4px !important;
      border-radius: 4px !important;
    }
    html.bardev-panel-theme-light .agenda-card--has-client-ack .agenda-card__ack-head .agenda-card__client-ack {
      background: rgba(34, 197, 94, 0.18) !important;
      color: #15803d !important;
      border: 1px solid rgba(34, 197, 94, 0.38) !important;
      padding: 3px 8px !important;
      border-radius: 6px !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__source,
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--webapp,
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--panel,
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--external {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: 0 !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--webapp {
      color: #0284c7 !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--panel {
      color: var(--bv-g-059669, #059669) !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--external {
      color: #b45309 !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__source--chat {
      color: #7c3aed !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__notes-icon {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: 0 !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__notes-icon:focus-visible {
      outline: 2px solid var(--ds-accent) !important;
      outline-offset: 2px !important;
    }
    html.bardev-panel-theme-light .agenda-card .agenda-card__notes-text {
      color: #78350f !important;
      background: #fffbeb !important;
      border-color: #fde68a !important;
    }

    /* ════════════════════════════════════════
       FADE SUAVE EN TRANSICIÓN DE PANELES
       ════════════════════════════════════════ */
    html.bardev-panel-theme-light .content-panel.active {
      animation: bardev-fade-up var(--ds-duration-slow) var(--ds-ease);
    }

    /* Web app → Tipografía: sin recuadro contenedor bajo el grid de cards */
    html.bardev-panel-theme-light #panel-webapp,
    html.bardev-panel-theme-light #panel-webapp.content-panel.active,
    html.bardev-panel-theme-light #panel-webapp .webapp-tab-panel,
    html.bardev-panel-theme-light #webapp-panel-tipografia,
    html.bardev-panel-theme-light #webapp-panel-tipografia.webapp-typo-panel,
    html.bardev-panel-theme-light #webapp-panel-tipografia.webapp-tab-panel--active,
    html.bardev-panel-theme-light .webapp-typo-section-cards {
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }
    html.bardev-panel-theme-light #webapp-panel-tipografia .pers-tab-card,
    html.bardev-panel-theme-light #webapp-panel-tipografia.pers-tab-card,
    html.bardev-panel-theme-light .webapp-typo-section-cards.pers-tab-card {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      backdrop-filter: none !important;
    }

    /* Informes: comparativa y gráficos sin envoltorio (anula FASE 4 si queda algún -card) */
    html.bardev-panel-theme-light #panel-informes .informes-card-compare,
    html.bardev-panel-theme-light #panel-informes .informes-card-compare-label,
    html.bardev-panel-theme-light #panel-informes .informes-card-compare-wrap,
    html.bardev-panel-theme-light #panel-informes .informes-card-compare-cap,
    html.bardev-panel-theme-light #panel-informes .informes-chart-wrap,
    html.bardev-panel-theme-light #panel-informes .informes-chart-wrap canvas,
    html.bardev-panel-theme-light #panel-informes .informes-card-compare-wrap canvas {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      outline: none !important;
      padding: 0 !important;
    }
    html.bardev-panel-theme-light #panel-informes .informes-chart-title,
    html.bardev-panel-theme-light #panel-informes .informes-chart-legend {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

    /* ════════════════════════════════════════════════════════════════
       DETALLE DE CITA — sistema 60/30/10 (tema claro)
       Neutro dominante · sage secundario · esmeralda CTA · ámbar semántico
       ════════════════════════════════════════════════════════════════ */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-panel {
      border-radius: 22px !important;
      border: 1px solid #dce3df !important;
      box-shadow: var(--ds-shadow-xl) !important;
      background: #ffffff !important;
      color: #0f1f17 !important;
    }

    /* ── Cabecera ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero {
      background: var(--bv-g-e8f5ef, #e8f5ef) !important;
      border-bottom: 1px solid var(--bv-g-c5ddd0, #c5ddd0) !important;
      border-radius: 22px 22px 0 0 !important;
      padding: 12px 16px 12px !important;
      color: #0f1f17 !important;
      box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.16), 0 4px 10px -4px rgba(15, 23, 42, 0.08) !important;
      z-index: 6 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero.agenda-detail-hero--completed,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero.agenda-detail-hero--paid {
      background: #f3ead4 !important;
      border-bottom-color: #e4d9c4 !important;
      color: #0f1f17 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero.agenda-detail-hero--cancelled {
      background: #f3ead4 !important;
      border-bottom-color: #e4d9c4 !important;
      color: #0f1f17 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__row--sub {
      margin-top: 8px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-title.agenda-detail-hero__status {
      justify-self: center;
      padding: 6px 18px;
      border-radius: 999px;
      background: var(--bv-g-047857, #047857);
      border: 1px solid var(--bv-g-065f46, #065f46);
      box-shadow: none;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.09em;
      color: #ffffff;
      white-space: nowrap;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero--completed #agenda-detail-title.agenda-detail-hero__status,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero--paid #agenda-detail-title.agenda-detail-hero__status {
      background: var(--bv-g-065f46, #065f46);
      border-color: var(--bv-g-064e3b, #064e3b);
      color: #ffffff;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero--cancelled #agenda-detail-title.agenda-detail-hero__status {
      background: #fee2e2;
      border-color: #fca5a5;
      color: #b91c1c;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-sub.agenda-detail-hero__meta {
      font-size: 0.72rem;
      color: var(--ds-text-tertiary) !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      padding: 0 !important;
      border-radius: 999px !important;
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      color: var(--ds-text-secondary) !important;
      font-size: 1.2rem;
      box-shadow: var(--ds-shadow-xs);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__edit {
      min-height: 42px;
      padding: 0 18px !important;
      border-radius: 999px !important;
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      color: var(--ds-accent) !important;
      font-size: 0.92rem;
      font-weight: 700;
      box-shadow: var(--ds-shadow-xs);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__back:hover,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__edit:hover {
      background: #fcf7ea !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__more,
    html.bardev-panel-theme-light #agenda-detail-actions-toggle.agenda-detail-hero__more {
      min-height: 36px;
      padding: 0 16px !important;
      border-radius: 999px !important;
      background: var(--bv-g-047857, #047857) !important;
      border: 1px solid var(--bv-g-065f46, #065f46) !important;
      color: #ffffff !important;
      font-size: 0.8rem;
      font-weight: 700;
      box-shadow: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-hero__more:hover,
    html.bardev-panel-theme-light #agenda-detail-actions-toggle.agenda-detail-hero__more:hover {
      background: var(--bv-g-065f46, #065f46) !important;
      border-color: var(--bv-g-064e3b, #064e3b) !important;
      color: #ffffff !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-menu {
      border-radius: 16px;
      border: 1px solid var(--ds-border);
      box-shadow: var(--ds-shadow-lg);
      padding: 8px;
      background: #ffffff;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-menu__item {
      border-radius: 10px;
      min-height: 44px;
      font-size: 0.88rem;
    }

    /* ── Cuerpo: tarjetas ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-body--sheet {
      padding: 14px 16px 16px !important;
      background: #f7f8f7 !important;
      border: none !important;
      border-radius: 0 !important;
      color: #0f1f17 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-ico {
      background: #ffffff !important;
      border: 1px solid #dce3df !important;
      color: var(--bv-g-047857, #047857) !important;
      box-shadow: none;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-ico:hover,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-ico[aria-expanded='true'] {
      background: var(--bv-g-ecfdf5, #ecfdf5) !important;
      border-color: var(--bv-g-6ee7b7, #6ee7b7) !important;
      color: var(--bv-g-065f46, #065f46) !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-ico__dot {
      border-color: #ffffff;
      background: #d97706;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-tip {
      background: #ffffff;
      color: var(--ds-text-primary);
      border: 1px solid var(--ds-border);
      box-shadow: var(--ds-shadow-lg);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-tip__hint {
      border-top-color: #e2e8f0;
      color: #64748b;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-notes-tip::after {
      border-top-color: #ffffff;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-client-notes--in-banner {
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: 14px !important;
      padding: 10px 12px !important;
      margin-top: 10px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-timecard {
      gap: 10px;
      background: #f7f8f7 !important;
      border: 1px solid #dce3df !important;
      border-radius: 16px !important;
      padding: 12px !important;
      margin-bottom: 12px !important;
      box-shadow: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-timecard__sep {
      display: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-timecard__lbl {
      font-size: 0.64rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--ds-text-tertiary);
      margin-bottom: 6px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-sched-input {
      min-height: 46px !important;
      padding: 8px 10px !important;
      border-radius: 12px !important;
      border: 1px solid var(--ds-border) !important;
      background: #ffffff !important;
      color: var(--ds-text-primary) !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
      box-shadow: var(--ds-shadow-xs);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-sched-input:focus {
      border-color: var(--ds-accent) !important;
      outline: 3px solid var(--ds-accent-light2);
      outline-offset: 0;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-timecard__chev {
      color: var(--ds-text-tertiary);
      font-size: 1.2rem;
    }
    /* La fecha necesita más ancho que las horas (texto + icono nativo + chevron). */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-timecard__cell--date {
      flex: 1.3;
    }

    /* ── Cliente ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-client-shell {
      border-radius: 16px !important;
      padding: 12px 14px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-clientblock,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-clientrow {
      margin-bottom: 12px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avatar {
      width: 52px;
      height: 52px;
      font-size: 1rem;
      box-shadow: 0 0 0 3px #ffffff;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-clientrow__name-row strong {
      font-size: 1.05rem;
      color: var(--ds-text-primary);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-clientrow__sub {
      font-size: 0.85rem;
      color: #64748b;
      margin-top: 3px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-first-visit {
      padding: 4px 12px !important;
      font-size: 0.68rem !important;
      background: #fef3c7 !important;
      border: 1px solid #fcd34d !important;
      color: #92400e !important;
      box-shadow: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-recurrence-row {
      padding-left: 64px;
      margin-top: 8px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-clientcard__edit,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-client-register {
      border-radius: 14px !important;
      min-height: 46px;
      font-weight: 700;
    }

    /* ── Notas internas ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-client-notes {
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: 16px !important;
      padding: 10px 14px 12px !important;
      margin: 0 0 12px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-client-notes__lbl {
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--ds-text-tertiary);
      margin-bottom: 6px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-client-notes__ta {
      background: #fcf7ea !important;
      border-radius: 12px !important;
      padding: 8px 12px !important;
      font-size: 0.9rem !important;
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light
      #agenda-detail-modal
      .agenda-detail-client-notes--in-banner
      .agenda-detail-client-notes__ta {
      min-height: 3.4rem !important;
      max-height: 8rem !important;
      height: auto !important;
      white-space: pre-wrap !important;
    }

    /* ── Aviso «estoy disponible» (dentro del cajón cliente) ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avail-row {
      display: flex !important;
      justify-content: center !important;
      align-self: center !important;
      margin: 0 !important;
      max-width: 42% !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avail-row[hidden],
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avail-row.hidden {
      display: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avail {
      display: inline-flex !important;
      width: fit-content !important;
      max-width: 100% !important;
      min-height: 40px;
      padding: 8px 12px 8px 14px !important;
      margin: 0 !important;
      border-radius: 999px !important;
      background: var(--bv-g-047857, #047857) !important;
      border: 1px solid var(--bv-g-065f46, #065f46) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avail__txt {
      font-size: 0.66rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #ffffff !important;
      white-space: normal;
      line-height: 1.15;
      max-width: 7.5rem;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-avail__ico {
      opacity: 1;
      color: #ffffff !important;
    }

    /* ── Servicio ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc {
      align-items: stretch;
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      border-radius: 16px !important;
      padding: 12px 14px !important;
      margin-bottom: 12px !important;
      box-shadow: var(--ds-shadow-xs);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc__accent {
      width: 5px !important;
      margin-right: 12px !important;
      border-radius: 999px !important;
      background: #2f9e6f !important;
      box-shadow: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc {
      padding: 10px 12px !important;
      margin-bottom: 10px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc__name {
      font-size: 1rem;
      line-height: 1.2;
      color: var(--ds-text-primary);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc__price {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--bv-g-047857, #047857);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc__meta,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc__extra,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-svc__origin {
      font-size: 0.78rem;
      color: #5a6b60;
      margin-top: 0;
      line-height: 1.25;
    }

    /* ── Agendar cita + productos (misma fila) ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-split {
      gap: 10px !important;
      margin-bottom: 12px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-split__lbl,
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-venta-label,
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-res-wrap .agenda-detail-actions-split__lbl {
      font-size: 0.64rem !important;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: #5b6b62 !important;
      margin: 0 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-calrow,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-prodrow,
    html.bardev-panel-theme-light #agenda-detail-modal #btn-agenda-d-add-prod,
    html.bardev-panel-theme-light #agenda-detail-modal #btn-agenda-d-add-res {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      min-height: 48px !important;
      padding: 12px 14px !important;
      border-radius: 14px !important;
      font-size: 0.86rem !important;
      font-weight: 700 !important;
      background: #ffffff !important;
      border: 1px solid #dce3df !important;
      color: #0f1f17 !important;
      box-shadow: var(--ds-shadow-xs);
      margin: 0 !important;
      text-align: left !important;
      box-sizing: border-box !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-d-res-box {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      min-height: 48px !important;
      padding: 8px 10px 8px 14px !important;
      background: #ffffff !important;
      border: 1px solid #dce3df !important;
      border-radius: 14px !important;
      box-shadow: var(--ds-shadow-xs) !important;
      margin: 0 !important;
      overflow: visible !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-d-res-box #btn-agenda-d-add-res {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: auto !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      min-height: 32px !important;
      border-radius: 0 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-split__col--prod .agenda-detail-prodrow,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-split__col--prod #btn-agenda-d-add-prod,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-split__col--res .agenda-d-res-box,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-actions-split__col--cal .agenda-detail-calrow {
      margin-top: auto !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-calrow:hover,
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-prodrow:hover,
    html.bardev-panel-theme-light #agenda-detail-modal #btn-agenda-d-add-prod:hover,
    html.bardev-panel-theme-light #agenda-detail-modal #btn-agenda-d-add-res:hover {
      background: #f7f8f7 !important;
      border-color: #b8c4bd !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-d-res-box:hover {
      background: #f7f8f7 !important;
      border-color: #b8c4bd !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-d-res-box #btn-agenda-d-add-res:hover {
      background: transparent !important;
      border: 0 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-actions-split:has(#agenda-d-res-wrap:not([hidden]):not(.hidden)) .agenda-detail-calrow,
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-actions-split:has(#agenda-d-res-wrap:not([hidden]):not(.hidden)) .agenda-detail-prodrow {
      padding: 12px 10px !important;
      font-size: 0.78rem !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-d-res-box #btn-agenda-d-add-res {
      padding: 0 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-d-resources {
      margin-left: auto !important;
      justify-content: flex-end !important;
      padding: 2px 4px 2px 0 !important;
    }

    /* ── Importes ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid {
      gap: 10px !important;
      margin-bottom: 12px !important;
      align-items: stretch !important;
      grid-template-columns: 1.15fr 1fr !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__col {
      gap: 4px;
      padding: 12px 14px;
      border-radius: 16px;
      background: #f7f8f7;
      border: 1px solid #dce3df;
      color: #0f1f17;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__col--breakdown {
      padding: 10px;
      background: #f7f8f7;
      border-color: #dce3df;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__col--due {
      background: var(--bv-g-ecfdf5, #ecfdf5);
      border-color: var(--bv-g-6ee7b7, #6ee7b7);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__lbl {
      font-size: 0.64rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--ds-text-tertiary);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__tiles {
      gap: 8px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__tile {
      background: #ffffff;
      border: 1px solid #dce3df;
      box-shadow: var(--ds-shadow-xs, none);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__tile-ico {
      color: var(--bv-g-047857, #047857);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__tile strong {
      font-size: 1.05rem;
      font-weight: 800;
      color: #0f1f17;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__tile-lbl {
      color: #5b6b62;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__due-main {
      margin-top: 2px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__due-amt-row > #agenda-d-pagar {
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--bv-g-065f46, #065f46);
      margin-top: 0;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-paygrid__badge {
      margin-top: 0;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-pts-star__svg {
      color: #f59e0b;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-pts-star__n {
      color: #78350f;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-pts-star--earn .agenda-pts-star__svg {
      color: var(--bv-g-34d399, #34d399);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-pts-star--earn .agenda-pts-star__n {
      color: var(--bv-g-065f46, #065f46);
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-badge-pendiente {
      padding: 5px 12px !important;
      border-radius: 999px !important;
      font-size: 0.7rem !important;
      font-weight: 700 !important;
      /* Mismo tono rojo que Cancelar (footer) */
      background: #f6d5d9 !important;
      border: 1px solid #e8a4ad !important;
      color: #b91c1c !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-badge-cobrado {
      padding: 5px 12px !important;
      border-radius: 999px !important;
      font-size: 0.7rem !important;
      font-weight: 700 !important;
      background: var(--bd-g-200, var(--bv-g-d1fae5, #d1fae5)) !important;
      border: 1px solid var(--bd-g-400, var(--bv-g-6ee7b7, #6ee7b7)) !important;
      color: var(--bd-g-700, var(--bv-g-065f46, #065f46)) !important;
    }

    /* ── Franja de acciones ── */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-panel .agenda-detail-footer {
      gap: 0 !important;
      margin: 0 !important;
      padding: 12px 16px 10px !important;
      background: #ffffff !important;
      border-top: 1px solid var(--ds-border) !important;
      border-radius: 0 0 22px 22px !important;
      box-shadow: 0 -10px 20px -8px rgba(15, 23, 42, 0.18), 0 -4px 10px -4px rgba(15, 23, 42, 0.1) !important;
      z-index: 6 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__actions {
      gap: 10px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__icon {
      width: 56px !important;
      min-width: 56px !important;
      border-radius: 16px !important;
      background: #f6d5d9 !important;
      border: 1px solid #e8a4ad !important;
      color: #b91c1c !important;
      font-size: 1.35rem !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__icon:hover {
      background: #f0c2c8 !important;
      border-color: #dea0a8 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__secondary {
      min-height: 54px !important;
      max-height: 60px !important;
      height: 54px !important;
      padding: 6px 4px !important;
      border-radius: 14px !important;
      background: #f7f8f7 !important;
      border: 1px solid #dce3df !important;
      color: #0f1f17 !important;
      font-size: 0.64rem !important;
      font-weight: 700 !important;
      letter-spacing: 0 !important;
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__secondary:hover {
      background: #eef1ef !important;
      border-color: #b8c4bd !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__secondary-ico {
      color: var(--bv-g-047857, #047857) !important;
      opacity: 1;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__cobrar,
    html.bardev-panel-theme-light #agenda-d-cobrar.agenda-detail-footer__cobrar {
      min-height: 54px !important;
      max-height: 60px !important;
      height: 54px !important;
      padding: 8px 10px !important;
      border-radius: 14px !important;
      background: var(--bv-g-047857, #047857) !important;
      border: 1px solid var(--bv-g-065f46, #065f46) !important;
      color: #ffffff !important;
      font-size: 0.88rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.06em !important;
      box-shadow: none !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    /* Visible solo si no está oculto (no pisar display:none al estar cobrada) */
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-cobrar.agenda-detail-footer__cobrar:not([hidden]):not(.hidden) {
      display: inline-flex !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-cobrar.agenda-detail-footer__cobrar[hidden],
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-cobrar.agenda-detail-footer__cobrar.hidden {
      display: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__cobrar:hover,
    html.bardev-panel-theme-light #agenda-d-cobrar.agenda-detail-footer__cobrar:hover {
      background: var(--bv-g-065f46, #065f46) !important;
      filter: none !important;
      color: #ffffff !important;
    }

    /* ── Acciones postpago en pie fijo (misma altura que Reservar de nuevo) ── */
    /* Botones secundarios con contraste claro (Manual de marca): fondo blanco, borde y texto en
       Contraste; el icono en Resalte. Antes gris claro sobre el fondo de la ventana: no se distinguían. */
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-postpay__btn {
      border-radius: 14px !important;
      background: var(--bd-n-0, #ffffff) !important;
      border: 1.5px solid color-mix(in srgb, var(--ds-brand-green, #26313A) 55%, transparent) !important;
      color: var(--ds-brand-green, #26313A) !important;
      font-size: 0.64rem !important;
      font-weight: 700 !important;
      min-height: 54px !important;
      max-height: 60px !important;
      height: 54px !important;
      aspect-ratio: auto !important;
      padding: 6px 4px !important;
      gap: 3px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer {
      align-items: stretch !important;
      flex-wrap: nowrap !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__actions {
      flex-wrap: nowrap !important;
      align-items: stretch !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__icon {
      height: 54px !important;
      min-height: 54px !important;
      max-height: 60px !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal .agenda-detail-footer__cobrar {
      min-height: 54px !important;
      max-height: 60px !important;
      height: 54px !important;
    }

    /* ── Modo edición ── */
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-edit {
      padding-top: 12px;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-edit label.sub {
      font-size: 0.64rem !important;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--ds-text-tertiary) !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-edit input:not(.agenda-svc-cb),
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-edit select {
      min-height: 46px !important;
      padding: 10px 12px !important;
      border-radius: 12px !important;
      background: #ffffff !important;
      border: 1px solid var(--ds-border) !important;
      color: var(--ds-text-primary) !important;
      font-size: 0.95rem !important;
      box-sizing: border-box;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-edit-footer.agenda-detail-footer {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      padding: 12px 16px 14px !important;
      background: #ffffff !important;
      border-top: 1px solid var(--ds-border) !important;
      border-radius: 0 0 22px 22px !important;
      box-shadow: 0 -10px 20px -8px rgba(15, 23, 42, 0.18), 0 -4px 10px -4px rgba(15, 23, 42, 0.1) !important;
      z-index: 6 !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-detail-edit-footer.hidden {
      display: none !important;
    }
    html.bardev-panel-theme-light #agenda-detail-modal #agenda-d-save.bd-btn {
      width: 100% !important;
      min-height: var(--bd-cta-h, 54px) !important;
      border-radius: 16px !important;
      font-size: 0.95rem !important;
      font-weight: 800 !important;
      letter-spacing: 0.02em;
      margin: 0 !important;
    }

    /* Paleta corporativa inventario */
    html.bardev-panel-theme-light [class*="bardev-pastel-head--"] {
      background: var(--ds-surface-2) !important;
      border-bottom-color: var(--ds-border) !important;
      border-left: 4px solid var(--ds-accent) !important;
      color: var(--ds-text-primary) !important;
    }
    html.bardev-panel-theme-light [class*="bardev-pastel-head--green"],
    html.bardev-panel-theme-light [class*="bardev-pastel-head--teal"],
    html.bardev-panel-theme-light [class*="bardev-pastel-head--lime"] {
      background: var(--ds-brand-mint) !important;
      border-left-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light [class*="bardev-pastel-head--orange"],
    html.bardev-panel-theme-light [class*="bardev-pastel-head--yellow"],
    html.bardev-panel-theme-light [class*="bardev-pastel-head--amber"] {
      background: #f3e6d4 !important;
      border-left-color: var(--ds-brand-brown) !important;
    }
    html.bardev-panel-theme-light .svc-cat-table-header__ico,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .svc-cat-table-header__ico,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .svc-cat-table-header__ico,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .svc-cat-table-header__ico,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .svc-cat-table-header__ico,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-header .svc-cat-table-header__ico {
      color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light .admin-data-table th,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__body .admin-data-table thead th,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__body .admin-data-table thead th,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__body .admin-data-table thead th {
      background: var(--ds-surface-2) !important;
      color: var(--ds-text-primary) !important;
      border-bottom-color: var(--ds-border) !important;
    }
    html.bardev-panel-theme-light #inventario-wrap .admin-data-table tbody tr:nth-child(even) td,
    html.bardev-panel-theme-light #servicios-res-wrap .admin-data-table tbody tr:nth-child(even) td,
    html.bardev-panel-theme-light #svc-ofertas-wrap .admin-data-table tbody tr:nth-child(even) td {
      background: var(--ds-brand-beige) !important;
    }
    html.bardev-panel-theme-light #panel-inventario .inv-toolbar-btn,
    html.bardev-panel-theme-light #panel-inventario .inv-toolbar-btn.btn.secondary,
    html.bardev-panel-theme-light #panel-inventario .inv-toolbar-btn.btn.primary {
      background: var(--ds-accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light #panel-inventario .inv-toolbar-btn:hover:not(:disabled),
    html.bardev-panel-theme-light #panel-inventario .inv-toolbar-btn.btn.secondary:hover:not(:disabled) {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
      color: #fff !important;
    }
    html.bardev-panel-theme-light .admin-data-table td .btn.secondary.btn-icon,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon {
      background: var(--ds-accent) !important;
      border-color: var(--ds-accent) !important;
      color: #fff !important;
    }
    html.bardev-panel-theme-light .admin-data-table td .btn.secondary.btn-icon:hover:not(:disabled),
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon:hover:not(:disabled),
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon:hover:not(:disabled),
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon:hover:not(:disabled),
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon:hover:not(:disabled) {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
    }
    html.bardev-panel-theme-light .admin-data-table td .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg,
    html.bardev-panel-theme-light .admin-data-table td .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg *,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg *,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg *,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg *,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn-icon:not(.btn-icon--danger):not(.btn-icon--ok) svg * {
      stroke: #fff !important;
      color: #fff !important;
    }
    html.bardev-panel-theme-light .admin-data-table td .btn.secondary.btn-icon.btn-icon--danger,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon.btn-icon--danger,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon.btn-icon--danger,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon.btn-icon--danger,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn.secondary.btn-icon.btn-icon--danger {
      background: var(--ds-danger) !important;
      border-color: var(--ds-danger) !important;
    }
    html.bardev-panel-theme-light .admin-data-table td .btn-icon--danger svg,
    html.bardev-panel-theme-light .admin-data-table td .btn-icon--danger svg *,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn-icon--danger svg,
    html.bardev-panel-theme-light #inventario-wrap .inv-prod-cat-card__head .btn-icon--danger svg *,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn-icon--danger svg,
    html.bardev-panel-theme-light #servicios-res-wrap .inv-prod-cat-card__head .btn-icon--danger svg *,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn-icon--danger svg,
    html.bardev-panel-theme-light #svc-ofertas-wrap .inv-prod-cat-card__head .btn-icon--danger svg *,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn-icon--danger svg,
    html.bardev-panel-theme-light #lotes-wrap .inv-prod-cat-card__head .btn-icon--danger svg * {
      stroke: #fff !important;
      color: #fff !important;
    }

    /* Paleta corporativa proveedores */
    html.bardev-panel-theme-light .prov-card {
      background: var(--ds-surface-2) !important;
      border: 1px solid var(--ds-brand-brown) !important;
      box-shadow: 0 1px 8px rgba(var(--bv-b-rgb-8f6845, 143, 104, 69), 0.12) !important;
    }
    html.bardev-panel-theme-light .prov-card--custom {
      background: var(--ds-brand-mint) !important;
      border-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light .prov-card__name {
      color: var(--ds-brand-green) !important;
    }
    html.bardev-panel-theme-light .prov-card__cat {
      color: var(--ds-brand-brown) !important;
    }
    html.bardev-panel-theme-light .prov-card__logo {
      background: var(--ds-brand-mint) !important;
      border: 1px solid var(--ds-border) !important;
    }
    html.bardev-panel-theme-light .prov-card__logo--placeholder {
      color: var(--ds-brand-green) !important;
      background: var(--ds-brand-mint) !important;
    }
    html.bardev-panel-theme-light .prov-card__min-order input {
      background: #fff !important;
      border: 1px solid var(--ds-brand-brown) !important;
      color: var(--ds-brand-green) !important;
    }
    /* Con #panel-proveedores: el botón secundario general del tema claro (.btn.secondary con tres :not(), más específico)
       ponía el fondo blanco y aquí el texto blanco seguía ganando, así que los botones de la tarjeta salían en blanco sobre
       blanco. */
    html.bardev-panel-theme-light #panel-proveedores .prov-card__btn,
    html.bardev-panel-theme-light #panel-proveedores .prov-card__btns .btn.secondary,
    html.bardev-panel-theme-light #panel-proveedores .prov-card__btns .btn {
      background: var(--ds-accent) !important;
      color: #fff !important;
      -webkit-text-fill-color: #fff !important;
      border-color: var(--ds-accent) !important;
    }
    /* El botón de entrar en la ficha del proveedor: el botón general del tema claro fija 36px de alto y su relleno con !important,
       y aquí lleva dos líneas (qué se hace dentro y el catálogo). */
    html.bardev-panel-theme-light #panel-proveedores .prov-card__btns--entrar .btn {
      height: auto !important;
      min-height: 56px !important;
      padding: 10px 12px !important;
      line-height: 1.25 !important;
      justify-content: flex-start !important;
    }
    /* Unidades del catálogo: la regla general de inputs del tema claro (0,6,2) le ponía borde, esquinas y letra de 14px
       dentro del − n +; aquí va plano y un punto más pequeño que el total (la casilla de unidades es la pequeña). */
    html.bardev-panel-theme-light #panel-proveedores .prov-prod-card .prov-prod-card__qty {
      border: none !important;
      border-radius: 0 !important;
      background: var(--bd-n-0, #fff) !important;
      box-shadow: inset 1px 0 0 var(--bd-n-200) !important;
      font-size: 0.85rem !important;
      font-weight: 800 !important;
    }
    /* Con el foco, un anillo por dentro (el − n + recorta lo de fuera): la regla de arriba pisa el anillo general del foco. */
    html.bardev-panel-theme-light #panel-proveedores .prov-prod-card .prov-prod-card__qty:focus-visible {
      box-shadow: inset 0 0 0 2px var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light #panel-proveedores .prov-card__btn:hover:not(:disabled),
    html.bardev-panel-theme-light #panel-proveedores .prov-card__btns .btn.secondary:hover:not(:disabled) {
      background: var(--ds-accent-hover) !important;
      border-color: var(--ds-accent-hover) !important;
      color: #fff !important;
    }
    html.bardev-panel-theme-light .prov-card-tabs-toggle {
      background: var(--ds-brand-mint) !important;
      color: var(--ds-brand-green) !important;
      border: 1px solid var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light #panel-proveedores .prov-card__corner-btns .btn.secondary.btn-icon {
      background: var(--ds-accent) !important;
      border-color: var(--ds-accent) !important;
    }
    html.bardev-panel-theme-light #panel-proveedores .prov-card__corner-btns .btn-icon:not(.btn-icon--danger) svg,
    html.bardev-panel-theme-light #panel-proveedores .prov-card__corner-btns .btn-icon:not(.btn-icon--danger) svg * {
      stroke: #fff !important;
    }
    html.bardev-panel-theme-light #panel-proveedores .prov-card__corner-btns .btn-icon--danger {
      background: var(--ds-danger) !important;
      border-color: var(--ds-danger) !important;
    }
    html.bardev-panel-theme-light #panel-proveedores .prov-card__corner-btns .btn-icon--danger svg,
    html.bardev-panel-theme-light #panel-proveedores .prov-card__corner-btns .btn-icon--danger svg * {
      stroke: #fff !important;
    }
    html.bardev-panel-theme-light #btn-prov-refresh.btn.secondary {
      background: var(--ds-accent) !important;
      color: #fff !important;
      border-color: var(--ds-accent) !important;
    }
  
    /* Selector de barberías: sin columna beis detrás de la tarjeta y cada barbería en el azul oscuro
       corporativo (Contraste), no en el rojo de acción. */
    html.bardev-panel-theme-light #view-tenant-picker.login-wrap {
      background: transparent !important;
    }
    #view-tenant-picker .tp-tenant-btn,
    body.mode-login #view-tenant-picker .tp-tenant-btn {
      background: var(--ds-brand-green, #26313A) !important;
      border-color: var(--ds-brand-green, #26313A) !important;
      color: var(--barveo-on-05, #F4F2ED) !important;
      -webkit-text-fill-color: var(--barveo-on-05, #F4F2ED) !important;
    }
    #view-tenant-picker .tp-tenant-btn:hover:not(:disabled),
    #view-tenant-picker .tp-tenant-btn:focus-visible {
      background: color-mix(in srgb, var(--ds-brand-green, #26313A) 86%, #000) !important;
    }
    #view-tenant-picker .tp-tenant-btn:active:not(:disabled) {
      background: color-mix(in srgb, var(--ds-brand-green, #26313A) 76%, #000) !important;
    }
    #view-tenant-picker .tp-tenant-btn .sub {
      color: color-mix(in srgb, var(--barveo-on-05, #F4F2ED) 78%, transparent) !important;
      -webkit-text-fill-color: color-mix(in srgb, var(--barveo-on-05, #F4F2ED) 78%, transparent) !important;
    }