/* FORZAR DARK/LIGHT EN EL SIDEBAR AUNQUE LEGACY USE !important */

#sidebar,
#sidebar * {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* LIGHT */
html:not(.dark) #sidebar {
    background: #fff !important;
  border-color: #e2e8f0 !important;
}
html:not(.dark) #sidebar a,
html:not(.dark) #sidebar span,
html:not(.dark) #sidebar p,
html:not(.dark) #sidebar i {
    color: #1f1f1f !important;
}
html:not(.dark) #sidebar .active .sidebar-text, html:not(.dark) #sidebar .active i{
    color: #ffffff !important;
}
html:not(.dark) #sidebar a:hover {
    background: #f1f5f9 !important;
}

/* DARK */
html.dark #sidebar, html.dark .bg-white {
    background: #1f1f1f !important;
  border-color: rgba(255,255,255,.12) !important;
}
.bar-mb,.drawer-mb{
    background: rgba(255, 255, 255, 0.8) !important;
}
html.dark .bar-mb, html.dark .drawer-mb{
    background: rgba(0, 0, 0, 0.8) !important;
}
html.dark .bg-slate-50, html.dark .bg-slate-100{
    background: #424242 !important;
}
html.dark .text-slate-900, html.dark .text-neutral-900{
    color: #fff !important;
}
html.dark .text-slate-700,
html.dark .text-slate-500 {
  color: #F7F7F7 !important;
}
html.dark .bg-neutral-950{
    background: #ffffff !important;
}
html.dark .border-r-slate-50{
    border-right-color: #424242;
}
html.dark .border-slate-200{
    border-color: #424242 !important;
}
html.dark #sidebar a,
html.dark #sidebar span,
html.dark #sidebar p,
html.dark #sidebar i {
    color: rgba(255,255,255,.92) !important;
}
html.dark #sidebar a:hover {
    background: rgba(255,255,255,.08) !important;
}

/* Tarjetas internas (logo / user card) */
html.dark #sidebar .ring-1,
html.dark #sidebar .ring-2 {
    border-color: rgba(255,255,255,.12) !important;
}

/* El item activo (siempre con el accent) */
#sidebar a.bg-\[rgb\(var\(--accent\)\)\] {
    color: #fff !important;
}


.cont-pre-loader{
    position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(#f8fafc,.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s ease, visibility .25s ease;
}
html.dark .cont-pre-loader{
    background: rgba(66,66,66,.92);
  transition: opacity .25s ease, visibility .25s ease;
}

.cont-pre-loader.is-hidden{
    opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-dots{
    display: flex;
  align-items: center;
  gap: 10px;
}

.loader-dots span{
    width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgb(var(--accent)); /* usa tu acento del sistema */
  opacity: .35;
  transform: translateY(0) scale(.9);
  animation: dotWave 900ms ease-in-out infinite;
}

.loader-dots span:nth-child(2){ animation-delay: 120ms; }
.loader-dots span:nth-child(3){ animation-delay: 240ms; }
.loader-dots span:nth-child(4){ animation-delay: 360ms; }

@keyframes dotWave{
    0%, 100% { transform: translateY(0) scale(.9); opacity: .35; }
  50%      { transform: translateY(-10px) scale(1.05); opacity: 1; }
}

/* ==============================
ESCRITORIO: FIX CLARO/OSCURO
   ============================== */
   
   
   /* =========================
1) KPI CARDS (las de arriba)
   Selector por estructura:
   section.mb-2 > .fade-up > (cada card)
   ========================= */
   
   
   /* =========================
3) GOOGLE CHARTS TOOLTIP
   ========================= */
   html.dark .google-visualization-tooltip{
    background: #0b1220 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}
html:not(.dark) .google-visualization-tooltip{
    background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
}

/* =========================================================
DATATABLES + BOOTSTRAP: modo claro/oscuro por html.dark
   (NO cambia estructura; solo colores)
   ========================================================= */
   
   /* --- Base (para que DataTables no herede raro) --- */
.js-datatable,
table.js-datatable.dataTable {
    border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* -------------------------
MODO CLARO (html:not(.dark))
   ------------------------- */
   
   html:not(.dark) table.js-datatable.dataTable,
html:not(.dark) table.js-datatable.dataTable tbody td,
html:not(.dark) table.js-datatable.dataTable thead th {
    color: #0f172a !important; /* slate-900 */
}

html:not(.dark) table.js-datatable.dataTable {
    background: #ffffff !important;
}

html:not(.dark) table.js-datatable.dataTable thead th {
    background: #f1f5f9 !important; /* slate-100 */
  border-bottom: 1px solid rgba(2,6,23,.10) !important;
}

html:not(.dark) table.js-datatable.dataTable tbody tr {
    background: #ffffff !important;
}

html:not(.dark) table.js-datatable.dataTable tbody tr:hover {
    background: #f8fafc !important;
}

html:not(.dark) table.js-datatable.dataTable tbody td {
    border-top: 1px solid rgba(2,6,23,.08) !important;
}

/* controles DataTables */
html:not(.dark) .dataTables_wrapper,
html:not(.dark) .dataTables_wrapper label,
html:not(.dark) .dataTables_wrapper .dataTables_info {
    color: #0f172a !important;
}
.dataTables_wrapper label{
    display: flex;
  gap: 5px;
}

html:not(.dark) .dataTables_wrapper .dataTables_filter input,
html:not(.dark) .dataTables_wrapper .dataTables_length select {
    background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(2,6,23,.18) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

/* paginación */
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #0f172a !important;
  border-radius: 10px !important;
}
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(14,165,233,.15) !important; /* accent suave */
  border: 1px solid rgba(14,165,233,.35) !important;
  color: #0f172a !important;
}
html:not(.dark) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(2,6,23,.06) !important;
  border: 1px solid rgba(2,6,23,.12) !important;
}

/* -------------------------
MODO OSCURO (html.dark)
   ------------------------- */
   
   html.dark table.js-datatable.dataTable,
html.dark table.js-datatable.dataTable tbody td,
html.dark table.js-datatable.dataTable thead th {
    color: #e5e7eb !important; /* slate-200 */
}

html.dark table.js-datatable.dataTable {
    background: rgba(255,255,255,.03) !important;
}

html.dark table.js-datatable.dataTable thead th {
    background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

html.dark table.js-datatable.dataTable tbody tr {
    background: transparent !important;
}

html.dark table.js-datatable.dataTable tbody tr:hover {
    background: rgba(255,255,255,.05) !important;
}

html.dark table.js-datatable.dataTable tbody td {
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* controles DataTables */
html.dark .dataTables_wrapper,
html.dark .dataTables_wrapper label,
html.dark .dataTables_wrapper .dataTables_info {
    color: #e5e7eb !important;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
    background: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

html.dark .dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgba(229,231,235,.65) !important;
}

/* paginación */
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #e5e7eb !important;
  border-radius: 10px !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(14,165,233,.25) !important;
  border: 1px solid rgba(14,165,233,.40) !important;
  color: #ffffff !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* =========================================================
Bootstrap table helper (por si DataTables se mezcla con BS)
   ========================================================= */
   html.dark .table,
html.dark .table td,
html.dark .table th {
    color: #e5e7eb !important;
}

/* animación (idéntico look, solo entrada suave) */
#view-escritorio .fade-up{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s ease}
  #view-escritorio .fade-up.fade-up--in{opacity:1; transform:translateY(0)}
  
  /*
  ✅ FIX IMPORTANTE:
    Cuando cargas style-invert.min.css por JS, a veces quedan reglas legacy que "lavan" el texto en modo claro
    o dejan texto blanco donde no corresponde.
    Este override es mínimo y SOLO afecta al escritorio.
    */
  
  
  html.dark #view-escritorio .kpi-title,
  html.dark #view-escritorio .kpi-value,
  html.dark #view-escritorio .chart-title{
        color:#ffffff !important;
  }
  html.dark #view-escritorio .kpi-card{
        background: #64748b !important;
  }
  html.dark #view-escritorio .kpi-sub,
  html.dark #view-escritorio .chart-sub{
        color:rgba(255,255,255,.70) !important;
  }
  
  /* ===== Sidebar layout animation ===== */
  :root{
    --sidebarW: 280px; /* fallback */
}

/* anima el contenedor del aside y el main */


#appMain{
    width: calc(100vw - var(--sidebarW));
  transition: width 280ms ease;
  will-change: width;
}
@media (max-width: 768px) {
    #appMain{
        width: 100% !important;
    padding-bottom: 80px !important;
  }
  .cont-pre-loader{
        width: 100% !important;
  }
  #appSidebarWrap{
        width: 0 !important;
    padding: 0 !important;
  }
}



/* anima lo interno del aside también (por si cambia padding/elementos) */
#sidebar{
    transition: padding 280ms ease, background-color 280ms ease;
}

/* ===== Collapsed behavior (labels + logos) ===== */
#sidebar .sidebar-text{
    transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
}

/* Estado colapsado */
#sidebar[data-collapsed="1"] .sidebar-text{
    opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

/* Logo swap */
#sidebar .sidebar-logo-small{ display: none; }
#sidebar .sidebar-logo-large{ display: block; }

#sidebar[data-collapsed="1"] .sidebar-logo-small{ display: block; }
#sidebar[data-collapsed="1"] .sidebar-logo-large{ display: none; }

/* En colapsado: centra íconos y reduce espacios */
#sidebar[data-collapsed="1"] a,
#sidebar[data-collapsed="1"] button{
    justify-content: center;
}

#sidebar[data-collapsed="1"] a{
    padding-left: 12px !important;
  padding-right: 12px !important;
  margin-right: 0 !important;
}

#sidebar[data-collapsed="1"] ul.space-y-1 > li a i,
#sidebar[data-collapsed="1"] ul.space-y-1 > li a span.fa-solid{
    font-size: 18px;
}

/* ===== Nav height responsive to collapsed ===== */
#sidebar nav{
    height: calc(100vh - 180px);
  transition: height 280ms ease;
}

/* colapsado: como el bloque de usuario y bottom cambian visualmente, recorta un poco */
#sidebar[data-collapsed="1"] nav{
    height: calc(100vh - 210px);
}

.dataTables_wrapper .row{
    margin-bottom: 5px !important;
}

/* ===========================
Select2 "Tailwind look"
   =========================== */
   
   .select2-container { width: 100% !important; }

.select2-container .select2-selection--single {
    height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgb(226 232 240) !important; /* slate-200 */
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
}

.select2-container .select2-selection__rendered {
    padding: 0 !important;
  line-height: 1.1 !important;
  color: rgb(15 23 42) !important; /* slate-900 */
  font-weight: 600 !important;
}

.select2-container .select2-selection__arrow {
    height: 44px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color: rgb(100 116 139) !important; /* slate-500 */
  font-weight: 500 !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background: rgb(var(--accent)) !important;
  color: #fff !important;
}

.select2-dropdown {
    border-radius: 12px !important;
  border: 1px solid rgb(226 232 240) !important;
  overflow: hidden !important;
}

.select2-search--dropdown .select2-search__field{
    border: 1px solid rgb(226 232 240) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  outline: none !important;
}

.select2-container--open .select2-selection--single{
    box-shadow: 0 0 0 3px rgba(0, 158, 226, .22) !important; /* similar focus ring */
  border-color: rgba(0, 158, 226, .35) !important;
}





/* =========================
FIX Select2 dentro de modales (Bootstrap)
   - Evita dropdown "inactivo" por z-index/backdrop
   ========================= */
   
   /* Bootstrap: backdrop 1050, modal 1055 (aprox). Pon Select2 arriba */

.select2-dropdown { z-index: 10000 !important; }

/* Por si algún contenedor mete pointer-events */
.select2-container,
.select2-dropdown,
.select2-results,
.select2-results__options,
.select2-search,
.select2-search__field {
    pointer-events: auto !important;
}


#appmodal-panel .select2-dropdown,
#submodal-panel .select2-dropdown {
    z-index: 999999 !important;
}

#appmodal-panel .select2-container--open,
#submodal-panel .select2-container--open {
    z-index: 999999 !important;
}


/* A veces el modal tiene transform y crea stacking context raro.
Esto ayuda a que el dropdown no quede "detrás" */
   .modal,
.modal-dialog,
.modal-content {
    transform: none;
}

/* ===== Tailwind modal animations: slide desde abajo (sheet) ===== */
.tw-modal {
    display: none;
}
.tw-modal.is-open {
    display: flex;
}

/* overlay */
.tw-modal .tw-overlay {
    opacity: 0;
  transition: opacity 260ms cubic-bezier(.22, 1, .36, 1);
}
.tw-modal.is-open .tw-overlay {
    opacity: 1;
}

/* panel: entra desde abajo */
.tw-modal .tw-panel {
    opacity: 0;
  transform: translateY(48px); /* viene desde abajo */
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 260ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity;
}
.tw-modal.is-open .tw-panel {
    opacity: 1;
  transform: translateY(0);
}

/* salida: vuelve hacia abajo */
.tw-modal.is-closing .tw-overlay {
    opacity: 0;
}
.tw-modal.is-closing .tw-panel {
    opacity: 0;
  transform: translateY(48px);
}
/* DataTables Bootstrap pagination reset */
.dataTables_wrapper .dataTables_paginate{
    padding:0 !important;
  margin-top:1rem !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination{
    display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:.45rem !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination .page-item{
    margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination .page-link{
    min-width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#334155 !important;
  
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
  outline:none !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination .page-link:hover{
    background:#f8fafc !important;
  border-color:#cbd5e1 !important;
  color:#0f172a !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination .page-item.active .page-link{
    background:rgb(14,165,233) !important;
  border-color:rgb(14,165,233) !important;
  color:#fff !important;
}

.dataTables_wrapper .dataTables_paginate ul.pagination .page-item.disabled .page-link{
    opacity:.45 !important;
  cursor:not-allowed !important;
  background:#f8fafc !important;
  color:#94a3b8 !important;
  border-color:#e5e7eb !important;
}

/* DataTables Bootstrap pagination - Dark mode */
html.dark .dataTables_wrapper .dataTables_paginate ul.pagination{
    background:transparent !important;
}

html.dark .dataTables_wrapper .dataTables_paginate ul.pagination .page-link{
    background:#0f172a !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#e5e7eb !important;
}

html.dark .dataTables_wrapper .dataTables_paginate ul.pagination .page-link:hover{
    background:#1e293b !important;
  border-color:rgba(255,255,255,.20) !important;
  color:#ffffff !important;
}

html.dark .dataTables_wrapper .dataTables_paginate ul.pagination .page-item.active .page-link{
    background:rgb(14,165,233) !important;
  border-color:rgb(14,165,233) !important;
  color:#ffffff !important;
}

html.dark .dataTables_wrapper .dataTables_paginate ul.pagination .page-item.disabled .page-link{
    opacity:.45 !important;
  background:#111827 !important;
  border-color:rgba(255,255,255,.10) !important;
  color:#94a3b8 !important;
}

html.dark .dataTables_wrapper .dataTables_paginate ul.pagination .page-item.disabled .page-link:hover{
    background:#111827 !important;
  color:#94a3b8 !important;
}

#sidebar[data-collapsed="1"] {
    width: var(--sidebar-closed); }
  @media (min-width: 768px) {
        #sidebar[data-collapsed="1"] .sidebar-text {
            opacity: 0;
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease; }
      #sidebar[data-collapsed="1"] .sidebar-logo-large {
            display: none !important; }
      #sidebar[data-collapsed="1"] .sidebar-logo-small {
            display: block !important; } }
      #sidebar[data-collapsed="1"] a {
        justify-content: center; }
    
    #sidebar[data-collapsed="0"] {
    width: var(--sidebar-open); }
  @media (min-width: 768px) {
        #sidebar[data-collapsed="0"] .sidebar-text {
            opacity: 1;
      width: auto;
      height: auto;
      overflow: visible;
      pointer-events: auto; }
      #sidebar[data-collapsed="0"] .sidebar-logo-large {
            display: block !important; }
      #sidebar[data-collapsed="0"] .sidebar-logo-small {
            display: none !important; } }
      
      #sidebarToggle {
    left: calc(var(--sidebar-open) - 20px); }
  
  html.dark #sidebarToggle {
    background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1); }
  
  #sidebar a {
    text-decoration: none; }
  
  #sidebar a:hover {
    background: #f1f5f9; }
  
  #app-global-toast-container {
      position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    
    transform:
    translateX(-50%) !important;
        
        z-index:
    2147483647 !important;
        
        width:
    min(92vw, 680px);
        
        pointer-events:
    none !important;
        
        isolation:
    isolate;
      }


#app-global-toast-container
.app-global-toast {
  
  position:
    relative;
        
        z-index:
    2147483647;
        
        pointer-events:
    auto;
        
        opacity:
    0;
        
        transform:
    translateY(-12px)
        scale(.98);
        
        transition:
    opacity .25s ease,
        transform .25s ease;
      }


#app-global-toast-container
.app-global-toast.app-toast-visible {
  
  opacity:
    1;
        
        transform:
    translateY(0)
        scale(1);
      }


#app-global-toast-container
.app-global-toast.app-toast-leave {
  
  opacity:
    0;
        
        transform:
    translateY(-8px)
        scale(.98);
      }


.byevents-builder{height:calc(100vh - 150px);min-height:620px;background:#f8fafc;border-radius:22px;overflow:hidden;border:1px solid #e2e8f0}
.byevents-builder__toolbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;background:#fff;border-bottom:1px solid #e2e8f0}
.byevents-builder__workspace{height:calc(100% - 64px);display:grid;grid-template-columns:250px minmax(0,1fr) 300px}
.byevents-builder__palette,.byevents-builder__inspector{overflow:auto;background:#fff;padding:16px}
.byevents-builder__palette{border-right:1px solid #e2e8f0}.byevents-builder__inspector{border-left:1px solid #e2e8f0}
.byevents-builder__stage{min-width:0;overflow:hidden;background:#eef3f8;display:flex;flex-direction:column}
.builder-stage-topline{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:11px;font-weight:800;color:#475569}
.builder-canvas-wrap{flex:1;overflow:auto;padding:24px}.builder-canvas{min-height:100%;margin:0 auto;background:#fff;box-shadow:0 20px 60px rgba(15,23,42,.10);transition:max-width .2s ease;width:100%;max-width:1200px}
.builder-canvas[data-device="tablet"]{max-width:768px}.builder-canvas[data-device="mobile"]{max-width:390px}
.builder-panel-title{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.builder-widget-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.builder-widget{display:flex;min-height:70px;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155;font-size:10px;font-weight:800;transition:.2s}.builder-widget:hover{transform:translateY(-1px);background:#fff;border-color:#7dd3fc;color:#075985;box-shadow:0 8px 24px rgba(8,47,73,.07)}
.builder-tool,.builder-device{height:36px;width:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#64748b}.builder-tool{border:1px solid #e2e8f0;background:#fff}.builder-device.is-active{background:#082f49;color:#fff}
.builder-node{position:relative;outline:1px dashed transparent;transition:outline-color .15s}.builder-node:hover{outline-color:#7dd3fc}.builder-node.is-selected{outline:2px solid #0ea5e9;outline-offset:-2px}.builder-node-label{position:absolute;left:6px;top:6px;z-index:4;display:none;border-radius:7px;background:#082f49;color:#fff;padding:4px 7px;font-size:8px;font-weight:900}.builder-node.is-selected>.builder-node-label{display:block}
.builder-inspector-field{display:block;margin-bottom:12px}.builder-inspector-field>span{display:block;margin-bottom:6px;font-size:10px;font-weight:800;color:#475569}.builder-inspector-field input,.builder-inspector-field textarea,.builder-inspector-field select{width:100%;border-radius:12px;border:1px solid #e2e8f0;background:#fff;padding:9px 10px;font-size:11px;outline:none}.builder-inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.builder-danger{width:100%;border-radius:12px;background:#fff1f2;color:#be123c;padding:10px;font-size:10px;font-weight:900}
@media(max-width:1100px){.byevents-builder__workspace{grid-template-columns:220px minmax(0,1fr)}.byevents-builder__inspector{position:absolute;right:16px;top:82px;bottom:16px;width:290px;z-index:30;box-shadow:0 20px 60px rgba(15,23,42,.18);border:1px solid #e2e8f0;border-radius:18px}}
@media(max-width:760px){.byevents-builder{height:calc(100vh - 120px)}.byevents-builder__workspace{grid-template-columns:1fr}.byevents-builder__palette{display:none}.byevents-builder__inspector{display:none}.builder-canvas-wrap{padding:10px}.byevents-builder__toolbar{padding:0 10px}}

/* =========================================================
   BYCODE · CONTROLES NATIVOS ANDROID / CAPACITOR
   =========================================================
   Regla global segura:
   - NO estiliza option/optgroup.
   - NO usa -webkit-text-fill-color.
   - NO altera la estructura interna del picker nativo.
   ========================================================= */

html:not(.dark) {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Select: solo el control visible dentro de la WebView */
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.dark select {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

/* Fecha/hora: solo el campo visible dentro de la WebView */
html:not(.dark) input[type="date"],
html:not(.dark) input[type="datetime-local"],
html:not(.dark) input[type="time"],
html:not(.dark) input[type="month"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark input[type="month"] {
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

/* Mantener el icono nativo sin sustituir ni reposicionar */
html:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator,
html:not(.dark) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html:not(.dark) input[type="time"]::-webkit-calendar-picker-indicator,
html:not(.dark) input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: .72;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: .9;
  filter: invert(1);
}