/* ==========================================================================
   Bernal & Oliveros — capa visual "Luxury Interactive"
   Se carga DESPUÉS de los estilos base, por eso solo sobrescribe/añade.
   ========================================================================== */

:root {
  --lux-ease: cubic-bezier(.16, 1, .3, 1);
  --lux-gold-text: linear-gradient(100deg, var(--gold-3, #8C6A1A) 0%, var(--gold-1, #FCEAB2) 35%, var(--gold-2, #DFB743) 55%, var(--gold-1, #FCEAB2) 75%, var(--gold-3, #8C6A1A) 100%);
}

html { scroll-behavior: smooth; }

/* --- Evita ver el panel antes de confirmar la sesión ------------------- */
body.auth-pending #appView,
body.auth-pending #threatBanner { visibility: hidden; }
body.auth-pending::after {
  content: '';
  position: fixed; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 2px solid rgba(223,183,67,.18);
  border-top-color: var(--gold-2, #DFB743);
  border-radius: 50%;
  animation: spin .9s linear infinite;
  z-index: 999;
}

/* --- Fondo vivo: aurora + grano + polvo de oro -------------------------- */
body { background-attachment: fixed; }

body::before {
  content: '';
  position: fixed; inset: -20%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 25%, var(--gold-glow, rgba(223,183,67,.25)), transparent 70%),
    radial-gradient(35% 30% at 80% 70%, var(--gold-glow, rgba(223,183,67,.25)), transparent 70%),
    radial-gradient(30% 30% at 55% 10%, rgba(255,255,255,.04), transparent 70%);
  opacity: .55;
  filter: blur(40px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 5%, 0) scale(1.02); }
}

#luxDust {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: .7;
}

/* Grano fino sobre todo el fondo (da textura de papel / mármol) */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#appView, .luxury-top-strip { position: relative; z-index: 2; }
.luxury-top-strip { position: sticky; }

/* --- Scrollbar ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--gold-3, #8C6A1A) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-2, #DFB743), var(--gold-3, #8C6A1A)); border-radius: 8px; }
::selection { background: var(--gold-2, #DFB743); color: #100C02; }

/* --- Foco accesible ---------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gold-1, #FCEAB2); outline-offset: 2px; }

/* --- Sidebar ------------------------------------------------------------ */
.sidebar {
  background: linear-gradient(180deg, rgba(14,14,20,.82), rgba(5,5,8,.92));
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, transparent, var(--gold-2, #DFB743) 25%, var(--gold-3, #8C6A1A) 70%, transparent) 1;
}
.brand-logo { transition: transform .6s var(--lux-ease), filter .6s var(--lux-ease); }
.sidebar-header:hover .brand-logo { transform: scale(1.06) rotate(-2deg); filter: brightness(0) invert(1) drop-shadow(0 0 12px var(--gold-2, #DFB743)); }

.brand-title {
  background: var(--lux-gold-text); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: goldSheen 7s linear infinite;
}
@keyframes goldSheen { to { background-position: -220% 0; } }

.nav-item { overflow: hidden; isolation: isolate; }
.nav-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(223,183,67,.18) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--lux-ease);
}
.nav-item:hover::before { transform: translateX(120%); }
.nav-item .nav-ic { transition: transform .35s var(--lux-ease), text-shadow .35s; }
.nav-item:hover .nav-ic, .nav-item.active .nav-ic { transform: scale(1.25) rotate(-6deg); text-shadow: 0 0 12px var(--gold-2, #DFB743); }

.staff-avatar { box-shadow: 0 0 0 2px rgba(223,183,67,.35), 0 0 18px var(--gold-glow); animation: avatarPulse 4s ease-in-out infinite; }
@keyframes avatarPulse { 50% { box-shadow: 0 0 0 4px rgba(223,183,67,.15), 0 0 28px var(--gold-glow); } }

/* --- Títulos ----------------------------------------------------------- */
.page-title {
  background: var(--lux-gold-text); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldSheen 9s linear infinite;
  letter-spacing: .005em;
}
.page-title::after {
  content: ''; display: block; height: 1px; width: 64px; margin-top: 10px;
  background: linear-gradient(90deg, var(--gold-2, #DFB743), transparent);
  transition: width .6s var(--lux-ease);
}
.topbar:hover .page-title::after { width: 160px; }

/* --- Tarjetas con foco de luz que sigue al cursor ---------------------- */
.panel, .queue-card, .customer-card, .settings-card, .task-item, .wagon, .chain-summary .stat, .threat-chip, .cyber-panel {
  --mx: 50%; --my: 0%;
  transition: transform .45s var(--lux-ease), border-color .3s, box-shadow .3s, background .3s;
  will-change: transform;
}
.panel::after, .queue-card::after, .customer-card::after, .settings-card::after, .wagon::after, .cyber-panel::after, .chain-summary .stat::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(223,183,67,.13), transparent 55%);
  opacity: 0; transition: opacity .35s;
}
.panel:hover::after, .queue-card:hover::after, .customer-card:hover::after, .settings-card:hover::after,
.wagon:hover::after, .cyber-panel:hover::after, .chain-summary .stat:hover::after { opacity: 1; }
.settings-card, .wagon, .cyber-panel, .chain-summary .stat, .customer-card { position: relative; }

.panel, .queue-card, .customer-card, .settings-card {
  background: linear-gradient(160deg, rgba(20,20,28,.72), rgba(8,8,12,.78));
  border-radius: 10px;
}
.queue-card:hover { transform: translateY(-3px); }

/* --- Botones ----------------------------------------------------------- */
.btn, .btn-cyber { position: relative; overflow: hidden; }
.btn-gold { background-size: 200% 100%; transition: background-position .6s var(--lux-ease), transform .2s, box-shadow .3s, filter .3s; }
.btn-gold:hover { background-position: 100% 0; }
.btn-gold::before, .btn-cyber::before {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s var(--lux-ease);
}
.btn-gold:hover::before, .btn-cyber:hover::before { left: 130%; }

.lux-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(223,183,67,.25) 60%, transparent 70%);
  transform: scale(0); animation: luxRipple .7s var(--lux-ease) forwards;
}
@keyframes luxRipple { to { transform: scale(1); opacity: 0; } }

/* --- Inputs ------------------------------------------------------------ */
.field-shell { transition: border-color .25s, box-shadow .3s, transform .3s var(--lux-ease), background .3s; }
.field-shell:focus-within { transform: translateY(-1px); }
.field label { transition: color .25s, letter-spacing .3s var(--lux-ease); }
.field:focus-within label { color: var(--gold-1, #FCEAB2); letter-spacing: .16em; }

/* --- Tablas ------------------------------------------------------------ */
tbody tr { transition: background .25s, transform .3s var(--lux-ease); }
tbody tr:hover { background: linear-gradient(90deg, rgba(223,183,67,.07), transparent); transform: translateX(3px); }
th { position: sticky; top: 0; background: rgba(8,8,12,.9); backdrop-filter: blur(6px); }

/* --- Revelado escalonado ------------------------------------------------ */
.lux-reveal { animation: luxIn .7s var(--lux-ease) var(--d, 0ms) backwards; }
@keyframes luxIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* --- Tareas / tags / temas --------------------------------------------- */
.task-check:not(.done):hover { transform: scale(1.15) rotate(8deg); box-shadow: 0 0 14px var(--gold-glow); }
.task-check.done { animation: popCheck .5s var(--lux-ease); }
@keyframes popCheck { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.tag-success { box-shadow: 0 0 10px rgba(46,138,94,.25); }
.tag-danger { box-shadow: 0 0 10px rgba(184,71,61,.25); }
.theme-option { transition: transform .35s var(--lux-ease), border-color .25s, box-shadow .3s, background .25s; }
.theme-option:hover .theme-swatch { transform: rotate(25deg) scale(1.12); }
.theme-swatch { transition: transform .45s var(--lux-ease); }

/* --- Cadena inmutable: vagones con pulso -------------------------------- */
.wagon .seqmark { animation: avatarPulse 5s ease-in-out infinite; }
.coupling { background: linear-gradient(var(--gold-2, #DFB743), var(--gold-3, #8C6A1A)); }

/* --- Banner de amenaza y radar ciber ------------------------------------ */
.cyber-panel { border-radius: 10px; }
.threat-chip:hover { transform: translateY(-3px); border-color: var(--cyber-cyan); }
.cyber-title .dot { animation: dotGlow 2s infinite ease-in-out; }

/* --- Paleta de comandos (Ctrl/⌘ + K) ------------------------------------ */
#luxPalette {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: flex-start; justify-content: center; padding-top: 14vh;
  background: rgba(2,2,4,.66); backdrop-filter: blur(10px);
}
#luxPalette.open { display: flex; animation: luxIn .25s var(--lux-ease) both; }
.lux-pal-box {
  width: min(560px, 92vw);
  background: linear-gradient(160deg, rgba(22,22,30,.96), rgba(8,8,12,.98));
  border: 1px solid rgba(223,183,67,.35); border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px var(--gold-glow);
  overflow: hidden;
}
.lux-pal-box input {
  width: 100%; height: 56px; padding: 0 22px; background: transparent; border: 0; outline: 0;
  color: var(--ink, #F7F5EE); font: 500 16px var(--font-body, sans-serif);
  border-bottom: 1px solid rgba(223,183,67,.2);
}
.lux-pal-list { max-height: 320px; overflow-y: auto; padding: 8px; }
.lux-pal-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; cursor: pointer;
  color: var(--ink-soft, #C5BEAC); font-size: 14px; transition: background .15s, color .15s, transform .2s var(--lux-ease);
}
.lux-pal-item.sel { background: rgba(223,183,67,.13); color: var(--gold-1, #FCEAB2); transform: translateX(4px); }
.lux-pal-item .ic { width: 20px; text-align: center; color: var(--gold-2, #DFB743); }
.lux-pal-foot { padding: 10px 16px; font: 11px var(--font-mono, monospace); color: var(--ink-faint, #756E5C); border-top: 1px solid rgba(255,255,255,.05); }
.lux-kbd { border: 1px solid rgba(223,183,67,.3); border-radius: 4px; padding: 1px 6px; margin: 0 2px; color: var(--gold-1, #FCEAB2); }

.lux-hint-btn {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(223,183,67,.08);
  border: 1px solid rgba(223,183,67,.25); border-radius: 4px; padding: 3px 9px; cursor: pointer;
  color: var(--gold-1, #FCEAB2); font: 10px var(--font-mono, monospace); letter-spacing: .08em; transition: all .25s;
}
.lux-hint-btn:hover { background: rgba(223,183,67,.18); box-shadow: 0 0 14px var(--gold-glow); }

/* ==========================================================================
   LOGIN — misma identidad dorada (reemplaza el look de terminal cian)
   ========================================================================== */
body.login-page {
  --void-1: #050507; --void-2: #0B0B10; --void-3: #020204;
  --cyan: #DFB743; --cyan-dim: rgba(223,183,67,.38); --cyan-glow: rgba(223,183,67,.2);
  --ink: #F7F5EE; --ink-soft: #C5BEAC; --ink-faint: #8A826F;
  --grid-line: rgba(223,183,67,.025);
  --gold-1: #FCEAB2; --gold-2: #DFB743; --gold-3: #8C6A1A; --gold-glow: rgba(223,183,67,.25);
  --font-display: 'Newsreader', serif;
  background:
    radial-gradient(900px 520px at 50% -5%, rgba(223,183,67,.09), transparent 60%),
    linear-gradient(180deg, #08080C, #020204);
}
body.login-page::before { opacity: .7; }
body.login-page #loginRoot { position: relative; z-index: 2; }

body.login-page .term-frame { max-width: 480px; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
body.login-page .term-header {
  background: linear-gradient(180deg, rgba(20,20,28,.9), rgba(10,10,14,.95));
  border-color: rgba(223,183,67,.35); border-radius: 12px 12px 0 0;
}
body.login-page .term-header .dots span:nth-child(1) { background: #8C6A1A; }
body.login-page .term-header .dots span:nth-child(2) { background: #DFB743; }
body.login-page .term-header .dots span:nth-child(3) { background: #FCEAB2; }
body.login-page .term-header .id { color: var(--gold-2); }
body.login-page .term-brand {
  background: linear-gradient(180deg, rgba(16,16,22,.95), rgba(10,10,14,.95));
  border-color: rgba(223,183,67,.35); padding: 38px 20px 30px;
}
body.login-page .term-brand::after { background: linear-gradient(180deg, rgba(223,183,67,.14), transparent); }
body.login-page .term-brand img {
  width: 128px; filter: drop-shadow(0 0 26px rgba(223,183,67,.25)) brightness(1.5);
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat { 50% { transform: translateY(-6px); } }
body.login-page .term-brand h1 {
  font-size: 26px;
  background: var(--lux-gold-text); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: goldSheen 8s linear infinite;
}
body.login-page .term-brand .sub { color: var(--gold-2); }

body.login-page .panel {
  background: linear-gradient(180deg, rgba(14,14,20,.96), rgba(9,9,13,.98));
  border-color: rgba(223,183,67,.3); border-top: 1px solid rgba(223,183,67,.18);
  position: relative;
}
body.login-page .panel::before {
  content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), var(--gold-1), var(--gold-2), transparent);
}
body.login-page .field label::before { color: var(--gold-3); content: '◆ '; font-size: 8px; vertical-align: 1px; }
body.login-page .field-shell { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.08); border-radius: 6px; }
body.login-page .field-shell:focus-within { border-color: var(--gold-2); background: rgba(0,0,0,.6); box-shadow: 0 0 20px var(--gold-glow), inset 0 2px 4px rgba(0,0,0,.5); }
body.login-page .btn { border-radius: 6px; }
body.login-page .btn-gold {
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%); background-size: 200% 100%;
  color: #120D04; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 10px 28px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
body.login-page .btn-gold:hover { background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%); background-size: 200% 100%; background-position: 100% 0; box-shadow: 0 14px 34px var(--gold-glow); transform: translateY(-1px); }
body.login-page .btn-gold:disabled { background: #2A2618; color: var(--ink-faint); border-color: #2A2618; box-shadow: none; transform: none; }
body.login-page .secret-box { border-color: var(--cyan-dim); background: rgba(223,183,67,.04); }
body.login-page .term-footer { background: rgba(10,10,14,.98); border-color: rgba(223,183,67,.3); border-radius: 0 0 12px 12px; }
body.login-page .panel:last-of-type { border-radius: 0; }
body.login-page .login-note::before, body.login-page .step-note::before { color: var(--gold-3); }

/* Sacudida al error */
.lux-shake { animation: luxShake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes luxShake { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(3px); } 30%,50%,70% { transform: translateX(-6px); } 40%,60% { transform: translateX(6px); } }

/* --- Responsive & accesibilidad ---------------------------------------- */
@media (max-width: 900px) { .lux-hint-btn { display: none; } #luxDust { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  #luxDust { display: none; }
}