/* ============================================================ SignalDeck — estética terminal evolucionada Verde sobre negro · monospace · datos densos pero legibles ============================================================ */ :root { /* Fondos */ --bg: #060a07; --bg-panel: #0a0f0b; --bg-elev: #0d140e; --bg-row-hover:#101a12; /* Rejilla / bordes */ --grid: rgba(120, 240, 170, 0.10); --grid-strong: rgba(120, 240, 170, 0.22); /* Texto */ --text: #cdf5db; --text-dim: #7a9a86; --text-faint: #51705e; /* Señales */ --buy: oklch(0.84 0.17 152); --buy-bg: oklch(0.84 0.17 152 / 0.10); --buy-line: oklch(0.84 0.17 152 / 0.55); --sell: oklch(0.69 0.20 26); --sell-bg: oklch(0.69 0.20 26 / 0.10); --sell-line: oklch(0.69 0.20 26 / 0.55); --debil: oklch(0.78 0.16 60); --debil-bg: oklch(0.78 0.16 60 / 0.10); --debil-line: oklch(0.78 0.16 60 / 0.55); --neutral: oklch(0.82 0.12 92); --neutral-bg: oklch(0.82 0.12 92 / 0.10); --error: oklch(0.66 0.05 90); /* Marca */ --accent: #39ff9d; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'IBM Plex Mono', Menlo, monospace; /* Densidad (controlada por JS en ) */ --row-py: 9px; --row-fz: 13px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(57,255,157,0.05), transparent 60%), var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } a { color: inherit; } /* ============================== CABECERA ============================== */ .cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--grid); background: linear-gradient(180deg, rgba(57,255,157,0.04), transparent); } .cabecera-izq { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .logo { font-weight: 800; font-size: 17px; letter-spacing: 0.18em; color: var(--text); text-shadow: 0 0 16px rgba(57,255,157,0.25); } .logo-acento { color: var(--accent); } .subtitulo { color: var(--text-dim); font-size: 12px; letter-spacing: 0.04em; } .cabecera-der { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .proximo-scan { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; } .proximo-label { color: var(--text-faint); letter-spacing: 0.04em; } .proximo-valor { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .cabecera-sep { color: var(--text-faint); font-size: 12px; } /* Chip de estado de conexión — punto de color vía ::before para que textContent desde JS no borre el indicador visual */ .estado-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.06em; text-transform: lowercase; padding: 4px 10px; border: 1px solid var(--grid-strong); border-radius: 999px; color: var(--text-dim); } .estado-chip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: latido 2s infinite; flex-shrink: 0; } @keyframes latido { 0%,100%{opacity:1} 50%{opacity:.35} } /* Variantes de estado (set por app.js vía className) */ .estado-conectado { color: var(--buy); border-color: var(--buy-line); } .estado-conectando { color: var(--neutral); border-color: var(--neutral); } .estado-polling { color: var(--accent); border-color: var(--buy-line); } .estado-error { color: var(--sell); border-color: var(--sell-line); } .btn-notif { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); background: transparent; border: 1px solid var(--buy-line); border-radius: 6px; padding: 5px 12px; cursor: pointer; transition: background .15s, box-shadow .15s; } .btn-notif:hover { background: var(--buy-bg); box-shadow: 0 0 0 1px var(--buy-line); } .btn-notif.activo { background: var(--buy); color: #04140b; border-color: var(--buy); } /* ============================== BARRA PROGRESO ============================== */ .barra-contenedor { height: 2px; background: var(--grid); overflow: hidden; } .barra-fill { height: 100%; background: linear-gradient(90deg, transparent, var(--accent)); box-shadow: 0 0 10px var(--accent); transition: width .4s ease; } /* ============================== MAIN ============================== */ main { max-width: 1280px; margin: 0 auto; padding: 18px 22px 40px; } /* ============================== BARRA CONTROL ============================== */ .barra-control { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .resumen-senales { display: flex; gap: 8px; flex-wrap: wrap; } .chip-resumen { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; padding: 7px 13px; border-radius: 7px; cursor: pointer; background: var(--bg-panel); border: 1px solid var(--grid); color: var(--text-dim); transition: border-color .15s, background .15s, transform .05s; } .chip-resumen:hover { border-color: var(--grid-strong); } .chip-resumen:active { transform: translateY(1px); } .resumen-num { font-size: 14px; font-weight: 700; color: var(--text); } .resumen-label { font-weight: 500; } .chip-compra-fuerte .resumen-num { color: var(--accent); } .chip-compra .resumen-num { color: var(--buy); } .chip-neutral .resumen-num { color: var(--neutral); } .chip-debil .resumen-num { color: var(--debil); } .chip-evitar .resumen-num { color: var(--sell); } .chip-error .resumen-num { color: var(--error); } .chip-resumen[aria-pressed="true"] { background: var(--bg-elev); } .chip-compra-fuerte[aria-pressed="true"] { border-color: rgba(57,255,157,0.55); box-shadow: inset 2px 0 0 var(--accent); } .chip-compra[aria-pressed="true"] { border-color: var(--buy-line); box-shadow: inset 2px 0 0 var(--buy); } .chip-neutral[aria-pressed="true"] { border-color: var(--neutral); box-shadow: inset 2px 0 0 var(--neutral); } .chip-debil[aria-pressed="true"] { border-color: var(--debil-line); box-shadow: inset 2px 0 0 var(--debil); } .chip-evitar[aria-pressed="true"] { border-color: var(--sell-line); box-shadow: inset 2px 0 0 var(--sell); } .chip-error[aria-pressed="true"] { border-color: var(--error); box-shadow: inset 2px 0 0 var(--error); } .control-der { display: flex; align-items: center; gap: 10px; } .buscador { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-panel); border: 1px solid var(--grid); border-radius: 7px; padding: 0 10px; height: 34px; } .buscador:focus-within { border-color: var(--buy-line); } .buscador-icono { color: var(--text-faint); font-size: 14px; } .buscador input { background: transparent; border: none; outline: none; font-family: var(--mono); font-size: 12px; color: var(--text); width: 150px; letter-spacing: 0.04em; text-transform: uppercase; } .buscador input::placeholder { color: var(--text-faint); text-transform: none; } .buscador-limpiar { background: none; border: none; padding: 0 2px; color: var(--text-faint); font-size: 11px; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; } .buscador-limpiar:hover { opacity: 1; color: var(--text); } /* Panel de filtro por indicador (dentro del

) */ .panel-filtro-indicador { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; } .filtro-select, .filtro-input-valor { background: var(--bg-elev); color: var(--text); border: 1px solid var(--grid-strong); border-radius: 6px; padding: 6px 8px; font-family: var(--mono); font-size: 12px; } .filtro-input-valor { width: 100px; } .filtro-btn { border: none; border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; } .filtro-btn-aplicar { background: var(--accent); color: var(--bg-panel); } .filtro-btn-limpiar { background: var(--bg-elev); color: var(--text-dim); border: 1px solid var(--grid-strong); } /* ============================== REFERENCIA (plegable) ============================== */ .referencia { border: 1px solid var(--grid); border-radius: 9px; background: var(--bg-panel); margin-bottom: 16px; overflow: hidden; } .referencia-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 16px; cursor: pointer; list-style: none; font-size: 12px; letter-spacing: 0.03em; } .referencia-summary::-webkit-details-marker { display: none; } .ref-summary-titulo { color: var(--text); font-weight: 600; } .ref-summary-meta { color: var(--text-faint); font-size: 11px; flex: 1 1 auto; } .ref-summary-chevron { color: var(--text-dim); transition: transform .2s; } .referencia[open] .ref-summary-chevron { transform: rotate(180deg); } .referencia[open] .referencia-summary { border-bottom: 1px solid var(--grid); } .seccion-referencia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--grid); } .ref-indicador { background: var(--bg-panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; } .ref-indicador-destacado { background: var(--bg-elev); } .ref-nombre { color: var(--accent); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; } .ref-badge-peso { font-size: 10px; font-weight: 700; color: var(--buy); border: 1px solid var(--buy-line); border-radius: 4px; padding: 1px 5px; letter-spacing: 0; } .ref-badge-peso-uno { color: var(--text-dim); border-color: var(--grid-strong); } .ref-descripcion { color: var(--text-dim); font-size: 11px; line-height: 1.5; } .ref-rangos { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; } .ref-rango { font-size: 11px; letter-spacing: 0.01em; } .ref-rango-compra { color: var(--buy); } .ref-rango-venta { color: var(--sell); } .ref-rango-neutro { color: var(--text-dim); } /* ============================== TABLA ============================== */ .seccion-tabla { border: 1px solid var(--grid); border-radius: 9px; overflow: hidden; background: var(--bg-panel); } .tabla-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabla-scanner { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--row-fz); min-width: 820px; } .tabla-scanner thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-elev); color: var(--text-dim); font-weight: 600; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--grid-strong); cursor: pointer; user-select: none; white-space: nowrap; } .tabla-scanner thead th.col-simbolo, .tabla-scanner thead th.col-senal { text-align: left; } .tabla-scanner thead th:hover { color: var(--text); } .tabla-scanner thead th[data-orden].orden-asc::after { content: " ▲"; color: var(--accent); } .tabla-scanner thead th[data-orden].orden-desc::after { content: " ▼"; color: var(--accent); } /* ── Badges de bolsa en celda Símbolo ── */ .bolsa-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px; vertical-align: middle; text-transform: uppercase; border: 1px solid; opacity: 0.85; flex-shrink: 0; } .bolsa-nyse { color: #7abfff; border-color: rgba(122,191,255,0.4); background: rgba(122,191,255,0.08); } .bolsa-nasdaq { color: #64d88c; border-color: rgba(100,216,140,0.4); background: rgba(100,216,140,0.08); } .bolsa-bme { color: #ffb347; border-color: rgba(255,179,71,0.4); background: rgba(255,179,71,0.08); } .bolsa-epa { color: #74b9ff; border-color: rgba(116,185,255,0.4); background: rgba(116,185,255,0.08); } .bolsa-xetra { color: #a29bfe; border-color: rgba(162,155,254,0.4); background: rgba(162,155,254,0.08); } .bolsa-lse { color: #fd79a8; border-color: rgba(253,121,168,0.4); background: rgba(253,121,168,0.08); } .bolsa-otc, .bolsa-tsx, .bolsa-vie, .bolsa-hkex { color: var(--text-faint); border-color: var(--grid); background: transparent; } /* Anchos de columna */ .col-simbolo { width: 14%; min-width: 140px; } .col-precio { width: 10%; } .col-ind { width: 10%; } .col-score { width: 13%; min-width: 130px; } .col-senal { width: 11%; min-width: 124px; } .col-tiempo { width: 7%; min-width: 56px; } .tabla-scanner tbody td { padding: var(--row-py) 12px; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tabla-scanner tbody tr { transition: background .1s, transform .18s ease; user-select: none; touch-action: pan-y; } .tabla-scanner tbody tr:hover { background: var(--bg-row-hover); } .tabla-scanner tbody tr:last-child td { border-bottom: none; } .tabla-scanner tbody tr.fila-arrastrando { transition: background .1s; } /* Estrella de favorito junto al símbolo (visible solo logado) */ .fila-favorito-mark { display: none; font-size: 12px; line-height: 1; color: var(--text-faint); } .fila-favorito-mark.activo { color: #fbbf24; } /* Botón flotante de favorito, revelado al deslizar una fila hacia la derecha */ .fila-favorito-btn { display: none; position: fixed; z-index: 60; width: 56px; border: none; border-radius: 8px; background: #fbbf24; color: #1a1400; font-size: 20px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.35); } .fila-favorito-btn.activo { display: flex; } /* Botón flotante de eliminar, revelado al deslizar una fila hacia la izquierda */ .fila-eliminar-btn { display: none; position: fixed; z-index: 60; width: 56px; border: none; border-radius: 8px; background: var(--sell); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.35); } .fila-eliminar-btn.activo { display: flex; } /* Tinte por veredicto */ tr[data-verdict="compra_fuerte"] td.col-simbolo { box-shadow: inset 3px 0 0 var(--accent); } tr[data-verdict="compra"] td.col-simbolo { box-shadow: inset 3px 0 0 var(--buy); } tr[data-verdict="debil"] td.col-simbolo { box-shadow: inset 3px 0 0 var(--debil); } tr[data-verdict="evitar"] td.col-simbolo { box-shadow: inset 3px 0 0 var(--sell); } tr[data-verdict="compra_fuerte"] { background: linear-gradient(90deg, oklch(0.88 0.20 152 / 0.14), transparent 36%); } tr[data-verdict="compra"] { background: linear-gradient(90deg, var(--buy-bg), transparent 36%); } tr[data-verdict="debil"] { background: linear-gradient(90deg, var(--debil-bg), transparent 36%); } tr[data-verdict="evitar"] { background: linear-gradient(90deg, var(--sell-bg), transparent 36%); } tr[data-verdict="error"] td { color: var(--text-faint); } .celda-simbolo { text-align: left; } .sym-fila { display: flex; align-items: center; gap: 5px; } .celda-simbolo .sym { color: var(--text); font-weight: 700; letter-spacing: 0.04em; } .sym-nombre { display: block; font-size: 10px; font-weight: 400; color: var(--text-faint); letter-spacing: 0.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .celda-precio { color: var(--text); font-weight: 600; } /* Etiquetas de máximo por pilar (Tendencia / Volumen / Momentum) */ .fila-tag-max { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .fila-tag-max:empty { display: none; margin-top: 0; } .tag-max { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; line-height: 1.5; border: 1px solid; white-space: nowrap; } .tag-max-tend { color: var(--accent); border-color: var(--accent); background: var(--buy-bg); } .tag-max-vol { color: var(--buy); border-color: var(--buy-line); background: var(--buy-bg); } .tag-max-mom { color: var(--debil); border-color: var(--debil-line); background: var(--debil-bg); } /* Color por señal de indicador */ .v-buy { color: var(--buy); } .v-sell { color: var(--sell); } .v-neutral { color: var(--text-dim); } .dato-vacio { color: var(--text-faint); } /* SCORE: barra segmentada + número */ .score-cell { display: flex; align-items: center; gap: 9px; justify-content: flex-end; } .score-bar { display: flex; gap: 2px; flex: 0 0 auto; } .score-seg { width: 6px; height: 14px; border-radius: 1px; background: var(--grid-strong); } .score-bar[data-verdict="compra_fuerte"] .score-seg.on { background: var(--accent); box-shadow: 0 0 6px rgba(57,255,157,0.5); } .score-bar[data-verdict="compra"] .score-seg.on { background: var(--buy); box-shadow: 0 0 5px var(--buy-line); } .score-bar[data-verdict="neutral"] .score-seg.on { background: var(--neutral); } .score-bar[data-verdict="debil"] .score-seg.on { background: var(--debil); } .score-bar[data-verdict="evitar"] .score-seg.on { background: var(--sell); box-shadow: 0 0 5px var(--sell-line); } .score-bar[data-verdict="error"] .score-seg.on { background: var(--error); } .score-num { font-weight: 700; font-size: 13px; color: var(--text); min-width: 50px; text-align: right; } .score-den { color: var(--text-faint); font-weight: 400; font-size: 11px; } /* SEÑAL: etiqueta */ .celda-senal { text-align: left; display: flex; align-items: center; gap: 8px; } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; border: 1px solid; } .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .tag-compra_fuerte { color: var(--accent); border-color: rgba(57,255,157,0.55); background: rgba(57,255,157,0.10); } .tag-compra { color: var(--buy); border-color: var(--buy-line); background: var(--buy-bg); } .tag-neutral { color: var(--neutral); border-color: var(--neutral); background: var(--neutral-bg); } .tag-debil { color: var(--debil); border-color: var(--debil-line); background: var(--debil-bg); } .tag-evitar { color: var(--sell); border-color: var(--sell-line); background: var(--sell-bg); } .tag-error { color: var(--error); border-color: var(--grid-strong); background: transparent; } .celda-tiempo { color: var(--text-faint); font-size: 11px; } /* ── Botón de info ── */ .btn-info { flex-shrink: 0; background: transparent; border: 1px solid var(--grid-strong); color: var(--text-faint); font-family: var(--mono); font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: color .15s, border-color .15s, background .15s; } .btn-info:hover { color: var(--accent); border-color: var(--buy-line); background: var(--buy-bg); } /* ── Popup de desglose ── */ .popup-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; } .popup-overlay.activo { display: flex; } .popup-card { background: var(--bg-panel); border: 1px solid var(--grid-strong); border-radius: 12px; padding: 20px 22px; max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .popup-head-izq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .popup-sym { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: var(--text); } .popup-nombre-empresa { color: var(--text-dim); font-size: 12px; } .popup-close { background: transparent; border: none; color: var(--text-faint); font-size: 16px; font-family: var(--mono); cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; flex-shrink: 0; } .popup-close:hover { color: var(--text); background: var(--bg-elev); } /* Navegación entre acciones del ranking (flechas < >) */ .popup-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--bg-panel); border: 1px solid var(--grid-strong); color: var(--text-dim); font-size: 20px; font-family: var(--mono); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1001; padding: 0; transition: color .15s, border-color .15s, background .15s; } .popup-nav:hover { color: var(--text); background: var(--bg-elev); border-color: var(--accent); } .popup-nav-prev { left: 8px; } .popup-nav-next { right: 8px; } .popup-score-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .popup-score-total-pts { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .popup-precio-val { font-size: 11px; color: var(--text-faint); margin-left: auto; } .popup-desglose { display: flex; flex-direction: column; gap: 8px; } .popup-pilar { background: var(--bg-elev); border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .popup-pilar-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding-bottom: 7px; border-bottom: 1px solid var(--grid); margin-bottom: 2px; } .popup-pilar-pts { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: 0; } .popup-ind { display: grid; grid-template-columns: 34px 82px 1fr; align-items: baseline; gap: 6px; } .popup-ind-pts { font-size: 12px; font-weight: 700; text-align: right; } .popup-ind-nombre { color: var(--text-dim); font-weight: 600; font-size: 10.5px; } .popup-ind-desc { color: var(--text-faint); font-size: 10.5px; line-height: 1.35; } /* Número de orden delante del símbolo */ .fila-num { color: var(--text-faint); font-size: 11px; font-weight: 600; min-width: 24px; text-align: right; flex-shrink: 0; } /* Fila seleccionada para comparar (doble click) */ tr[data-simbolo].fila-seleccionada-comparar { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--buy-bg); } /* ── Popup comparador de dos acciones ── */ .popup-card-comparador { max-width: 720px; } .popup-comparador-titulo { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; color: var(--text); text-transform: uppercase; } .comparador-cabeceras { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .comparador-col { display: flex; flex-direction: column; gap: 4px; } .comparador-col-der { align-items: flex-end; text-align: right; } .comparador-col-der .popup-head-izq { flex-direction: row-reverse; } .comparador-vs { color: var(--text-faint); font-size: 11px; font-weight: 700; text-transform: uppercase; } .comparador-score-fila { display: flex; align-items: center; gap: 8px; } .comparador-col-der .comparador-score-fila { flex-direction: row-reverse; } .comp-fila { display: grid; grid-template-columns: 1fr 96px 1fr; align-items: baseline; gap: 8px; } .comp-lado { display: flex; gap: 6px; align-items: baseline; } .comp-lado-der { flex-direction: row-reverse; text-align: right; } .comp-nombre { color: var(--text-dim); font-weight: 600; font-size: 10.5px; text-align: center; } .sin-resultados { text-align: center; color: var(--text-dim); padding: 32px; font-size: 12px; } /* Fila de carga inicial */ .fila-carga td { text-align: center; color: var(--text-faint); padding: 40px; font-size: 12px; } /* Animaciones pulse al recibir señal nueva */ @keyframes pulse-compra-fuerte { 0%,100% { background: linear-gradient(90deg, oklch(0.88 0.20 152 / 0.14), transparent 36%); } 50% { background: linear-gradient(90deg, oklch(0.88 0.20 152 / 0.30), transparent 36%); } } @keyframes pulse-compra { 0%,100% { background: linear-gradient(90deg, var(--buy-bg), transparent 36%); } 50% { background: linear-gradient(90deg, oklch(0.84 0.17 152 / 0.22), transparent 36%); } } .fila-pulse-compra-fuerte { animation: pulse-compra-fuerte 0.6s ease 3; } .fila-pulse-compra { animation: pulse-compra 0.6s ease 3; } /* ============================== PIE ============================== */ .pie { text-align: center; color: var(--text-faint); font-size: 11px; padding: 22px; border-top: 1px solid var(--grid); margin-top: 8px; line-height: 1.6; } /* Scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--grid-strong); border-radius: 3px; } /* ============================================================ RESPONSIVE — filas compactas de una sola línea ============================================================ */ @media (max-width: 860px) { main { padding: 14px 14px 36px; } .cabecera { padding: 12px 14px; } .barra-control { gap: 10px; } .control-der { width: 100%; } .buscador { flex: 1; } .buscador input { width: 100%; } .tabla-wrapper { overflow-x: visible; } .seccion-tabla { border: none; background: transparent; } .tabla-scanner { min-width: 0; table-layout: auto; display: block; } .tabla-scanner thead { display: none; } .tabla-scanner tbody { display: flex; flex-direction: column; gap: 7px; } /* Fila compacta — todo en una línea */ .tabla-scanner tbody tr { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 8px 10px; border: 1px solid var(--grid); border-radius: 8px; overflow: hidden; } /* Columnas ocultas en móvil */ .tabla-scanner tbody td.col-precio, .tabla-scanner tbody td.col-ind, .tabla-scanner tbody td.col-tiempo { display: none; } /* Símbolo: crece para ocupar espacio disponible */ .tabla-scanner tbody td.col-simbolo { flex: 1 1 0; min-width: 0; order: 1; padding: 0; border: none; text-align: left; overflow: hidden; } .sym-fila { gap: 4px; } .celda-simbolo .sym { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sym-nombre { font-size: 10px; margin-top: 1px; } /* Score y señal: width/min-width de escritorio (13%/130px, 11%/124px, pensados para alinear columnas de tabla) no aplican aquí — se pisan para que ocupen solo lo que su contenido necesita y dejar el resto del ancho disponible al símbolo. */ .tabla-scanner tbody td.col-score, .tabla-scanner tbody td.col-senal { width: auto; min-width: 0; } /* Score: compacto, tamaño fijo, pegado a la derecha */ .tabla-scanner tbody td.col-score { flex: 0 0 auto; order: 2; padding: 0; border: none; } .col-score .score-cell { flex-direction: column; align-items: flex-end; gap: 2px; } .score-bar { gap: 1px; } .score-seg { width: 5px; height: 10px; } .score-num { font-size: 11px; min-width: 0; } .score-den { display: none; } /* Señal + botón info: pegado al borde derecho de la fila */ .tabla-scanner tbody td.col-senal { flex: 0 0 auto; order: 3; padding: 0; border: none; display: flex; align-items: center; justify-content: flex-end; gap: 5px; } .tag { font-size: 9px; padding: 3px 6px; letter-spacing: 0.05em; white-space: nowrap; } /* Tinte por veredicto */ tr[data-verdict="compra_fuerte"] { background: linear-gradient(90deg, oklch(0.88 0.20 152 / 0.14), transparent 40%); border-color: rgba(57,255,157,0.55); } tr[data-verdict="compra"] { background: linear-gradient(90deg, var(--buy-bg), transparent 40%); border-color: var(--buy-line); } tr[data-verdict="debil"] { background: linear-gradient(90deg, var(--debil-bg), transparent 40%); border-color: var(--debil-line); } tr[data-verdict="evitar"] { background: linear-gradient(90deg, var(--sell-bg), transparent 40%); border-color: var(--sell-line); } tr[data-verdict="compra_fuerte"] td.col-simbolo, tr[data-verdict="compra"] td.col-simbolo, tr[data-verdict="debil"] td.col-simbolo, tr[data-verdict="evitar"] td.col-simbolo { box-shadow: none; } /* Popup más compacto en móvil */ .popup-card { padding: 16px; gap: 12px; } .popup-sym { font-size: 16px; } .popup-score-total-pts { font-size: 18px; } .popup-ind { grid-template-columns: 30px 72px 1fr; gap: 5px; } .popup-ind-pts { font-size: 11px; } .popup-ind-nombre, .popup-ind-desc { font-size: 10px; } .popup-nav { width: 32px; height: 32px; font-size: 18px; } .popup-nav-prev { left: 4px; } .popup-nav-next { right: 4px; } } @media (max-width: 420px) { .subtitulo { display: none; } .logo { font-size: 15px; } }