/* COVER SOURCING · mesa de operaciones. Una sola cara: oscura, como un terminal.
   Carga después de styles.css: hereda las @font-face y redefine los tokens. */
html[data-mesa] { color-scheme: dark; }
html[data-mesa] body {
  --g0:#0a1120; --g1:#0f1829; --g2:#152036; --g3:#1c2a45; --line:#243456; --line2:#2f4470;
  --tx:#e8eef8; --tx2:#aab6c9; --mute:#8593a8;
  --up:#35d49a; --dn:#ff6b6b; --act:#f08a4b; --warn:#f2c14e; --blue:#5aa9ff;
  --paper:var(--g0); --paper-2:var(--g1); --paper-3:var(--g2); --ink:var(--tx); --ink-soft:var(--tx2); --ink-faint:var(--mute);
  --rule:var(--line); --rule-soft:var(--line); --accent:var(--act); --accent-ink:#150a03; --mark:var(--act); --ok:var(--up); --warn:var(--warn);
  --fiordo:var(--up); --centolla:var(--act); --turba:var(--warn);
  background:var(--g0); color:var(--tx); font-family:var(--sans); font-size:var(--t-15); line-height:1.4;
}
.mesa-body .mapa { display:none; }
.mesa-body h1, .mesa-body h2, .mesa-body h3 { font-family:var(--display); }

/* --- barra superior --- */
.top { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem; min-height:56px; padding:0 1rem; background:var(--g1); border-bottom:1px solid var(--line); }
.top__lockup { font-family:var(--display); font-weight:700; letter-spacing:.12em; font-size:15px; white-space:nowrap; text-decoration:none; }
.top__lockup small { display:block; font-family:var(--sans); font-weight:400; letter-spacing:0; font-size:11px; color:var(--mute); margin-top:-2px; }
.top__sep { width:1px; height:28px; background:var(--line); flex:none; }
.top__ctx { font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top__ctx b { color:var(--tx); font-weight:600; }
.top__fill { flex:1; }
.top__lang { font-family:var(--mono); font-size:12px; text-decoration:none; color:var(--tx2); border:1px solid var(--line2); border-radius:5px; padding:.35rem .5rem; }
.top__acts { display:flex; gap:.5rem; }
.live { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:11px; color:var(--up); letter-spacing:.06em; white-space:nowrap; }
.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 rgba(53,212,154,.6); animation:pulso 1.6s infinite; }
@keyframes pulso { 70% { box-shadow:0 0 0 7px rgba(53,212,154,0); } 100% { box-shadow:0 0 0 0 rgba(53,212,154,0); } }
.reloj { font-family:var(--mono); font-size:12px; color:var(--tx2); white-space:nowrap; }

/* --- botones de la mesa --- */
.mesa-body .btn { min-height:36px; padding:0 .9rem; border:1px solid var(--line2); border-radius:6px; background:var(--g2); color:var(--tx); font-weight:600; font-size:13px; letter-spacing:.02em; text-transform:none; }
.mesa-body .btn:hover { border-color:var(--blue); background:var(--g3); color:var(--tx); }
.mesa-body .btn--principal, .mesa-body .btn--act { background:var(--act); border-color:var(--act); color:#150a03; }
.mesa-body .btn--principal:hover, .mesa-body .btn--act:hover { background:#ff9a5e; border-color:#ff9a5e; color:#150a03; }
.mesa-body .btn--up { background:rgba(53,212,154,.14); border-color:rgba(53,212,154,.5); color:var(--up); }
.mesa-body .btn--dn { background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.5); color:var(--dn); }
.mesa-body .btn--ghost { background:transparent; }
.mesa-body .btn--sm { min-height:30px; padding:0 .6rem; font-size:12px; }
.mesa-body summary.btn { display:inline-flex; }

/* --- cinta --- */
.cinta { height:34px; background:var(--g1); border-bottom:1px solid var(--line); overflow:hidden; position:relative; }
.cinta__pista { display:flex; gap:2.5rem; white-space:nowrap; padding:0 1rem; height:34px; align-items:center; width:max-content; animation:cinta 70s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state:paused; }
@keyframes cinta { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.cinta__it { font-family:var(--mono); font-size:12px; color:var(--tx2); }
.cinta__it b { color:var(--tx); font-weight:600; }
@media (prefers-reduced-motion:reduce) { .cinta__pista { animation:none; } .live::before { animation:none; } }

/* --- rejilla --- */
.mesa { display:grid; grid-template-columns:288px minmax(0,1fr) 300px; gap:1px; background:var(--line); }
.mesa > * { background:var(--g0); min-width:0; }
.col { display:flex; flex-direction:column; }
.panel { border-bottom:1px solid var(--line); }
.panel__h { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .9rem; border-bottom:1px solid var(--line); background:var(--g1); position:sticky; top:56px; z-index:5; }
.panel__h h2 { margin:0; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2); }
.panel__h .n { font-family:var(--mono); font-size:11px; color:var(--mute); white-space:nowrap; }
.panel__h .n--ojo { color:var(--act); }
.panel__cuerpo { padding:.75rem .9rem; }
.panel__cuerpo > p { margin:0 0 .75rem; color:var(--tx2); font-size:13px; }
.mesa-body .num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.up { color:var(--up); } .dn { color:var(--dn); } .warn { color:var(--warn); } .mute { color:var(--mute); }
.chip { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; padding:.1rem .35rem; border-radius:3px; border:1px solid var(--line2); color:var(--tx2); vertical-align:middle; white-space:nowrap; }
.chip--ent { color:var(--warn); border-color:rgba(242,193,78,.5); }
.chip--act { color:var(--act); border-color:rgba(240,138,75,.6); }
.chip--up { color:var(--up); border-color:rgba(53,212,154,.5); }
.chip--dn { color:var(--dn); border-color:rgba(255,107,107,.5); }
.cd { font-family:var(--mono); font-size:11px; color:var(--warn); white-space:nowrap; }
.cd--pronto { color:var(--dn); }
.cd--vencida { color:var(--mute); }

/* --- filas del mercado --- */
.fila { display:grid; grid-template-columns:1fr auto; gap:.1rem .75rem; padding:.6rem .9rem; border-bottom:1px solid var(--line); }
.fila--activa { background:var(--g2); box-shadow:inset 3px 0 0 var(--act); }
.fila__t { font-weight:600; font-size:13px; }
.fila__m { font-size:11.5px; color:var(--mute); grid-column:1; }
.fila__p { font-family:var(--mono); font-size:13px; text-align:right; font-weight:600; }
.fila__d { text-align:right; grid-column:2; }
.fila__acc { grid-column:1 / -1; margin-top:.35rem; }
.fila > details { grid-column:1 / -1; margin-top:.4rem; }
.fila > details > .form, .panel__cuerpo > details > .form { border:1px solid var(--line2); background:var(--g1); padding:.75rem .75rem .1rem; margin-top:.5rem; border-radius:6px; }

/* --- formularios en la mesa --- */
.mesa-body .field { margin-bottom:.8rem; }
.mesa-body .field label, .mesa-body .field legend { font-size:12px; color:var(--tx2); margin-bottom:.25rem; }
.mesa-body .field input:not([type=radio]):not([type=checkbox]), .mesa-body .field select, .mesa-body .field textarea { min-height:38px; padding:.4rem .6rem; font-size:14px; background:var(--g0); border:1px solid var(--line2); border-radius:5px; color:var(--tx); }
.mesa-body .field .hint { font-size:11.5px; }
.mesa-body .field--radios label { min-height:36px; }
.mesa-body .callout { border-radius:6px; font-size:13px; padding:.7rem .9rem; margin:.75rem 0; }
.mesa-body .callout--warning { border-left-color:var(--warn); }

/* --- gráfico --- */
.graf { padding:.9rem .9rem .5rem; }
.graf__cab { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.25rem; margin-bottom:.4rem; }
.graf__cab .graf__t { margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--tx); }
.graf__cab .graf__t small { display:block; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--mute); letter-spacing:0; margin-top:.15rem; }
.precio { font-family:var(--mono); font-size:26px; font-weight:600; line-height:1; }
.delta { font-family:var(--mono); font-size:13px; font-weight:600; }
.graf__fill { flex:1; }
.tabs { display:flex; gap:.25rem; flex-wrap:wrap; }
.tab { border:1px solid transparent; background:transparent; color:var(--mute); border-radius:5px; padding:.25rem .55rem; font-size:12px; font-weight:600; cursor:pointer; font-family:var(--sans); }
.tab[aria-selected="true"] { background:var(--g3); color:var(--tx); border-color:var(--line2); }
.graf__stats { display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; font-size:11.5px; color:var(--mute); margin:.25rem 0 .5rem; }
.graf__stats b { color:var(--tx2); font-family:var(--mono); font-weight:600; }
.velas { display:block; width:100%; height:auto; font-family:var(--mono); }
.velas__rejilla { stroke:var(--g3); stroke-width:1; }
.velas__eje { fill:var(--mute); font-size:10.5px; }
.velas__cuerpo--alza { fill:var(--up); } .velas__cuerpo--baja { fill:var(--dn); }
.velas__mejor { stroke:var(--tx); stroke-width:1.2; }
.velas__vol { fill:rgba(90,169,255,.5); } .velas__vol--corto { fill:rgba(90,169,255,.22); }
.velas__etiqueta { fill:var(--tx); } .velas__etiqueta-txt { fill:var(--g0); font-size:11px; font-weight:600; }
.velas__vacio { fill:var(--mute); font-family:var(--sans); font-size:12.5px; }
.leyenda { display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:11px; color:var(--mute); margin-top:.35rem; }
.leyenda i { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; margin-right:.3rem; }
[role=tabpanel][hidden] { display:none; }

/* --- tablas --- */
.mesa-body table { font-size:12.5px; }
.mesa-body th, .mesa-body td { padding:.45rem .65rem; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
.mesa-body th { font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); background:var(--g1); }
.mesa-body td.num, .mesa-body th.num { text-align:right; }
.mesa-body tr:hover td { background:var(--g1); }
.mesa-body td.msg { white-space:normal; min-width:10rem; max-width:18rem; color:var(--tx2); }
.mesa-body .scroller, .tabla { overflow-x:auto; }
.barra-ofr { position:relative; }
.barra-ofr::before { content:""; position:absolute; inset:4px auto 4px 0; width:var(--w); background:rgba(53,212,154,.12); border-radius:2px; }
.barra-ofr > * { position:relative; }
.sello { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--mono); font-size:11px; padding:.1rem .4rem; border-radius:3px; border:1px solid var(--line2); color:var(--tx2); white-space:nowrap; }
.sello--ok { color:var(--up); border-color:rgba(53,212,154,.5); }
.sello--dn { color:var(--dn); border-color:rgba(255,107,107,.5); }
.sello--warn { color:var(--warn); border-color:rgba(242,193,78,.5); }
.nota { padding:.5rem .9rem; font-size:11.5px; color:var(--mute); border-top:1px dashed var(--line); margin:0; }
.mesa-body .sobre { margin:0; }
.mesa-body .sobre > summary { border-radius:6px; border-color:var(--line2); font-size:13px; margin:.6rem .9rem; }
.mesa-body .sobre__contenido { margin-top:0; }

/* --- posición --- */
.pos { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.pos > div { background:var(--g0); padding:.7rem .9rem; min-width:0; }
.pos .l { font-size:11px; color:var(--mute); letter-spacing:.02em; }
.pos .v { font-family:var(--mono); font-size:19px; font-weight:600; line-height:1.2; margin-top:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos .s { font-size:11px; color:var(--mute); margin-top:.1rem; }
.acciones-mesa { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.75rem .9rem; border-bottom:1px solid var(--line); }
.acciones-mesa .btn { min-height:40px; }
.lista { list-style:none; margin:0; padding:0; }
.lista > li { display:grid; grid-template-columns:1fr auto; gap:.1rem .75rem; padding:.55rem .9rem; border-bottom:1px solid var(--line); align-items:center; }
.lista .t { font-weight:600; font-size:13px; }
.lista .m { font-size:11.5px; color:var(--mute); grid-column:1; }
.lista .sp { grid-row:1 / span 2; grid-column:2; }
.lista > li > details { grid-column:1 / -1; }
.chispa { width:72px; height:24px; fill:none; stroke-width:1.5; }
.chispa--alza { stroke:var(--up); } .chispa--baja { stroke:var(--dn); } .chispa--vacia { stroke:var(--line2); stroke-dasharray:2 3; }
.enlace-mesa { padding:.7rem .9rem; border-bottom:1px solid var(--line); }
.enlace-mesa .l { font-size:11px; color:var(--mute); }
.enlace-mesa .u { font-family:var(--mono); font-size:12px; word-break:break-all; color:var(--blue); margin:.2rem 0 .5rem; display:block; }
.mesa-body .fact { border-left-color:var(--line2); margin:.75rem 0; }
.mesa-body .fact__note { color:var(--tx2); font-size:12.5px; }
.mesa-body .legado { border-left-color:var(--up); color:var(--tx2); font-size:12.5px; }
.mesa-body .acciones { margin:.5rem 0; }
.mesa-body .cump { font-size:11.5px; }

/* --- barra inferior móvil y pie --- */
.mesa-body .barra { background:var(--g1); border-top-color:var(--line); }
.pie { padding:.9rem 1rem 2rem; font-size:12px; color:var(--mute); border-top:1px solid var(--line); background:var(--g1); }
.pie p { margin:0 0 .5rem; max-width:70rem; }
.pie a { color:var(--tx2); }

@media (max-width:1100px) {
  .mesa { grid-template-columns:1fr; }
  .col--der { order:-1; }
  .top .top__ctx, .top .top__sep:nth-of-type(2), .reloj, .top .live { display:none; }
  .panel__h { position:static; }
}
@media (max-width:640px) {
  .top { gap:.6rem; padding:0 .75rem; } .top__acts .btn { padding:0 .6rem; }
  .mesa-body th, .mesa-body td { padding:.4rem .5rem; }
  .graf__cab h1 { font-size:17px; } .precio { font-size:22px; }
}
.mesa-body :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* En el teléfono la densidad de escritorio no sirve: todo control vuelve a 44 px. */
@media (max-width:640px) {
  .mesa-body .btn, .mesa-body .btn--sm, .mesa-body summary.btn, .tab, .top__lang { min-height:44px; }
  .mesa-body .btn--sm { padding:0 .8rem; font-size:13px; }
  .cinta { height:40px; } .cinta__pista { height:40px; }
  .fila { gap:.25rem .75rem; }
  .lista .sp { display:none; }
  .mesa-body .field input:not([type=radio]):not([type=checkbox]), .mesa-body .field select, .mesa-body .field textarea { min-height:44px; }
  .top__lockup { min-height:44px; display:inline-flex; flex-direction:column; justify-content:center; }
}

/* ===== FUEGO INDEX (comensal) con la piel de la mesa ===== */
.comensal { display:block; }
.mesa--dos { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:1px; background:var(--line); }
.mesa--dos > * { background:var(--g0); min-width:0; }
@media (max-width:1000px) { .mesa--dos { grid-template-columns:1fr; } }
.mesa-body .hero { border-bottom:0; padding:1.25rem .9rem .5rem; }
.mesa-body .hero__coord { color:var(--mute); margin-bottom:.5rem; }
.mesa-body .hero h1 { font-size:clamp(1.5rem,1.1rem+1.6vw,2.2rem); margin-bottom:.3em; letter-spacing:-.02em; }
.mesa-body .hero__lead { font-family:var(--sans); color:var(--tx2); font-size:15px; max-width:38rem; }
.mesa-body .section { padding:.75rem .9rem 1.25rem; border-bottom:0; }
.mesa-body .form { max-width:none; }
.mesa-body .callout--note { background:var(--g1); border-color:var(--line); border-left-color:var(--blue); }
.ubicacion { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 .2rem; }
.ubicacion__estado { margin:.35rem 0 0; font-size:12.5px; color:var(--tx2); }
.ubicacion__estado--ok { color:var(--up); }
.ubicacion__estado--error { color:var(--warn); }
.ubicacion__estado a { color:var(--blue); }
.mesa-body .cotizaciones { padding:0 .9rem 1rem; }
.mesa-body .cotizacion { border-color:var(--line); border-left:4px solid var(--act); background:var(--g1); border-radius:6px; }
.mesa-body .cotizacion__local a { color:var(--blue); }
.mesa-body .sello--si { color:var(--up); }
.mesa-body .legado { border-left-color:var(--up); }
.mesa-body .opciones > legend { color:var(--tx); }
.mesa-body .opcion__cuerpo { background:var(--g1); border-color:var(--line); color:var(--tx); border-radius:6px; }
.mesa-body .estado { background:var(--g1); border-color:var(--line); }
.mesa-body .fact__label { color:var(--mute); }
.mesa-body .fact__value { color:var(--tx); }
.mesa-body .enlace__url, .mesa-body .fact__value a { color:var(--blue); }
.mesa-body .hint { color:var(--mute); }
.mesa-body .respuesta { color:var(--tx); }
.pulso { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.pulso > div { background:var(--g0); padding:.6rem .9rem; }
.pulso .l { font-size:11px; color:var(--mute); }
.pulso .v { font-family:var(--mono); font-size:19px; font-weight:600; }
.locales-bolsa { list-style:none; margin:0; padding:0; }
.locales-bolsa li { display:grid; grid-template-columns:1fr auto; gap:.1rem .75rem; padding:.55rem .9rem; border-bottom:1px solid var(--line); align-items:center; }
.locales-bolsa .t { font-weight:600; font-size:13px; }
.locales-bolsa .t a { text-decoration:none; }
.locales-bolsa .m { font-size:11.5px; color:var(--mute); grid-column:1; }
.locales-bolsa .btn { grid-row:1 / span 2; grid-column:2; }

/* --- la ficha bursátil del local --- */
.ficha-local__cab { padding:1rem .9rem .75rem; border-bottom:1px solid var(--line); }
.ficha-local__cab h1 { margin:0 0 .35rem; font-size:clamp(1.5rem,1.1rem+1.6vw,2.2rem); letter-spacing:-.02em; }
.ficha-local__sellos { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .5rem; }
.ficha-local__meta { font-size:12.5px; color:var(--tx2); margin:0; }
.ficha-local__meta a { color:var(--blue); }
.datos { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.datos > div { background:var(--g0); padding:.6rem .9rem; }
.datos .l { font-size:11px; color:var(--mute); }
.datos .v { font-family:var(--mono); font-size:17px; font-weight:600; }
.datos .s { font-size:11px; color:var(--mute); }
.etiquetas { display:flex; flex-wrap:wrap; gap:.35rem; margin:.25rem 0 .5rem; }
.etiqueta { font-size:12px; padding:.2rem .55rem; border:1px solid var(--line2); border-radius:999px; color:var(--tx2); }
.mesa-body .velas--local .velas__vol { fill:rgba(240,138,75,.45); }

/* --- bloques de cupos --- */
.fila--bloque { box-shadow:inset 3px 0 0 var(--blue); }
.llenado { display:block; height:6px; background:var(--g3); border-radius:3px; overflow:hidden; margin:.3rem 0 .1rem; grid-column:1 / -1; }
.llenado > i { display:block; height:100%; width:var(--w); background:var(--up); }
.llenado > i.llenado--tomado { background:var(--warn); }
.tomas { list-style:none; margin:.35rem 0 0; padding:0; font-size:11.5px; color:var(--tx2); grid-column:1 / -1; }
.tomas li { padding:.15rem 0; border-top:1px dashed var(--line); }
.bloque-huesped { border-left:4px solid var(--blue); background:var(--g1); border-radius:6px; padding:1rem; margin:1rem 0; }
.bloque-huesped__quedan { font-family:var(--mono); font-size:13px; color:var(--warn); }
.bloque-huesped h2 { margin-top:0; }

/* El atributo hidden manda sobre cualquier display de la mesa. */
.mesa-body [hidden] { display:none !important; }