/* ==========================================================================
   BERNAL & OLIVEROS — ops.css  (cargar DESPUÉS de command.css y polish.css)
   Usa las clases reales de lockdown.js (ld-*) y app.js / ux-fixes.js (fd-*, lux-m-*).
   No necesita luxury-marble.css, madera.png ni marmolb.png.
   ========================================================================== */

#view-lockdown, #customerResult, .lux-matches {
  --o-gold-1: var(--gold-1, #E4CB96);
  --o-gold-2: var(--gold-2, #C8A45C);
  --o-gold-3: var(--gold-3, #7E6335);
  --o-line: rgba(200,164,92,.22);
  --o-line-2: rgba(200,164,92,.5);
  --o-ink: var(--ink, #E8E4DA);
  --o-soft: var(--ink-soft, #A9A89F);
  --o-faint: var(--ink-faint, #6E6D66);
  --o-green: #5DFFA6;
  --o-red: #FF5B4A;
  --o-mono: var(--font-mono, 'IBM Plex Mono', monospace);
}

/* ==========================================================================
   LOCKDOWN — sala de operaciones
   ========================================================================== */
.ld-wrap { position: relative; max-width: 1000px; }
.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(--o-mono); letter-spacing: .18em; padding: 9px 16px;
  border: 1px solid var(--o-line-2); border-radius: 2px; background: rgba(0,0,0,.5); color: var(--o-soft);
}
.ld-pill.ok { color: var(--o-green); border-color: rgba(93,255,166,.55); box-shadow: 0 0 18px rgba(93,255,166,.12); }
.ld-pill.on { color: var(--o-red); border-color: rgba(255,91,74,.8); box-shadow: 0 0 22px rgba(255,91,74,.3); animation: ldBlink 1s steps(2) infinite; }
@keyframes ldBlink { 50% { opacity: .45; } }

/* marco HUD con esquinas */
.ld-stage {
  position: relative; padding: 30px;
  background:
    linear-gradient(rgba(93,255,166,.035) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(120% 90% at 50% 0%, #0E1612 0%, #050806 70%);
  border: 1px solid rgba(93,255,166,.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 0 60px rgba(0,0,0,.6);
  overflow: hidden;
}
.ld-stage::before, .ld-stage::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; border: 2px solid var(--o-green); opacity: .8;
}
.ld-stage::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.ld-stage::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
/* barrido de radar */
.ld-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; top: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(93,255,166,.06), transparent);
  animation: ldSweep 6s linear infinite;
}
@keyframes ldSweep { from { transform: translateY(-100px); } to { transform: translateY(640px); } }

.ld-step { position: relative; z-index: 2; }
.ld-step.hidden { display: none; }

/* terminal de acceso */
.ld-term {
  min-height: 92px; margin-bottom: 18px; padding: 14px 16px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(93,255,166,.2); border-left: 3px solid var(--o-green);
  font: 500 13px/1.8 var(--o-mono); letter-spacing: .04em; color: #8FE8B6; text-shadow: 0 0 8px rgba(93,255,166,.4);
}
.ld-line:last-child::after { content: "▮"; margin-left: 4px; animation: ldBlink 1s steps(2) infinite; }

#view-lockdown .field label {
  display: block; margin-bottom: 6px; font: 600 10.5px var(--o-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--o-faint);
}
#view-lockdown .field label::before { content: "> "; color: var(--o-gold-2); }
#view-lockdown .field-shell {
  background: #020504; border: 1px solid rgba(93,255,166,.28); border-radius: 2px;
}
#view-lockdown .field-shell:focus-within { border-color: var(--o-gold-2); box-shadow: 0 0 0 1px var(--o-gold-2), 0 0 20px rgba(200,164,92,.18); }
#view-lockdown .field-shell input { font-family: var(--o-mono); letter-spacing: .18em; color: #8FE8B6; caret-color: var(--o-gold-2); }
.ld-err {
  margin: 12px 0; padding: 10px 14px; font: 500 12.5px var(--o-mono); color: #FF9A8F;
  border: 1px solid rgba(255,91,74,.5); border-left: 3px solid var(--o-red); background: rgba(255,91,74,.07);
}
.ld-err.hidden { display: none; }
#view-lockdown .btn { margin-top: 12px; border-radius: 2px; font-family: var(--o-mono); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }

/* barra de código + anillo (tamaño fijo, esto arregla el círculo negro) */
.ld-codebar {
  display: flex; align-items: center; gap: 20px; padding: 14px 20px;
  background: rgba(0,0,0,.55); border: 1px solid var(--o-line-2); border-left: 3px solid var(--o-gold-2);
}
.ld-ring { width: 56px; height: 56px; flex: 0 0 56px; transform: rotate(-90deg); }
.ld-ring circle { fill: none; stroke-width: 3; }
.ld-ring .bg { stroke: rgba(200,164,92,.18); }
.ld-ring .fg { stroke: var(--o-gold-2); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 5px rgba(200,164,92,.6)); }
.ld-codelabel { font: 600 10px var(--o-mono); letter-spacing: .2em; color: var(--o-faint); }
.ld-code { font: 700 34px var(--o-mono); letter-spacing: .16em; color: var(--o-gold-1); text-shadow: 0 0 16px rgba(200,164,92,.45); }
.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: 700 22px var(--o-mono); color: var(--o-ink); letter-spacing: .08em; }

/* consola: llave → cerradura → botón */
.ld-console { display: grid; grid-template-columns: 1.15fr .85fr 1.1fr; gap: 20px; align-items: center; margin-top: 20px; min-height: 240px; }
.ld-dock { position: relative; height: 140px; display: flex; flex-direction: column; justify-content: center; }
.ld-key { width: 150px; cursor: grab; position: relative; z-index: 6; outline: none; filter: drop-shadow(0 10px 14px rgba(0,0,0,.75)); transition: filter .2s; }
.ld-key svg { display: block; width: 100%; height: auto; }
.ld-key:hover, .ld-key:focus-visible { filter: drop-shadow(0 0 16px rgba(200,164,92,.7)) drop-shadow(0 10px 14px rgba(0,0,0,.75)); }
.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: 14px; font: 500 11.5px var(--o-mono); letter-spacing: .06em; color: var(--o-soft); }

.ld-lock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ld-plate {
  position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #5b5036, #1c160c 72%);
  border: 3px solid var(--o-gold-3);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.8), 0 0 0 6px rgba(0,0,0,.55), 0 0 0 7px rgba(200,164,92,.25);
  transition: transform .6s cubic-bezier(.3,.9,.3,1), box-shadow .3s;
}
/* anillo de marcas tipo dial */
.ld-plate::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(200,164,92,.55) 0 1.2deg, transparent 1.2deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 7px) , #000 calc(100% - 7px));
          mask: radial-gradient(circle, transparent 0 calc(100% - 7px), #000 calc(100% - 7px));
}
/* mira que gira */
.ld-plate::after {
  content: ""; position: absolute; inset: -30px; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(93,255,166,.35); animation: ldSpin 24s linear infinite;
}
@keyframes ldSpin { to { transform: rotate(360deg); } }
.ld-lock.near .ld-plate { box-shadow: inset 0 4px 12px rgba(0,0,0,.8), 0 0 0 6px rgba(0,0,0,.55), 0 0 36px rgba(200,164,92,.55); }
.ld-lock.near .ld-plate::after { border-color: var(--o-gold-2); animation-duration: 3s; }
.ld-lock.turned .ld-plate { transform: rotate(90deg); }
.ld-lock.turned .ld-plate::after { border-color: rgba(93,255,166,.7); }
.ld-hole { position: relative; width: 18px; height: 48px; border-radius: 9px; background: #030201; box-shadow: inset 0 0 8px #000; }
.ld-hole::before { content: ""; position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #030201; }
.ld-led { width: 12px; height: 12px; border-radius: 50%; background: #5a1a14; box-shadow: 0 0 10px rgba(255,60,40,.7); transition: all .3s; }
.ld-led.go { background: #3CFF9A; box-shadow: 0 0 16px #3CFF9A; }
.ld-lockl { font: 600 10px var(--o-mono); letter-spacing: .28em; color: var(--o-faint); }

/* compartimento del botón con cubierta de peligro */
.ld-bay {
  position: relative; height: 180px; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #0F0B08, #050302); border: 1px solid var(--o-line-2);
  box-shadow: inset 0 0 36px rgba(0,0,0,.85);
}
.ld-cover {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #151515 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(--o-mono); letter-spacing: .24em; padding: 7px 16px; border: 1px solid #FF8A7E; }
.ld-cover.open { transform: perspective(500px) rotateX(-100deg); opacity: 0; pointer-events: none; }
.ld-big {
  width: 128px; height: 128px; border-radius: 50%; border: 6px solid #3a0d09; display: grid; place-items: center; text-align: center;
  font: 800 11.5px/1.3 var(--o-mono); letter-spacing: .1em; color: #fff; cursor: pointer; transition: transform .1s, filter .3s;
}
.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 34px rgba(255,50,30,.4); }
.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 34px rgba(60,255,150,.35); }
.ld-big:disabled { filter: grayscale(.9) brightness(.4); 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); }
@keyframes ldPulse { 50% { filter: brightness(1.2); } }

#ldReasonBox { margin-top: 18px; }

/* pantalla completa al activar / restablecer */
.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,.9), rgba(10,0,0,.97)); animation: ldFlash .5s steps(2) 6; }
.ld-overlay.green { background: radial-gradient(circle, rgba(0,90,50,.88), 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 { position: relative; font: 800 clamp(30px, 6vw, 64px) var(--o-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 { position: relative; margin-top: 14px; font: 500 15px var(--o-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: 800px) {
  .ld-console { grid-template-columns: 1fr; justify-items: center; }
  .ld-stage { padding: 18px; }
  .ld-code { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-wrap::after, .ld-plate::after, .ld-overlay.red, .ld-ov-title, .ld-big:not(:disabled), .ld-pill.on, .ld-line:last-child::after { animation: none; }
  .ld-cover, .ld-key.seated, .ld-plate { transition: none; }
}

/* ==========================================================================
   CLIENTES — selector de cuentas (pestañas de carpeta)
   ========================================================================== */
.lux-matches { margin: 0 0 -1px; }
.lux-m-head { font: 600 11px var(--o-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--o-gold-2); }
.lux-m-hint { margin: 4px 0 14px; font-size: 12.5px; color: var(--o-soft); }
.lux-m-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.lux-m-card {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; min-width: 250px; max-width: 320px; flex: 1 1 250px;
  padding: 14px 16px 12px; position: relative;
  background: #0A0D10; border: 1px solid var(--o-line); border-top: 3px solid rgba(200,164,92,.3);
  border-radius: 8px 8px 0 0; color: var(--o-soft); transition: background .15s, border-color .15s, transform .15s;
}
.lux-m-card:hover { background: #10151A; border-top-color: var(--o-gold-2); transform: translateY(-2px); }
.lux-m-card:focus-visible { outline: 1px solid var(--o-gold-2); outline-offset: 2px; }
.lux-m-card.sel { background: var(--glass-bg, #11151A); border-color: var(--o-line-2); border-top-color: var(--o-gold-1); color: var(--o-ink); padding-bottom: 14px; }
.lux-m-card.sel::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--glass-bg, #11151A); }
.lux-m-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.lux-m-top strong { font-size: 13.5px; font-weight: 600; color: var(--o-ink); }
.lux-m-tag { font: 700 9.5px var(--o-mono); letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--o-line-2); color: var(--o-gold-2); border-radius: 2px; }
.lux-m-line { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; margin: 3px 0; }
.lux-m-line span { color: var(--o-faint); flex: none; font-family: var(--o-mono); letter-spacing: .06em; }
.lux-m-line b { font-weight: 500; text-align: right; word-break: break-word; color: inherit; font-size: 11.5px; }
.lux-m-flag { margin-top: 8px; font: 600 10.5px var(--o-mono); letter-spacing: .06em; text-transform: uppercase; color: #F4A59C; }
.lux-result-bar { margin-bottom: 8px; }

/* ==========================================================================
   CLIENTES — documentos adjuntos en carpeta
   ========================================================================== */
.fd-wrap { margin: 34px 0 6px; }
.fd-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--o-line); }
.fd-head h3 { margin: 0; font: 600 12px var(--o-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--o-gold-2); }
.fd-count { font: 700 11px var(--o-mono); padding: 3px 10px; border: 1px solid var(--o-line-2); border-radius: 999px; color: var(--o-gold-1); }
.fd-head-ic { position: relative; flex: none; width: 24px; height: 17px; border-radius: 2px 4px 4px 4px; background: linear-gradient(#E4CB96, #B8892A); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.fd-head-ic::before { content: ""; position: absolute; left: 0; top: -5px; width: 10px; height: 6px; border-radius: 3px 3px 0 0; background: #E4CB96; }

.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 24px; margin-top: 30px; }
.fd-folder { position: relative; padding-top: 28px; transition: transform .25s ease; }
/* lomo trasero */
.fd-folder::after { content: ""; position: absolute; left: 8px; right: -7px; top: 36px; bottom: -7px; z-index: 0; border-radius: 0 12px 12px 12px; background: #1d1608; border: 1px solid rgba(200,164,92,.2); }
.fd-folder:hover { transform: translateY(-3px); }
/* pestaña */
.fd-tab {
  position: absolute; z-index: 3; top: 0; left: 0; max-width: 66%; padding: 7px 18px 8px 14px; border-radius: 10px 10px 0 0;
  font: 700 10.5px var(--o-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #241905; background: linear-gradient(#EBD08A, #C8A45C); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/* hoja que asoma */
.fd-paper {
  position: absolute; z-index: 1; left: 14px; right: 16px; top: 18px; height: 58px; padding: 20px 12px 0; border-radius: 5px 5px 0 0;
  background: linear-gradient(#F6F1E2, #DDD4BA); box-shadow: 0 -1px 4px rgba(0,0,0,.4); transition: transform .28s cubic-bezier(.3,.9,.3,1);
}
.fd-paper i { display: block; height: 2px; margin: 0 0 5px; border-radius: 2px; background: rgba(60,45,20,.22); }
.fd-paper i:nth-child(2) { width: 70%; }
.fd-paper i:nth-child(3) { width: 48%; }
.fd-folder:hover .fd-paper, .fd-folder:focus-within .fd-paper { transform: translateY(-12px); }
/* cuerpo */
.fd-body {
  position: relative; z-index: 2; padding: 18px 18px 16px; border-radius: 0 12px 12px 12px;
  background: linear-gradient(165deg, #1A1D22, #0E1013 80%); border: 1px solid var(--o-line-2);
  box-shadow: 0 14px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.fd-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 0 12px 0 0; background: linear-gradient(rgba(228,203,150,.16), transparent); pointer-events: none; }
.fd-name { font: 600 14px var(--font-body, Inter, sans-serif); color: var(--o-gold-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.fd-meta { font: 500 11.5px/1.6 var(--o-mono); color: var(--o-soft); margin-bottom: 12px; }
.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fd-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-btns .btn[disabled] { opacity: .4; cursor: not-allowed; }
.fd-locked .fd-tab { filter: saturate(.4) brightness(.85); }
.fd-locked .fd-body { border-color: var(--o-line); }
@media (prefers-reduced-motion: reduce) { .fd-folder, .fd-paper, .lux-m-card { transition: none; } }

/* ==========================================================================
   BOTÓN "CERRAR" — solo aparece cuando hay un resultado abierto
   ========================================================================== */
.lux-result-bar { display: flex; justify-content: flex-end; margin: 18px 0 10px; }
.lux-result-bar.lux-hide { display: none !important; }
.lux-close-btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid rgba(200,164,92,.5); border-radius: 3px; background: rgba(200,164,92,.06);
  color: var(--gold-1, #E4CB96); font: 600 11.5px var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase;
  transition: background .15s, border-color .15s;
}
.lux-close-btn .x { font-size: 13px; line-height: 1; opacity: .8; }
.lux-close-btn:hover { background: rgba(200,164,92,.16); border-color: var(--gold-2, #C8A45C); }
.lux-close-btn:focus-visible { outline: 1px solid var(--gold-2, #C8A45C); outline-offset: 2px; }

/* ==========================================================================
   NOTAS CONFIDENCIALES — texto legible
   ========================================================================== */
#supportNotesList .task-item {
  background: #141A20; border: 1px solid rgba(200,164,92,.28); border-left: 3px solid var(--gold-2, #C8A45C);
}
#supportNotesList .task-desc { color: #F1EDE2; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
#supportNotesList .task-meta {
  margin-top: 8px; color: var(--gold-1, #E4CB96); font: 500 11.5px var(--font-mono, monospace); letter-spacing: .04em;
}