/* Selector de estilo (cabecera y Config) — visible en todos los estilos */
.work-style-header{appearance:auto;cursor:pointer;padding:8px 10px;max-width:220px}
.cfg-estilo{display:flex;flex-direction:column;gap:8px;max-width:420px}
.cfg-estilo .work-style-select{width:100%}
.cfg-estilo small{color:var(--muted)}

/* Estilo de trabajo "Glass Minimal Dark Grid".
   Opcional: se activa con el botón "Estilo de trabajo" (html[data-estilo="glass"]).
   Se carga después de tema-neon.css y tema-blanco.css para tener prioridad. */
html[data-estilo="glass"]{
  --glass-bg-base:#08080a;
  --glass-surface:rgba(255,255,255,.06);
  --glass-surface-hover:rgba(255,255,255,.10);
  --glass-surface-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.14);
  --glass-border-strong:rgba(255,255,255,.24);
  --glass-inset:rgba(255,255,255,.18);
  --glass-text:#f2f2f4;
  --glass-muted:rgba(255,255,255,.65);
  --glass-subtle:rgba(255,255,255,.45);
  --glass-accent:#5b8def;
  --glass-accent-bright:#8fb4f5;
  --glass-accent-soft:rgba(91,141,239,.28);
  --glass-accent-faint:rgba(91,141,239,.14);
  --glass-success:#22c55e;
  --glass-warning:#f59e0b;
  --glass-danger:#e6645b;
  --glass-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --glass-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --bg-deep:var(--glass-bg-base);--bg:var(--glass-bg-base);--card:#121216;
  --border-soft:var(--glass-border);--border:var(--glass-border);
  --neon-cyan:var(--glass-accent-bright);--neon-blue:var(--glass-accent-bright);--neon-purple:var(--glass-accent);
  --neon-green:var(--glass-success);--neon-emerald:var(--glass-success);
  --neon-orange:var(--glass-warning);--neon-red:var(--glass-danger);
  --text-primary:var(--glass-text);--text:var(--glass-text);--text-secondary:var(--glass-muted);
  --text-muted:var(--glass-subtle);--muted:var(--glass-muted);
  --primary:var(--glass-accent-bright);--primary-dark:var(--glass-accent);--primary-light:var(--glass-accent-faint);
  --accent:var(--glass-success);--danger:var(--glass-danger);--warning:var(--glass-warning);
  --shadow:0 2px 8px rgba(0,0,0,.28);--shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --f-title:var(--glass-font);--f-body:var(--glass-font);--f-mono:var(--glass-mono);
  background:var(--glass-bg-base);color-scheme:dark;
}
html[data-estilo="glass"] body,
html[data-estilo="glass"] body.inicio-activo{background:var(--glass-bg-base);color:var(--glass-text);font-family:var(--glass-font);font-size:15px;-webkit-font-smoothing:antialiased;scrollbar-color:var(--glass-border-strong) transparent}
html[data-estilo="glass"] ::selection{background:var(--glass-accent-soft);color:var(--glass-text)}
html[data-estilo="glass"] ::-webkit-scrollbar-track{background:transparent}
html[data-estilo="glass"] ::-webkit-scrollbar-thumb{background:var(--glass-border-strong)}
html[data-estilo="glass"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}

/* Fondo: halos suaves y cuadrícula fina */
html[data-estilo="glass"] .neon-bg{
  background-color:var(--glass-bg-base);
  background-image:
    radial-gradient(circle at 0 0,rgba(91,141,239,.10),transparent 420px),
    radial-gradient(circle at 100% 100%,rgba(91,141,239,.10),transparent 420px),
    radial-gradient(ellipse at 50% 0,#1a1a22,transparent 60%),
    radial-gradient(ellipse at 50% 100%,#101014,transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,auto,auto,auto,48px 48px,48px 48px;
}

/* Tipografía */
html[data-estilo="glass"] h1,
html[data-estilo="glass"] h2,
html[data-estilo="glass"] h3,
html[data-estilo="glass"] h4{font-family:var(--glass-font);letter-spacing:-.02em;font-weight:600;text-shadow:none}
html[data-estilo="glass"] label{color:var(--glass-muted)}

/* Cabecera y navegación */
html[data-estilo="glass"] header,
html[data-estilo="glass"] body.inicio-activo header{background:rgba(8,8,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border);box-shadow:none}
html[data-estilo="glass"] header h1{font-family:var(--glass-font);font-size:16px;letter-spacing:-.01em;text-shadow:none;color:var(--glass-text)}
html[data-estilo="glass"] header .brand .header-logo,
html[data-estilo="glass"] .ventas-logo{background:var(--glass-surface);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-inset)}
html[data-estilo="glass"] header .brand .header-logo img,
html[data-estilo="glass"] .ventas-logo img{filter:brightness(0) invert(1)}
html[data-estilo="glass"] header .brand .header-logo .material-icons,
html[data-estilo="glass"] .ventas-logo .material-icons{color:var(--glass-text)}
html[data-estilo="glass"] header .actions .btn,
html[data-estilo="glass"] .btn-ghost{background:transparent;border:1px solid var(--glass-border-strong);color:var(--glass-text);font-family:var(--glass-font);font-weight:500;letter-spacing:-.005em;border-radius:9px;box-shadow:none}
html[data-estilo="glass"] header .actions .btn:hover,
html[data-estilo="glass"] .btn-ghost:hover{background:var(--glass-surface);border-color:var(--glass-border-strong);color:var(--glass-text);box-shadow:none}
html[data-estilo="glass"] header .actions .btn[onclick*="salir" i]:hover,
html[data-estilo="glass"] header .actions .btn-salir:hover{background:rgba(230,100,91,.14);border-color:var(--glass-danger);color:#fff;box-shadow:none}
html[data-estilo="glass"] .btn-ghost[aria-pressed="true"]{background:var(--glass-surface-strong);border-color:var(--glass-border-strong)}
html[data-estilo="glass"] .auth-account{border:1px solid var(--glass-border);background:var(--glass-surface);color:var(--glass-muted);font-family:var(--glass-mono);border-radius:999px}
html[data-estilo="glass"] .nav-tabs{background:rgba(8,8,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border)}
html[data-estilo="glass"] .nav-tab{font-family:var(--glass-font);font-weight:500;letter-spacing:0;color:var(--glass-muted);text-shadow:none}
html[data-estilo="glass"] .nav-tab:hover{color:var(--glass-text);background:rgba(255,255,255,.06)}
html[data-estilo="glass"] .nav-tab.active{color:var(--glass-text);border-bottom-color:var(--glass-text);background:rgba(255,255,255,.09);text-shadow:none}
html[data-estilo="glass"] .nav-tab .count,
html[data-estilo="glass"] .tab .count{background:var(--glass-surface-strong);color:var(--glass-text);font-family:var(--glass-mono)}

/* Botones */
html[data-estilo="glass"] .btn{font-family:var(--glass-font);font-weight:500;letter-spacing:-.005em;border-radius:9px;text-shadow:none;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
html[data-estilo="glass"] .btn:active:not(:disabled){transform:translateY(1px)}
html[data-estilo="glass"] .btn:disabled{opacity:.45;cursor:not-allowed}
html[data-estilo="glass"] .btn-primary{background:rgba(255,255,255,.88);color:#0a0a0c;border-color:transparent;box-shadow:none}
html[data-estilo="glass"] .btn-primary:hover{background:#fff;box-shadow:none;transform:none}
html[data-estilo="glass"] .btn-success{background:var(--glass-success);color:#04150a;box-shadow:none}
html[data-estilo="glass"] .btn-success:hover{background:#2fd56b;box-shadow:none}
html[data-estilo="glass"] .btn-success:disabled{background:var(--glass-surface);color:var(--glass-subtle)}
html[data-estilo="glass"] .btn-danger{background:var(--glass-danger);color:#fff;box-shadow:none}
html[data-estilo="glass"] .btn-danger:hover{background:#d9534a;box-shadow:none}
html[data-estilo="glass"] .btn-warning{background:var(--glass-warning);color:#1a1000;box-shadow:none}
html[data-estilo="glass"] .btn-warning:hover{box-shadow:none}
html[data-estilo="glass"] .btn-outline,
html[data-estilo="glass"] .btn-factura,
html[data-estilo="glass"] .btn-blank,
html[data-estilo="glass"] .btn-export{background:transparent;color:var(--glass-text);border-color:var(--glass-border-strong);box-shadow:none}
html[data-estilo="glass"] .btn-outline:hover,
html[data-estilo="glass"] .btn-factura:hover,
html[data-estilo="glass"] .btn-blank:hover,
html[data-estilo="glass"] .btn-export:hover{background:var(--glass-surface);box-shadow:none}

/* Campos */
html[data-estilo="glass"] input,
html[data-estilo="glass"] select,
html[data-estilo="glass"] textarea{font-family:var(--glass-font);font-size:14.5px}
html[data-estilo="glass"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html[data-estilo="glass"] select,
html[data-estilo="glass"] textarea{background:rgba(255,255,255,.04);color:var(--glass-text);border:1px solid var(--glass-border);border-radius:9px}
html[data-estilo="glass"] input:hover,
html[data-estilo="glass"] select:hover,
html[data-estilo="glass"] textarea:hover{border-color:var(--glass-border-strong)}
html[data-estilo="glass"] input:focus,
html[data-estilo="glass"] select:focus,
html[data-estilo="glass"] textarea:focus{border-color:var(--glass-accent)!important;background:rgba(255,255,255,.06);box-shadow:0 0 0 3px var(--glass-accent-faint)}
html[data-estilo="glass"] select option{background:#141418;color:var(--glass-text)}
html[data-estilo="glass"] input[type=checkbox],
html[data-estilo="glass"] input[type=radio]{accent-color:var(--glass-accent)}
html[data-estilo="glass"] :focus-visible{outline:2px solid var(--glass-accent-bright);outline-offset:2px}

/* Superficies glass (tarjetas, paneles, KPIs, módulos) */
html[data-estilo="glass"] .card,
html[data-estilo="glass"] .inv-config,
html[data-estilo="glass"] .inv-kpi,
html[data-estilo="glass"] .inv-alerta-panel,
html[data-estilo="glass"] .inv-panel,
html[data-estilo="glass"] .inv-toolbar,
html[data-estilo="glass"] .fx-hero,
html[data-estilo="glass"] .fx-resumen,
html[data-estilo="glass"] .fx-kpi,
html[data-estilo="glass"] .inicio-modulo,
html[data-estilo="glass"] .cat-card,
html[data-estilo="glass"] .catalogo-tabla-wrap,
html[data-estilo="glass"] .auth-card{
  background-color:var(--glass-surface);
  background-image:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 100%);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.28),inset 0 1px 0 var(--glass-inset);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--glass-text);
}
html[data-estilo="glass"] .card:hover,
html[data-estilo="glass"] .inicio-modulo:hover,
html[data-estilo="glass"] .cat-card:hover{background-color:var(--glass-surface-hover);border-color:var(--glass-border-strong);box-shadow:0 2px 8px rgba(0,0,0,.28),inset 0 1px 0 var(--glass-inset)}
html[data-estilo="glass"] .inicio-modulo::before,
html[data-estilo="glass"] .inicio-modulo::after,
html[data-estilo="glass"] .fx-hero::before,
html[data-estilo="glass"] .fx-kpi::after,
html[data-estilo="glass"] .inv-toolbar::before{display:none}
html[data-estilo="glass"] .inicio-modulo:hover{transform:translateY(-2px)}
html[data-estilo="glass"] .inicio-modulo-icono{background:var(--glass-surface-strong);border:1px solid var(--glass-border);color:var(--glass-text);box-shadow:none}
html[data-estilo="glass"] .inicio-modulo-icono *,
html[data-estilo="glass"] .inicio-modulo-titulo,
html[data-estilo="glass"] .fx-hero h1,
html[data-estilo="glass"] .fx-num,
html[data-estilo="glass"] #invTitle{text-shadow:none}
html[data-estilo="glass"] .fx-eyebrow,
html[data-estilo="glass"] .inv-eyebrow,
html[data-estilo="glass"] .cat-card-cat{font-family:var(--glass-mono);color:var(--glass-accent-bright)}
html[data-estilo="glass"] .cat-card.sel{border-color:var(--glass-success);box-shadow:0 0 0 1px var(--glass-success),inset 0 1px 0 var(--glass-inset)}
html[data-estilo="glass"] .cat-card-foto{background:rgba(0,0,0,.35)}

/* Acceso */
html[data-estilo="glass"] .auth-screen{background:transparent}
html[data-estilo="glass"] .auth-card h1{font-size:22px;letter-spacing:-.02em;color:var(--glass-text)}
html[data-estilo="glass"] .auth-brand{color:var(--glass-text);font-family:var(--glass-font);letter-spacing:-.01em;text-shadow:none}
html[data-estilo="glass"] .auth-brand *{filter:none;text-shadow:none}
html[data-estilo="glass"] .auth-brand svg{color:var(--glass-accent-bright);stroke:var(--glass-accent-bright)}

/* Tablas */
html[data-estilo="glass"] table{color:var(--glass-text)}
html[data-estilo="glass"] th,
html[data-estilo="glass"] table.catalogo thead,
html[data-estilo="glass"] .inv-table th{font-family:var(--glass-font);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--glass-muted);background:rgba(255,255,255,.03);border-bottom:1px solid var(--glass-border-strong)}
html[data-estilo="glass"] td,
html[data-estilo="glass"] .inv-table td{border-bottom-color:var(--glass-border)}
html[data-estilo="glass"] tbody tr:hover td,
html[data-estilo="glass"] .inv-table tr:hover td{background:rgba(255,255,255,.03)}
html[data-estilo="glass"] .np-tabla-scroll table.np-productos th{background:#141418;color:var(--glass-muted)}
html[data-estilo="glass"] .np-tabla-scroll table.np-productos th:last-child,
html[data-estilo="glass"] .np-tabla-scroll .np-acciones-cell{background:#121216}

/* Modales y overlays */
html[data-estilo="glass"] .modal-overlay,
html[data-estilo="glass"] .viewer-overlay,
html[data-estilo="glass"] .factura-overlay{background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-estilo="glass"] .modal{background-color:rgba(20,20,24,.92);background-image:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 100%);border:1px solid var(--glass-border);border-radius:18px;box-shadow:0 12px 32px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-inset);color:var(--glass-text)}
html[data-estilo="glass"] .modal-header,
html[data-estilo="glass"] .modal-header.green{background:transparent;color:var(--glass-text);border-bottom:1px solid var(--glass-border)}
html[data-estilo="glass"] .modal-header h2{font-family:var(--glass-font);font-size:16px;letter-spacing:-.01em}
html[data-estilo="glass"] .modal-header .close{background:var(--glass-surface);color:var(--glass-muted);border-radius:9px}
html[data-estilo="glass"] .modal-header .close:hover{background:rgba(230,100,91,.18);color:#fff}
html[data-estilo="glass"] .modal-footer{background:rgba(255,255,255,.02);border-top-color:var(--glass-border)}

/* Avisos */
html[data-estilo="glass"] .toast{background:rgba(20,20,24,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-inset);color:var(--glass-text);font-family:var(--glass-font)}
html[data-estilo="glass"] .toast.success{border-color:rgba(34,197,94,.45);color:#86efac;box-shadow:0 12px 32px rgba(0,0,0,.5)}
html[data-estilo="glass"] .toast.error{border-color:rgba(230,100,91,.5);color:#fca5a5;box-shadow:0 12px 32px rgba(0,0,0,.5)}
html[data-estilo="glass"] .toast.info{border-color:var(--glass-accent-soft);color:var(--glass-accent-bright)}
html[data-estilo="glass"] .toast.warning{border-color:rgba(245,158,11,.45);color:#fcd34d;box-shadow:0 12px 32px rgba(0,0,0,.5)}

/* Asistente */
html[data-estilo="glass"] .btn-ia{border:1px solid var(--glass-accent-soft)!important;color:var(--glass-accent-bright)!important;background:var(--glass-accent-faint)!important;box-shadow:none}
html[data-estilo="glass"] .btn-ia:hover{background:var(--glass-accent-soft)!important;box-shadow:none}
html[data-estilo="glass"] .bot-fab{background:rgba(255,255,255,.88);color:#0a0a0c;box-shadow:0 12px 32px rgba(0,0,0,.5);animation:none}
html[data-estilo="glass"] .bot-panel{background:rgba(20,20,24,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);box-shadow:0 12px 32px rgba(0,0,0,.5)}
html[data-estilo="glass"] .bot-panel-header{background:transparent;border-bottom:1px solid var(--glass-border)}
html[data-estilo="glass"] .bot-msg-user{background:var(--glass-accent-soft);color:var(--glass-text)}
html[data-estilo="glass"] .bot-msg-bot{background:var(--glass-surface);border-color:var(--glass-border);color:var(--glass-text)}

@media (prefers-reduced-transparency:reduce){
  html[data-estilo="glass"] header,
  html[data-estilo="glass"] .nav-tabs,
  html[data-estilo="glass"] .toast,
  html[data-estilo="glass"] .bot-panel,
  html[data-estilo="glass"] .modal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
}