/* ============================================================================
   Vixels App: capa común para que TODAS las herramientas se vean y se sientan como una app nativa.
   Se carga en cada herramienta (después de sus propios estilos). Solo corrige y unifica; no rompe lo propio.
   ========================================================================== */
:root{--vx-ink:#0b1020;--vx-muted:#5b6476;--vx-line:#e3e7ef;--vx-bg:#f5f7fb;--vx-card:#fff;--vx-pri:#1f74b6;--vx-pri2:#19d3b5;--vx-r:16px;--vx-safe-b:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
/* Solo html recorta lo que se sale de costado: si body también lo hace, en algunos celulares el desplazamiento se traba. */
html{overflow-x:hidden;max-width:100%}
body{max-width:100%;overscroll-behavior-y:auto}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;touch-action:manipulation}
*{-webkit-overflow-scrolling:touch}
img,video,canvas,svg{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--vx-pri);outline-offset:2px}

/* Desplazamientos internos con inercia y sin "rebote" que arrastre toda la pantalla */
[class*="overflow-auto"],[class*="overflow-y-auto"],[class*="overflow-x-auto"],.table-responsive,.vx-scroll{overscroll-behavior:contain;scroll-behavior:smooth}
@media (hover:none){
  ::-webkit-scrollbar{width:0;height:0}
  [class*="overflow-x-auto"]{scroll-snap-type:x proximity}
}

/* Toques: respuesta inmediata, sin zoom al tocar campos en iPhone (16px mínimo) */
button,a,[role="button"],input[type="submit"],input[type="button"],label,summary,select{touch-action:manipulation}
button:active,a[class*="btn"]:active,[role="button"]:active,.btn:active{transform:scale(.98)}
@media (max-width:767px){
  input,select,textarea{font-size:16px!important}
  input[type="date"],input[type="time"],input[type="datetime-local"]{min-width:0;max-width:100%}
}

@media (max-width:767px){
  /* Tipografía y aire proporcionados en pantallas chicas */
  body{font-size:15px;line-height:1.5}
  /* Las herramientas con diseño propio (html.vx-propio) ya resuelven su tipografía y su espaciado */
  html:not(.vx-propio) h1{font-size:clamp(22px,6.4vw,28px)!important;line-height:1.15!important}
  html:not(.vx-propio) h2{font-size:clamp(19px,5.4vw,23px)!important;line-height:1.2!important}
  html:not(.vx-propio) h3{font-size:17px!important}
  .text-4xl,.text-5xl,.text-6xl{font-size:28px!important;line-height:1.15!important}
  .text-3xl{font-size:24px!important;line-height:1.2!important}

  /* Contenedores: márgenes de app, nada se sale del ancho */
  .container,[class*="max-w-"]{max-width:100%!important}
  html:not(.vx-propio) :is(main,.main,.main-content,.content){padding-left:14px!important;padding-right:14px!important;margin-left:0!important}
  .p-8,.p-10,.p-12{padding:18px!important}
  .px-8,.px-10,.px-12{padding-left:16px!important;padding-right:16px!important}
  .py-10,.py-12,.py-16{padding-top:20px!important;padding-bottom:20px!important}
  .gap-8,.gap-10{gap:14px!important}

  /* Grillas que en celular quedaban apretadas: una columna (las de 2 se respetan si son chicas) */
  .grid-cols-3,.grid-cols-4,.grid-cols-5,.grid-cols-6{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [class*="lg:grid-cols-"]:not([class*="sm:grid-cols-2"]):not(.grid-cols-2){grid-template-columns:minmax(0,1fr)}
  .flex-row:not(.vx-keep-row){flex-wrap:wrap}

  /* Tarjetas con proporción de app */
  .rounded-3xl{border-radius:20px!important}
  .shadow-xl,.shadow-2xl{box-shadow:0 10px 30px -18px rgba(11,16,32,.35)!important}

  /* Botones a la medida del dedo, sin gigantismo */
  .btn,a[class*="btn"],[type="submit"]{min-height:42px}
  .py-4.px-8,.px-8.py-4{padding:12px 18px!important}

  /* Tablas: se deslizan dentro de su caja y no rompen la pantalla */
  html:not(.vx-propio) table{display:block;width:100%!important;overflow-x:auto;white-space:nowrap;border-collapse:collapse}
  html:not(.vx-propio) :is(table th,table td){padding:10px 12px!important;font-size:14px}
  /* Formularios: cada campo a lo ancho */
  .form-row,.grid.grid-cols-2:has(> label),.grid.grid-cols-2:has(> div > input){grid-template-columns:minmax(0,1fr)!important}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{width:100%;max-width:100%;min-height:44px;border-radius:12px}

  /* Modales como hoja inferior (bottom sheet) */
  .modal-content,.modal-dialog,[role="dialog"] > div{max-width:100%!important;margin:0!important;border-radius:20px 20px 0 0!important}
  .swal2-popup{width:calc(100% - 24px)!important;border-radius:20px!important}

  /* Respetar la barra inferior del iPhone */
  body{padding-bottom:var(--vx-safe-b)}
}

/* Dentro del panel de Vixels (marco): la herramienta usa el menú del panel */
html.vx-en-marco body{padding-top:0!important}
html.vx-en-marco:not(.vx-propio) body{background:var(--vx-bg)}
html.vx-en-marco .vx-solo-fuera-de-marco{display:none!important}

/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- Marco de herramientas del panel (pestañas vivas) ---------- */
#vxMarcos{position:relative;width:100%;background:transparent;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#vxMarcos[hidden]{display:none!important}
#vxMarcos iframe.vx-marco{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;opacity:0;visibility:hidden;transition:opacity .18s ease}
#vxMarcos iframe.vx-marco.on.ready{opacity:1;visibility:visible}
.vxm-skel{position:absolute;inset:0;z-index:2;padding:18px;display:none;flex-direction:column;gap:12px;background:#f5f7fb}
.vxm-skel.on{display:flex}
.vxm-skel i{display:block;height:84px;border-radius:16px;background:linear-gradient(100deg,#e9edf4 30%,#f6f8fb 50%,#e9edf4 70%);background-size:300% 100%;animation:vxmShimmer 1.1s linear infinite}
.vxm-skel i.w60{width:60%;height:22px}
.vxm-skel i.h{height:150px}
@keyframes vxmShimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (max-width:1023px){
  body.vc-dashboard.vx-marco-activo{overflow:hidden;overscroll-behavior:none}
  *:has(> #vxMarcos:not([hidden])){padding-left:0!important;padding-right:0!important;padding-bottom:0!important}
}

@media (display-mode: standalone){ .vc-mobile-topbar{padding-top:max(10px,env(safe-area-inset-top))!important} }

/* Las herramientas ocupan todo el espacio al lado del menú (sin caja alrededor) */
/* Solo se quita el relleno del contenedor; el margen que deja lugar al menú lateral se respeta (si no, la vista queda detrás del menú) */
*:has(> #vxMarcos:not([hidden])){padding-right:0!important;padding-bottom:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;max-width:none!important}
@media (max-width:1023px){*:has(> #vxMarcos:not([hidden])){padding-left:0!important}}
.vxm-skel{background:transparent!important}
/* Cuentas de una sola herramienta: nunca se ve el Inicio de PresuPro mientras abre */
body.vx-solo #fragmentContainer{visibility:hidden!important}
body.vx-solo.vx-marco-activo #fragmentContainer{display:none!important}
/* Panel con el tema de la herramienta abierta */
body.vx-tema-herramienta .vc-mobile-topbar,body.vx-tema-herramienta .vc-topbar{border-bottom:2px solid var(--vx-accent)}
body.vx-tema-herramienta .vc-sidebar{background-image:linear-gradient(180deg,color-mix(in srgb,var(--vx-accent) 12%,#fff),#fff 40%)!important}
body.vx-tema-herramienta .vc-sidebar__link.is-active,body.vx-tema-herramienta .vc-tree__link.is-active{color:var(--vx-accent)!important}
/* Modo oscuro de la herramienta también en el panel */
body.vx-hub-oscuro{background:#0c110f!important}
body.vx-hub-oscuro :is(.vc-sidebar,.vc-mobile-topbar,.vc-topbar,.vc-header){background:#101714!important;color:#e7eee9!important;border-color:#24302a!important;background-image:none!important}
body.vx-hub-oscuro .vc-sidebar :is(a,span,b,small,button,i,div){color:#cfd9d3}
body.vx-hub-oscuro .vc-tree__link.is-active,body.vx-hub-oscuro .vc-tree__group .vc-tree__link:hover{background:#1a241f!important;color:#fff!important}
body.vx-hub-oscuro #vxMarcos,body.vx-hub-oscuro .vc-main,body.vx-hub-oscuro main{background:#0c110f!important}

/* Modo oscuro del panel: barra superior del celular, título, menú y datos de la cuenta (antes quedaban en negro sobre negro) */
body.vx-hub-oscuro .vc-mobile-topbar__title{color:#e7eee9!important}
body.vx-hub-oscuro .vc-mobile-topbar__toggle{background:#1a241f!important;color:#e7eee9!important;border:1px solid #2e3c35!important;box-shadow:none!important}
body.vx-hub-oscuro .vc-mobile-topbar__toggle i{color:#e7eee9!important}
body.vx-hub-oscuro .vc-sidebar__brand-text :is(strong,small,span){color:#9aa8a1!important;-webkit-text-fill-color:currentColor!important;background:none!important}
body.vx-hub-oscuro .vc-sidebar__brand-text b{color:#e7eee9!important}
body.vx-hub-oscuro :is(.vc-tree__toggle-icon,.vc-sidebar__close){background:#1a241f!important;color:#e7eee9!important;border-color:#2e3c35!important}
body.vx-hub-oscuro :is(.vc-tree__toggle-icon,.vc-sidebar__close) i{color:#e7eee9!important}
body.vx-hub-oscuro .vxm-skel i{background:linear-gradient(100deg,#18211c 30%,#212c26 50%,#18211c 70%);background-size:300% 100%}

/* Apariencia rápida al pie del menú lateral */
.vx-ap-rapido{position:sticky;bottom:0;display:flex;align-items:center;gap:6px;margin:14px 10px 10px;padding:8px 8px 8px 12px;border-radius:16px;background:rgba(241,245,249,.92);border:1px solid #e2e8f0;backdrop-filter:blur(8px);z-index:2}
.vx-ap-rapido span{flex:1;font-size:12px;font-weight:700;color:#64748b}
.vx-ap-op{width:34px;height:34px;border-radius:11px;border:0;background:transparent;color:#64748b;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.vx-ap-op:hover{background:#fff;color:#1f74b6}
.vx-ap-op.on{background:#fff;color:#1f74b6;box-shadow:0 2px 8px -3px rgba(15,23,42,.25)}
.vx-ap-op:active{transform:scale(.92)}
body.vx-hub-oscuro .vx-ap-rapido{background:rgba(17,26,46,.92)!important;border-color:#26344f!important}
body.vx-hub-oscuro .vx-ap-rapido span{color:#8a97b0!important}
body.vx-hub-oscuro .vx-ap-op{color:#8a97b0!important}
body.vx-hub-oscuro .vx-ap-op.on,body.vx-hub-oscuro .vx-ap-op:hover{background:#1d2a47!important;color:#8ab8ff!important}
/* Panel en modo oscuro: también las páginas propias (inicio, mi empresa, mi plan, marketplace) */
html.vx-osc body.vx-hub-oscuro .fragment-container, html.vx-osc body.vx-hub-oscuro .vc-content{background:#0b1120!important}

/* Cabecera del menú en oscuro (también cuando está abierta Mi empresa) */
body.vx-hub-oscuro .vc-sidebar__brand,body.vx-hub-oscuro .vc-sidebar__brand.is-active,body.vx-hub-oscuro .vc-sidebar__brand:hover{background:#16213a!important;border-color:#26344f!important;box-shadow:none!important}
body.vx-hub-oscuro .vc-sidebar__brand-text{color:#e6ecf7!important}

/* Opción activa del menú en oscuro */
body.vx-hub-oscuro .vc-sidebar__link.is-active,body.vx-hub-oscuro .vc-sidebar__link:hover{background:#1d2a47!important;color:#fff!important;box-shadow:none!important}
body.vx-hub-oscuro .vc-sidebar__link.is-active *{color:#fff!important}


/* ---------- CAPA NATIVA: que el sistema se sienta app, no página web ---------- */
/* Celulares y tablets: mantener apretado no selecciona texto ni abre "Buscar en Google"; sin barra de desplazamiento ancha */
@media (hover:none) and (pointer:coarse){
  html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,[contenteditable],[contenteditable] *,.vx-sel,.vx-sel *,pre,code{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  img,a,svg{-webkit-user-drag:none}
  html,body,*{scrollbar-width:none!important}
  *::-webkit-scrollbar,::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}
}
/* Computadora: los botones, menús y etiquetas no se seleccionan al hacer doble clic; el contenido sí (para copiar datos) */
@media (hover:hover) and (pointer:fine){
  button,[role="button"],nav,aside,label,summary,.btn,a[class*="btn"],[class*="chip"],[class*="badge"],[class*="tab"],.vc-sidebar,.vc-topbar,.vc-mobile-topbar,thead,th{-webkit-user-select:none;user-select:none}
  html{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.38) transparent}
  *{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.32) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(100,116,139,.3);border-radius:99px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background-color:rgba(100,116,139,.5)}
}
/* Sin "rebote" que arrastre toda la pantalla ni recarga accidental al tirar para abajo dentro del panel */
html.vx-en-marco,html.vx-en-marco body{overscroll-behavior-y:none}
body.vc-dashboard{overscroll-behavior-y:none}
/* Mientras hay un aviso centrado, lo de atrás no se desplaza */
html.vxd-on,html.vxd-on body,html.swal2-shown:not(.swal2-toast-shown),body.swal2-shown:not(.swal2-toast-shown){overflow:hidden!important}
body.swal2-shown:not(.swal2-toast-shown) #vxMarcos,html.vxd-on #vxMarcos{overflow:hidden!important}

body.vx-hub-oscuro .vc-tree__toggle{color:#cfd9d3!important}
body.vx-hub-oscuro .vc-tree__toggle:hover,body.vx-hub-oscuro .vc-tree__group.is-open>.vc-tree__toggle,body.vx-hub-oscuro .vc-tree__toggle.active,body.vx-hub-oscuro .vc-tree__toggle.is-active{background:linear-gradient(90deg,color-mix(in srgb,var(--tool,#1f74b6) 22%,#16213a),#16213a)!important;color:#fff!important}
body.vx-hub-oscuro .vc-tree__group.is-open>.vc-tree__toggle *{color:#fff!important}