/* MARKET DESK PRO — tema oscuro institucional. Sin dependencias. */
:root {
  --fondo: #0b1420;
  --panel: #121e2e;
  --panel2: #0f1926;
  --borde: #1e2c3f;
  --texto: #d7e1ee;
  --dim: #8298b0;
  --verde: #2fbf71;
  --rojo: #e4574f;
  --dorado: #d9a441;
  --azul: #3f8cff;
  --radio: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--fondo); color: var(--texto);
  font: 14.5px/1.5 system-ui, "Segoe UI", sans-serif; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; color: var(--texto); background: var(--panel2);
  border: 1px solid var(--borde); border-radius: 8px; padding: 6px 10px; }
input:focus, select:focus { outline: 1px solid var(--azul); }

/* ── Cabecera ── */
#topbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px;
  border-bottom: 1px solid var(--borde); background: var(--panel2);
  position: sticky; top: 0; z-index: 50; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 22px; color: var(--dorado); letter-spacing: -2px; }
.marca h1 { font-size: 17px; letter-spacing: 1.5px; }
.marca .sub { font-size: 11.5px; color: var(--dim); }
.cinta { display: flex; gap: 14px; flex: 1; overflow-x: auto;
  padding: 2px 6px; white-space: nowrap; scrollbar-width: thin; }
.cinta .idx { display: inline-flex; gap: 6px; align-items: baseline;
  font-variant-numeric: tabular-nums; cursor: pointer; }
.cinta .idx:hover { text-decoration: underline; }
.cinta .sym { color: var(--dim); font-size: 12px; }
.cinta .px { font-weight: 600; }
.acciones { display: flex; align-items: center; gap: 12px; }
.salud { font-size: 15px; }
.salud.ok { color: var(--verde); } .salud.aviso { color: var(--dorado); }
.salud.mal { color: var(--rojo); }
#btn-rescan { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 12px; }
#btn-rescan:hover { border-color: var(--azul); }
#btn-rescan.girando { opacity: .6; pointer-events: none; }

/* ── Banner de honestidad ── */
#banner-honestidad { display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 18px; font-size: 12.5px; color: #e8d9b0;
  background: #221c10; border-bottom: 1px solid #3a3120; }
#banner-honestidad button { font-size: 16px; color: var(--dim); }
#banner-honestidad.oculto { display: none; }

/* ── Toolbar ── */
#toolbar { padding: 10px 18px 6px; display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--borde); background: var(--fondo);
  position: sticky; top: 57px; z-index: 40; }
#toolbar .fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grupo { display: flex; gap: 6px; align-items: center; }
.chip, .tab { border: 1px solid var(--borde); background: var(--panel2);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--dim); }
.chip:hover, .tab:hover { border-color: var(--azul); color: var(--texto); }
.chip.activo, .tab.activo { background: var(--azul); border-color: var(--azul);
  color: #fff; }
.tab.deshabilitado { opacity: .45; cursor: not-allowed; }
#buscador { min-width: 220px; flex: 1; max-width: 340px; }
.contador { color: var(--dim); font-size: 12.5px; margin-left: auto; }

/* ── Grid de tarjetas ── */
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
  gap: 12px; padding: 14px 18px; }
.tarjeta { min-width: 0; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 14px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px; transition: border-color .12s; }
.tarjeta:hover { border-color: var(--azul); }
.t-fila1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.t-sym { font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.t-nombre { color: var(--dim); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.t-precio { font-variant-numeric: tabular-nums; font-weight: 600; }
.t-cambio { font-size: 12px; font-variant-numeric: tabular-nums; }
.pos { color: var(--verde); } .neg { color: var(--rojo); } .neu { color: var(--dim); }
.t-fila2 { display: flex; align-items: center; gap: 8px; }
.badge { border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.badge.long { background: rgba(47,191,113,.15); color: var(--verde); }
.badge.short { background: rgba(228,87,79,.15); color: var(--rojo); }
.badge.neutro { background: rgba(130,152,176,.12); color: var(--dim); }
.t-setup { font-size: 12px; color: var(--texto); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-razones { color: var(--dim); font-size: 11.5px; min-height: 30px; }
.t-fila3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.t-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.mini-chip { font-size: 11.5px; border: 1px solid var(--borde); color: var(--dim);
  border-radius: 999px; padding: 1px 7px; }
.t-spark { flex-shrink: 0; }
.t-pie { display: flex; justify-content: space-between; color: var(--dim);
  font-size: 11.5px; border-top: 1px solid var(--borde); padding-top: 6px; }
#pie-grid { text-align: center; padding: 4px 0 18px; }
#paginador { display: inline-flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 8px 12px; }
#paginador button { background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 9px; padding: 9px 22px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
#paginador button:hover:not(:disabled) { border-color: var(--azul);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
#paginador button:disabled { opacity: .35; cursor: default; }
#pag-info { color: var(--dim); font-size: 12.5px; min-width: 120px; }
.oculto { display: none !important; }
footer { padding: 10px 18px 22px; color: var(--dim); font-size: 11.5px;
  border-top: 1px solid var(--borde); }

/* ── Modal ── */
#modal-fondo { position: fixed; inset: 0; background: rgba(4,8,14,.72);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px; }
#modal { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; width: min(1180px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; }
#modal-cabecera { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--borde); gap: 10px; flex-wrap: wrap; }
#m-simbolo { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
#m-nombre { color: var(--dim); margin-left: 8px; }
#m-chips { margin-left: 10px; }
#m-precio { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
#m-cambio { margin-left: 8px; font-variant-numeric: tabular-nums; }
#modal-cerrar { font-size: 22px; color: var(--dim); margin-left: 14px; }
#modal-cerrar:hover { color: var(--texto); }
#modal-cuerpo { display: flex; gap: 0; overflow: auto; }
#m-col-grafico { flex: 1.5; padding: 14px 18px; min-width: 380px; }
#m-velas { width: 100%; height: auto; background: var(--panel2);
  border: 1px solid var(--borde); border-radius: 8px; }
#m-metricas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.metrica { background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.metrica b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.metrica span { color: var(--dim); font-size: 11.5px; }
#m-col-hallazgos { flex: 1; padding: 14px 18px; border-left: 1px solid var(--borde);
  min-width: 300px; }
#m-agregado { font-size: 13.5px; margin-bottom: 10px; }
.hallazgo { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px;
  margin-bottom: 8px; background: var(--panel2); }
.h-fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.h-titulo { font-size: 12.5px; }
.h-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.h-meta { color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.h-evidencia { color: var(--dim); font-size: 11.5px; font-family: Consolas, monospace;
  margin-top: 3px; word-break: break-all; }
/* ── Mesa de opciones (Fase 2) ── */
.op-panel { margin-top: 14px; border: 1px solid var(--dorado);
  border-radius: 10px; padding: 12px 14px; background: #15130b; }
.op-panel h3 { font-size: 14px; margin-bottom: 8px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.op-spot { color: var(--dim); font-weight: 400; font-size: 12px; }
.op-chip { border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; }
.op-iv-alta { background: rgba(228,87,79,.18); color: var(--rojo); }
.op-iv-media { background: rgba(217,164,65,.18); color: var(--dorado); }
.op-iv-baja { background: rgba(47,191,113,.18); color: var(--verde); }
.op-fuente { color: var(--dim); font-size: 11.5px; font-weight: 400; }
.op-cargando { color: var(--dim); font-size: 12.5px; padding: 8px 0; }
.op-error { color: var(--rojo); font-size: 12.5px; }
.op-config { font-size: 12.5px; color: var(--texto); }
.op-obsoleto { background: color-mix(in srgb, var(--ambar, #d9a441) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambar, #d9a441) 45%, transparent);
  border-radius: 8px; padding: 7px 10px; margin: 6px 0; font-size: 12px; }
.op-reintentar { background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; padding: 8px 18px;
  margin-top: 8px; cursor: pointer; font-weight: 600; }
.op-reintentar:hover { border-color: var(--azul); }
.op-config ol { margin: 8px 0 0 18px; }
.op-config code { background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }
.op-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.op-card { border: 1px solid var(--borde); border-radius: 8px;
  padding: 9px 11px; background: var(--panel2); }
.op-card.op-top { border-color: var(--dorado); }
.op-fila1 { display: flex; justify-content: space-between; align-items: baseline; }
.op-nombre { font-size: 13px; }
.op-score { font-weight: 800; color: var(--dorado); font-variant-numeric: tabular-nums; }
.op-patas { font-family: Consolas, monospace; font-size: 11.5px;
  color: var(--azul); margin: 4px 0; }
.op-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 4px 10px; margin: 6px 0; }
.op-num { display: flex; justify-content: space-between; font-size: 11px;
  border-bottom: 1px dotted var(--borde); padding-bottom: 2px; }
.op-num span { color: var(--dim); }
.op-num b { font-variant-numeric: tabular-nums; }
.op-razones { color: var(--dim); font-size: 11px; }
.op-avisos { color: #cdb98a; font-size: 11.5px; margin-top: 4px; }
.op-descartadas { margin-top: 8px; font-size: 11px; color: var(--dim); }
.op-descartadas summary { cursor: pointer; }
.op-descartadas div { padding: 2px 0 0 8px; }
.op-pie { margin-top: 8px; font-size: 11px; color: var(--dim);
  border-top: 1px solid var(--borde); padding-top: 6px; }

/* ── Calendario y noticias (Fase 3) ── */
#btn-calendario { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 12px; display: inline-flex;
  align-items: center; gap: 8px; }
#btn-calendario:hover { border-color: var(--dorado); }
.badge-evento { background: rgba(228,87,79,.16); color: var(--rojo);
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700;
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cal-fondo { position: fixed; inset: 0; background: rgba(4,8,14,.72);
  display: flex; align-items: center; justify-content: center; z-index: 90;
  padding: 20px; }
#cal-panel { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; width: min(1100px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; }
#cal-cabecera { display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 8px; flex-wrap: wrap; }
#cal-cabecera h2 { font-size: 17px; }
#cal-resumen { display: flex; gap: 14px; flex: 1; color: var(--dim);
  font-size: 12px; flex-wrap: wrap; }
#cal-cerrar { font-size: 22px; color: var(--dim); }
#cal-cerrar:hover { color: var(--texto); }
#cal-tabs { display: flex; gap: 6px; align-items: center;
  padding: 4px 18px 10px; border-bottom: 1px solid var(--borde); }
.cal-filtro { margin-left: auto; color: var(--dim); font-size: 12px;
  display: flex; gap: 6px; align-items: center; cursor: pointer; }
#cal-cuerpo { display: flex; gap: 0; overflow: auto; }
#cal-eventos { flex: 1.2; padding: 12px 18px; min-width: 340px; }
.cal-dia { margin-bottom: 12px; }
.cal-fecha { font-weight: 700; font-size: 12.5px; color: var(--dorado);
  border-bottom: 1px solid var(--borde); padding-bottom: 3px; margin-bottom: 5px; }
.cal-evento { display: flex; gap: 8px; align-items: baseline;
  padding: 3px 6px; border-radius: 6px; font-size: 12.5px; }
.cal-evento.imp-alto { background: rgba(228,87,79,.08); }
.cal-evento.imp-medio { background: rgba(217,164,65,.06); }
.cal-hora { color: var(--dim); font-size: 11px; min-width: 52px;
  font-variant-numeric: tabular-nums; }
.cal-nombre { flex-shrink: 0; }
.cal-detalle { color: var(--dim); font-size: 11px; }
.cal-sim { color: var(--azul); cursor: pointer; font-family: Consolas, monospace; }
.cal-sim:hover { text-decoration: underline; }
.cal-mas { color: var(--dim); }
.cal-vacio { color: var(--dim); font-size: 12.5px; padding: 14px 4px; }
#cal-noticias { flex: 1; padding: 12px 18px; border-left: 1px solid var(--borde);
  min-width: 320px; }
#cal-noticias h3 { font-size: 13.5px; margin-bottom: 8px; }
.cal-noticia { display: block; border: 1px solid var(--borde); border-radius: 8px;
  padding: 7px 9px; margin-bottom: 7px; background: var(--panel2);
  text-decoration: none; color: var(--texto); }
.cal-noticia:hover { border-color: var(--azul); }
.cal-noticia.imp-alto { border-left: 3px solid var(--rojo); }
.cal-noticia.imp-medio { border-left: 3px solid var(--dorado); }
.cal-imp { font-weight: 800; color: var(--dorado); margin-right: 8px;
  font-variant-numeric: tabular-nums; }
.cal-tit { font-size: 12px; }
.cal-meta { display: block; color: var(--dim); font-size: 11.5px; margin-top: 3px; }
#cal-pie { padding: 8px 18px 12px; color: var(--dim); font-size: 11px;
  border-top: 1px solid var(--borde); }
.m-noticias { margin-top: 12px; }
.m-noticias h4 { font-size: 12.5px; margin-bottom: 6px; }

/* ── Panel del laboratorio (Fase 4) ── */
#btn-lab { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 12px; }
#btn-lab:hover { border-color: var(--verde); }

/* ── Ticker de eventos próximos (barra superior) ── */
#badge-evento { display: inline-block; max-width: 300px; overflow: hidden;
  white-space: nowrap; vertical-align: middle; }
#badge-evento i { display: inline-block; font-style: normal;
  text-overflow: ellipsis; overflow: hidden; max-width: 296px;
  white-space: nowrap; transition: transform .33s ease, opacity .33s ease; }
#badge-evento i.t-sale { transform: translateX(-14px); opacity: 0; }
#badge-evento i.t-entra { animation: ticker-entra .38s ease; }
@keyframes ticker-entra {
  from { transform: translateX(14px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── Sinopsis en español de noticias ── */
.cal-sinopsis { display: block; font-size: 11.5px; color: #cdb98a;
  margin-top: 2px; line-height: 1.35; }

/* ── Hallazgos legibles (lectura intuitiva) ── */
.h-conviccion { font-size: 11px; color: var(--dim); border: 1px solid var(--borde);
  border-radius: 99px; padding: 2px 10px; margin-left: 8px; vertical-align: 2px; }
.h-mejor { font-size: 11.5px; color: var(--texto); margin-top: 6px;
  font-weight: 400; }
.h-dir { font-size: 12px; width: 16px; display: inline-block; }
.h-fuerza { font-size: 9px; letter-spacing: .08em; border-radius: 99px;
  padding: 2px 8px; margin-left: auto; }
.h-fuerza.pos { background: rgba(47,191,113,.14); color: var(--verde); }
.h-fuerza.neg { background: rgba(228,87,79,.14); color: var(--rojo); }
.h-fuerza.neu { background: rgba(130,152,176,.14); color: var(--dim); }
.h-prob { margin: 5px 0 2px; }
.h-barra { position: relative; height: 6px; border-radius: 99px;
  background: var(--panel2); overflow: hidden; margin-bottom: 3px; }
.h-barra i { display: block; height: 100%; }
.h-barra i.ok { background: var(--verde); }
.h-barra i.prueba { background: var(--dorado); }
.h-barra i.mal { background: var(--rojo); }
.h-barra s { position: absolute; top: 0; width: 1px; height: 100%;
  background: rgba(255,255,255,.35); }
.h-prob-txt { font-size: 11px; }
.h-prob-txt.ok { color: var(--verde); }
.h-prob-txt.prueba { color: var(--dorado); }
.h-prob-txt.mal { color: var(--rojo); }
.h-prob-txt.sin { color: var(--dim); }
.h-n { color: var(--dim); font-size: 11px; }

/* ── Niveles GEX en la mesa de opciones ── */
.op-niveles { background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 9px; padding: 8px 12px; font-size: 12px; margin: 8px 0;
  font-variant-numeric: tabular-nums; }
.op-niveles-off { color: var(--dim); font-size: 11px; }
.op-niveles-lectura { color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.op-gamma { border-radius: 99px; padding: 1px 9px; font-size: 11px;
  letter-spacing: .05em; margin-left: 6px; }
.op-gamma.positivo { background: rgba(47,191,113,.15); color: var(--verde); }
.op-gamma.negativo { background: rgba(228,87,79,.15); color: var(--rojo); }

/* ── Eventos del calendario del mercado (Fase 6) ── */
.cal-evento.cal-mercado { background: rgba(217,164,65,.07);
  border-left: 2px solid var(--dorado); }

/* ── Botones protagonistas de la barra (Fase 10) ── */
#btn-bitacora, #btn-lab, #btn-calendario, #btn-rescan, #btn-tema {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 15px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  position: relative; }
#btn-bitacora { border-color: color-mix(in srgb, var(--dorado) 55%, var(--borde));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dorado) 14%, var(--panel)), var(--panel2));
  color: var(--texto); font-size: 14px; }
#btn-bitacora b { color: var(--dorado); letter-spacing: .01em; }
#btn-bitacora:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--dorado) 35%, transparent);
  transform: translateY(-1px); }
#btn-lab { border-color: color-mix(in srgb, var(--verde) 40%, var(--borde)); }
#btn-lab:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--verde) 28%, transparent);
  transform: translateY(-1px); }
#btn-calendario:hover, #btn-rescan:hover, #btn-tema:hover { transform: translateY(-1px); }
.punto { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--rojo);
  box-shadow: 0 0 0 2px var(--fondo), 0 0 9px var(--rojo);
  animation: punto-late 2s infinite; }
@keyframes punto-late { 50% { transform: scale(1.25); } }
.lab-resumen { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 12px; }
.lab-kpi { background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 14px; display: flex; gap: 12px;
  align-items: center; }
.lab-kpi b { font-size: 24px; }
.lab-kpi span { font-size: 11.5px; color: var(--dim); line-height: 1.3; }
.lab-kpi.ok b { color: var(--verde); } .lab-kpi.mal b { color: var(--rojo); }
.lab-kpi.prueba b { color: var(--dorado); } .lab-kpi.cand b { color: var(--azul); }
.lab-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lab-chip { background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 99px; padding: 3px 12px; font-size: 11.5px; color: var(--dim);
  cursor: pointer; }
.lab-chip.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.lab-lista { display: flex; flex-direction: column; gap: 6px; }
.lab-fila { display: grid; grid-template-columns: 290px 1fr 110px; gap: 14px;
  align-items: center; background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 9px; padding: 8px 13px; }
.lab-fila.lab-ADOPTADO { border-left: 3px solid var(--verde); }
.lab-fila.lab-EN_PRUEBA { border-left: 3px solid var(--dorado); }
.lab-fila.lab-DESCARTADO { border-left: 3px solid var(--rojo); opacity: .75; }
.lab-c1 b { font-size: 12.5px; display: block; }
.lab-cod { font-size: 11.5px; color: var(--dim); letter-spacing: .03em; }
.lab-cand { margin-right: 4px; }
.lab-promo { display: inline-block; background: rgba(47,191,113,.15);
  color: var(--verde); font-size: 11.5px; border-radius: 99px; padding: 2px 9px;
  margin-left: 8px; letter-spacing: .05em; font-weight: 700; }
.lab-nums { font-size: 11.5px; color: var(--dim); }
.lab-c3 { font-size: 11px; font-weight: 700; text-align: right;
  letter-spacing: .04em; }
.lab-c3.ok { color: var(--verde); } .lab-c3.mal { color: var(--rojo); }
.lab-c3.prueba { color: var(--dorado); }

/* ── Pestaña Fundamental (Fase 6) ── */
#m-tabs { display: flex; gap: 8px; padding: 8px 18px 0; }
#m-fundamental { grid-column: 1 / -1; width: 100%; }
#mf-metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px; margin-bottom: 12px; }
#mf-negocio p { font-size: 12.5px; line-height: 1.55; color: var(--texto);
  background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 9px; padding: 10px 13px; }
.mf-fuente { font-size: 11px; color: var(--dim); margin: 6px 2px 12px; }
#mf-chat h3 { font-size: 13px; margin-bottom: 8px; }
#mf-msgs { max-height: 300px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; margin-bottom: 8px; }
.mf-msg { border-radius: 9px; padding: 8px 11px; font-size: 12.5px;
  line-height: 1.5; max-width: 92%; }
.mf-msg.usuario { background: rgba(63,140,255,.12);
  border: 1px solid rgba(63,140,255,.3); align-self: flex-end; }
.mf-msg.comite { background: var(--panel2); border: 1px solid var(--borde);
  align-self: flex-start; }
.mf-aviso { font-size: 12px; color: var(--dim); padding: 8px 4px; }
.mf-aviso a { color: var(--azul); }
#mf-entrada { display: flex; gap: 8px; align-items: flex-end; }
#mf-entrada textarea { flex: 1; background: var(--panel2);
  border: 1px solid var(--borde); border-radius: 8px; color: var(--texto);
  padding: 8px 10px; font: inherit; resize: vertical; }
#mf-pie { font-size: 11.5px; color: var(--dim); margin-top: 6px; }

/* ── Imperdibles (Fase 6) ── */
#imperdibles { padding: 10px 18px 2px; }
#imp-cabecera { display: flex; align-items: center; gap: 12px; }
#imp-titulo { font-size: 14.5px; font-weight: 700; color: var(--dorado); }
#imp-nota { font-size: 11px; color: var(--dim); flex: 1; }
#imp-plegar { background: transparent; border: 1px solid var(--borde);
  border-radius: 6px; color: var(--dim); cursor: pointer; padding: 1px 8px; }
#imp-lista { display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 6px; }
#imp-lista.plegado { display: none; }
.imp-card { min-width: 270px; max-width: 300px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; flex-shrink: 0; }
.imp-card:hover { border-color: var(--dorado); }
.imp-medido { border-left: 3px solid var(--verde); }
.imp-en_prueba { border-left: 3px solid var(--dorado); }
.imp-caida { border-left: 3px solid #e08b3d; }
.imp-movimiento { border-left: 3px solid var(--azul); }
.imp-fila1 { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.imp-sym { font-size: 14.5px; }
.imp-precio { margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--dim); }
.imp-precio i { font-style: normal; }
.imp-grado { font-size: 11.5px; letter-spacing: .06em; color: var(--dim); }
.imp-titulo2 { font-size: 12px; margin-top: 4px; }
.imp-detalle { font-size: 11.5px; color: var(--dim); margin-top: 2px;
  line-height: 1.35; }
.imp-estrategia { font-size: 11px; color: #cdb98a; margin-top: 5px; }
.imp-earn { color: var(--dorado); font-size: 11px; }

/* ── Favoritos (Fase 6) ── */
.t-fav { background: transparent; border: none; cursor: pointer;
  font-size: 14px; color: var(--dim); padding: 0 2px; line-height: 1; }
.t-fav:hover { color: var(--dorado); }
.t-fav.activo { color: var(--dorado); }
#m-fav { background: transparent; border: none; cursor: pointer;
  font-size: 20px; color: var(--dim); padding: 0 4px; vertical-align: middle; }
#m-fav:hover, #m-fav.activo { color: var(--dorado); }

/* ── Enlace a la bitácora (Fase 5) ── */
.op-abit { background: transparent; border: 1px solid var(--borde);
  border-radius: 7px; padding: 2px 8px; font-size: 13px; cursor: pointer;
  margin-left: auto; margin-right: 8px; }
.op-abit:hover { border-color: var(--dorado); }

#btn-bitacora { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 12px; font-size: 13.5px;
  color: var(--texto); text-decoration: none; }
#btn-bitacora:hover { border-color: var(--dorado); }
#lab-fondo { position: fixed; inset: 0; background: rgba(4,8,14,.72);
  display: flex; align-items: center; justify-content: center; z-index: 95;
  padding: 20px; }
#lab-panel { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; width: min(980px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; }
#lab-cabecera { display: flex; align-items: center; gap: 14px;
  padding: 14px 18px 8px; }
#lab-cabecera h2 { font-size: 16px; flex: 1; }
#lab-meta { color: var(--dim); font-size: 11.5px; }
#lab-cerrar { font-size: 22px; color: var(--dim); }
#lab-explica { padding: 4px 18px 10px; color: var(--dim); font-size: 11.5px;
  border-bottom: 1px solid var(--borde); }
#lab-tabla { overflow: auto; padding: 10px 18px 16px; }
.lab-t { width: 100%; border-collapse: collapse; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.lab-t th { text-align: left; color: var(--dim); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px;
  border-bottom: 1px solid var(--borde); position: sticky; top: -10px;
  background: var(--panel); }
.lab-t td { padding: 5px 8px; border-bottom: 1px solid var(--borde); }
.lab-t tr:hover td { background: var(--panel2); }
tr.lab-ADOPTADO td:first-child { border-left: 3px solid var(--verde); }
tr.lab-DESCARTADO td:first-child { border-left: 3px solid var(--rojo); }

/* ═══ PORTADA DE ACCESO (modelo v2) ═══════════════════════════════════════ */
#portada { position: fixed; inset: 0; z-index: 300; overflow: hidden;
  background: var(--fondo); transition: opacity .95s ease; }
#portada.saliendo { opacity: 0; pointer-events: none; }
#portada.saliendo .p-card { transform: translateY(-18px) scale(.97); opacity: 0; }

/* dashboard SIMULADO de fondo: sugiere vida sin revelar nada real */
.p-fondo { position: absolute; inset: -50px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  padding: 70px 30px; filter: blur(13px) brightness(.44) saturate(1.3);
  transform: scale(1.05); }
.pf-tarjeta { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; height: 128px; position: relative; overflow: hidden;
  padding: 12px; }
.pf-linea { height: 9px; border-radius: 5px; background: var(--panel2);
  margin-bottom: 9px; }
.pf-linea.corta { width: 55%; }
.pf-spark { position: absolute; bottom: 12px; left: 12px; right: 12px;
  height: 34px; border-radius: 6px; opacity: .8; }
.pf-spark.sube { background: linear-gradient(160deg, transparent 40%, rgba(47,191,113,.55)); }
.pf-spark.baja { background: linear-gradient(200deg, transparent 40%, rgba(228,87,79,.5)); }
.pf-tarjeta::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.06) 50%, transparent 58%);
  transform: translateX(-120%); animation: pf-brillo 5.2s infinite; }
.pf-tarjeta:nth-child(3n)::after { animation-delay: 1.4s; }
.pf-tarjeta:nth-child(3n+1)::after { animation-delay: 2.6s; }
@keyframes pf-brillo { 55% { transform: translateX(120%); } 100% { transform: translateX(120%); } }

/* viñeta + destello dorado lento */
.p-velo { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(4,7,14,.5) 58%, rgba(2,4,9,.92) 100%); }
.p-velo::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(115deg, transparent 44%, rgba(201,162,39,.07) 50%, transparent 56%);
  background-size: 280% 100%; animation: p-glint 13s ease-in-out infinite; }
@keyframes p-glint { 0% { background-position: 120% 0; } 55% { background-position: -60% 0; } 100% { background-position: -60% 0; } }

.p-centro { position: absolute; inset: 0; display: grid; place-items: center;
  padding: 18px; overflow-y: auto; }
.p-card { width: min(392px, 94vw); text-align: center;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--dorado, #c9a227) 38%, var(--borde));
  border-radius: 20px; padding: 30px 30px 20px;
  box-shadow: 0 26px 90px rgba(0,0,0,.6),
              0 0 0 1px rgba(201,162,39,.06),
              inset 0 1px 0 rgba(255,255,255,.05);
  animation: p-entrada .7s cubic-bezier(.2,.8,.25,1) both;
  transition: transform .8s ease, opacity .8s ease; }
@keyframes p-entrada { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.p-logo { font-size: 44px; color: var(--dorado, #c9a227); letter-spacing: -3px;
  line-height: 1; animation: p-latido 3.4s ease-in-out infinite; }
@keyframes p-latido {
  0%, 100% { text-shadow: 0 0 18px rgba(201,162,39,.25); }
  50% { text-shadow: 0 0 34px rgba(201,162,39,.55), 0 0 70px rgba(201,162,39,.18); } }
.p-titulo { font-size: 19px; font-weight: 800; letter-spacing: 4.5px;
  margin: 14px 0 3px; }
.p-titulo-mini { font-size: 16.5px; font-weight: 800; letter-spacing: 1.5px;
  margin: 12px 0 4px; }
.p-sub { font-size: 11.5px; color: var(--dim); margin-bottom: 20px; }
.p-texto { font-size: 12.5px; color: var(--texto); text-align: left;
  line-height: 1.55; margin: 12px 0 6px; }
.p-card form { display: flex; flex-direction: column; gap: 12px; }
.p-card label { text-align: left; font-size: 10.5px; color: var(--dim);
  display: flex; flex-direction: column; gap: 5px; letter-spacing: .4px;
  text-transform: uppercase; }
.p-card input { width: 100%; background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 11px; padding: 11px 13px;
  font-size: 14.5px; transition: border-color .18s, box-shadow .18s; }
.p-card input:focus { outline: none; border-color: var(--dorado, #c9a227);
  box-shadow: 0 0 0 3px rgba(201,162,39,.14); }
.p-check { flex-direction: row !important; align-items: center; gap: 8px !important;
  text-transform: none !important; font-size: 12px !important; cursor: pointer;
  color: var(--texto) !important; user-select: none; }
.p-check input { width: auto !important; accent-color: var(--dorado, #c9a227);
  transform: scale(1.15); cursor: pointer; }
.p-entrar { width: 100%; border: none; border-radius: 12px; padding: 12px;
  margin-top: 4px; font-size: 14px; font-weight: 800; letter-spacing: .6px;
  color: #131519; cursor: pointer;
  background: linear-gradient(135deg, #e2bc45, #c9a227 55%, #a8861f);
  box-shadow: 0 6px 22px rgba(201,162,39,.22);
  transition: transform .16s, box-shadow .16s, filter .16s; }
.p-entrar:hover { transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(201,162,39,.32); filter: brightness(1.05); }
.p-entrar:active { transform: translateY(0) scale(.99); }
.p-error { min-height: 18px; font-size: 12px; color: var(--rojo, #e4574f);
  margin-top: 10px; }
.p-links { display: flex; justify-content: center; gap: 18px;
  margin-top: 8px; font-size: 12.5px; }
.p-links a { color: var(--dorado, #c9a227); text-decoration: none;
  border-bottom: 1px solid transparent; }
.p-links a:hover { border-bottom-color: var(--dorado, #c9a227); }
.p-overlay { position: fixed; inset: 0; z-index: 320; display: grid;
  place-items: center; padding: 18px;
  background: rgba(4, 7, 14, .78); backdrop-filter: blur(6px); }

/* modales 👑 admin y ⚙️ mi cuenta */
.modal-fondo { position: fixed; inset: 0; z-index: 210; display: grid;
  place-items: center; padding: 16px; background: rgba(4, 7, 14, .62);
  backdrop-filter: blur(4px); }
#admin-caja, #cuenta-caja { background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 16px 18px; max-height: 90vh; overflow-y: auto; }
#admin-caja { width: min(1080px, 96vw); }
#cuenta-caja { width: min(440px, 96vw); }
.am-cabecera { display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; }
.am-cabecera .cerrar { background: transparent; border: 1px solid var(--borde);
  border-radius: 8px; padding: 3px 9px; }
.am-sub { font-size: 11px; color: var(--dim); margin: 6px 0 12px; }
.am-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.am-t th { text-align: left; color: var(--dim); font-size: 10px;
  text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.am-t td { padding: 7px 8px; border-bottom: 1px solid var(--borde);
  vertical-align: middle; }
.am-estado { padding: 2px 9px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; }
.am-estado.activo { background: rgba(47,191,113,.15); color: var(--verde, #2fbf71); }
.am-estado.pendiente { background: rgba(201,162,39,.16); color: var(--dorado, #c9a227); }
.am-estado.pausado { background: rgba(228,87,79,.15); color: var(--rojo, #e4574f); }
.am-btn { background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 4px 9px; font-size: 11.5px; margin: 1px;
  cursor: pointer; }
.am-btn:hover { border-color: var(--azul); }
.am-btn.ok { border-color: var(--verde, #2fbf71); }
.am-nota { width: 150px; background: var(--panel2); border: 1px solid var(--borde);
  border-radius: 7px; padding: 4px 7px; font-size: 11px; color: var(--texto); }
.cu-sec { text-align: left; font-size: 12px; font-weight: 700; margin: 14px 0 8px;
  color: var(--dorado, #c9a227); }
.cu-nota { font-size: 10.5px; color: var(--dim); font-weight: 400; }
.cu-form { display: flex; flex-direction: column; gap: 9px; }
.cu-form label { font-size: 10.5px; color: var(--dim); display: flex;
  flex-direction: column; gap: 4px; text-align: left; }
.cu-form input { background: var(--panel2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 9px; padding: 9px 11px;
  font-size: 13.5px; }
#btn-admin { border-color: color-mix(in srgb, var(--dorado, #c9a227) 55%, var(--borde)); }

@media (max-width: 640px) {
  .p-card { padding: 22px 18px 16px; }
  .p-fondo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #admin-caja { padding: 12px; }
}

/* ── adaptación por dispositivo (móvil → TV) ─────────────────────────────── */
@media (max-width: 900px) {
  #modal-cuerpo, #cal-cuerpo { flex-direction: column; }
  #m-col-hallazgos { border-left: none; border-top: 1px solid var(--borde); }
  #cal-noticias { border-left: none; border-top: 1px solid var(--borde); }
  #toolbar { position: static; }
  .acciones { flex-wrap: wrap; row-gap: 6px; }
  .grupo { flex-wrap: wrap; row-gap: 6px; }
  #m-col-grafico { min-width: 0; }
}

/* móvil: nada desborda, la cinta va en su propia línea con scroll propio */
@media (max-width: 640px) {
  #topbar { gap: 8px 12px; padding: 8px 10px; }
  .marca h1 { font-size: 15px; letter-spacing: .5px; }
  .marca .sub { display: none; }
  .cinta { order: 3; flex-basis: 100%; }
  #toolbar { padding: 8px 10px 6px; }
  #toolbar .fila { gap: 6px; row-gap: 6px; }
  .chip, .tab { padding: 4px 9px; font-size: 11.5px; }
  #buscador { flex: 1 1 100%; min-width: 0; }
  #filtro-sector, #orden { max-width: 48vw; }
  #grid { padding: 10px; gap: 10px; grid-template-columns: 1fr; }
  #imperdibles { padding: 8px 10px 2px; }
  #modal { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  #m-col-grafico, #m-col-hallazgos { padding: 10px 12px; }
  #paginador { display: flex; width: calc(100% - 20px); justify-content: space-between; gap: 8px; padding: 6px 8px; }
  #paginador button { padding: 8px 12px; font-size: 12.5px; flex: 0 0 auto; }
  #pag-info { min-width: 0; font-size: 11.5px; }
  footer { padding: 10px 12px 18px; }
}

/* monitores grandes y TV: tarjetas más legibles, sin regueros diminutos */
@media (min-width: 2200px) {
  body { font-size: 15.5px; }
  #grid { grid-template-columns: repeat(auto-fill, minmax(345px, 1fr)); gap: 14px; }
  .marca h1 { font-size: 19px; }
}