/* Estilos de la seccion "Revision de niveles". Usa las variables del panel (index.html): --surface, --surface-2, --border, --ink, --ink-soft, --accent, --accent-soft, --good, --bad, --warn y, para las
   temporalidades, --tf-m15, --tf-h1, --tf-h4, --tf-d1 (definidas aqui para claro y oscuro). Todo con prefijo rn- para no pisar al resto del panel. */
.rn{ --tf-m15:#2f7d72; --tf-h1:#a8791f; --tf-h4:#3f6fb0; --tf-d1:#1b2430 }
@media (prefers-color-scheme: dark){ .rn{ --tf-m15:#63b8ab; --tf-h1:#d9ae5c; --tf-h4:#7ba3dd; --tf-d1:#eef1f5 } }
.rn-barra{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin:0 0 12px }
.rn-mudo{ color:var(--ink-soft) } .rn-mono{ font-family:"IBM Plex Mono",monospace }
.rn-datos{ margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--ink-soft) } .rn-datos.aviso{ color:var(--warn) }
.rn-seg{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface) }
.rn-seg button{ border:0; background:transparent; color:var(--ink-soft); padding:6px 12px; font:inherit; cursor:pointer; min-height:34px }
.rn-seg button+button{ border-left:1px solid var(--border) }
.rn-seg button[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600 }
.rn button.rn-plano, .rn select, .rn input[type=number], .rn input[type=date], .rn textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:5px 10px; min-height:34px }
.rn button.rn-plano{ cursor:pointer } .rn button.rn-plano:hover{ background:var(--surface-2) }
.rn button:focus-visible, .rn select:focus-visible, .rn input:focus-visible, .rn textarea:focus-visible, .rn summary:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
/* PC: cuadro de 2x2 (o 1 y 2 si se eligen); celular: uno debajo del otro */
.rn-grilla{ display:grid; gap:12px; grid-template-columns:1fr }
.rn-grilla.n2, .rn-grilla.n4{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
@media (max-width: 820px){ .rn-grilla.n2, .rn-grilla.n4{ grid-template-columns:minmax(0, 1fr) } }
.rn-panel{ background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); min-width:0 }
.rn-cab{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 10px; border-bottom:1px solid var(--border) }
.rn-sp{ flex:1 }
.rn-chip{ display:inline-block; padding:2px 8px; border-radius:100px; font-size:.74rem; font-weight:600 }
.rn-chip.sube{ background:var(--good-soft); color:var(--good) } .rn-chip.baja{ background:var(--bad-soft); color:var(--bad) } .rn-chip.lado{ background:var(--warn-soft); color:var(--warn) }
.rn-cfg{ border-bottom:1px solid var(--border); padding:0 10px }
.rn-cfg summary{ cursor:pointer; padding:7px 0; color:var(--ink-soft); font-size:.88rem; min-height:34px }
.rn-cfgcuerpo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px 18px; padding:4px 0 12px }
.rn-cfgcuerpo fieldset{ border:1px solid var(--border); border-radius:10px; margin:0; padding:8px 10px }
.rn-cfgcuerpo legend{ font-weight:600; font-size:.85rem; padding:0 6px }
.rn-cfgcuerpo label{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; font-size:.88rem }
.rn-cfgcuerpo input[type=number]{ width:70px }
.rn-fila{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin:4px 0 }
.rn-fila label{ margin:0 }
.rn-cwrap{ position:relative }
.rn-lienzo{ height:340px; width:100%; touch-action:pan-y }
.rn-grilla.n1 .rn-lienzo{ height:460px } .rn-grilla.n4 .rn-lienzo{ height:300px }
.rn-msg{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; padding:16px; background:color-mix(in srgb, var(--surface) 82%, transparent); color:var(--ink-soft); z-index:3 }
.rn-msg.ver{ display:flex } .rn-msg.error{ color:var(--bad) }
.rn-leyenda{ display:flex; flex-wrap:wrap; gap:4px 14px; padding:6px 10px; font-size:.78rem; color:var(--ink-soft); border-top:1px solid var(--border) }
.rn-leyenda i{ display:inline-block; width:26px; height:0; vertical-align:middle; margin-right:5px; border-top:3px solid }
.rn-aviso{ color:var(--warn); font-size:.82rem }
.rn-pop{ position:absolute; z-index:6; width:min(290px, calc(100% - 16px)); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:12px }
.rn-pop h3{ font-size:1rem; margin:0 0 4px } .rn-meta{ font-size:.8rem; color:var(--ink-soft); margin-bottom:8px }
.rn-pop textarea{ width:100%; min-height:56px; resize:vertical; margin:8px 0 }
.rn button.vale{ background:var(--good-soft); border-color:var(--good) } .rn button.novale{ background:var(--bad-soft); border-color:var(--bad) } .rn button.dudoso{ background:var(--warn-soft); border-color:var(--warn) }
.rn button.sel{ outline:2px solid var(--accent) }
.rn-tarjeta{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; margin-top:16px; box-shadow:var(--shadow) }
.rn-cab-marcas{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:8px }
.rn-cab-marcas h2{ margin:0 }
.rn-tabla{ overflow-x:auto }
.rn-tabla table{ width:100%; border-collapse:collapse; font-size:.86rem }
.rn-tabla th{ text-align:left; color:var(--ink-soft); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border) }
.rn-tabla td{ padding:7px 8px; border-bottom:1px solid var(--border) }
.rn-acciones{ white-space:nowrap }
.rn-mk{ font-weight:700; display:inline-block; width:1.4em; text-align:center }
.rn-mk.vale{ color:var(--good) } .rn-mk.no_vale{ color:var(--bad) } .rn-mk.dudoso{ color:var(--warn) } .rn-mk.falta_piso, .rn-mk.falta_techo{ color:var(--accent) }
.rn-credito{ font-size:.78rem; margin:12px 0 0 }
/* Navegador del Fibonacci historico: violeta propio (ningun otro indicador lo usa), un tramo a la vez */
.rn{ --fib:#6b3fb8 }
@media (prefers-color-scheme: dark){ .rn{ --fib:#b79af0 } }
.rn-nav{ padding:8px 10px; border-bottom:1px solid var(--border) } .rn-nav[hidden]{ display:none }
.rn-navpos{ font-weight:600; font-variant-numeric:tabular-nums; font-size:.9rem }
.rn-navdatos{ display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:6px; font-size:.8rem } .rn-navdatos b{ color:var(--ink); font-weight:600 }
.rn button.rn-nb{ border-color:var(--fib); color:var(--fib); font-weight:600 } .rn button.rn-nb:disabled{ opacity:.4; cursor:default }
.rn-eacv{ display:block; width:100%; height:440px; border:1px solid var(--border); border-radius:8px; margin-top:8px }
.rn-eacv[hidden]{ display:none }

/* Estado de tendencia por par (H1, H4 y D1): herramienta para mirar. Usa los colores del panel: sube/baja = --good/--bad, rango = azul de H4, duda = --warn */
.rn{ --es-rango:#3f6fb0 }
@media (prefers-color-scheme: dark){ .rn{ --es-rango:#7ba3dd } }
.rn-es summary{ cursor:pointer; font-weight:600; min-height:34px; padding:4px 0 }
.rn-es .rn-fila{ margin:8px 0 }
.rn-es-grilla{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:8px }
@media (max-width: 820px){ .rn-es-grilla{ grid-template-columns:minmax(0, 1fr) } }
.rn-es-par{ border:1px solid var(--border); border-radius:12px; padding:10px; background:var(--surface); min-width:0 }
.rn-es-cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.rn-es-cab h3{ margin:0; font-size:1rem }
.rn-es-tfs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px }
.rn-es-tf{ border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--surface-2); min-width:0 }
.rn-es-nom{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px }
.rn-es-chip{ display:inline-block; font-weight:700; font-size:.8rem; padding:2px 9px; border-radius:100px; margin-bottom:6px; white-space:nowrap }
.rn-es-chip.alza{ background:var(--good-soft); color:var(--good) } .rn-es-chip.baja{ background:var(--bad-soft); color:var(--bad) }
.rn-es-chip.rango{ background:color-mix(in srgb, var(--es-rango) 18%, var(--surface)); color:var(--es-rango) } .rn-es-chip.duda{ background:var(--warn-soft); color:var(--warn) }
.rn-es-voto{ display:flex; align-items:center; gap:6px; font-size:.8rem; margin-top:3px; white-space:nowrap }
.rn-es-voto b{ margin-left:auto; font-weight:600 }
.rn-es-pt{ width:9px; height:9px; border-radius:50%; flex:none }
.rn-es-pt.t{ background:var(--good) } .rn-es-pt.t.baja{ background:var(--bad) } .rn-es-pt.r{ background:var(--es-rango) } .rn-es-pt.d{ background:var(--warn) }
.rn-es-acuerdo{ margin-top:10px; padding-top:8px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center }
.rn-es-cuadros{ display:inline-grid; grid-template-columns:repeat(9, 10px); gap:3px }
.rn-es-cuadros i{ height:10px; border-radius:2px; display:block }
.rn-es-cuadros i.t{ background:var(--good) } .rn-es-cuadros i.r{ background:var(--es-rango) } .rn-es-cuadros i.d{ background:var(--warn) }
.rn-es-txt{ font-size:.85rem; flex:1; min-width:200px } .rn-es-n{ font-weight:700 }