/* ==========================================================================
   Bernal & Oliveros — capa "Mármol & Madera"
   Cargar DESPUÉS de styles.css, luxury.css y cyber.css (solo sobrescribe).

   IMÁGENES: ajusta estas dos rutas si tus archivos están en otra carpeta.
   (la ruta es relativa a ESTE archivo css)
   ========================================================================== */

:root {
  --wood-img:   url("assets/madera.png");
  --marble-img: url("assets/marmolb.png");

  /* Velo oscuro sobre la madera (0 = sin velo, 1 = negro).
     Súbelo si el texto se lee mal; bájalo si quieres ver más la veta. */
  --wood-shade-top: .40;
  --wood-shade-bottom: .60;
  --marble-veil: .22;   /* velo claro sobre el mármol (0 = mármol puro) */

  --lux-line: rgba(223, 183, 67, .22);
  --lux-line-strong: rgba(223, 183, 67, .45);
  --lux-glass-a: rgba(26, 18, 12, .86);
  --lux-glass-b: rgba(10, 7, 5, .92);
  --ink-faint: #A39A84;               /* más legible sobre fondo oscuro */
  --radius: 8px;
}

/* ---------- FONDO GENERAL: MADERA ---------------------------------------- */
body {
  background-color: #120C08;
  background-image:
    linear-gradient(180deg, rgba(8, 5, 3, var(--wood-shade-top)), rgba(8, 5, 3, var(--wood-shade-bottom))),
    var(--wood-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* La aurora animada se cambia por una viñeta elegante que enmarca la madera */
body::before {
  inset: 0;
  opacity: 1;
  filter: none;
  animation: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%),
    radial-gradient(40% 30% at 85% 0%, var(--gold-glow), transparent 70%);
}
#luxDust { opacity: .45; }
.grain { opacity: .035; }
.ambient-spotlight { opacity: .22; }

/* ---------- BARRA SUPERIOR ------------------------------------------------ */
.luxury-top-strip {
  background: linear-gradient(180deg, rgba(14, 9, 6, .94), rgba(8, 5, 3, .9));
  border-bottom: 1px solid var(--lux-line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.luxury-top-strip::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: .5; pointer-events: none;
}

/* ---------- MENÚ LATERAL: MÁRMOL BLANCO CON VETAS DORADAS ---------------- */
.sidebar {
  background-color: #F4EFE4;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 244, var(--marble-veil)) 0%, rgba(244, 236, 218, calc(var(--marble-veil) + .1)) 100%),
    var(--marble-img);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  backdrop-filter: none;
  border-right: 1px solid var(--gold-3);
  border-image: none;
  box-shadow: 16px 0 44px rgba(0, 0, 0, .55), inset -1px 0 0 rgba(255, 255, 255, .6);
}
/* hilo dorado vertical en el borde derecho */
.sidebar::after {
  content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 2px; pointer-events: none;
  background: linear-gradient(180deg, var(--gold-3) 0%, var(--gold-2) 30%, var(--gold-1) 50%, var(--gold-2) 70%, var(--gold-3) 100%);
  opacity: .9;
}

.sidebar-header {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(140, 106, 26, .35);
}
/* logo en su color original (oscuro) sobre el mármol claro */
.brand-logo, .sidebar-header:hover .brand-logo { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); opacity: 1; }
.sidebar-header:hover .brand-logo { filter: drop-shadow(0 0 10px var(--gold-glow)); }
.sidebar-brand .brand-title {
  background: linear-gradient(100deg, #5E4210 0%, var(--gold-3) 30%, #B8892A 55%, var(--gold-3) 80%, #5E4210 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  text-shadow: none;
}
.sidebar-brand .brand-subtitle { color: #6B4F14; text-shadow: none; font-weight: 500; }
.gold-divider { opacity: .8; }

.nav-item {
  color: #3A2B14;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 11px 14px;
  border-radius: 8px;
  text-shadow: none;
}
.nav-item:hover {
  color: #1E1608;
  background: rgba(255, 255, 255, .6);
  border-color: rgba(140, 106, 26, .4);
  backdrop-filter: blur(4px);
}
.nav-item.active {
  color: #4A3309;
  background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 250, 236, .6));
  border-color: var(--gold-3);
  box-shadow: 0 6px 16px rgba(80, 56, 10, .18), inset 0 1px 0 #fff;
}
.nav-item.active .nav-glow { background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); box-shadow: none; }
.nav-ic { color: var(--gold-3); opacity: 1; filter: none; }
.nav-item:hover .nav-ic, .nav-item.active .nav-ic { text-shadow: none; }
.nav-item::before { background: linear-gradient(100deg, transparent 20%, rgba(223, 183, 67, .28) 50%, transparent 80%); }

.sidebar-footer { border-top: 1px solid rgba(140, 106, 26, .35); }
.staff-card {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(140, 106, 26, .35);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(80, 56, 10, .12);
}
.staff-chip { color: #2A1E0C; }
.staff-status-text { color: #6B5C3E; }
.level-badge { color: #5E4210; background: rgba(223, 183, 67, .2); border-color: var(--gold-3); }

/* ---------- TÍTULOS ------------------------------------------------------- */
.page-title { font-size: 32px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); }
.page-desc { color: #C9C0AA; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.panel-title, .settings-card h3 { letter-spacing: .01em; }

/* ---------- TARJETAS / PANELES: CRISTAL AHUMADO SOBRE MADERA ------------- */
.panel, .queue-card, .customer-card, .settings-card, .wagon,
.chain-summary .stat, .cyber-panel, .soc-card {
  background: linear-gradient(165deg, var(--lux-glass-a), var(--lux-glass-b));
  border: 1px solid var(--lux-line);
  border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel:hover, .queue-card:hover, .customer-card:hover, .settings-card:hover,
.wagon:hover, .chain-summary .stat:hover {
  border-color: var(--lux-line-strong);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .6), 0 0 28px rgba(223, 183, 67, .07), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.panel::before, .queue-card::before {
  background: linear-gradient(90deg, transparent, var(--gold-2) 30%, var(--gold-1) 50%, var(--gold-2) 70%, transparent);
  opacity: .8;
}
.wagon.broken { background: linear-gradient(165deg, rgba(60, 20, 16, .88), rgba(22, 8, 6, .94)); }
.chain-summary .stat b { font-family: var(--font-serif); font-size: 30px; }

/* ---------- BOTONES ------------------------------------------------------- */
.btn, .btn-cyber {
  min-height: 42px;
  padding: 0 24px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  gap: 8px;
  white-space: nowrap;
}
.btn-sm { min-height: 34px; padding: 0 16px; font-size: 11px; letter-spacing: .08em; }
.btn-block { width: 100%; }
.btn:disabled, .btn-cyber:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.3); }

/* Principal: oro metálico */
.btn-gold, .btn-cyber.primary {
  color: #1A1205;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
  background-size: 100% 100%;
  border: 1px solid rgba(255, 244, 205, .55);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(0, 0, 0, .22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-gold:hover, .btn-cyber.primary:hover {
  background-position: 0 0;
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .55),
    0 0 22px var(--gold-glow),
    0 0 0 1px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 0 rgba(0, 0, 0, .22);
}
.btn-gold:active, .btn-cyber.primary:active { transform: translateY(0) scale(.985); filter: brightness(.97); }

/* Secundario: cristal oscuro con filete dorado */
.btn-ghost, .btn-cyber {
  color: var(--gold-1);
  background: linear-gradient(180deg, rgba(34, 24, 16, .72), rgba(12, 8, 5, .82));
  border: 1px solid rgba(223, 183, 67, .38);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover, .btn-cyber:hover {
  color: #fff;
  border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(223, 183, 67, .2), rgba(223, 183, 67, .06));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateY(-1px);
}

/* Peligro: mismo molde, tono granate */
.btn-danger-ghost, .btn-cyber-danger {
  color: #F4A59C;
  background: linear-gradient(180deg, rgba(70, 22, 18, .6), rgba(26, 8, 6, .8));
  border: 1px solid rgba(184, 71, 61, .5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.btn-danger-ghost:hover, .btn-cyber-danger:hover {
  color: #fff;
  border-color: #E0685C;
  background: linear-gradient(180deg, rgba(184, 71, 61, .45), rgba(120, 36, 30, .35));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(184, 71, 61, .3);
}

/* Botones dentro de las tarjetas de cola: alineados y del mismo alto */
.queue-actions { gap: 10px; }
.queue-actions .btn { min-height: 36px; padding: 0 16px; font-size: 11px; }

/* Botón de la paleta (⌘K) */
.lux-hint-btn { border-radius: 6px; padding: 5px 11px; background: rgba(0, 0, 0, .4); }

/* ---------- CAMPOS -------------------------------------------------------- */
.field label { color: #B9B09A; letter-spacing: .14em; }
.field-shell, .soc-form .cyber-input, .soc-input {
  background: rgba(6, 4, 3, .62);
  border: 1px solid rgba(223, 183, 67, .2);
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.field-shell:focus-within {
  background: rgba(6, 4, 3, .8);
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px var(--gold-glow), inset 0 2px 6px rgba(0, 0, 0, .55);
}
.field-shell input, .field-shell select { height: 44px; }
.field-shell input::placeholder { color: #7E7663; }
.field-shell select option { background: #17110C; color: #F7F5EE; }

/* ---------- TABLAS -------------------------------------------------------- */
th {
  background: rgba(16, 11, 7, .96);
  color: var(--gold-2);
  border-bottom: 1px solid var(--lux-line-strong);
}
td { border-bottom: 1px solid rgba(255, 255, 255, .06); color: #D9D1BC; }
tr:hover td { background: rgba(223, 183, 67, .05); color: #fff; }

/* ---------- TAREAS / ETIQUETAS / TEMAS ----------------------------------- */
.task-item {
  background: linear-gradient(165deg, rgba(34, 24, 16, .6), rgba(14, 10, 7, .7));
  border: 1px solid rgba(223, 183, 67, .14);
  border-radius: 10px;
}
.task-item:hover { border-color: var(--lux-line-strong); background: linear-gradient(165deg, rgba(44, 31, 20, .7), rgba(18, 13, 9, .78)); }
.task-desc, .task-meta, .queue-meta { color: #AFA690; }
.tag { border-radius: 4px; padding: 4px 10px; }
.theme-option {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(223, 183, 67, .16);
  border-radius: 10px;
}
.theme-option.active { background: rgba(223, 183, 67, .12); border-color: var(--gold-2); }
.err-banner { background: rgba(70, 22, 18, .7); border-radius: 8px; }

/* ---------- PALETA DE COMANDOS ------------------------------------------- */
.lux-pal-box {
  background: linear-gradient(165deg, rgba(28, 20, 14, .97), rgba(10, 7, 5, .99));
  border-color: var(--lux-line-strong);
}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width: 900px) {
  /* iOS ignora "fixed" en fondos: evitamos que la foto se vea recortada o borrosa */
  body { background-attachment: scroll, scroll; }
  .sidebar { box-shadow: 20px 0 60px rgba(0, 0, 0, .7); }
  .page-title { font-size: 26px; }
  .btn { min-height: 44px; }
}


/* ---------- MENÚ FIJO ------------------------------------------------------
   El menú se queda quieto mientras la página baja. El logo (arriba) y la tarjeta
   del usuario + "Cerrar sesión" (abajo) nunca se mueven; si la pantalla es baja,
   solo la lista de secciones hace scroll por dentro. Los ítems NUNCA se comprimen. */
@media (min-width: 901px) {
  .sidebar {
    position: sticky;
    top: 40px;                           /* alto de la barra superior */
    align-self: start;
    height: calc(100vh - 40px);
    padding: 22px 16px 16px;
    overflow: hidden;
    overflow: clip;                      /* el navegador no puede desplazarlo solo (p. ej. al enfocar un ítem) */
  }
  .sidebar-header { flex: 0 0 auto; margin-bottom: 14px; padding-bottom: 14px; }
  .sidebar-nav {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    gap: 2px; padding-right: 4px; margin-right: -4px;
    scrollbar-width: thin; scrollbar-color: var(--gold-3) transparent;
  }
  .sidebar-nav::-webkit-scrollbar { width: 4px; }
  .sidebar-nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .sidebar-nav::-webkit-scrollbar-thumb { background: var(--gold-3); border-radius: 4px; }
  .nav-item { flex: 0 0 auto; min-height: 40px; line-height: 1.25; }
  .sidebar-footer { flex: 0 0 auto; padding-top: 12px; margin-top: 10px; }
}

/* Pantallas de poca altura: se compacta todo para que quepa sin necesidad de scroll */
@media (min-width: 901px) and (max-height: 880px) {
  .sidebar { padding: 16px 14px 12px; }
  .sidebar-header { margin-bottom: 8px; padding-bottom: 10px; gap: 10px; }
  .brand-logo { width: 60px; }
  .sidebar-brand .brand-title { font-size: 15px; }
  .sidebar-brand .brand-subtitle { font-size: 9px; }
  .nav-item { min-height: 34px; padding: 6px 12px; font-size: 12.5px; gap: 10px; }
  .staff-card { padding: 6px 8px; margin-bottom: 8px; }
  .sidebar-footer { padding-top: 8px; margin-top: 6px; }
}
@media (min-width: 901px) and (max-height: 680px) {
  .brand-logo { width: 48px; }
  .sidebar-brand .brand-subtitle, .staff-status-text { display: none; }
  .nav-item { min-height: 30px; padding: 4px 10px; }
}

/* ---------- BOTÓN "✕ CERRAR" EN RESULTADOS --------------------------------- */
.lux-result-bar { display: flex; justify-content: flex-end; margin-top: 18px; }
.lux-result-bar.lux-hide { display: none; }
.lux-result-bar + [data-lux-closable] { margin-top: 10px !important; }
.lux-close-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 14px;
  font: 700 11px var(--font-body); letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-1); cursor: pointer;
  background: linear-gradient(180deg, rgba(34, 24, 16, .8), rgba(12, 8, 5, .88));
  border: 1px solid rgba(223, 183, 67, .4); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
  transition: all .15s ease;
}
.lux-close-btn .x { font-size: 15px; line-height: 1; }
.lux-close-btn:hover {
  color: #fff; border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(223, 183, 67, .22), rgba(223, 183, 67, .06));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 18px var(--gold-glow);
}


/* ---------- VARIAS CUENTAS CON EL MISMO DOCUMENTO ----------------------------- */
.lux-matches {
  margin-top: 18px; padding: 18px 20px 20px;
  background: linear-gradient(165deg, var(--lux-glass-a), var(--lux-glass-b));
  border: 1px solid var(--lux-line-strong); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lux-m-head { font: 600 20px var(--font-serif); color: var(--gold-1); }
.lux-m-hint { font-size: 12.5px; color: #B9B09A; margin: 4px 0 14px; }
.lux-m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lux-m-card {
  text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 10px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(223, 183, 67, .2); color: #D9D1BC;
  transition: all .15s ease; font-family: var(--font-body);
}
.lux-m-card:hover { border-color: var(--gold-2); background: rgba(223, 183, 67, .08); transform: translateY(-1px); }
.lux-m-card.sel { border-color: var(--gold-2); background: linear-gradient(165deg, rgba(223, 183, 67, .18), rgba(223, 183, 67, .05)); box-shadow: 0 0 0 1px var(--gold-2), 0 0 22px var(--gold-glow); cursor: default; }
.lux-m-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.lux-m-top strong { color: #fff; font-size: 14px; line-height: 1.3; word-break: break-word; }
.lux-m-tag { flex: none; font: 600 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-1); border: 1px solid var(--lux-line-strong); border-radius: 4px; padding: 3px 7px; }
.lux-m-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin: 3px 0; }
.lux-m-line span { color: #A39A84; flex: none; }
.lux-m-line b { font-weight: 500; text-align: right; word-break: break-word; }
.lux-m-flag { margin-top: 8px; font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #F4A59C; }


/* ---------- LOCKDOWN (nivel 5) ------------------------------------------------ */
.ld-wrap { position: relative; max-width: 980px; }
.ld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ld-pill { font: 700 11px var(--font-mono); letter-spacing: .14em; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--lux-line-strong); background: rgba(0,0,0,.45); }
.ld-pill.ok { color: #7BE0A8; border-color: rgba(123,224,168,.5); }
.ld-pill.on { color: #FF8A7E; border-color: rgba(255,90,70,.7); animation: ldBlink 1s steps(2) infinite; }
@keyframes ldBlink { 50% { opacity: .45; } }
.ld-stage { background: radial-gradient(120% 90% at 50% 0%, rgba(40,26,14,.95), rgba(8,5,3,.98)); border: 1px solid var(--lux-line-strong); border-radius: 16px; padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.ld-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.ld-term { font: 500 13px var(--font-mono); color: #7BE0A8; min-height: 84px; margin-bottom: 18px; text-shadow: 0 0 8px rgba(123,224,168,.5); }
.ld-line::after { content: ''; }
.ld-codebar { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border: 1px solid var(--lux-line); border-radius: 12px; background: rgba(0,0,0,.45); }
.ld-ring { width: 54px; height: 54px; transform: rotate(-90deg); flex: none; }
.ld-ring circle { fill: none; stroke-width: 3; }
.ld-ring .bg { stroke: rgba(223,183,67,.18); }
.ld-ring .fg { stroke: var(--gold-2); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 4px var(--gold-glow)); }
.ld-codelabel { font: 600 10px var(--font-mono); letter-spacing: .16em; color: #A39A84; }
.ld-code { font: 700 34px var(--font-mono); letter-spacing: .14em; color: var(--gold-1); text-shadow: 0 0 14px var(--gold-glow); }
.ld-code.flip { animation: ldFlip .6s ease; }
@keyframes ldFlip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ld-count { margin-left: auto; font: 600 18px var(--font-mono); color: #D9D1BC; }
.ld-console { display: grid; grid-template-columns: 1.1fr .8fr 1.2fr; gap: 18px; align-items: center; margin-top: 18px; min-height: 230px; }
.ld-dock { position: relative; height: 130px; display: flex; flex-direction: column; justify-content: center; }
.ld-key { width: 150px; cursor: grab; filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); transition: filter .2s; position: relative; z-index: 5; outline: none; }
.ld-key:hover, .ld-key:focus-visible { filter: drop-shadow(0 0 16px var(--gold-glow)) drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
.ld-key.drag { cursor: grabbing; transition: none; }
.ld-key.seated { cursor: default; transition: transform .5s cubic-bezier(.3,.9,.3,1); }
.ld-hint { margin-top: 12px; font: 500 12px var(--font-mono); color: #A39A84; }
.ld-lock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-plate { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6a5a3a, #2a2012 70%); border: 3px solid var(--gold-3); box-shadow: inset 0 4px 10px rgba(0,0,0,.7), 0 0 0 5px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.6); display: grid; place-items: center; transition: box-shadow .25s, transform .6s cubic-bezier(.3,.9,.3,1); }
.ld-lock.near .ld-plate { box-shadow: inset 0 4px 10px rgba(0,0,0,.7), 0 0 0 5px rgba(0,0,0,.5), 0 0 30px var(--gold-glow); }
.ld-lock.turned .ld-plate { transform: rotate(90deg); }
.ld-hole { width: 18px; height: 46px; border-radius: 9px; background: #050302; box-shadow: inset 0 0 8px #000; position: relative; }
.ld-hole::before { content: ''; position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #050302; }
.ld-led { width: 12px; height: 12px; border-radius: 50%; background: #5a1a14; box-shadow: 0 0 8px rgba(255,60,40,.6); transition: all .3s; }
.ld-led.go { background: #3CFF9A; box-shadow: 0 0 14px #3CFF9A; }
.ld-lockl { font: 600 10px var(--font-mono); letter-spacing: .2em; color: #A39A84; }
.ld-bay { position: relative; height: 170px; border-radius: 14px; background: linear-gradient(180deg, #17110C, #0a0705); border: 1px solid var(--lux-line); display: grid; place-items: center; box-shadow: inset 0 0 30px rgba(0,0,0,.8); overflow: hidden; }
.ld-big { width: 130px; height: 130px; border-radius: 50%; border: 6px solid #3a0d09; font: 800 12px var(--font-body); letter-spacing: .1em; color: #fff; cursor: pointer; display: grid; place-items: center; text-align: center; padding: 14px; transition: transform .1s, box-shadow .2s, filter .2s; }
.ld-big.red { background: radial-gradient(circle at 35% 30%, #ff6a5a, #c4170a 55%, #7a0d05); box-shadow: 0 8px 0 #4a0905, 0 14px 26px rgba(0,0,0,.7), 0 0 30px rgba(255,50,30,.35); }
.ld-big.green { background: radial-gradient(circle at 35% 30%, #6bf0a8, #14a85a 55%, #0a6a36); border-color: #07391d; box-shadow: 0 8px 0 #06371c, 0 14px 26px rgba(0,0,0,.7), 0 0 30px rgba(60,255,150,.3); }
.ld-big:disabled { filter: grayscale(.85) brightness(.45); cursor: not-allowed; box-shadow: 0 4px 0 #222, 0 8px 16px rgba(0,0,0,.6); }
.ld-big:not(:disabled) { animation: ldPulse 1.4s ease-in-out infinite; }
.ld-big:not(:disabled):active { transform: translateY(6px); box-shadow: 0 2px 0 #4a0905, 0 6px 12px rgba(0,0,0,.7); }
@keyframes ldPulse { 50% { filter: brightness(1.18); } }
.ld-cover { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #1c1c1c 0 14px, #d4a017 14px 28px); transform-origin: top; transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .5s; }
.ld-cover span { background: #000; color: #FF8A7E; font: 700 12px var(--font-mono); letter-spacing: .2em; padding: 6px 14px; border: 1px solid #FF8A7E; }
.ld-cover.open { transform: perspective(500px) rotateX(-100deg); opacity: 0; pointer-events: none; }
.ld-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; text-align: center; }
.ld-overlay.hidden { display: none; }
.ld-overlay.red { background: radial-gradient(circle, rgba(120,0,0,.88), rgba(10,0,0,.97)); animation: ldFlash .5s steps(2) 6; }
.ld-overlay.green { background: radial-gradient(circle, rgba(0,90,50,.85), rgba(0,10,5,.97)); }
.ld-overlay::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); pointer-events: none; }
@keyframes ldFlash { 50% { background-color: rgba(255,0,0,.25); } }
.ld-ov-title { font: 800 clamp(30px, 6vw, 64px) var(--font-mono); letter-spacing: .12em; color: #fff; text-shadow: 0 0 24px currentColor; animation: ldGlitch .9s steps(8) infinite; }
.ld-overlay.red .ld-ov-title { color: #ff5b4a; } .ld-overlay.green .ld-ov-title { color: #5dffa6; }
.ld-ov-sub { margin-top: 14px; font: 500 15px var(--font-mono); color: #ddd; }
@keyframes ldGlitch { 0%,100% { transform: none; } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px,-2px); } 60% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, -1px); } }
@media (max-width: 760px) { .ld-console { grid-template-columns: 1fr; justify-items: center; } .ld-stage { padding: 16px; } .ld-code { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .ld-overlay.red, .ld-ov-title, .ld-big:not(:disabled), .ld-pill.on { animation: none; } .ld-cover, .ld-key.seated, .ld-plate { transition: none; } }

/* ---------- MOVIMIENTOS GLOBALES · RESUMEN ------------------------------------ */
.mv-sec { margin-top: 22px; }
.mv-title { font: 600 18px var(--font-serif); color: var(--gold-1); margin: 0 0 10px; }
.mv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mv-kpi { padding: 14px 16px; border: 1px solid var(--lux-line); border-radius: 12px; background: rgba(0,0,0,.35); }
.mv-kpi small { display: block; font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #A39A84; }
.mv-kpi b { display: block; font: 700 22px var(--font-serif); color: #fff; margin: 4px 0 2px; }
.mv-kpi span { font-size: 12px; color: #B9B09A; }
.mv-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }


/* ---------- MOVIMIENTOS GLOBALES: resumen compacto + detalle plegable ---------- */
.mv-kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mv-kpi b { font-size: 24px; }
.mv-kpi span { display: block; line-height: 1.45; }
.mv-det { margin-top: 10px; border: 1px solid var(--lux-line); border-radius: 12px; background: rgba(0,0,0,.30); overflow: hidden; }
.mv-det > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 13px 16px; user-select: none; }
.mv-det > summary::-webkit-details-marker { display: none; }
.mv-det > summary::before { content: '▸'; color: var(--gold-2); transition: transform .18s ease; }
.mv-det[open] > summary::before { transform: rotate(90deg); }
.mv-det > summary:hover { background: rgba(223,183,67,.07); }
.mv-det-t { font: 600 16px var(--font-serif); color: var(--gold-1); }
.mv-det-h { font-size: 12.5px; color: #B9B09A; }
.mv-det-body { padding: 4px 16px 16px; }
.mv-tablewrap { overflow-x: auto; max-width: 100%; }
.mv-tablewrap table { width: 100%; }

.ld-err { background: rgba(184,71,61,.14); border: 1px solid rgba(255,120,100,.6); color: #FFB4AA; border-radius: 8px; padding: 10px 12px; margin: 12px 0; font: 500 12.5px var(--font-mono); }
.ld-err.hidden { display: none; }