/* Señales TORO-GOZ · el mismo diseño que la página de claude.ai (thebest/tablero_senales/senales_toro_goz.html), sin fuentes de afuera. */
:root {
  --fondo: #F3F4F8; --hoja: #FFFFFF; --tinta: #1C1E33; --suave: #5D6079; --linea: #DADCE8; --indigo: #3F51B5; --indigo-suave: #E6E8F6;
  --c: #00875A; --v: #D84315; --dorada: #B8860B; --dorada-fondo: #FFF3CF; --azul: #0033FF; --amarillo: #E0A800; --morado: #8E24AA; --celeste: #0288D1;
  --alerta: #C62828; --alerta-fondo: #FDECEA; --ok: #2E7D32; --sobre-indigo: #FFFFFF;
  --f-titulo: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fondo: #13142A; --hoja: #1C1E38; --tinta: #E8E9F5; --suave: #A4A7C4; --linea: #33365A; --indigo: #8C9EFF; --indigo-suave: #262A52;
  --c: #4CD69A; --v: #FF8A65; --dorada: #F2C94C; --dorada-fondo: #3A3214; --azul: #7C9BFF; --amarillo: #FFC94D; --morado: #CE93D8; --celeste: #4FC3F7;
  --alerta: #FF8A80; --alerta-fondo: #3B1E24; --ok: #81C784; --sobre-indigo: #10112A; color-scheme: dark; } }
:root[data-theme="dark"] {
  --fondo: #13142A; --hoja: #1C1E38; --tinta: #E8E9F5; --suave: #A4A7C4; --linea: #33365A; --indigo: #8C9EFF; --indigo-suave: #262A52;
  --c: #4CD69A; --v: #FF8A65; --dorada: #F2C94C; --dorada-fondo: #3A3214; --azul: #7C9BFF; --amarillo: #FFC94D; --morado: #CE93D8; --celeste: #4FC3F7;
  --alerta: #FF8A80; --alerta-fondo: #3B1E24; --ok: #81C784; --sobre-indigo: #10112A; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 15px/1.5 var(--f-texto); }
.envoltura { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 24px 48px; display: grid; gap: 18px; }
header { display: grid; gap: 4px; }
h1 { font: 600 clamp(26px, 5vw, 36px)/1.05 var(--f-titulo); margin: 0; letter-spacing: .01em; text-wrap: balance; }
.sub { color: var(--suave); margin: 0; }
.resumen { display: flex; flex-wrap: wrap; gap: 10px; }
.cifra { background: var(--hoja); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; display: grid; gap: 2px; min-width: 0; }
.cifra b { font: 500 20px/1.1 var(--f-dato); font-variant-numeric: tabular-nums; }
.cifra span { color: var(--suave); font-size: 13px; }
.cifra.alerta { border-color: var(--alerta); background: var(--alerta-fondo); }
.cifra.alerta b { color: var(--alerta); }
.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pestanas { display: flex; gap: 4px; background: var(--indigo-suave); padding: 4px; border-radius: 10px; flex-wrap: wrap; }
.pestanas button { font: 500 14px/1 var(--f-texto); color: var(--tinta); background: transparent; border: 0; border-radius: 7px; padding: 10px 14px; cursor: pointer; }
.pestanas button[aria-selected="true"] { background: var(--hoja); color: var(--indigo); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.boton { font: 500 14px/1 var(--f-texto); color: var(--sobre-indigo); background: var(--indigo); border: 0; border-radius: 8px; padding: 11px 16px; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filtros label { display: grid; gap: 4px; font-size: 12px; color: var(--suave); letter-spacing: .03em; text-transform: uppercase; }
.filtros select, .filtros input[type="search"] { font: 400 14px/1.2 var(--f-texto); color: var(--tinta); background: var(--hoja); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.filtros .casilla { display: flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--tinta); }
.estado { color: var(--suave); margin: 0; }
.lista { display: grid; gap: 10px; }
.senal { background: var(--hoja); border: 1px solid var(--linea); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.senal.destacada { border-color: var(--indigo); box-shadow: inset 4px 0 0 var(--indigo); }
.senal.alerta { border-color: var(--alerta); box-shadow: inset 4px 0 0 var(--alerta); }
.aviso.suave { color: var(--indigo); }
.miniatura { width: 116px; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--linea); background: var(--fondo); overflow: hidden; padding: 0; cursor: zoom-in; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura.vacia { display: grid; place-items: center; color: var(--suave); font-size: 12px; cursor: default; }
.cuerpo { display: grid; gap: 4px; min-width: 0; }
.fila1 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ticker { font: 600 16px/1.2 var(--f-titulo); letter-spacing: .02em; }
.mercado { color: var(--suave); font: 400 12px/1 var(--f-dato); }
.ficha { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--f-texto); padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor; }
.ficha .punto { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.ficha.dorada { background: var(--dorada-fondo); color: var(--dorada); }
.ficha.negro { background: #000000; color: #81D4FA; border-color: #FFC000; }
.ficha.negro .punto { background: #000000; box-shadow: 0 0 0 1.5px #81D4FA; }
.dir { font: 500 13px/1 var(--f-texto); color: var(--suave); }
.nueva { font: 600 12px/1 var(--f-texto); color: var(--indigo); background: var(--indigo-suave); border-radius: 999px; padding: 5px 9px; letter-spacing: .02em; }
.datos { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--suave); font-size: 13px; }
.datos b { color: var(--tinta); font: 500 13px/1.4 var(--f-dato); font-variant-numeric: tabular-nums; }
.datos a { color: var(--indigo); }
.inversion { display: flex; gap: 8px; align-items: center; font-size: 14px; white-space: nowrap; }
.inversion input { width: 20px; height: 20px; accent-color: var(--indigo); }
.aviso { color: var(--alerta); font-weight: 600; font-size: 13px; }
.grupo { display: grid; gap: 8px; }
.grupo h2 { font: 600 19px/1.2 var(--f-titulo); margin: 0; letter-spacing: .02em; }
.grupo p { margin: 0; color: var(--suave); }
.vacio { background: var(--hoja); border: 1px dashed var(--linea); border-radius: 12px; padding: 18px; color: var(--suave); }
.visor { position: fixed; inset: 0; background: rgb(10 11 25 / .82); display: grid; place-items: center; padding: 16px; z-index: 10; }
.visor img { max-width: 100%; max-height: 82vh; border-radius: 8px; background: #FFFFFF; }
.visor figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 1200px; }
.visor figcaption { color: #FFFFFF; font-size: 14px; text-align: center; }
.visor button { font: 500 14px/1 var(--f-texto); background: #FFFFFF; color: #1C1E33; border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.pie { color: var(--suave); font-size: 13px; margin: 0; }
@media (max-width: 640px) {
  .senal { grid-template-columns: 92px minmax(0, 1fr); }
  .miniatura { width: 92px; }
  .inversion { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) { .pestanas button, .boton { transition: filter .15s, background .15s; } .boton:hover { filter: brightness(1.08); } }
.actualizado { color: var(--suave); font-size: 13px; margin: 0; }
.boton.secundario { background: var(--indigo-suave); color: var(--indigo); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
/* VPS (18/10): sin desborde a lo ancho en el celular (una columna que puede achicarse y los datos largos que se cortan). */
.envoltura { grid-template-columns: minmax(0, 1fr); }
.envoltura > * { min-width: 0; }
.datos b, .mercado, .sub { overflow-wrap: anywhere; }
.filtros label { min-width: 0; max-width: 100%; }
.filtros select, .filtros input[type="search"] { max-width: 100%; }
.cifra { flex: 1 1 140px; }