* { box-sizing: border-box; margin: 0; } /* Temas: variables en :root (claro, por defecto) y override en [data-tema="oscuro"]. tablero.js pone data-tema en al cargar (preferencia guardada o del sistema). */ :root { --fondo-a: #8d94b3; --fondo-b: #767d9c; --panel: #eceef3; --panel-b: #e3e6ee; --tarj: #ffffff; --borde: #d5d9e6; --sombra: 0 10px 30px rgba(23, 26, 45, .10); --sombra-tarj: 0 12px 32px rgba(23, 26, 45, .14), 0 2px 6px rgba(23, 26, 45, .08); --sombra-marco: 0 24px 70px rgba(15, 17, 30, .35); --brillo: .18; --tinta: #171a2b; --tinta2: #5a6076; --verde: #0e9f6e; --verde-osc: #06694a; --grad-verde: linear-gradient(180deg, #2cc596, #0b8a60); --celeste: #0ea5e9; --celeste-osc: #0369a1; --rojo: #e4514f; --rojo-osc: #a02422; --grad-rojo: linear-gradient(0deg, #ff7a76, #d63c3a); --ambar: #d98c1a; --ambar-osc: #8a5606; --ambar-bg: #fbf1df; --pill: #f4f5f9; --pill-borde: #c9cdda; --acen-grad: linear-gradient(135deg, #1c2033, #343a56); --acen-texto: #ffffff; --gris: #aeb2c2; --radio: 20px; } [data-tema="oscuro"] { --fondo-a: #0c0e18; --fondo-b: #141728; --panel: #181b2c; --panel-b: #12141f; --tarj: #232741; --borde: #414767; --sombra: 0 10px 30px rgba(0, 0, 0, .45); --sombra-tarj: 0 12px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); --sombra-marco: 0 24px 70px rgba(0, 0, 0, .6); --brillo: .10; --tinta: #edeff7; --tinta2: #a6adc4; --verde: #35d29c; --verde-osc: #7ef0c8; --grad-verde: linear-gradient(180deg, #3fe3ab, #18a577); --celeste: #38bdf8; --celeste-osc: #7dd3fc; --rojo: #ff6f6b; --rojo-osc: #ffa29e; --grad-rojo: linear-gradient(0deg, #ff8b86, #e04745); --ambar: #e6b45a; --ambar-osc: #ffd58a; --ambar-bg: #3a3320; --pill: #2a2f47; --pill-borde: #454b6b; --acen-grad: linear-gradient(135deg, #e8eaf4, #c6cade); --acen-texto: #14161f; --gris: #4a4f68; } body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; background: radial-gradient(1200px 600px at 15% -10%, rgba(255, 255, 255, var(--brillo)), transparent 60%), linear-gradient(160deg, var(--fondo-a), var(--fondo-b)); background-attachment: fixed; color: var(--tinta); min-height: 100vh; } .marco { max-width: 1160px; margin: 22px auto; padding: 18px; border-radius: 30px; background: linear-gradient(180deg, var(--panel), var(--panel-b)); box-shadow: var(--sombra-marco); } .contenido { padding: 16px 0 0; display: flex; flex-direction: column; gap: 16px; } /* Barra segun estado del mercado (20/7): azul marino cerrado, verde abierto. Reutiliza data-mercado (lo pone mercado.js en , igual que data-tema). */ :root { --barra-cerrado: #0f2a5e; --barra-abierto: #06694a; } .barra { padding: 14px 20px; --tinta: #eef2fb; --tinta2: #c3cfe9; --borde: rgba(255,255,255,.22); --tarj: rgba(255,255,255,.12); background: var(--barra-cerrado); color: var(--tinta); border: 2px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-tarj); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } html[data-mercado="abierto"] .barra { background: var(--barra-abierto); } .marca { font-weight: 600; letter-spacing: 0.5px; } .omega { color: var(--tinta2); } .barra nav { display: flex; gap: 18px; font-size: 14px; } .barra nav a { color: var(--tinta2); text-decoration: none; } .barra nav a.activo { color: var(--tinta); font-weight: 600; border-bottom: 2.5px solid var(--tinta); padding-bottom: 2px; } .barra nav a.deshabilitado { opacity: 0.45; cursor: default; } .usuario { display: flex; align-items: center; gap: 12px; } .avatar { width: 34px; height: 34px; border-radius: 50%; background: #e6ecf7; color: #185fa5; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } .tema-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--borde); background: var(--tarj); color: var(--tinta); cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .campana-form { display: inline; } .campana { position: relative; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--tinta); } .badge { position: absolute; top: -6px; right: -8px; background: var(--rojo); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 5px; } .salir { font-size: 13px; color: var(--tinta2); } .tarjeta { background: var(--tarj); border: 2px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-tarj); padding: 20px 24px; } .tarjeta-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } h1, h2, h3 { font-weight: 600; } h1 { font-size: 27px; } h2 { font-size: 18px; margin-bottom: 6px; } .mt { margin-top: 18px; } .sub { color: var(--tinta2); font-size: 13px; } .encabezado { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--tarj); border: 2px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-tarj); padding: 18px 24px; flex-wrap: wrap; } button, .pildora { font: inherit; cursor: pointer; } .principal { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 22px; line-height: 1; background: var(--acen-grad); color: var(--acen-texto); border: none; border-radius: 999px; cursor: pointer; font-size: 14px; box-shadow: 0 6px 18px rgba(23, 26, 45, .25); text-decoration: none; transition: transform .12s ease, filter .12s ease; } .principal:hover { transform: translateY(-1px); filter: brightness(1.08); } .principal:active { transform: scale(0.98); } .principal.peligro { background: var(--grad-rojo); color: #fff; } .pildoras { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pildora { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px; border-radius: 999px; font-size: 13px; color: var(--tinta2); border: 1.5px solid var(--borde); text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color .12s ease; } .pildora:hover { border-color: var(--tinta2); } .pildora.on { background: var(--acen-grad); color: var(--acen-texto); border-color: transparent; } .pildora.on:hover { filter: brightness(1.08); } .resumen-grande { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 4px; flex-wrap: wrap; } .monto { font-size: 30px; font-weight: 600; } .monto.gana { color: var(--verde-osc); } .monto.pierde { color: var(--rojo-osc); } .columnas { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0; } .col { flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; } .zona-arriba { height: 128px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; } .zona-abajo { height: 128px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; } .barra-col { width: 6px; border-radius: 3px; } .barra-col.gana { background: var(--grad-verde); } .barra-col.pierde { background: var(--grad-rojo); } .barra-col.empate, .barra-col.sin_dato { background: var(--gris); } .punta { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--tarj); margin: -2px 0; } .punta.gana { background: var(--verde); } .punta.pierde { background: var(--rojo); } .punta.empate, .punta.sin_dato { background: var(--gris); } .recuadro { font-size: 12px; font-weight: 600; background: var(--tarj); border: 1.5px solid var(--borde); border-radius: 9px; padding: 2px 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(23, 26, 45, .10); } .recuadro.gana { color: var(--verde-osc); } .recuadro.pierde { color: var(--rojo-osc); } .ficha { width: 42px; height: 42px; border-radius: 50%; background: var(--tarj); border: 2.5px solid var(--gris); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin: 6px 0; } .ficha.gana { border-color: var(--verde); } .ficha.pierde { border-color: var(--rojo); } .ficha.cerrada { opacity: 0.55; background: var(--pill); } .fecha-col { font-size: 10.5px; color: var(--tinta2); margin-top: 2px; white-space: nowrap; } .leyenda { color: var(--tinta2); font-size: 12px; margin-top: 8px; } .grilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .alerta { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 14px; } .alerta:last-of-type { border-bottom: none; } .alerta time { color: var(--tinta2); font-size: 12px; white-space: nowrap; } .tipo-cerrar p { color: var(--rojo-osc); font-weight: 600; } .proceso { padding: 9px 0; border-bottom: 1px solid var(--borde); } .proceso:last-of-type { border-bottom: none; } .pasos { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .paso { font-size: 12px; color: var(--tinta2); padding-left: 14px; position: relative; } .paso::before { content: ""; position: absolute; left: 0; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--pill-borde); } .paso.hecho::before { background: var(--verde); } .paso.activo::before { background: #efa127; } .chip { display: inline-block; background: var(--pill); color: var(--tinta); border: 1.5px solid var(--pill-borde); border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 12px; margin-top: 6px; } .alerta-chip { background: var(--pill); color: var(--rojo-osc); border-color: var(--pill-borde); } .evento { font-size: 14px; padding: 4px 0; } .grilla-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .metrica { background: var(--tarj); border: 2px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-tarj); padding: 12px 16px; } .numero { font-size: 24px; font-weight: 600; } .numero.chico { font-size: 16px; } .pie-casa { color: var(--tinta2); font-size: 12px; padding: 4px 8px 20px; } .nota-falla { color: var(--tinta2); font-style: italic; } .fondo-login { display: flex; align-items: center; justify-content: center; } .tarjeta-login { background: var(--tarj); border: 2px solid var(--borde); border-radius: 26px; box-shadow: var(--sombra-marco); padding: 34px; width: min(400px, 92vw); margin: 8vh auto; display: flex; flex-direction: column; gap: 8px; } .marca-grande { font-size: 22px; font-weight: 600; } .tarjeta-login form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .tarjeta-login label { font-size: 13px; color: var(--tinta2); display: flex; flex-direction: column; gap: 4px; } .tarjeta-login label.fila { flex-direction: row; align-items: center; gap: 8px; } input, select { font: inherit; padding: 9px 12px; background: var(--tarj); color: var(--tinta); border: 1.5px solid var(--pill-borde); border-radius: 10px; } input:focus, select:focus { outline: 2px solid var(--verde); outline-offset: 1px; } .error { background: var(--pill); color: var(--rojo-osc); border: 1.5px solid var(--pill-borde); border-radius: 10px; padding: 8px 12px; font-size: 13px; } .pie-login { font-size: 12px; color: var(--tinta2); margin-top: 10px; } .fila-usuario { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; flex-wrap: wrap; } .avatar-usuario { width: 36px; height: 36px; border-radius: 50%; background: var(--pill); border: 1.5px solid var(--pill-borde); color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .usuario-nombre { flex: 1; min-width: 140px; } .chip-rol { display: inline-block; background: var(--pill); color: var(--tinta2); border: 1.5px solid var(--pill-borde); border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 10px; } .grilla-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grilla-form .ancho { grid-column: 1 / -1; } .acciones { display: flex; align-items: center; gap: 6px; } .acciones button { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; line-height: 1; font-size: 12px; border-radius: 999px; border: 1.5px solid var(--borde); background: var(--tarj); color: var(--tinta); cursor: pointer; transition: border-color .12s ease; } .acciones button:hover { border-color: var(--tinta2); } .acciones { flex-wrap: wrap; } .tarjeta.borde-atencion { border-left: 4px solid var(--rojo); } .acciones button.peligro-txt { color: var(--rojo-osc); border-color: var(--rojo); } .acciones button.peligro-txt:hover { background: var(--rojo); color: #fff; } .grilla-form label.fila { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta2); } .mini-serie { display: flex; align-items: center; gap: 3px; margin: 10px 0; flex-wrap: wrap; } .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); } .punto.gana { background: var(--verde); } .punto.pierde { background: var(--rojo); } .datos-modelo { color: var(--tinta2); font-size: 12px; border-top: 1px solid var(--borde); margin-top: 12px; padding-top: 8px; } .cierre-caja { border-top: 1px solid var(--borde); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .cierre-caja label.fila { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--tinta); } .cuerpo-detalle { background: var(--tarj); padding: 20px; } .oculto { display: none !important; } #panel-detalle { position: fixed; inset: 0; background: rgba(10, 12, 20, 0.55); display: flex; align-items: center; justify-content: center; z-index: 50; } #panel-detalle.oculto { display: none; } .panel-caja { background: var(--tarj); border: 2px solid var(--borde); box-shadow: var(--sombra-marco); border-radius: 20px; padding: 12px; width: min(600px, 94vw); height: min(560px, 86vh); position: relative; display: flex; } #panel-marco { border: none; flex: 1; border-radius: 12px; } #panel-cerrar { position: absolute; top: 8px; right: 12px; background: var(--tarj); border: none; font-size: 22px; cursor: pointer; color: var(--tinta2); z-index: 2; } @media (max-width: 640px) { .marco { margin: 8px; padding: 10px; border-radius: 22px; } .barra nav { order: 3; width: 100%; justify-content: space-between; } .zona-arriba, .zona-abajo { height: 96px; } .col { min-width: 56px; } .grilla-form { grid-template-columns: 1fr; } } .filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; } .filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tinta2); } .filtros input, .filtros select { min-width: 110px; } .tabla-envoltura { overflow-x: auto; } .tabla { width: 100%; border-collapse: collapse; font-size: 13px; } .tabla th { text-align: left; color: var(--tinta2); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--borde); white-space: nowrap; } .tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; } .fila-click { cursor: pointer; } .fila-click:hover td { background: var(--pill); } .badge-estado { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-borde); color: var(--tinta2); } .badge-estado.e-aprobada { color: var(--verde-osc); border-color: var(--verde); } .badge-estado.e-cerrada { color: var(--tinta); } .badge-estado.e-rechazada { color: var(--rojo-osc); border-color: var(--rojo); } .gana-txt { color: var(--verde-osc); font-weight: 600; } .pierde-txt { color: var(--rojo-osc); font-weight: 600; } .paginacion { display: flex; gap: 8px; margin-top: 12px; } .barra-metrica { height: 14px; border-radius: 999px; background: var(--pill); border: 1px solid var(--pill-borde); overflow: hidden; margin: 8px 0; } .barra-relleno { height: 100%; border-radius: 999px; background: var(--grad-verde); } .barra-relleno.neutra { background: var(--gris); } .json-crudo { font-size: 12px; overflow-x: auto; background: var(--pill); border: 1px solid var(--pill-borde); border-radius: 10px; padding: 12px; margin-top: 8px; } .texto-resultado { font-size: 13px; line-height: 1.5; white-space: pre-wrap; background: var(--pill); border: 1px solid var(--pill-borde); border-radius: 12px; padding: 14px; margin-top: 10px; font-family: inherit; } /* Aviso en vivo del estado del mercado en la barra (20/7). El punto usa currentColor para heredar el verde/rojo del tema activo. */ .mercado { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1.5px solid var(--borde); color: var(--tinta2); } .mercado::before { content: "\25CF"; margin-right: 6px; font-size: 9px; } .mercado.abierto { color: var(--verde-osc); border-color: var(--verde); } .mercado.cerrado { color: var(--rojo-osc); border-color: var(--rojo); } /* Dentro de la barra de color, la insignia va clara y legible; el punto lleva un color de estado sutil. El avatar (color fijo) se aclara para no desentonar. */ .barra .avatar { background: rgba(255,255,255,.16); color: #fff; } .barra .mercado.abierto, .barra .mercado.cerrado { color: var(--tinta); border-color: var(--borde); } .barra .mercado.abierto::before { color: #7bf0c8; } .barra .mercado.cerrado::before { color: #ff9f9c; } /* Fase 1 (20/7) · tablero vivo: tarjetas de posicion con veredicto. */ .latido { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--verde); margin-left:8px; vertical-align:middle; animation: latido 1.8s ease-in-out infinite; } @keyframes latido { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.5; } } @media (prefers-reduced-motion: reduce) { .latido { animation:none; } } .tarjeta-pos { display:flex; gap:14px; align-items:stretch; text-decoration:none; color:inherit; background:var(--tarj); border:1px solid var(--borde); border-left-width:4px; border-radius:12px; padding:14px 18px; margin-top:12px; transition:border-color .12s ease, transform .12s ease; } .tp-main { flex:1; min-width:0; } .tarjeta-pos:hover { border-color:var(--tinta2); transform:translateY(-1px); } .tarjeta-pos.accion-cerrar { border-left-color:var(--rojo); } .tarjeta-pos.accion-vigilar { border-left-color:var(--ambar); } .tarjeta-pos.accion-mantener { border-left-color:var(--verde); } .tp-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; } .tp-tit { font-size:16px; } .chip-accion { font-size:12px; font-weight:600; padding:3px 11px; border-radius:999px; white-space:nowrap; } .chip-accion.a-cerrar { background:var(--rojo); color:#fff; } .chip-accion.a-vigilar { background:var(--ambar-bg); color:var(--ambar-osc); } .chip-accion.a-mantener { background:transparent; color:var(--verde-osc); border:1px solid var(--verde); } .tp-pnl { display:flex; align-items:baseline; gap:10px; margin-top:8px; } .tp-pct { font-size:26px; font-weight:600; } .tp-usd { font-size:15px; } .tp-pct.gana, .tp-usd.gana { color:var(--verde-osc); } .tp-pct.pierde, .tp-usd.pierde { color:var(--rojo-osc); } .tp-pct.empate, .tp-usd.empate { color:var(--tinta2); } .tp-verd { font-size:13.5px; color:var(--tinta2); margin:6px 0 0; line-height:1.5; } .tp-cerradas { display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--borde); font-size:13px; color:var(--tinta2); text-decoration:none; } .tp-cerradas:hover { color:var(--tinta); } .chip-punto { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gris); vertical-align:middle; margin-right:4px; } /* Termometro de inclinacion del posicionamiento (Agente C, 2026-07-22): gauge vertical verde(alcista) -> celeste(bajista) + numero 0-100 + badge cerrar/mantener. La DIRECCION va por color. Read-only: no realimenta la cadena de decision. */ .tp-termo { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; padding-left:14px; border-left:1px solid var(--borde); } .termo-svg { display:block; } .termo-info { display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; } .termo-num { font-size:20px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; } .termo-lbl { font-size:11.5px; font-weight:600; line-height:1.2; } .termo-sin { color:var(--tinta2); font-weight:500; } .dir-alcista { color:var(--verde-osc); } .dir-bajista { color:var(--celeste-osc); } .dir-neutral { color:var(--tinta2); } .badge-c { font-size:12px; font-weight:600; padding:3px 12px; border-radius:999px; white-space:nowrap; margin-top:2px; } .badge-c.bc-cerrar { background:var(--rojo); color:#fff; } .badge-c.bc-mantener { background:transparent; color:var(--verde-osc); border:1px solid var(--verde); } .detalle-termo { display:flex; gap:16px; align-items:center; margin:14px 0; padding:14px 16px; background:var(--tarj); border:1px solid var(--borde); border-radius:12px; } .detalle-termo .dt-info { flex:1; min-width:0; } .dt-tit { font-size:14px; font-weight:600; margin:0 0 4px; } .dt-lectura { font-size:15px; font-weight:600; margin:0 0 6px; } .dt-num { font-size:22px; font-variant-numeric:tabular-nums; } .detalle-termo .sub { margin:6px 0 0; } /* 20/7: capital en riesgo junto al P&L vivo (gris, da el panorama). */ .invertido { color: var(--tinta2); font-size: 14px; margin-left: 6px; } /* ===== Gráfica de la vida de la posición (2026-07-22) ===== Sparkline en las tarjetas del Home (solo forma + color, sin números) y gráfica completa en el detalle. Dos tonos: verde por encima de la entrada, rojo por debajo. */ .tp-spark { width: 100%; height: 32px; margin: 8px 0 2px; } .spark-svg { width: 100%; height: 100%; display: block; overflow: visible; } .spark-cero { stroke: var(--tinta2); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; } .spark-area-g { fill: var(--verde); opacity: .20; } .spark-area-r { fill: var(--rojo); opacity: .20; } .spark-linea-g { fill: none; stroke: var(--verde); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .spark-linea-r { fill: none; stroke: var(--rojo); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .grafica-detalle { margin: 14px 0 6px; } .gd-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .gd-chip { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--borde); background: transparent; color: var(--tinta2); cursor: pointer; } .gd-chip:hover { border-color: var(--verde); } .gd-chip.on { background: var(--pill); border-color: var(--verde); color: var(--verde-osc); } .gd-lienzo { position: relative; width: 100%; } .gd-svg { width: 100%; height: auto; display: block; overflow: visible; } .gd-grid { stroke: var(--borde); stroke-opacity: .55; stroke-width: 1; } .gd-ylab, .gd-xlab { fill: var(--tinta2); font-size: 10px; } .gd-ylab { text-anchor: end; } .gd-xlab { text-anchor: middle; } .gd-cero { stroke: var(--tinta2); stroke-width: 1.2; stroke-dasharray: 4 3; } .gd-obj { stroke: var(--verde); stroke-width: 1; stroke-dasharray: 5 4; opacity: .7; } .gd-lim { stroke: var(--rojo); stroke-width: 1; stroke-dasharray: 5 4; opacity: .7; } .gd-gap { stroke: var(--tinta2); stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 2 4; } .gd-area-g { fill: var(--verde); opacity: .15; } .gd-area-r { fill: var(--rojo); opacity: .15; } .gd-linea-g { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linejoin: round; } .gd-linea-r { fill: none; stroke: var(--rojo); stroke-width: 2; stroke-linejoin: round; } .gd-dot.g { fill: var(--verde); } .gd-dot.r { fill: var(--rojo); } .gd-capa { cursor: crosshair; } .gd-vline { stroke: var(--tinta2); stroke-opacity: .45; stroke-width: 1; } .gd-hdot.g { fill: var(--verde); stroke: var(--panel); stroke-width: 1.5; } .gd-hdot.r { fill: var(--rojo); stroke: var(--panel); stroke-width: 1.5; } .gd-tip { position: absolute; pointer-events: none; z-index: 3; background: var(--tarj); border: 1px solid var(--borde); border-radius: 8px; padding: 5px 9px; font-size: 12px; color: var(--tinta); box-shadow: var(--sombra); white-space: nowrap; } .gd-tip b { font-size: 13.5px; } .gd-tip span { color: var(--tinta2); } .gd-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--tinta2); margin-top: 10px; } .gd-leyenda .lg { display: inline-flex; align-items: center; gap: 5px; } .gd-leyenda .sw { width: 16px; height: 0; border-top: 2px solid transparent; } .sw-g { border-top-color: var(--verde); } .sw-r { border-top-color: var(--rojo); } .sw-cero { border-top-style: dashed; border-top-color: var(--tinta2); } .sw-obj { border-top-style: dashed; border-top-color: var(--verde); } .sw-lim { border-top-style: dashed; border-top-color: var(--rojo); } /* --- Pagina Analisis (aprobada 2026-07-24): reportes didacticos por ticker --- */ .tarjeta-rep { margin-bottom: 14px; } .rep-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .rep-ticker { font-size: 30px; font-weight: 800; letter-spacing: .5px; line-height: 1.1; } .rep-titular { font-size: 15.5px; font-weight: 600; margin: 8px 0 4px; } .rep-lineas { margin: 4px 0 8px 18px; padding: 0; } .rep-lineas li { margin: 3px 0; } .rep-contrato { margin: 4px 0 8px; } .rep-texto { margin-top: 8px; } .rep-texto summary { cursor: pointer; color: var(--tinta2); font-size: 13px; } .rep-texto .texto-resultado { margin-top: 8px; }