/* ============================================================
   MIX · mix-fx.css — capa de efectos con presupuesto (02/11/2026)
   Niveles en <html data-fx="pleno|medio|minimo">. Sin atributo = como antes.
   minimo: nada. medio: entradas, hover, relleno de barras, resorte, modales.
   pleno: medio + spotlight, malla lenta, indicador del menú, salida de modales.
   Motion tokens: --mx-dur-1 120ms · --mx-dur-2 200ms · --mx-dur-3 320ms · --mx-dur-4 520ms
   ============================================================ */
:root {
  --mx-ease: cubic-bezier(.22,.8,.24,1);
  --mx-ease-in: cubic-bezier(.4,0,1,1);
  --mx-spring: cubic-bezier(.34,1.45,.5,1);
  --mx-dur-1: 120ms; --mx-dur-2: 200ms; --mx-dur-3: 320ms; --mx-dur-4: 520ms;
}

/* ── MEDIO y PLENO: entrada escalonada (fill backwards: no deja transform puesto) ── */
@keyframes mx-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mx-pop { from { opacity: 0; transform: scale(.965) translateY(6px); } }
@keyframes mx-pop-out { to { opacity: 0; transform: scale(.97) translateY(4px); } }
@keyframes mx-fade-out { to { opacity: 0; } }
@keyframes mx-fill { from { transform: scaleX(0); } }
@keyframes mx-draw { from { stroke-dashoffset: var(--mx-len, 400); } to { stroke-dashoffset: 0; } }
@keyframes mx-ring { from { stroke-dashoffset: var(--mx-circ, 300); } }
@keyframes mx-spring-in { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes mx-mesh { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-1.6%,1.2%,0); } }
@keyframes mx-shimmer { to { transform: translateX(100%); } }
@keyframes mx-blink { 50% { opacity: .35; } }

html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) :is(.kpis,.kpi-grid,.dash,.grid-2,.grid-3,.grid-4,.grid-auto,.cab-grid) > * {
  animation: mx-rise var(--mx-dur-3) var(--mx-ease) backwards;
}
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) :is(.kpis,.kpi-grid,.dash,.grid-2,.grid-3,.grid-4,.grid-auto,.cab-grid) > :nth-child(2) { animation-delay: 40ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) :is(.kpis,.kpi-grid,.dash,.grid-2,.grid-3,.grid-4,.grid-auto,.cab-grid) > :nth-child(3) { animation-delay: 80ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) :is(.kpis,.kpi-grid,.dash,.grid-2,.grid-3,.grid-4,.grid-auto,.cab-grid) > :nth-child(4) { animation-delay: 120ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) :is(.kpis,.kpi-grid,.dash,.grid-2,.grid-3,.grid-4,.grid-auto,.cab-grid) > :nth-child(5) { animation-delay: 160ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) :is(.kpis,.kpi-grid,.dash,.grid-2,.grid-3,.grid-4,.grid-auto,.cab-grid) > :nth-child(n+6) { animation-delay: 200ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) .tbl tbody tr:nth-child(-n+10) { animation: mx-rise var(--mx-dur-3) var(--mx-ease) backwards; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) .tbl tbody tr:nth-child(2) { animation-delay: 25ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) .tbl tbody tr:nth-child(3) { animation-delay: 50ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) .tbl tbody tr:nth-child(4) { animation-delay: 75ms; }
html:not(.mx-done):is([data-fx="medio"],[data-fx="pleno"]) .tbl tbody tr:nth-child(n+5) { animation-delay: 100ms; }

/* hover con elevación en lo clickeable */
@media (hover: hover) {
  html:is([data-fx="medio"],[data-fx="pleno"]) :is(a.card,a.kpi,a.kpi-c,.card[onclick],.kpi-c[onclick],.kpi[onclick],.card.click,[data-spot]) {
    transition: transform var(--mx-dur-2) var(--mx-ease), box-shadow var(--mx-dur-2) var(--mx-ease), border-color var(--mx-dur-2);
  }
  html:is([data-fx="medio"],[data-fx="pleno"]) :is(a.card,a.kpi,a.kpi-c,.card[onclick],.kpi-c[onclick],.kpi[onclick],.card.click,[data-spot]):hover {
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 14px 30px -14px rgb(0 0 0 / .28);
  }
}

/* barras y anillos que se llenan */
html:is([data-fx="medio"],[data-fx="pleno"]) :is(.bar-fill,.progress-fill,.barra > i,.barra > span,.bar > i,.mx-bar > i,progress) { transform-origin: left center; animation: mx-fill var(--mx-dur-4) var(--mx-ease) backwards; }

/* modales y paneles: entrada con escala + opacidad */
html:is([data-fx="medio"],[data-fx="pleno"]) :is(.modal-box,.modal-card,.ar-modal-box,.mix-cmdk-box,dialog[open]) { animation: mx-pop var(--mx-dur-2) var(--mx-ease) backwards; }
html:is([data-fx="medio"],[data-fx="pleno"]) :is(.modal-bg,.modal-overlay,.ar-modal,.overlay,.mix-cmdk,dialog[open]::backdrop) { animation: mx-fade-in var(--mx-dur-2) linear backwards; }
@keyframes mx-fade-in { from { opacity: 0; } }
html:is([data-fx="medio"],[data-fx="pleno"]) .mixfx-toast, html:is([data-fx="medio"],[data-fx="pleno"]) .mix-toast { animation: mx-spring-in var(--mx-dur-3) var(--mx-spring) backwards; }
/* fantasma de salida (pleno): clon inerte que se desvanece */
.mx-ghost { position: fixed; z-index: 99998; pointer-events: none; margin: 0; }
.mx-ghost.bg { inset: 0; animation: mx-fade-out var(--mx-dur-2) linear forwards; }
.mx-ghost.box { animation: mx-pop-out var(--mx-dur-2) var(--mx-ease-in) forwards; }

/* esqueleto con brillo que cruza */
html:is([data-fx="medio"],[data-fx="pleno"]) :is(.skeleton,.mixfx-skel) { animation: none; }
html:is([data-fx="medio"],[data-fx="pleno"]) :is(.skeleton,.mixfx-skel)::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent); animation: mx-shimmer 1.3s var(--mx-ease) infinite; }

/* ── PLENO: spotlight, malla lenta, indicador del menú ── */
html[data-fx="pleno"] [data-spot] { position: relative; }
html[data-fx="pleno"] [data-spot]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--mx-dur-3);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
html[data-fx="pleno"] [data-spot].mx-hot::after { opacity: 1; }
html[data-fx="pleno"]:is([data-theme="aurora"],[data-theme="cristal"],[data-theme="mixpro"]) body::before { will-change: transform; animation: mx-mesh 46s ease-in-out infinite alternate; }
html[data-fx="pleno"] .sidebar-menu { position: relative; }
.mx-ind { position: absolute; left: 8px; right: 8px; top: 0; height: 34px; border-radius: var(--radius-sm); pointer-events: none; opacity: 0; z-index: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent); transition: transform var(--mx-dur-3) var(--mx-spring), height var(--mx-dur-2), opacity var(--mx-dur-2); will-change: transform; }
.mx-ind.on { opacity: 1; }
html[data-fx="pleno"] .sidebar-menu a { position: relative; z-index: 1; }

/* pulso de "en vivo": anillo que crece y se desvanece (transform + opacity: no repinta) */
.mx-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-live-c, var(--success)); flex: none; }
.mx-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mx-live-c, var(--success)); opacity: 0; }
html:is([data-fx="medio"],[data-fx="pleno"]) .mx-live::after { animation: mx-live 2.2s ease-out infinite; }
@keyframes mx-live { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* ── transición entre páginas: fundido + desplazamiento corto (solo PLENO) ── */
@media (prefers-reduced-motion: no-preference) {
  html[data-fx="pleno"]::view-transition-old(root) { animation: mx-vt-out 110ms var(--mx-ease-in) both; }
  html[data-fx="pleno"]::view-transition-new(root) { animation: mx-vt-in 240ms var(--mx-ease) both; }
}
@keyframes mx-vt-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(8px); } }
html[data-fx="minimo"]::view-transition-old(root), html[data-fx="minimo"]::view-transition-new(root),
html[data-fx="medio"]::view-transition-old(root), html[data-fx="medio"]::view-transition-new(root) { animation: none !important; }

/* ── pulido global ── */
::selection { background: rgba(227,6,19,.85); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ── MÍNIMO y reduced-motion: todo quieto ── */
html[data-fx="minimo"] *, html[data-fx="minimo"] *::before, html[data-fx="minimo"] *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .mx-ind { transition: none; }
}

/* ── Modo presentación: oculta cifras sensibles ── */
html[data-pres="1"] [data-sens], html[data-pres="1"] .mx-sens { filter: blur(9px); user-select: none; }
html[data-pres="1"] [data-sens]:hover, html[data-pres="1"] .mx-sens:hover { filter: none; }

/* ════════ Piezas del panel Estilo (valen para cualquier tema) ════════ */
/* acento amarillo tienda */
html[data-accent="amarillo"] { --accent:#8a5d00; --accent-hover:#6f4a00; --accent-subtle:#fff3c9; --accent-text:#fff; }
html[data-accent="amarillo"]:is([data-theme="noche"],[data-theme="dark"],[data-theme="graphite"],[data-theme="forest"],[data-theme="indigo"],[data-theme="aurora"],[data-theme="mixpro"]) { --accent:#ffc400; --accent-hover:#ffd54a; --accent-subtle:#2e2500; --accent-text:#161200; }
/* tarjetas */
html[data-cards="plana"] :is(.card,.dash-card,.kpi,.kpi-c,.kpi-card,.stat,.panel) { box-shadow:none !important; border-color:transparent !important; background-image:none !important; background-color:var(--surface-2); }
html[data-cards="borde"] :is(.card,.dash-card,.kpi,.kpi-c,.kpi-card,.stat,.panel) { box-shadow:none !important; border-color:var(--border-strong) !important; }
html[data-cards="elevada"] :is(.card,.dash-card,.kpi,.kpi-c,.kpi-card,.stat,.panel) { border-color:transparent !important; box-shadow:0 1px 2px rgb(0 0 0 / .08), 0 10px 26px -12px rgb(0 0 0 / .30) !important; }
html[data-cards="bento"] { --radius:22px; --radius-lg:28px; --pad-card:22px; --gap:16px; }
html[data-cards="bento"] :is(.card,.dash-card,.kpi,.kpi-c,.kpi-card,.stat,.panel) { border-radius:22px; border-color:transparent !important; box-shadow:0 1px 2px rgb(0 0 0 / .05), 0 12px 24px -16px rgb(0 0 0 / .22) !important; }
html[data-cards="cristal"] :is(.card,.dash-card,.kpi,.kpi-c,.kpi-card,.stat,.panel) { background-color:color-mix(in srgb, var(--bg-card) 72%, transparent); border-color:color-mix(in srgb, var(--text) 10%, transparent) !important; box-shadow:0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset, 0 12px 30px -16px rgb(0 0 0 / .25) !important; }
/* menú flotante */
@media (min-width: 901px) {
  html[data-menu="flotante"]:not([data-sidebar="oculto"]) .sidebar { top:10px; left:10px; bottom:10px; width:calc(var(--sidebar-w) - 14px); border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 44px -18px rgb(0 0 0 / .45); }
  html[data-menu="flotante"][data-sidebar="mini"] .sidebar { width:calc(var(--sidebar-w-mini) - 8px); }
}
/* tablas */
html[data-tbl="cebra"] tbody tr:nth-child(even) td { background:var(--surface-2); }
html[data-tbl="cebra"] tbody tr:hover td { background:var(--surface-hover); }
html[data-tbl="compacta"] { --pad-cell:3px 10px; --row-h:28px; }
html[data-tbl="compacta"] .tbl tbody td, html[data-tbl="compacta"] .tbl thead th { padding-top:3px; padding-bottom:3px; line-height:1.25; }
/* botones */
html[data-btn="solido"] :is(.btn-sec,.btn-secondary,.btn.sec,.btn-exp,.btn-cancel) { background:var(--surface-3, var(--surface-hover)); border-color:transparent; }
html[data-btn="pildora"] :is(button,.btn,.btn-sec) { border-radius:999px; }
html[data-btn="pildora"] :is(input,select,textarea) { border-radius:14px; }
html[data-btn="contorno"] :is(.btn-primary,.btn.primary,.btn-save,.ar-btn-save) { background:transparent !important; color:var(--accent) !important; border:1.5px solid var(--accent) !important; box-shadow:none !important; }
html[data-btn="contorno"] :is(.btn-primary,.btn.primary,.btn-save,.ar-btn-save):hover { background:var(--accent-subtle) !important; }
/* estilos con identidad propia */
html[data-estilo="alto-contraste"] { --text:#000; --text-muted:#1a1a1a; --text-3:#333; --border:#555; --border-strong:#000; --accent:#a00018; --accent-hover:#7c0012; --success:#00562f; --danger:#8c0014; --warning:#5c3d00; }
html[data-estilo="alto-contraste"] :is(.card,.dash-card,.kpi,.kpi-c,.panel,input,select,textarea,button,.btn) { border-width:2px; }
html[data-estilo="alto-contraste"] :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #000; outline-offset:2px; box-shadow:0 0 0 6px #ffc400; }
html[data-estilo="retro-terminal"] body, html[data-estilo="retro-terminal"] :is(button,input,select,textarea) { font-family:var(--mono); }
html[data-estilo="retro-terminal"] { --radius:2px; --radius-sm:2px; --radius-lg:3px; --radius-xs:1px; }
html[data-estilo="retro-terminal"] :is(h1,h2,h3,.topbar-title) { text-transform:uppercase; letter-spacing:.06em; }
html[data-estilo="sala-tv"] { --t-base:17px; --t-dato:16px; --t-micro:13px; --t-med:19px; --kpi-cifra:44px; }
html[data-estilo="sala-tv"] .topbar .mix-kbtn, html[data-estilo="sala-tv"] .sidebar-buscar { display:none; }

/* ════════ Panel Estilo: galería y miniaturas en vivo ════════ */
.mx-estilo .mix-prefs-panel { width:min(560px,100%); }
.mx-gal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mx-est { display:flex; flex-direction:column; gap:7px; padding:7px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); text-align:left; cursor:pointer; min-height:0; align-items:stretch; justify-content:flex-start; transition:border-color .15s, transform .15s var(--mx-ease); }
.mx-est:hover { border-color:var(--text-3); }
.mx-est.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.mx-est.sel { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); background:var(--accent-subtle); }
.mx-n b { display:block; font-size:var(--t-dato); font-weight:600; }
.mx-n small { display:block; font-size:var(--t-micro); color:var(--text-muted); line-height:1.3; font-weight:400; }
.mx-usar { position:sticky; bottom:-8px; display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px; background:var(--bg-card); border:1px solid var(--accent); border-radius:var(--radius); z-index:3; }
.mx-usar .n { flex:1; font-weight:600; }
.mx-aviso { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 12px; margin:8px 0; background:var(--warning-bg); color:var(--text); border-radius:var(--radius); font-size:var(--t-dato); }
.mx-pieza { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; font-size:var(--t-dato); }
.mx-pieza select { width:55%; }
.mx-guardar { display:flex; gap:8px; margin-top:10px; } .mx-guardar input { flex:1; }
.mx-cod textarea { width:100%; font-family:var(--mono); font-size:11px; resize:vertical; margin-bottom:8px; padding:8px; min-height:48px; }
.mx-cod > div { display:flex; gap:8px; }
.mix-prefs-foot { display:flex; gap:8px; align-items:center; justify-content:space-between; }
/* miniatura */
.mx-mini { display:grid; grid-template-columns:22% 1fr; aspect-ratio:16/10; background:var(--bg); border-radius:calc(var(--mr,6px) + 2px); overflow:hidden; border:1px solid var(--border); font-size:0; }
.mxm-side { background:var(--bg-sidebar); padding:7% 8%; display:flex; flex-direction:column; gap:7%; }
.mxm-side b { display:block; height:9%; width:70%; background:var(--accent); border-radius:3px; }
.mxm-side i { display:block; height:7%; border-radius:2px; background:color-mix(in srgb, var(--text) 18%, transparent); }
.mxm-side i.a { background:var(--accent); opacity:.8; }
.mxm-m-mini { grid-template-columns:9% 1fr; } .mxm-m-oculto { grid-template-columns:0 1fr; } .mxm-m-oculto .mxm-side { display:none; }
.mxm-main { padding:5% 5% 5% 5%; display:flex; flex-direction:column; gap:var(--mg,7px); min-width:0; position:relative; }
.mxm-top { display:flex; gap:6px; align-items:center; } .mxm-top i { width:34%; height:5px; border-radius:3px; background:color-mix(in srgb, var(--text) 22%, transparent); } .mxm-top u { margin-left:auto; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.mxm-kpis { display:grid; grid-template-columns:1fr 1fr; gap:var(--mg,7px); }
.mxm-k, .mxm-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--mr,6px); padding:6% 8%; display:flex; flex-direction:column; gap:4px; }
.mxm-k s { display:block; height:3px; width:40%; background:color-mix(in srgb, var(--text) 25%, transparent); border-radius:2px; text-decoration:none; }
.mxm-k em { display:block; height:9px; width:75%; border-radius:2px; background:var(--text); font-style:normal; } .mxm-k em.y { background:var(--accent); }
.mxm-card { padding:5% 6%; flex:1; min-height:0; } .mxm-card svg { height:22%; width:100%; flex:none; }
.mxm-row { display:block; height:3px; border-radius:2px; background:color-mix(in srgb, var(--text) 16%, transparent); margin-top:3px; } .mxm-row.z { background:color-mix(in srgb, var(--text) 30%, transparent); }
.mxm-btn { position:absolute; right:5%; bottom:6%; width:20%; height:9%; border-radius:var(--mr,6px); background:var(--accent); } .mxm-btn.pil { border-radius:99px; } .mxm-btn.ctn { background:transparent; border:1.5px solid var(--accent); }
.mxm-c-plana .mxm-k, .mxm-c-plana .mxm-card { border-color:transparent; background:color-mix(in srgb, var(--text) 6%, var(--bg-card)); }
.mxm-c-elevada .mxm-k, .mxm-c-elevada .mxm-card, .mxm-c-bento .mxm-k, .mxm-c-bento .mxm-card, .mxm-c-cristal .mxm-k, .mxm-c-cristal .mxm-card { border-color:transparent; box-shadow:0 4px 10px -4px rgb(0 0 0 / .35); }
.mxm-c-bento .mxm-k, .mxm-c-bento .mxm-card { border-radius:calc(var(--mr,6px) * 1.5); }
.mxm-f-min .mxm-k, .mxm-f-min .mxm-card { box-shadow:none !important; }
.mxm-retro .mxm-main { font-family:monospace; } .mxm-hc .mxm-k, .mxm-hc .mxm-card { border-width:2px; border-color:var(--text); }
/* Sala TV */
.mx-tv { position:fixed; inset:0; z-index:100000; background:#000; }
.mx-tv iframe { position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; transition:opacity .6s; background:#0a0a0d; }
.mx-tv iframe.on { opacity:1; }
.mx-tv-bar { position:absolute; left:0; right:0; bottom:0; height:30px; display:flex; align-items:center; gap:12px; padding:0 14px; background:rgb(0 0 0 / .72); color:#fff; font-size:13px; }
.mx-tv-bar i { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--accent,#ff2e44); transform-origin:left; animation:mxtv 30s linear; }
.mx-tv-bar button { margin-left:auto; min-height:22px; }
@keyframes mxtv { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.mix-cmdk-k { margin-left:auto; display:flex; gap:4px; } .mix-cmdk-it { align-items:center; }

/* estados vacíos: el carrito MIX (reemplaza el ícono genérico del pulido) */
html[data-polish2] { --p2-ico-vacio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h6l4.5 20h21l4-15H12'/%3E%3Ccircle cx='18' cy='38' r='3'/%3E%3Ccircle cx='33' cy='38' r='3'/%3E%3Cpath d='M20 19.5h.01M28 19.5h.01M20.5 23.5c2 2 5 2 7 0'/%3E%3C/svg%3E"); }
html[data-polish2] :where(.empty-state, .sin-datos):not(:has(svg, img, .icon)):not(.dash-card *):not(td *)::before { width:46px; height:46px; }

/* pausa de animaciones infinitas durante el scroll */
html.mx-scr body::before, html.mx-scr .mx-live::after, html.mx-scr .cab-hero::after { animation-play-state: paused !important; }