/* Vero: estilos de la página (etapa P2). La fuente de verdad del diseño es diseno/prototipo.html:
   el bloque de abajo hasta «Agregado en la página real» es su CSS tal cual. Lo agregado después son
   las fuentes alojadas aquí y las piezas que el prototipo no tenía (pantalla sin reporte, carga,
   errores, «¿Y si…?», cuadre). Sin estilos en línea: los anchos y colores calculados se ponen
   desde app.js con element.style. */
@font-face{font-family:'Bricolage Grotesque';src:url("fuentes/BricolageGrotesque.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url("fuentes/InstrumentSans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  --paper:#F3F5FA;--surface:#FFFFFF;--line:#DCE1EC;--divider:#EEF1F6;--ink:#0E1633;--muted:#5E6A85;
  --loss:#D33A2F;--loss-rgb:211,58,47;--gain:#0F9D6B;--gain-rgb:15,157,107;--track:#E4E8F1;
  --hero:#2340D8;--hero2:#2340D8;--cta:#0E1633;--cta-text:#BAC3DA;--cta-line:transparent;--nav-shadow:0 8px 24px rgba(14,22,51,.12);--axis:#C9D0DE;
}
:root[data-theme="dark"]{
  --paper:#0B1330;--surface:#131D45;--line:#243266;--divider:#1D2958;--ink:#EAF0FF;--muted:#98A5CC;
  --loss:#FF6B5F;--loss-rgb:255,107,95;--gain:#3DDC97;--gain-rgb:61,220,151;--track:#1C2856;
  --hero:#1C31AE;--hero2:#0F1B5E;--cta:#18245A;--cta-text:#B4BFE0;--cta-line:#2B3B78;--nav-shadow:0 10px 30px rgba(0,0,0,.45);--axis:#34437E;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:'Instrument Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}
.app{max-width:430px;margin:0 auto;min-height:100vh;padding-bottom:120px}
.disp{font-family:'Bricolage Grotesque',sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #7CF2C2;outline-offset:2px}

.hero{background:linear-gradient(170deg,var(--hero) 0%,var(--hero) 45%,var(--hero2) 100%);border-radius:0 0 32px 32px;color:#FFFFFF;padding-bottom:22px;position:relative;overflow:hidden}
.glow{position:absolute;right:-90px;top:-110px;width:300px;height:300px;border-radius:999px;background:radial-gradient(circle,rgba(124,242,194,.22),rgba(124,242,194,0) 70%);pointer-events:none}
.top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 16px 0}
.brand{display:flex;align-items:center;gap:8px}
.brand span{font-size:25px;font-weight:800;letter-spacing:-.03em}
.acts{display:flex;align-items:center;gap:8px}
.pill-ej{padding:5px 10px;border-radius:999px;background:#FFD66B;color:#0E1633;font-size:12px;font-weight:700}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;padding:0}
.icon-btn svg{display:block}

.intro{position:relative;padding:26px 16px 0}
.intro p.per{margin:0;font-size:14px;color:#C7D1FF}
.intro h1{margin:12px 0 0;font-size:38px;line-height:1.04;font-weight:800;letter-spacing:-.035em}
.intro p.alt{margin:10px 0 0;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:#DCE3FF}

.chart{position:relative;margin-top:16px}
.chart svg{display:block;width:100%;height:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.when{position:absolute;left:16px;top:-2px;font-size:12px;color:#FFFFFF;font-weight:600;opacity:0;transition:opacity .15s}
.chart.scrub .when{opacity:1}
.hint{margin:4px 16px 0;font-size:12px;color:#AEBBF5}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.8s cubic-bezier(.4,0,.2,1) .3s forwards}
.ghost{opacity:0;animation:fade .8s ease 1.9s forwards}
.area{opacity:0;animation:fade 1s ease 1.4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.cursor{opacity:0;transition:opacity .12s}
.chart.scrub .cursor{opacity:1}

.legend{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 0}
.leg{border-radius:16px;background:rgba(255,255,255,.1);padding:12px 14px}
.leg.g{background:rgba(124,242,194,.14)}
.leg .k{display:flex;align-items:center;gap:8px;font-size:13px;color:#DCE3FF}
.leg .v{margin-top:4px;font-size:20px;font-weight:700}
.leg.g .v{color:#7CF2C2}
.sw{width:16px;height:3px;border-radius:2px;background:#FFFFFF;flex:none}
.sw.d{height:0;background:none;border-top:3px dashed #7CF2C2}

section{padding:34px 16px 0}
h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.lead{margin:6px 0 16px;font-size:14px;line-height:1.45;color:var(--muted)}
.loss{color:var(--loss)}.gain{color:var(--gain)}
.panel{background:var(--surface);border-radius:20px;transition:background-color .3s ease}

.nums{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:12px}
.nums>div{padding:16px 12px 16px 0;border-bottom:1px solid var(--line)}
.nums>div:nth-child(odd){border-right:1px solid var(--line)}
.nums>div:nth-child(even){padding-left:16px;padding-right:0}
.nums .k{font-size:13px;color:var(--muted)}
.nums .v{margin-top:2px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.nums .s{font-size:12px;line-height:1.4;color:var(--muted)}
.dd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px;font-size:14px}
.dd span:first-child{color:var(--muted)}

.par{padding:12px 0;border-bottom:1px solid var(--divider)}
.par:last-child{border-bottom:0}
.par .row{display:flex;justify-content:space-between;align-items:baseline}
.par .n{font-size:15px;font-weight:700}
.par .c{font-weight:400;font-size:12px;color:var(--muted)}
.par .r{font-size:15px;font-weight:700}
.bar{position:relative;height:18px;margin-top:6px}
.bar .z{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--axis)}
.bar .b{position:absolute;height:10px;top:4px}
.bar .b.pos{left:50%;border-radius:0 4px 4px 0;background:var(--gain)}
.bar .b.neg{right:50%;border-radius:4px 0 0 4px;background:var(--loss)}

.heat{display:grid;grid-template-columns:84px repeat(5,minmax(0,1fr));gap:4px;font-size:12px}
.heat .h{text-align:center;color:var(--muted)}
.heat .s{display:flex;align-items:center;font-size:13px;font-weight:600}
.heat .cell{height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.scale{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--muted)}
.scale i{flex:1;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--loss-rgb),.9),rgba(var(--loss-rgb),.12) 48%,rgba(var(--gain-rgb),.12) 52%,rgba(var(--gain-rgb),.9))}
.note{margin:8px 0 0;font-size:12px;color:var(--muted)}

.cost{padding:18px 16px}
.cost .row{font-size:13px;display:flex;justify-content:space-between;gap:12px}
.cost .row b{font-weight:700}
.cost .tr{margin:6px 0 14px;height:14px;position:relative}
.cost .tr span{position:absolute;height:14px;border-radius:4px}
.cost .tot{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline}
.cost .tot span:first-child{font-size:14px;font-weight:600}
.cost .tot span:last-child{font-size:24px;font-weight:800}

.dur{display:flex;flex-direction:column;gap:12px}
.dur .row{display:flex;justify-content:space-between;font-size:13px}
.dur .row b{font-weight:700}
.dur .t{margin-top:6px;height:22px;border-radius:8px;background:var(--track)}
.dur .t div{height:22px;border-radius:8px}

.cta{border-radius:24px;background:var(--cta);border:1px solid var(--cta-line);color:#FFFFFF;padding:22px 20px}
.cta p{margin:8px 0 18px;font-size:15px;line-height:1.5;color:var(--cta-text)}
.cta button{width:100%;height:54px;border:0;border-radius:14px;background:#2340D8;color:#FFFFFF;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px}
.cta small{display:block;margin-top:10px;font-size:12px;color:var(--cta-text);opacity:.8}
.foot{margin:22px 16px 0;font-size:12px;line-height:1.5;color:var(--muted)}

nav{position:fixed;left:max(12px,calc(50% - 203px));right:max(12px,calc(50% - 203px));bottom:calc(14px + env(safe-area-inset-bottom));z-index:10;height:66px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--nav-shadow);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));transition:background-color .3s ease}
nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none}
nav a[aria-current]{color:#4F6BFF;font-weight:700}
:root[data-theme="light"] nav a[aria-current]{color:#2340D8}
nav svg{stroke:currentColor}

@media (prefers-reduced-motion: reduce){
  .draw{animation:none;stroke-dashoffset:0}.ghost,.area{animation:none;opacity:1}
  body,.panel,nav{transition:none}
}
:root{--surface2:#FFFFFF;--panel-line:#E3E8F2}
:root[data-theme="dark"]{--surface2:#0F1840;--panel-line:rgba(255,255,255,.07)}
.panel,.tile{background:linear-gradient(180deg,var(--surface),var(--surface2));border:1px solid var(--panel-line);border-radius:24px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{padding:14px;border-radius:20px;min-width:0}
.tile.wide{grid-column:1/-1}
.tile .k{font-size:13px;color:var(--muted)}
.tile .v{margin-top:2px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tile .unit{font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted)}
.tile .s{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;line-height:1.4;color:var(--muted)}
.tile .s.r{display:block;margin:0;text-align:right;max-width:58%}
.split{display:flex;gap:3px;height:8px;margin-top:12px}
.split span{height:8px;border-radius:999px}
.split .g,.pb .g{background:var(--gain)}.split .l,.pb .l{background:var(--loss)}
.pair-bars{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.pb{height:6px;border-radius:999px;background:var(--track)}
.pb span{display:block;height:6px;border-radius:999px}
.range{position:relative;height:14px;margin-top:12px}
.range .rail{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--loss),var(--track) 60%,var(--track) 75%,var(--gain))}
.range .zero{position:absolute;top:0;width:2px;height:14px;background:var(--axis)}
.range .avg{position:absolute;top:2px;width:10px;height:10px;margin-left:-5px;border-radius:999px;background:var(--loss);box-shadow:0 0 0 3px var(--surface)}
.streak{display:flex;gap:4px;margin-top:12px}
.streak i{flex:1;height:8px;border-radius:3px;background:var(--loss)}
.row-b{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.under{display:block;width:100%;height:60px;margin-top:12px}
.pares{padding:6px 14px}
.par{padding:12px 0}
.par.worst{margin:4px -8px;padding:12px 8px;border-radius:14px;background:rgba(var(--loss-rgb),.1);border-bottom:0}
.bar::before{content:"";position:absolute;left:0;right:0;top:4px;height:10px;border-radius:4px;background:var(--track)}
.bar .z{z-index:1}
.bar .b{z-index:1}
.heat-panel{padding:14px}
.heat .cell.worst{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--loss)}
.callout{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:12px;background:rgba(var(--loss-rgb),.1);font-size:13px;line-height:1.4}
.callout svg{flex:none}
.cost{padding:18px 16px;margin-top:16px}
.cost .big{display:flex;align-items:center;gap:12px}
.cost .big .disp{font-size:46px;font-weight:800;letter-spacing:-.03em;color:var(--loss);line-height:1}
.cost .big span:last-child{font-size:14px;line-height:1.4;color:var(--muted)}
.stack{display:flex;gap:3px;height:28px;margin:16px 0 6px}
.stack span{height:28px;border-radius:8px}
.keys{list-style:none;margin:0 0 4px;padding:0}
.keys li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--divider);font-size:14px}
.keys li:last-child{border-bottom:0}
.keys i{width:10px;height:10px;border-radius:3px;flex:none}
.keys span{flex:1}
.keys b{font-weight:700}
.dur{padding:16px;display:block}
.lane{margin-bottom:14px}
.lane .row{display:flex;justify-content:space-between;font-size:14px}
.lane .t{margin-top:6px;height:22px;border-radius:8px;background-color:var(--track);background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--axis) calc(25% - 1px),var(--axis) 25%);position:relative;overflow:hidden}
.lane .t span{display:block;height:22px;border-radius:8px}
.ruler{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.cta{position:relative;overflow:hidden;background:linear-gradient(160deg,#2340D8 0%,#1A2BA0 60%,#121D6E 100%);border:0}
.cta h2,.cta p,.cta button,.cta small{position:relative}
.cta p{color:#DCE3FF}
.cta small{color:#C7D1FF;opacity:1}
.cta button{background:#FFFFFF;color:#2340D8}
.cta .glow{right:-120px;top:-140px}
.grow{transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.b.neg.grow{transform-origin:right center}
.rv.in .grow{transform:scaleX(1)}
.streak i{transform:scaleY(0);transition:transform .35s ease}
.rv.in .streak i{transform:scaleY(1)}
.streak i:nth-child(2){transition-delay:.06s}.streak i:nth-child(3){transition-delay:.12s}.streak i:nth-child(4){transition-delay:.18s}.streak i:nth-child(5){transition-delay:.24s}.streak i:nth-child(6){transition-delay:.3s}.streak i:nth-child(7){transition-delay:.36s}.streak i:nth-child(8){transition-delay:.42s}
.stack span:nth-child(2){transition-delay:.15s}.stack span:nth-child(3){transition-delay:.3s}
html:not(.js) .grow,html:not(.js) .streak i{transform:none}
@media (prefers-reduced-motion: reduce){.grow,.streak i{transform:none;transition:none}}
.view{display:none}.view.active{display:block}
.band-wrap{padding:10px 16px 0}
#s-band{display:block;width:100%;height:auto;overflow:visible}
.legend.one{grid-template-columns:1fr}
.ses-list{padding:4px 16px}
.ses{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--divider)}
.ses:last-child{border-bottom:0}
.ses .dot{width:12px;height:12px;border-radius:999px;flex:none}
.ses .nm{flex:1;min-width:0}
.ses .nm b{display:block;font-size:15px}
.ses .nm span{font-size:13px;color:var(--muted)}
.st{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--track);color:var(--muted);white-space:nowrap}
.st.open{background:rgba(var(--gain-rgb),.16);color:var(--gain)}
.tz{padding:4px 16px}
.tz-row{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--divider)}
.tz-row:last-child{border-bottom:0}
.tz-row .dot{width:12px;height:12px;border-radius:999px;flex:none;margin-top:4px}
.tz-row b{font-size:15px}
.tz-row p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
/* Etapa M6: la pantalla Hoy (diseno/prototipo_hoy.html). Tus pares, noticias de hoy y tus avisos son filas que se
   tocan; el punto de color repite lo que dice la etiqueta (arriba, abajo, barrida o nada) */
.pares-hoy{padding:2px 14px}
.ph{width:100%;display:flex;align-items:center;gap:12px;padding:14px 0;border:0;border-bottom:1px solid var(--divider);background:transparent;color:var(--ink);text-align:left;font:inherit}
button.ph{cursor:pointer}
.ph:last-child{border-bottom:0}
.ph .dot{width:10px;height:10px;border-radius:999px;flex:none;background:var(--muted)}
.ph .dot.arriba{background:var(--gain)}
.ph .dot.abajo{background:var(--loss)}
.ph .dot.barrida{background:#C4B0FA}
.ph .dot.noticia{background:#E0A852}
.ph .dot.prendido{background:#7CF2C2}
:root[data-theme="light"] .ph .dot.barrida{background:#7B5CD6}
:root[data-theme="light"] .ph .dot.prendido{background:#18B87E}
.ph-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-b b{font-size:15px}
.ph-b span{font-size:13px;line-height:1.4;color:var(--muted)}
.ph-b .ph-sesgo{font-size:12px;opacity:.85}
.ph .st{flex:none;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(79,107,255,.14);color:#7B92FF;white-space:nowrap}
:root[data-theme="light"] .ph .st{color:#2340D8}
.ph .st.prender,:root[data-theme="light"] .ph .st.prender{background:#2340D8;color:#FFFFFF;padding:6px 12px}
.ph .chev{flex:none;width:8px;font-size:22px;line-height:1;color:var(--muted)}
.ph .chev::after{content:"›"}
.ph:focus-visible{outline:3px solid #4F6BFF;outline-offset:2px;border-radius:8px}
#h-kz{font-size:18px;line-height:1.2}
#h-sesgo-nota[hidden]{display:none}
/* en pantallas angostas la etiqueta baja abajo de la frase (en el prototipo se escondía: aquí se queda, porque es
   la que lo dice con palabras) */
@media (max-width:360px){
  .ph{flex-wrap:wrap;row-gap:6px}
  .ph-b{flex-basis:calc(100% - 52px)}
  .ph .st{order:3;margin-left:22px}
}
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:22px 16px 0}
.wd{border-radius:14px;background:rgba(255,255,255,.09);padding:10px 0 9px;display:flex;flex-direction:column;align-items:center;gap:1px}
.wd span{font-size:12px;color:#C7D1FF}
.wd b{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800}
.wd i{display:flex;gap:3px;height:6px;margin-top:5px}
.wd em{width:6px;height:6px;border-radius:999px;background:#FF9C92}
.wd.hot{background:#FFFFFF;color:#0E1633}
.wd.hot span{color:#2340D8;font-weight:700}
.wd.hot em{background:#E0453A}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.day h3{margin:22px 0 10px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(var(--loss-rgb),.15);color:var(--loss)}
.nl{padding:2px 14px}
.ni{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--divider)}
.ni:last-child{border-bottom:0}
.cur{flex:none;width:44px;height:28px;border-radius:8px;background:var(--track);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.nb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nb b{font-size:15px;line-height:1.3}
.nb span{font-size:13px;color:var(--muted)}
.nb .pairs{font-size:12px;color:var(--ink);opacity:.8}
.nt{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.nt b{font-size:17px;font-weight:800}
.nh{font-size:12px;color:var(--muted);white-space:nowrap}
.nt a{font-size:12px;font-weight:600;color:#7B92FF;white-space:nowrap}
:root[data-theme="light"] .nt a{color:#2340D8}
.callout.info{margin-top:22px;background:rgba(79,107,255,.12)}
.callout.info svg{color:#7B92FF}
.empty-msg{font-size:14px;color:var(--muted);padding:18px 0 0;margin:0}
.lots{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.lots .disp{font-size:76px;font-weight:800;letter-spacing:-.045em;line-height:.95}
.lots span:last-child{font-size:20px;font-weight:600;color:#DCE3FF}
.gauge{margin:20px 16px 0;height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.gauge-fill{height:10px;border-radius:999px;background:#7CF2C2;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.form{padding:2px 16px;margin-top:14px}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;border-bottom:1px solid var(--divider)}
.f-row.last{border-bottom:0}
.f-row.col{flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:14px 0}
.f-top{display:flex;justify-content:space-between;align-items:baseline}
.f-top b{font-size:17px}
.f-k{font-size:14px;color:var(--muted)}
.f-row input:not([type=range]),.f-row select{width:150px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 17px 'Instrument Sans',sans-serif;text-align:right;text-align-last:right;padding:0 12px}
.f-row input:focus-visible,.f-row select:focus-visible,input[type=range]:focus-visible,.seg button:focus-visible,.chip:focus-visible{outline:3px solid #7B92FF;outline-offset:2px}
input[type=range]{width:100%;height:28px;margin:0;accent-color:#4F6BFF}
.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{border:0;background:transparent;height:38px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:700;color:var(--muted)}
.seg button.on{background:#2340D8;color:#FFFFFF}
.sl{padding:18px 16px}
.sl-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sl .k{font-size:13px;color:var(--muted)}
.sl .v{margin-top:2px;font-size:28px;font-weight:700;letter-spacing:-.02em}
.sl .s{font-size:12px;color:var(--muted)}
.big-split{height:12px;margin-top:16px}
.big-split span{height:12px}
.sl-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.par.empty .n,.par.empty .c{color:var(--muted);font-weight:500}

/* ---------- Agregado en la página real (no estaba en el prototipo) ---------- */
[hidden]{display:none!important}
.saltar{position:absolute;left:-9999px;top:0}
.saltar:focus{left:16px;top:12px;z-index:20;padding:8px 12px;border-radius:10px;background:var(--surface);color:var(--ink)}
/* Recibo sin reporte, cargando y con error: el mismo bloque azul */
.btn-subir{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 32px);height:54px;margin:22px 16px 0;border:0;border-radius:14px;background:#FFFFFF;color:#2340D8;font-weight:700;font-size:16px;position:relative}
.hero-pie{position:relative;margin:10px 16px 0;font-size:12px;line-height:1.5;color:#C7D1FF}
.link-ej{position:relative;display:inline-block;margin:14px 16px 0;font-size:15px;font-weight:600;color:#FFFFFF;text-underline-offset:3px}
.cta .link-ej{position:relative;margin:14px 0 0;color:#FFFFFF}
.pasos{display:flex;flex-direction:column;gap:10px}
.paso{display:flex;align-items:center;gap:14px;padding:14px}
.paso svg{flex:none;display:block;width:104px;height:78px;border-radius:12px}
.paso b{display:block;font-size:15px}
.paso span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.barra-carga{position:relative;margin:22px 16px 0;height:10px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.barra-carga i{position:absolute;top:0;left:0;height:10px;width:40%;border-radius:999px;background:#7CF2C2;animation:carga 1.3s ease-in-out infinite}
@keyframes carga{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion: reduce){.barra-carga i{animation:none;width:100%}}
.aviso-pocas{position:relative;margin:16px 16px 0;padding:10px 12px;border-radius:12px;background:rgba(255,214,107,.16);color:#FFE7A8;font-size:13px;line-height:1.45}
/* «¿Y si…?»: pastillas sobre el azul */
.yasi-k{position:relative;margin:14px 16px 0;font-size:12px;color:#AEBBF5}
.chips.yasi{position:relative;padding:8px 16px 4px}
.yasi .chip{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#FFFFFF}
.yasi .chip.on{background:#FFFFFF;color:#2340D8;border-color:#FFFFFF}
.heat .s{line-height:1.15}
.heat .cell.vacia{background:var(--track);color:var(--muted);font-weight:500}
.ni .ant{font-size:12px;color:var(--muted)}
.cuadre h3{margin:0;font-size:15px;font-weight:700}
.cuadre p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.lane.solo{margin-bottom:14px}
button.link-ej{background:none;border:0;padding:0;text-decoration:underline;font-family:inherit}
/* Dibujos de los pasos (SVG propios, sin capturas de MetaTrader) */
.pv-fondo{fill:var(--paper)}.pv-ventana{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.pv-barra{fill:var(--track)}.pv-linea{fill:var(--line)}.pv-texto{fill:var(--muted);font:600 7px 'Instrument Sans',sans-serif}
.pv-activo{fill:#2340D8}.pv-activo-t{fill:#FFFFFF;font:700 7px 'Instrument Sans',sans-serif}
.pv-menu{fill:var(--surface);stroke:var(--axis);stroke-width:1}.pv-cursor{fill:var(--ink);stroke:var(--surface);stroke-width:1}
.pv-excel{fill:#0F9D6B}.pv-excel-t{fill:#FFFFFF;font:800 8px 'Instrument Sans',sans-serif}
/* Lo que el prototipo ponía con style="" o con var() en atributos de SVG */
.nav-raya{stroke:var(--surface)}
.c-loss-st{stroke:var(--loss)}.c-loss-fill{fill:var(--loss)}
.dd-eje{stroke:var(--axis)}.dd-area{fill:rgba(var(--loss-rgb),.28);stroke:var(--loss)}
.tile .s .der{text-align:right}
/* Rachas: la fecha y el monto, cada uno en su renglón; el monto nunca se parte */
.tile .s.ra{display:block}
.tile .s.ra>span{display:block}
.ra-cara{margin-top:10px;padding-top:10px;border-top:1px solid var(--panel-line)}
.ra-cara .k{font-size:12px}
.ra-cara .s.ra{margin-top:2px}
/* El texto del recuadro de la curva alternativa se acomoda en renglones; nunca se corta */
.leg .k span:not(.sw){min-width:0;overflow-wrap:anywhere}
.k-op{background:var(--loss)}.k-com{background:#F08A3E}.k-swap{background:#F5B83D}
.racha-v{color:#FFB4AC}
.nw{white-space:nowrap}
.foot a{color:inherit;text-underline-offset:3px}
/* Aviso de privacidad */
a.brand{color:#FFFFFF;text-decoration:none}
.texto{padding:4px 16px}
.texto p{margin:14px 0;font-size:14px;line-height:1.55}
.app.privacidad{padding-bottom:48px}
/* Por operación: si «Peor» y «Mejor» no caben lado a lado (pantallas de 320 px), «Mejor» baja a su
   renglón, pegado a la derecha y con el mismo margen del recuadro */
.tile .s.extremos{flex-wrap:wrap;row-gap:6px}
.tile .s.extremos .der{margin-left:auto}
/* Mapa de calor: la explicación va pegada a la frase de abajo; el tamaño de los números lo ajusta
   app.js y, si no caben, el nombre de la sesión sube a su propio renglón */
.lead.explica{margin-bottom:0}
.heat{grid-template-columns:84px repeat(var(--dias,5),minmax(0,1fr))}
.heat .cell{font-size:var(--letra,12px);white-space:nowrap}
.heat.apilado{grid-template-columns:repeat(var(--dias,5),minmax(0,1fr))}
.heat.apilado .esquina{display:none}
.heat.apilado .s{grid-column:1/-1;margin-top:6px}
/* Sin stop: las columnas no crecen con el monto; app.js baja la letra si no cabe */
.sl-cols>div{min-width:0}
.sl .v{white-space:nowrap}
/* ---------- Mapa del día (etapa M1), como diseno/prototipo_mapa.html. La barra de abajo ahora tiene cinco pantallas ---------- */
nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.pares-chips{display:flex;gap:8px;overflow-x:auto;padding:16px 16px 0;scrollbar-width:none}
.pares-chips::-webkit-scrollbar{display:none}
.pchip{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#FFFFFF;font-size:14px;font-weight:600}
.pchip.on{background:#FFFFFF;color:#1C31AE;border-color:#FFFFFF}
.pchip:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.mapa-wrap{padding:12px 10px 0}
.mapa-svg{display:block;width:100%;height:auto}
.mapa-svg .mt{font:600 9.5px 'Instrument Sans',sans-serif}
.mapa-svg .mp{font:600 8.5px 'Instrument Sans',sans-serif}
.mapa-svg .mn{font:800 9px 'Instrument Sans',sans-serif;fill:#1C31AE}
.tl{padding:4px 16px}
.ev{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--divider)}
.ev:last-child{border-bottom:0}
.ev .num{flex:none;width:24px;height:24px;border-radius:999px;background:#2340D8;color:#FFFFFF;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ev b{font-size:15px}
.ev p{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.ev time{font-weight:800;margin-right:6px;color:#7B92FF}
:root[data-theme="light"] .ev time{color:#2340D8}
.niveles{padding:2px 14px}
.nv{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--divider)}
.nv:last-child{border-bottom:0}
.sw2{width:4px;height:34px;border-radius:2px;flex:none}
.sw2.hoy{background:#FFFFFF}
:root[data-theme="light"] .sw2.hoy{background:#0E1633}
.nv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nv-b b{font-size:14px}
.nv-b span{font-size:12px;color:var(--muted)}
.bell{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0}
.bell:focus-visible{outline:3px solid #7B92FF;outline-offset:2px}
.m-vacio{margin:0;padding:14px 0;font-size:14px;color:var(--muted)}
.m-toast{position:fixed;left:50%;bottom:calc(94px + env(safe-area-inset-bottom));z-index:11;transform:translate(-50%,8px);max-width:calc(100% - 32px);padding:12px 16px;border-radius:14px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;box-shadow:var(--nav-shadow);opacity:0;transition:opacity .2s ease,transform .2s ease}
.m-toast.ver{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){.m-toast{transition:none}}
/* ---------- Avisos al celular (etapa M2). Con las piezas del prototipo: campana de los niveles (.bell.on,
   como diseno/prototipo_mapa.html), pastillas, .seg de la calculadora y los pasos del recibo ---------- */
.bell.on{background:#2340D8;border-color:#2340D8;color:#FFFFFF}
a.icon-btn{position:relative;text-decoration:none}
.avisos-btn .punto{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:999px;background:#7CF2C2}
.a-pares{flex-wrap:wrap}
.opciones{padding:2px 14px}
.op{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 0;border:0;border-bottom:1px solid var(--divider);background:transparent;text-align:left}
.op:last-child{border-bottom:0}
.op:focus-visible,.btn-sec:focus-visible{outline:3px solid #7B92FF;outline-offset:2px}
.op-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.op-b b{font-size:15px}
.op-b span{font-size:13px;line-height:1.4;color:var(--muted)}
.op .marca{flex:none;width:22px;height:22px;border-radius:999px;border:2px solid var(--line);transition:border-width .15s ease,border-color .15s ease}
.op[aria-checked="true"] .marca{border:7px solid #2340D8}
.op .interruptor{flex:none;position:relative;width:46px;height:28px;border-radius:999px;background:var(--track);transition:background-color .2s ease}
.op .interruptor::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.op[aria-checked="true"] .interruptor{background:#2340D8}
.op[aria-checked="true"] .interruptor::after{transform:translateX(18px)}
.a-propia{margin-top:10px}
.a-seg{width:fit-content;background:var(--surface)}
.a-acciones{display:flex;flex-direction:column;gap:10px}
.btn-sec{width:100%;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px;font-weight:700}
.btn-sec.quitar{color:var(--loss)}
.btn-sec:disabled,.btn-subir:disabled{opacity:.55;cursor:default}
@media (prefers-reduced-motion: reduce){.op .marca,.op .interruptor,.op .interruptor::after{transition:none}}
/* Mapa: un nombre que no cupo lejos de las líneas lleva un borde del color del fondo, para que la línea no lo tache */
.mapa-svg .mt.borde{paint-order:stroke;stroke:var(--hero);stroke:color-mix(in srgb,var(--hero) 50%,var(--hero2));stroke-width:3px;stroke-linejoin:round}
/* ---------- Idiomas (etapa M3). El selector «ES | EN» va junto al botón de tema, con la forma del .seg de la
   calculadora en chico; si en una pantalla angosta no cabe junto a la marca, los botones bajan de renglón ---------- */
.top{flex-wrap:wrap;row-gap:10px}
.acts{margin-left:auto}
.idioma-sel{display:flex;align-items:center;height:38px;padding:3px;gap:2px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.idioma-btn{min-width:30px;height:30px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.72);font-size:12px;font-weight:700;letter-spacing:.04em}
.idioma-btn.on{background:#FFFFFF;color:#2340D8}
.idioma-btn:focus-visible{outline:3px solid #7CF2C2;outline-offset:1px}
/* mientras llegan los textos (tema.js pone .js y textos.js .tx; a los 3 s se muestra igual) no se ve la página vacía */
html.js:not(.tx) body{visibility:hidden}
/* Sesiones: en pantallas angostas la pastilla de estado («Abierta, cierra en 7 h 55 min», «Open, closes in…») se
   parte en dos renglones antes de aplastar el nombre y el horario de la sesión; a 360 px o más se ve igual que antes */
.ses .nm{flex:1 0 auto}
.ses .nm span{white-space:nowrap}
.ses .st{white-space:normal;flex:0 1 auto;text-align:center;border-radius:14px}
/* Mapa: en «Lo que pasó hoy» solo los eventos numerados en la gráfica llevan número; los demás, un punto chico */
.ev .num.punto{background:transparent;height:20px}
.ev .num.punto::after{content:"";width:6px;height:6px;border-radius:999px;background:var(--muted);opacity:.5}
/* ---------- Revisión de una operación (etapa M4). Con las piezas que ya hay: el botón blanco del recibo sobre
   el azul, el formulario de la calculadora, las pastillas de estado de Sesiones y los interruptores de Avisos.
   diseno/prototipo_mapa.html no trae esta pantalla ---------- */
.rv-abrir{margin-top:16px}
.rv-form .f-k{display:flex;flex-direction:column;gap:2px}
.rv-falta{display:none;font-style:normal;font-size:12px;font-weight:600;color:#B7791F}
.rv-form .f-row.falta .rv-falta{display:block}
.rv-form .f-row.falta input,.rv-form .f-row.falta select,.rv-form .f-row.falta .seg{border-color:#E0A33A;box-shadow:0 0 0 1px #E0A33A}
.rv-form .f-row.col input{width:100%;text-align:left}
.rv-form .seg button{padding:0 14px}
.rv-error{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(var(--loss-rgb),.1);color:var(--loss);font-size:13px;line-height:1.45}
.btn-prim{width:100%;height:54px;margin-top:16px;border:0;border-radius:14px;background:#2340D8;color:#FFFFFF;font-size:16px;font-weight:700}
.btn-prim:disabled{opacity:.55;cursor:default}
.btn-prim:focus-visible,.rv-usar:focus-visible{outline:3px solid #7B92FF;outline-offset:2px}
.rv-resumen{padding:16px}
.rv-ctx{margin:0;font-size:13px;color:var(--muted)}
.rv-total{margin:4px 0 0;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.rv-cuentas{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rv-reglas{margin-top:12px;padding:2px 16px}
.rv-regla{padding:14px 0;border-bottom:1px solid var(--divider)}
.rv-regla:last-child{border-bottom:0}
.rv-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rv-cab b{font-size:15px;line-height:1.3}
.rv-ev{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.st.cumple{background:rgba(var(--gain-rgb),.16);color:var(--gain)}
.st.no_cumple{background:rgba(var(--loss-rgb),.14);color:var(--loss)}
.st.no_aplica{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.rv-cab .st{flex:0 1 auto;white-space:normal;text-align:center;border-radius:14px}
.rv-regla.apagada .rv-cab b,.rv-regla.apagada .rv-ev{opacity:.55}
.op.rv-usar{width:auto;min-height:0;margin:8px 0 0 auto;padding:4px 0;border:0;gap:10px;font-size:13px;color:var(--muted)}
.rv-acciones{display:flex;flex-direction:column;gap:10px;margin-top:16px}

/* Aviso de privacidad (M4): los enlaces a Anthropic, uno por renglón */
.rv-enlaces a { display: block; text-decoration: underline; }

/* Etapa M5: la línea del máximo y el mínimo del día, el chip «Pivotes», la tarjeta del sesgo y los grupos de
   «Niveles de hoy» */
.m-extremos{display:flex;flex-wrap:wrap;gap:2px 10px;margin:12px 16px 0;font-size:13px;line-height:1.4;color:#DCE3FF;font-variant-numeric:tabular-nums}
.m-extremos[hidden]{display:none}
.m-extremos span+span{color:#FFCB7D}
.m-capas{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 0}
.pchip.capa{height:28px;padding:0 12px;font-size:12px}
.m-sesgo{display:flex;flex-direction:column;gap:6px;padding:16px}
.m-sesgo .per{margin:0;font-size:12px;color:var(--muted)}
.m-sesgo h2{margin:0;font-size:18px}
.m-sesgo p{margin:0}
.m-sesgo-hecho{font-size:15px;font-weight:600}
.m-sesgo-nota{font-size:14px;line-height:1.45}
.m-sesgo-medido{font-size:12px;color:var(--muted)}
.nv-grupo{margin:14px 0 2px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nv-grupo:first-child{margin-top:4px}
.a-elige{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--loss)}
.a-elige[hidden]{display:none}
/* los estados largos («Barrido y regresó 10:30») pasan a dos renglones para que el nombre del nivel quepa a 320 px */
.nv .st{white-space:normal;flex:0 1 auto;max-width:42%;text-align:center;border-radius:14px}

/* Etapa M7: el marcador de tu regla (la tarjeta del mapa, debajo de la del sesgo, y la pantalla #marcador). Los mismos
   paneles, mosaicos y filas del prototipo; la tarjeta entera es el enlace a la pantalla completa */
.m-marcador{color:inherit;text-decoration:none}
.m-marcador>span{display:block}
.m-marcador:focus-visible{outline:3px solid #7B92FF;outline-offset:2px}
.mc-titulo{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em}
.mc-hecho{font-size:13px;line-height:1.45;color:var(--muted)}
.mc-veredicto{font-size:14px;font-weight:700;line-height:1.4}
.mc-aviso{font-size:12px;line-height:1.45;color:var(--muted)}
.m-marcador .mc-ver{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:700;color:#7B92FF}
:root[data-theme="light"] .m-marcador .mc-ver{color:#2340D8}
.mc-aviso-hero{position:relative;margin:14px 16px 0;font-size:13px;line-height:1.5;color:#DCE3FF}
.mc-lista .nv{align-items:flex-start}
.mc-lista .nv-b span{line-height:1.4}
.mc-lista .nv-b .mc-dice{font-size:13px;font-weight:600;color:var(--ink)}
.mc-h3{margin:22px 0 10px;font-size:17px;font-weight:800}
.tile .s.mc-col{display:block}
.mc-mas{margin-top:12px}
.mc-mas[hidden],.mc-vacio[hidden]{display:none}
.st.mal{background:rgba(var(--loss-rgb),.14);color:var(--loss)}
.m-marcador>span[hidden]{display:none}
.tile .s.mc-col span{display:block}

/* =================== D1a (ESPEC_D1_DISENO.md, diseño de diseno/prototipo_d1.html) =================== */
@property --h1{syntax:'<color>';inherits:true;initial-value:#1C31AE}
@property --h2{syntax:'<color>';inherits:true;initial-value:#0F1B5E}
/* acento coral: --acento para texto (AA en los dos temas), --acento-fondo para lo prendido con texto blanco */
:root{--acento:#C8304E;--acento-suave:rgba(200,48,78,.12);--acento-fondo:#C8304E;--coral1:#FF907C;--coral2:#FF5A88}
:root[data-theme="dark"]{--acento:#FF8A96;--acento-suave:rgba(255,116,130,.16)}
/* el bloque de arriba toma el color de la sesión abierta (1 s) */
body{--h1:#1C31AE;--h2:#0F1B5E;transition:--h1 1s ease,--h2 1s ease}
body.ses-asia{--h1:#5232C9;--h2:#1D0F63}
body.ses-londres{--h1:#1C31AE;--h2:#0D1A5C}
body.ses-nueva_york{--h1:#A84A1B;--h2:#55163A}
body.ses-cerrado{--h1:#2C3658;--h2:#0E1430}
.hero{background:linear-gradient(160deg,var(--h1) 0%,var(--h1) 35%,var(--h2) 100%)}
body.ses-nueva_york .hero .per,body.ses-nueva_york .hero .hint,body.ses-nueva_york .leg .k,body.ses-nueva_york .intro p.alt{color:#FFFFFF}
.ses-nueva_york .glow{background:radial-gradient(circle,rgba(255,200,120,.25),rgba(255,200,120,0) 70%)}
.ses-asia .glow{background:radial-gradient(circle,rgba(196,176,250,.28),rgba(196,176,250,0) 70%)}
/* tarjetas de cristal, solo en el bloque de arriba */
.leg,.hero .pchip,.hero .wd{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.leg.g{background:rgba(124,242,194,.16)}
.hero .pchip.on{background:#FFFFFF;color:#1C31AE}
.hero .wd.hot{background:#FFFFFF}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.leg,.hero .pchip,.hero .wd{background:rgba(20,30,90,.55)}.hero .pchip.on,.hero .wd.hot{background:#FFFFFF}}
/* acento coral: pestaña activa, chip prendido y la marca que se desliza */
nav a[aria-current],:root[data-theme="light"] nav a[aria-current]{color:var(--acento)}
.chip.on{background:var(--acento-fondo);border-color:var(--acento-fondo);color:#FFFFFF}
nav .ind{position:absolute;top:6px;left:0;height:4px;width:26px;border-radius:999px;background:linear-gradient(90deg,var(--coral1),var(--coral2));opacity:0;transition:left .25s cubic-bezier(.3,.7,.2,1)}
/* logo: el parpadeo de los ojos-vela pasó a la pantalla de arranque (D1c, en index.html) */
/* cambiar de pantalla y tarjetas que entran */
.view.active.de-der{animation:deDer .25s ease-out}
.view.active.de-izq{animation:deIzq .25s ease-out}
@keyframes deDer{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
@keyframes deIzq{from{transform:translateX(-26px);opacity:.4}to{transform:none;opacity:1}}
.entra{animation:sube .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes sube{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
/* al tocar */
.ph,.chip,.pchip,.icon-btn,nav a,.bell,.op,.btn-subir,.btn-sec,.m-marcador{transition:transform .15s ease}
.ph:active,.chip:active,.pchip:active,.icon-btn:active,nav a:active,.bell:active,.op:active,.btn-subir:active,.btn-sec:active,.m-marcador:active{transform:scale(.97)}
/* gráficas que se dibujan (la primera vez de cada sesión) */
.dibuja{animation:dibuja .6s cubic-bezier(.3,.6,.2,1) both}
@keyframes dibuja{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* precio en vivo */
.vivo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:13px;color:#FFFFFF}
.vivo[hidden]{display:none}
.vivo b{font-variant-numeric:tabular-nums;transition:color .3s ease}
.vivo .pt{width:7px;height:7px;border-radius:999px;background:#7CF2C2;animation:late 2s ease-in-out infinite}
.vivo.sube b{color:#7CF2C2}.vivo.baja b{color:#FFB4AC}
.vivo.sube,.vivo.baja{animation:destello .3s ease}
@keyframes destello{from{opacity:.55}to{opacity:1}}
@keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
/* la aguja de la hora late despacio */
#s-band .aguja{animation:late 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
/* esqueleto mientras carga */
.esqs{padding:8px 2px}
.esq{display:block;position:relative;overflow:hidden;border-radius:10px;background:var(--track);height:14px;margin:10px 0}
.hero .esq{background:rgba(255,255,255,.14)}
.esq::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:brillo 1.1s infinite}
@keyframes brillo{to{transform:translateX(100%)}}
.esq.alto{height:120px;border-radius:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;font-size:0;line-height:0}
/* «Ver por qué» y secciones plegables, con altura animada */
details.porque{margin:4px 0 14px}
details.porque summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--acento)}
details.porque summary::-webkit-details-marker{display:none}
details.porque summary::after{content:"›";display:inline-block;transition:transform .2s ease}
details.porque[open] summary::after{transform:rotate(90deg)}
details.porque .cuerpo{overflow:hidden;font-size:13px;line-height:1.5;color:var(--muted);padding-top:6px}
.plegable>h2{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.plegable>h2::after{content:"›";font-size:24px;color:var(--muted);transition:transform .2s ease}
.plegable.abierta>h2::after{transform:rotate(90deg)}
.plegable:not(.abierta)>*:not(h2){display:none}
/* la tarjeta «Así cerró el día» */
.repaso{background:linear-gradient(135deg,rgba(255,144,124,.16),rgba(255,90,136,.10));border:1px solid rgba(255,116,130,.35);border-radius:24px;padding:16px}
.repaso .rp-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.repaso h3{margin:0;font-size:18px}
.repaso .nota{font-size:11px;color:var(--muted)}
.rp-l{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.rp-i{border-radius:14px;background:var(--surface);padding:10px 12px;font-size:12px;line-height:1.4;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.rp-i b{display:block;font-size:14px;color:var(--ink)}
.rp-regla{margin:10px 0 0;font-size:13px}
/* barra del marcador: de 0 a 100% con la franja del intervalo de 95% y la línea de 50% */
.mbar{position:relative;display:block;height:30px;margin:16px 0 6px}
.mbar span{display:block}
.mbar .riel{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:999px;background:var(--track)}
.mbar .franja{position:absolute;top:8px;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--coral1),var(--coral2));opacity:.85;transform-origin:left center;animation:crece .6s cubic-bezier(.2,.7,.2,1) both}
.mbar .cin{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);opacity:.7}
.mbar .cin::after{content:"50%";position:absolute;top:-2px;left:5px;font-size:10px;font-weight:700;color:var(--muted)}
.mbar .pto{position:absolute;top:6px;width:18px;height:18px;margin-left:-9px;border-radius:999px;background:#FFFFFF;border:3px solid var(--coral2);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mbar.chica{height:22px;margin:8px 0 0}.mbar.chica .riel{top:9px;height:4px}.mbar.chica .franja{top:6px;height:10px}.mbar.chica .pto{top:3px;width:14px;height:14px;margin-left:-7px;border-width:2px}.mbar.chica .cin::after{display:none}
.mbar-ej{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.mbar-panel{padding:16px}
@keyframes crece{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* estados vacíos ilustrados */
.vacio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 16px;color:var(--muted);font-size:14px;line-height:1.45}
.vacio svg{width:84px;height:84px}
.vacio b{color:var(--ink);font-size:16px}
a.vacio,button.vacio{width:100%;border:0;background:transparent;font:inherit;text-decoration:none;cursor:pointer}
[hidden]{display:none !important}
/* movimiento reducido: nada se mueve */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* =================== D1a.2 (ESPEC_D1A2_COLORES.md, diseño de diseno/prototipo_d1_coral_negro.html) ===================
   los colores del logo: el bloque de arriba coral con texto negro, el tema oscuro en negro con texto coral, el claro con
   tinta negra (D1a.3); azul marino para lo que se toca. Verde y rojo solo para subidas, bajadas, ganancias y pérdidas.
   D1a.3: todo con .cn (D1e: los tres temas la llevan; el Oscuro y el Claro nuevos van encima, al final) */
:root.cn{--paper:#FFF4F2;--surface:#FFFFFF;--surface2:#FFF8F7;--line:#F3D3D3;--divider:#FBE6E6;--ink:#0A0A0F;--muted:#5D5F8F;--track:#F6DCDC;--panel-line:#F6DADA}
:root.cn[data-theme="dark"]{--paper:#050507;--surface:#141418;--surface2:#0D0D10;--line:#2A2A33;--divider:#1E1E25;--ink:#FF8A7E;--muted:#C98D95;--track:#22222B;--panel-line:rgba(255,255,255,.07);--acento:#FF8A7E;--acento-suave:rgba(255,138,126,.14)}
/* el bloque de arriba: siempre coral (con el mercado cerrado, apagado); la sesión se ve en las luces */
.cn body.ses-asia{--h1:#FF8A7E;--h2:#FF5A88}
.cn body.ses-londres{--h1:#FF8A7E;--h2:#FF5A88}
.cn body.ses-nueva_york{--h1:#FF8A7E;--h2:#FF5A88}
.cn body.ses-cerrado{--h1:#E8899A;--h2:#D06080}
.cn body{--h1:#FF8A7E;--h2:#FF5A88}
.cn .hero .glow{background:radial-gradient(circle,rgba(255,144,124,.5),rgba(26,38,166,0) 70%)}
.cn .ses-asia .hero .glow{background:radial-gradient(circle,rgba(196,176,250,.6),rgba(26,38,166,.25) 45%,rgba(26,38,166,0) 70%)}
.cn .ses-londres .hero .glow{background:radial-gradient(circle,rgba(255,190,170,.6),rgba(26,38,166,.25) 45%,rgba(26,38,166,0) 70%)}
.cn .ses-nueva_york .hero .glow{background:radial-gradient(circle,rgba(255,210,94,.6),rgba(255,144,124,.3) 45%,rgba(255,144,124,0) 70%)}
.cn .ses-cerrado .hero .glow{background:none}
/* texto negro en el bloque coral */
.cn .hero,.cn a.brand,.cn .hero .brand span,.cn .hero .intro h1,.cn .hero .intro p.per,.cn .hero .intro p.alt,.cn body.ses-nueva_york .hero .per,.cn body.ses-nueva_york .intro p.alt,.cn .hero .leg .k,.cn body.ses-nueva_york .leg .k,.cn .hero .leg .v,.cn .hero .hint,.cn body.ses-nueva_york .hero .hint,.cn .hero .when,.cn .hero .vivo,.cn .hero .vivo b,.cn .hero .vivo.sube b,.cn .hero .vivo.baja b,.cn .hero .wd,.cn .hero .wd span,.cn .hero .wd b,.cn .hero .hero-pie,.cn .hero .link-ej,.cn .hero .yasi-k,.cn .hero .yasi .chip,.cn .hero .lots span:last-child,.cn .hero .m-extremos,.cn .hero .m-extremos span+span,.cn .hero .mc-aviso-hero,.cn .hero .idioma-btn,.cn .hero .pchip{color:#0A0A0F !important}
.cn .hero .hint{opacity:.8}
.cn .hero .leg,.cn .hero .wd,.cn .hero .pchip,.cn .hero .vivo,.cn .hero .yasi .chip,.cn .hero .idioma-sel,.cn .hero .icon-btn{background:rgba(10,10,15,.08) !important;border-color:rgba(10,10,15,.22) !important;box-shadow:none !important}
.cn .hero .icon-btn{border-color:rgba(10,10,15,.3) !important}
.cn .hero .icon-btn svg :is(path,circle,line,rect,polyline){stroke:#0A0A0F !important}
.cn .hero .sw{background:#0A0A0F}
.cn .hero .vivo .pt{background:#0A0A0F}
.cn .hero .esq,.cn .hero .gauge,.cn .hero .barra-carga{background:rgba(10,10,15,.12)}
/* «Tu kill zone», el chip elegido, la hora caliente y el idioma elegido: negro con coral */
.cn .hero .leg.g{background:rgba(10,10,15,.88) !important}
.cn .hero .leg.g .k,.cn .hero .leg.g .v{color:#FF8A7E !important}
.cn .hero .pchip.on,.cn .hero .wd.hot,.cn .hero .yasi .chip.on,.cn .hero .idioma-btn.on{background:#0A0A0F !important;border-color:#0A0A0F !important;color:#FF8A7E !important}
.cn .hero .wd.hot span,.cn .hero .wd.hot b{color:#FF8A7E !important}
.cn #s-band text{fill:#0A0A0F !important}
.cn #s-band line,.cn #s-band circle{stroke:#0A0A0F !important}
.cn #s-band circle.aguja{fill:#0A0A0F !important}
/* la gráfica del mapa, en su tarjeta negra dentro del bloque coral (las velas no cambian de color) */
.cn .mapa-wrap{background:#0A0A0F;border-radius:16px;margin:12px 16px 0;padding:4px;--hero:#0A0A0F;--hero2:#0A0A0F}
/* azul marino para lo que se toca */
.cn .btn-prim,.cn .btn-subir,.cn .seg button.on,.cn .bell.on,.cn .ev .num,.cn .ph .st.prender,:root.cn[data-theme="light"] .ph .st.prender{background:linear-gradient(135deg,#1A26A6,#2E3FD9) !important;border-color:#1A26A6 !important;color:#FFFFFF !important}
.cn .cta button{background:#FFFFFF !important;color:#1A26A6 !important}
.cn .chip.on{background:var(--ink) !important;border-color:var(--ink) !important;color:var(--paper) !important}
/* etiquetas de los pares */
.cn .ph .st{background:rgba(26,38,166,.12) !important;color:#2E3FD9 !important}
:root.cn[data-theme="dark"] .ph .st{background:rgba(255,138,126,.14) !important;color:#FF8A7E !important}
/* coral para lo activo (en claro, el coral de texto de la D1a: #E8456A no llega a AA sobre blanco) */
.cn nav a[aria-current],:root.cn[data-theme="light"] nav a[aria-current]{color:var(--acento) !important}
.cn h2{color:var(--ink)}
:root.cn[data-theme="dark"] .ph-b b{color:#FF8A7E}

/* --- D1a.3 (ESPEC_D1A3_TEMAS.md): el menú de los temas, su palomita y el cambio de colores en 300 ms (D1e: Coral,
   Oscuro y Claro; el Azul se quitó) --- */
.menu-tema{position:fixed;z-index:70;min-width:184px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--nav-shadow);animation:aparece .15s}
.menu-tema button{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:left}
.menu-tema button:hover,.menu-tema button:focus-visible{background:var(--paper)}
.menu-tema i{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--line)}
.m-coral{background:linear-gradient(135deg,#FF8A7E 50%,#050507 50%)}
.m-oscuro{background:linear-gradient(135deg,#1C1C1E 50%,#000000 50%)}
.m-claro{background:linear-gradient(135deg,#FFFFFF 50%,#F2F2F7 50%)}
.menu-tema svg{width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--acento);stroke-width:3;stroke-linecap:round;opacity:0}
.menu-tema [aria-checked="true"] svg{opacity:1}
@media (prefers-reduced-motion: no-preference){html.cambia *,html.cambia ::before,html.cambia ::after{transition:background-color .3s,color .3s,border-color .3s,fill .3s,stroke .3s !important}}
/* --- fin D1a.3 --- */

/* === D1b (ESPEC_D1_DISENO.md, opciones 5 a 26; prototipo_d1.html con los colores de la D1a.2): lo nuevo lleno, en coral
   con negro. Solo se mueven transform y opacity; con movimiento reducido, la regla de la D1a lo apaga === */
:root{--cl:linear-gradient(135deg,#FF8A7E,#FF5A88)}
.btn-coral,.rapido i,.banner-kz,.mini>div,.rt-i.hecho .ck,.bv-pts i.on,.puntos-b i.on,.modo-kz .barra i{background:var(--cl);color:#0A0A0F}
.btn-coral{height:38px;padding:0 16px;border-radius:999px;border:0;font-weight:700;font-size:14px}
.btn-coral,.rapido,.res,.banner-kz,.ck,.bit-ops button{transition:transform .15s}
:is(.btn-coral,.rapido,.res,.banner-kz,.ck,.bit-ops button):active{transform:scale(.95)}
:is(.velo,.hoja,#v-hoy) :is(button,a):focus-visible{outline-color:var(--acento)}
.hero{isolation:isolate}
.view.active .hero::before{content:"";position:absolute;inset:-30%;z-index:-1;background:linear-gradient(160deg,var(--h1),var(--h2) 55%,var(--h1));animation:respira 20s ease-in-out infinite alternate}
html.oculta .hero::before{animation-play-state:paused}
@keyframes respira{from{transform:translate(-9%,-7%)}to{transform:translate(9%,7%)}}
@keyframes aparece{from{opacity:0}}
@keyframes gira{to{transform:rotate(360deg)}}
.velo,.fondo-hoja,.modo-kz,.mini,.ptr,.hoja{position:fixed;z-index:50}
.velo,.fondo-hoja,.modo-kz{inset:0;animation:aparece .2s}
.velo{display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 12px 12px;background:rgba(5,5,7,.62);backdrop-filter:blur(8px)}
.velo.bienv{align-items:center}
.busca,.bv{width:100%;max-width:420px;background:var(--surface);color:var(--ink);border-radius:24px;padding:12px;animation:sube .25s}
.busca input,#hb-in{width:100%;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:16px;padding:0 14px}
.busca .lista{max-height:60vh;overflow:auto;margin-top:8px}
.res{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:11px 8px;border-radius:12px;font-size:14px}
.res i{min-width:64px;font-style:normal;font-size:11px;font-weight:700;color:var(--acento)}
.res small,.bit-op small,.rt-cab span,.bit-res span{display:block;font-size:12px;color:var(--muted)}
.nada,.bv p,.hoja .fr{margin:0;padding:8px 0;font-size:14px;line-height:1.5;color:var(--muted)}
.bv{padding:22px 20px 18px;text-align:center}
.bv .logo{width:88px;height:88px;border-radius:22px}
.bv h2{margin:16px 0 6px;font-size:26px}
.bv-pts,.puntos-b{display:flex;justify-content:center;gap:6px;margin:18px 0}
.bv-pts i,.puntos-b i{width:8px;height:8px;border-radius:9px;background:var(--track)}
.bv-pts i.on,.puntos-b i.on{width:22px}
.bv .bts,.bit-res,.modo-kz .cab,.kz-par .l1,.kz-par .l2,.bit-op{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bv-saltar,.enlace{border:0;background:none;color:var(--muted);font-size:14px;padding:8px 0}
.enlace{font-size:12px;text-decoration:underline}
.pant{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:14px;font-size:11px;color:var(--muted)}
.pant>span{display:flex;flex-direction:column;align-items:center;gap:4px;overflow-wrap:anywhere}
.pant svg{width:22px;height:22px;fill:none;stroke:var(--acento);stroke-width:2}
.lupa svg{pointer-events:none}
.ptr{left:50%;top:0;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--surface);display:grid;place-items:center;transform:translateY(-60px);opacity:0;pointer-events:none}
.ptr svg{width:30px;height:30px}
.ptr.gira svg,.ses-ico .rayos{animation:gira .7s linear infinite}
#v-hoy .intro{padding-right:84px}
.ses-ico{position:absolute;right:14px;top:18px;pointer-events:none}
.ses-ico svg{width:64px;height:64px;overflow:visible;fill:#0A0A0F}
.ses-ico .rayos{transform-origin:32px 32px;animation-duration:24s}
.flota{animation:flota 4s ease-in-out infinite}
.brilla{animation:late 2.4s infinite}
@keyframes flota{50%{transform:translateY(-5px)}}
.palabra{display:inline-block;animation:sube .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--w)*55ms)}
.rapidos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.rapido{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;color:var(--ink);font-size:12px;font-weight:600;text-decoration:none}
.rapido i{width:56px;height:56px;border-radius:18px;display:grid;place-items:center}
.rapido svg,.ck svg{width:24px;height:24px;fill:none;stroke:#0A0A0F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark{flex:none;width:52px;height:18px;color:var(--muted)}
.spark path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}
.spark.arriba{color:var(--gain)}.spark.abajo{color:var(--loss)}.spark.barrida{color:#7B5CD6}
.spark .area{stroke:none;fill:currentColor;opacity:.16}
.ph-b b{display:flex;align-items:center;gap:10px}
.ph .dot{position:relative}
.late-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:onda 2s ease-out infinite}
@keyframes onda{to{transform:scale(2.6);opacity:0}}
.fondo-hoja{background:rgba(5,5,7,.55)}
.hoja{left:0;right:0;bottom:0;display:flex;justify-content:center;animation:hojaSube .3s}
.hoja>div{width:100%;max-width:430px;max-height:88vh;overflow:auto;background:var(--surface);color:var(--ink);border-radius:28px 28px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));outline:0}
@keyframes hojaSube{from{transform:translateY(100%)}}
.asa{width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 14px}
.hoja h3{margin:0;font-size:24px}
.hoja h4{margin:2px 0 12px;font-size:18px}
.hoja .spark{display:block;width:100%;height:90px;margin:14px 0 6px}
.nv4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}
.nv4 div{border-radius:14px;background:var(--paper);padding:10px;font-size:11px;color:var(--muted)}
.nv4 b{display:block;font-size:14px;color:var(--ink)}
.bts2{display:flex;gap:10px;margin-top:12px}
.bts2 button{flex:1;height:46px;border-radius:14px;font-weight:700;font-size:15px}
.bts2 .sec,.bit-ops button{border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.lotes-nivel{width:100%;min-height:44px;border-radius:14px;border:1px dashed var(--acento);background:var(--acento-suave);color:var(--acento);font-weight:700}
.resalta{animation:resalta 1.4s}
@keyframes resalta{30%{opacity:.55}}
.repaso{position:relative;overflow:hidden;isolation:isolate;border:0 !important}
.repaso::before{content:"";position:absolute;left:-50%;top:-50%;width:200%;aspect-ratio:1;z-index:-2;background:conic-gradient(#FF907C,#FF5A88,#7B92FF,#7CF2C2,#FF907C);animation:gira 6s linear infinite}
.repaso::after{content:"";position:absolute;inset:1.5px;z-index:-1;border-radius:22.5px;background:linear-gradient(135deg,rgba(255,144,124,.16),rgba(255,90,136,.1)),var(--paper)}
.kzbar{margin-top:8px;height:5px;border-radius:9px;background:rgba(255,138,126,.25);overflow:hidden}
.kzbar i,.modo-kz .barra i{display:block;height:100%;background:#FF8A7E;transform-origin:left;transform:scaleX(0);transition:transform 1s linear}
.dos-puntos{animation:titila 1s steps(1) infinite}
@keyframes titila{50%{opacity:.25}}
.mini{left:0;right:0;top:0;z-index:30;display:flex;justify-content:center;transform:translateY(-110%);transition:transform .25s;pointer-events:none}
.mini.ver{transform:none}
.mini>div{width:100%;max-width:430px;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;border-radius:0 0 18px 18px}
.mini svg{width:24px;height:24px}
.mini span{margin-left:auto;font-size:12px}
.al-ver{opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s}
.al-ver.visto{opacity:1;transform:none}
nav a[aria-current] svg{animation:salta .35s}
@keyframes salta{50%{transform:translateY(-4px) scale(1.12)}}
.bell.suena svg{animation:suena .5s}
@keyframes suena{20%{transform:rotate(18deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
#s-band.crece rect{transform-box:fill-box;transform-origin:left;animation:crece .6s both}
.mbar .via{position:absolute;inset:0;animation:viaja .6s both}
@keyframes viaja{from{transform:translateX(var(--d))}}
.mapa-wrap{position:relative;overflow:hidden;touch-action:pan-y}
.mapa-wrap.zoom{touch-action:none}
.mapa-svg{transform-origin:0 0}
.mapa-wrap.sale{animation:sale .3s}
@keyframes sale{40%{opacity:.35;transform:translateX(var(--dx))}}
.tip{position:absolute;top:6px;z-index:5;pointer-events:none;min-width:150px;padding:8px 10px;border-radius:12px;background:rgba(10,10,15,.92);border:1px solid rgba(255,138,126,.4);color:#FFFFFF;font-size:12px;line-height:1.45}
.tip b{display:block;color:#FF8A7E}
.banner-kz{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:20px;padding:14px 16px;text-align:left}
.banner-kz::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3),transparent 70%);transform:translateX(-100%);animation:barrido 3.2s infinite}
@keyframes barrido{60%,to{transform:translateX(100%)}}
.banner-kz .pt{width:10px;height:10px;border-radius:50%;background:#0A0A0F;flex:none;animation:late 1.4s infinite}
.banner-kz b{display:block;font-size:16px}
.banner-kz .ir{margin-left:auto;font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px;background:rgba(10,10,15,.14)}
.modo-kz{z-index:60;overflow:auto;padding:calc(16px + env(safe-area-inset-top)) 16px 30px;background:radial-gradient(120% 80% at 50% 0%,#2A1218,#050507 70%);color:#FFFFFF}
.modo-kz>*{max-width:430px;margin-left:auto;margin-right:auto}
.modo-kz small,.reloj-kz span{display:block;font-size:12px;color:#FFB8AE}
.modo-kz .cab b{font-size:20px}
.modo-kz .salir{height:38px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:none;font-weight:700}
.reloj-kz{margin:18px auto 6px;font-size:52px;font-weight:800}
.reloj-kz em{font-style:normal}
.modo-kz .barra{height:6px;margin-bottom:18px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.kz-par{margin-bottom:10px;border-radius:20px;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);animation:sube .4s both;animation-delay:calc(var(--i)*60ms)}
.kz-par .l1 b{font-size:17px}
.kz-par .px{font-size:26px;font-weight:800}
.kz-par .l2{margin-top:6px;font-size:13px;color:#FFD6D0}
.cerca{position:relative;height:6px;margin-top:8px;border-radius:9px;background:rgba(255,255,255,.1)}
.cerca em{position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;background:#FFCB7D}
.cerca i{position:absolute;inset:-3px 0;transition:transform .6s}
.cerca i::after{content:"";position:absolute;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#FFFFFF}
.kz-par.cerca-ya{border-color:#FFCB7D;box-shadow:0 0 24px rgba(255,203,125,.2)}
.modo-kz .pie{font-size:12px;line-height:1.5;color:#D9A9A2;text-align:center}
.rutina{padding:6px 16px 10px}
.rt-cab{display:flex;align-items:center;gap:14px;padding:12px 0 8px}
.anillo{width:52px;height:52px;flex:none}
.anillo circle{fill:none;stroke-width:6;stroke:var(--track)}
.anillo .seg{stroke:#FF5A88;opacity:0;transition:opacity .3s}
.anillo .seg.on{opacity:1}
.anillo text{font-size:15px;font-weight:800;fill:var(--ink)}
.rt-cab b,.bit-res b{font-size:16px}
.rt-i,.bit-op{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--divider);font-size:14px}
.ck{width:26px;height:26px;flex:none;border-radius:9px;border:2px solid var(--line);background:none;display:grid;place-items:center;padding:0}
.ck svg{width:16px;height:16px;stroke-width:3;opacity:0;transition:opacity .2s}
.rt-i.hecho .ck{border-color:transparent}
.rt-i.hecho .ck svg{opacity:1}
.rt-i .tx{flex:1}
.rt-i.hecho .tx{color:var(--muted);text-decoration:line-through}
.rt-i .ir,.rt-listo{border-radius:999px;padding:5px 10px;background:var(--acento-suave);color:var(--acento);font-size:12px;font-weight:700;text-decoration:none}
.rt-listo{display:none;margin:6px 0 4px;border-radius:14px;padding:10px 12px;color:var(--ink);font-size:13px}
.rutina.completa .rt-listo{display:block;animation:sube .3s}
.bit-res{padding:14px 16px}
.bit-lista{padding:0 16px}
.bit-op{font-size:13px}
.bit-op .r{font-weight:700}.bit-op .up{color:var(--gain)}.bit-op .dn{color:var(--loss)}
.bit-ops{display:flex;flex-wrap:wrap;gap:8px}
.bit-ops button{height:42px;padding:0 16px;border-radius:14px;font-weight:700;font-size:15px}

/* --- D1d (ESPEC_D1D_ANIMACIONES.md): animaciones en toda la app. Solo transform y opacity (clip-path y
   stroke-dashoffset para trazar); con movimiento reducido, la regla de la D1a las apaga y todo queda en su lugar --- */
/* lo que se desliza al cambiar de pantalla no ensancha la página (en el celular la barra de abajo se medía más ancha y
   la marca de la pestaña quedaba corrida) */
html,body{overflow-x:clip}
/* 3. odómetro: el dígito que cambia rueda; el de antes va en ::before sin texto para el lector de pantalla */
.lots .disp,#neto,#mc-tiles .v,#kz-cd,.kz-par .px,[data-hasta],#n-cuenta,#m-px,.nv4 b{font-variant-numeric:tabular-nums}
.dg{display:inline-block;clip-path:inset(-.1em -2px)}
.dg i{display:inline-block;position:relative;font-style:normal;animation:dgSube .25s cubic-bezier(.2,.7,.2,1)}
.dg i::before{content:attr(data-de) / "";position:absolute;left:0;top:-100%}
.dg.baja i{animation-name:dgBaja}
.dg.baja i::before{top:100%}
@keyframes dgSube{from{transform:translateY(100%)}}
@keyframes dgBaja{from{transform:translateY(-100%)}}
/* 2. el tema nuevo en un círculo desde el botón */
.capa-tema{position:fixed;inset:0;z-index:2147482000;pointer-events:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* 4. el titular que se encoge y su barra fija (fuera de Hoy) */
.tit-fijo{position:fixed;left:0;right:0;top:0;z-index:31;display:flex;justify-content:center;pointer-events:none;opacity:0}
.tit-fijo b{width:100%;max-width:430px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:var(--surface);border-bottom:1px solid var(--line);border-radius:0 0 18px 18px;font:800 15px/1.3 'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink);text-align:center;overflow-wrap:anywhere}
.intro h1,.intro .lots{transform-origin:0 0}
/* 5. la barra de abajo: contorno y relleno */
nav :is(.cont,.rell){transition:opacity .2s}
nav .rell,nav a[aria-current] .cont{opacity:0}
nav a[aria-current] .rell{opacity:1}
/* 6. esqueletos: la gráfica del mapa, Noticias, el recibo al subir y el marcador */
.mapa-wrap.cargando::before{content:"";position:absolute;inset:16px 16px 26px;border-radius:12px;background:rgba(255,255,255,.08)}
.mapa-wrap.cargando::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);animation:brillo 1.1s infinite}
.esq-recibo .esq:nth-child(2){width:70%}.esq-recibo .esq:nth-child(3){width:88%}.esq-recibo .esq:nth-child(4){width:55%}
.week .esq,#mc-tiles .esq{height:64px;margin:0;border-radius:14px}
#mc-tiles .esq{height:110px;border-radius:20px}
/* 8. el punto de la campana cuando llega un aviso */
.punto.salta-pt{animation:saltaPt .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes saltaPt{from{transform:scale(0)}50%{transform:scale(1.7)}}
/* 9 y 10. Hoy: la fila que cambió brilla y su etiqueta gira; «lo próximo» late con menos de 5 minutos */
.ph{position:relative}
.ph.brilla1::before{content:"";position:absolute;inset:2px -8px;border-radius:14px;background:var(--acento-suave);opacity:0;pointer-events:none;animation:brilla1 1.2s ease-out}
@keyframes brilla1{25%{opacity:1}}
.voltea{animation:voltea .4s ease-out}
@keyframes voltea{from{transform:perspective(300px) rotateX(90deg);opacity:.2}}
.pronto{animation:pronto 1.6s ease-in-out infinite}
@keyframes pronto{50%{transform:scale(1.03)}}
/* 11. un brillo recorre la barra de la kill zone cada 3 s */
.kzbar,.modo-kz .barra{position:relative}
:is(.kzbar,.modo-kz .barra)::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:barrido 3s infinite}
/* 12. la rutina: la palomita hace «pop»; con 4 de 4, el anillo brilla una vez */
.ck.pop{animation:pop .35s}
@keyframes pop{from{transform:scale(.8)}60%{transform:scale(1.1)}}
.anillo.destella{animation:destella .7s}
@keyframes destella{40%{transform:scale(1.1);opacity:.65}}
/* 13 a 15. el mapa: niveles que se trazan, números que saltan, la vela que se forma, el evento nuevo */
.mapa-svg line[data-n]{transform-box:fill-box;transform-origin:0 50%}
.mapa-svg :is(.ev-n,.mn){transform-box:fill-box;transform-origin:50% 50%}
.mapa-svg g[data-v][opacity]{animation:respV 2s ease-in-out infinite alternate}
@keyframes respV{from{opacity:.75}to{opacity:1}}
.ev.entra-ev{animation:evEntra .4s cubic-bezier(.2,.7,.2,1)}
@keyframes evEntra{from{transform:translateY(-14px);opacity:0}}
/* 16. el recibo: la curva (900 ms), luego la del «¿y si…?» (600 ms); barras una tras otra; el mapa de calor en ola */
#r-linea.draw{animation:draw .9s cubic-bezier(.4,0,.2,1) forwards}
#r-area.area{animation:fade .6s ease .5s forwards}
#r-ghost.ghost{opacity:1;animation:dibuja .6s cubic-bezier(.3,.6,.2,1) .9s both}
#end2.ghost{animation:fade .2s ease 1.4s forwards}
.rv.in .grow{transition-delay:calc(var(--n,0)*60ms)}
.heat.ola .cell{opacity:0;transform:scale(.6)}
.rv.in .heat.ola .cell{opacity:1;transform:none;transition:opacity .35s,transform .35s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--d,0)*45ms)}
/* 18. Lotaje: la barra de riesgo con transform; el control brilla mientras se arrastra */
.gauge-fill{width:100%;transform-origin:left center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.f-row:has(> input[type=range]){position:relative}
.f-row:has(> input[type=range])::after{content:"";position:absolute;inset:6px -8px;border-radius:16px;background:radial-gradient(60% 90% at 50% 75%,var(--acento-suave),transparent);opacity:0;transition:opacity .2s;pointer-events:none}
.f-row:has(> input[type=range]:active)::after{opacity:1}
/* 19. el marcador: la palomita o la cruz de cada día se dibuja */
.marca-d{width:20px;height:20px;flex:none;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.marca-d.gain{stroke:var(--gain)}.marca-d.loss{stroke:var(--loss)}
.marca-d path{stroke-dasharray:1}
.marca-d.traza path{animation:trazo .45s ease-out both;animation-delay:var(--t,0s)}
@keyframes trazo{from{stroke-dashoffset:1}}
/* --- fin D1d --- */
/* --- M8 (ESPEC_M8_TEMPORALIDADES.md): el selector de la temporalidad (los chips de las capas) y la gráfica de antes
   mientras se desvanece --- */
.m-tf{display:flex;gap:6px;padding:10px 16px 0}
.m-tf .pchip{flex:1 1 0;min-width:0;padding:0 4px}
.tf-viejo{position:absolute;pointer-events:none}
/* --- fin M8 --- */

/* --- D1e (ESPEC_D1E_TEMAS.md): el Oscuro y el Claro como en las apps normales (los colores del modo oscuro y del modo
   claro de iPhone). El bloque de arriba no es coral: negro a #1C1C1E con texto blanco, o blanco a #F2F2F7 con texto
   negro; lo lleno, blanco con texto negro (Oscuro) o negro con texto blanco (Claro). El coral queda solo en los
   detalles: la pestaña activa y su marca, la onda al tocar, la barra de la kill zone y «Lo próximo», el anillo de la
   rutina, la píldora de las pestañas (como borde), el punto de la campana, el destello de los odómetros y el logo
   (#FF8A7E en Oscuro, #E8456A en Claro; como texto, en Claro, #C8304E: #E8456A sobre blanco queda en 4.49:1, abajo de
   AA). Verde y rojo, las sesiones de la banda y las velas no cambian. El Coral no cambia --- */
:root.cn[data-tema="oscuro"]{--paper:#000000;--surface:#1C1C1E;--surface2:#2C2C2E;--line:#38383A;--divider:#2C2C2E;--ink:#FFFFFF;--muted:#8E8E93;--track:#2C2C2E;--panel-line:#38383A;--acento:#FFFFFF;--acento-suave:rgba(255,255,255,.1);--acento-fondo:#FFFFFF;--cl:#FFFFFF;--coral1:#FF8A7E;--coral2:#FF8A7E;--det:#FF8A7E;--det-texto:#FF8A7E;--fx-lleno:#FFFFFF;--fx-sobre:#000000;--nav-shadow:0 10px 30px rgba(0,0,0,.6)}
:root.cn[data-tema="claro"]{--paper:#F2F2F7;--surface:#FFFFFF;--surface2:#FFFFFF;--line:#E5E5EA;--divider:#E5E5EA;--ink:#000000;--muted:#6E6E73;--track:#E5E5EA;--panel-line:#E5E5EA;--acento:#000000;--acento-suave:rgba(0,0,0,.05);--acento-fondo:#000000;--cl:#000000;--coral1:#E8456A;--coral2:#E8456A;--det:#E8456A;--det-texto:#C8304E;--fx-lleno:#000000;--fx-sobre:#FFFFFF;--nav-shadow:0 8px 24px rgba(0,0,0,.08)}
:root.cn[data-tema="oscuro"] :is(body,body[class]){--h1:#000000;--h2:#1C1C1E}
:root.cn[data-tema="claro"] :is(body,body[class]){--h1:#FFFFFF;--h2:#F2F2F7}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) body .hero .glow{background:none}
:root.cn[data-tema="claro"] .hero{border-bottom:1px solid #E5E5EA}
/* el texto del bloque de arriba: blanco en Oscuro (en Claro sigue el negro de la D1a.2) */
:root.cn[data-tema="oscuro"] .hero,:root.cn[data-tema="oscuro"] a.brand,:root.cn[data-tema="oscuro"] .hero .brand span,:root.cn[data-tema="oscuro"] .hero .intro h1,:root.cn[data-tema="oscuro"] .hero .intro p.per,:root.cn[data-tema="oscuro"] .hero .intro p.alt,:root.cn[data-tema="oscuro"] body.ses-nueva_york .hero .per,:root.cn[data-tema="oscuro"] body.ses-nueva_york .intro p.alt,:root.cn[data-tema="oscuro"] .hero .leg .k,:root.cn[data-tema="oscuro"] body.ses-nueva_york .leg .k,:root.cn[data-tema="oscuro"] .hero .leg .v,:root.cn[data-tema="oscuro"] .hero .hint,:root.cn[data-tema="oscuro"] body.ses-nueva_york .hero .hint,:root.cn[data-tema="oscuro"] .hero .when,:root.cn[data-tema="oscuro"] .hero .vivo,:root.cn[data-tema="oscuro"] .hero .vivo b,:root.cn[data-tema="oscuro"] .hero .vivo.sube b,:root.cn[data-tema="oscuro"] .hero .vivo.baja b,:root.cn[data-tema="oscuro"] .hero .wd,:root.cn[data-tema="oscuro"] .hero .wd span,:root.cn[data-tema="oscuro"] .hero .wd b,:root.cn[data-tema="oscuro"] .hero .hero-pie,:root.cn[data-tema="oscuro"] .hero .link-ej,:root.cn[data-tema="oscuro"] .hero .yasi-k,:root.cn[data-tema="oscuro"] .hero .yasi .chip,:root.cn[data-tema="oscuro"] .hero .lots span:last-child,:root.cn[data-tema="oscuro"] .hero .m-extremos,:root.cn[data-tema="oscuro"] .hero .m-extremos span+span,:root.cn[data-tema="oscuro"] .hero .mc-aviso-hero,:root.cn[data-tema="oscuro"] .hero .idioma-btn,:root.cn[data-tema="oscuro"] .hero .pchip{color:#FFFFFF !important}
:root.cn[data-tema="oscuro"] .hero .icon-btn svg :is(path,circle,line,rect,polyline){stroke:#FFFFFF !important}
:root.cn[data-tema="oscuro"] .hero :is(.sw,.vivo .pt){background:#FFFFFF}
:root.cn[data-tema="oscuro"] #s-band text{fill:#FFFFFF !important}
:root.cn[data-tema="oscuro"] #s-band :is(line,circle){stroke:#FFFFFF !important}
:root.cn[data-tema="oscuro"] #s-band circle.aguja{fill:#FFFFFF !important}
/* los cuadros de cristal */
:root.cn[data-tema="oscuro"] .hero .leg,:root.cn[data-tema="oscuro"] .hero .wd,:root.cn[data-tema="oscuro"] .hero .pchip,:root.cn[data-tema="oscuro"] .hero .vivo,:root.cn[data-tema="oscuro"] .hero .yasi .chip,:root.cn[data-tema="oscuro"] .hero .idioma-sel,:root.cn[data-tema="oscuro"] .hero .icon-btn{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.14) !important}
:root.cn[data-tema="claro"] .hero .leg,:root.cn[data-tema="claro"] .hero .wd,:root.cn[data-tema="claro"] .hero .pchip,:root.cn[data-tema="claro"] .hero .vivo,:root.cn[data-tema="claro"] .hero .yasi .chip,:root.cn[data-tema="claro"] .hero .idioma-sel,:root.cn[data-tema="claro"] .hero .icon-btn{background:rgba(0,0,0,.04) !important;border-color:#E5E5EA !important}
:root.cn[data-tema="oscuro"] .hero .icon-btn{border-color:rgba(255,255,255,.22) !important}
:root.cn[data-tema="claro"] .hero .icon-btn{border-color:#E5E5EA !important}
:root.cn[data-tema="oscuro"] .hero :is(.esq,.gauge,.barra-carga){background:rgba(255,255,255,.12)}
:root.cn[data-tema="claro"] .hero :is(.esq,.gauge,.barra-carga){background:rgba(0,0,0,.06)}
/* lo lleno: «Tu kill zone», el chip elegido, la hora caliente, el idioma elegido, los botones y lo que se toca */
:root.cn[data-tema="oscuro"] .hero .pchip.on,:root.cn[data-tema="oscuro"] .hero .wd.hot,:root.cn[data-tema="oscuro"] .hero .yasi .chip.on,:root.cn[data-tema="oscuro"] .hero .idioma-btn.on,:root.cn[data-tema="claro"] .hero .pchip.on,:root.cn[data-tema="claro"] .hero .wd.hot,:root.cn[data-tema="claro"] .hero .yasi .chip.on,:root.cn[data-tema="claro"] .hero .idioma-btn.on,:root.cn[data-tema="oscuro"] .hero .leg.g,:root.cn[data-tema="claro"] .hero .leg.g{background:var(--fx-lleno) !important;border-color:var(--fx-lleno) !important;color:var(--fx-sobre) !important}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .hero .leg.g :is(.k,.v),:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .hero .wd.hot :is(span,b){color:var(--fx-sobre) !important}
:root.cn[data-tema="oscuro"] .btn-prim,:root.cn[data-tema="oscuro"] .btn-subir,:root.cn[data-tema="oscuro"] .seg button.on,:root.cn[data-tema="oscuro"] .bell.on,:root.cn[data-tema="oscuro"] .ev .num,:root.cn[data-tema="oscuro"] .ph .st.prender,:root.cn[data-tema="claro"] .btn-prim,:root.cn[data-tema="claro"] .btn-subir,:root.cn[data-tema="claro"] .seg button.on,:root.cn[data-tema="claro"] .bell.on,:root.cn[data-tema="claro"] .ev .num,:root.cn[data-tema="claro"] .ph .st.prender{background:var(--fx-lleno) !important;border-color:var(--fx-lleno) !important;color:var(--fx-sobre) !important}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) :is(.btn-coral,.rapido i,.banner-kz,.mini>div,.rt-i.hecho .ck,.bv-pts i.on,.puntos-b i.on){color:var(--fx-sobre)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) :is(.rapido svg,.ck svg){stroke:var(--fx-sobre)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .banner-kz .pt{background:var(--fx-sobre)}
:root.cn[data-tema="oscuro"] .banner-kz .ir{background:rgba(0,0,0,.1)}
:root.cn[data-tema="claro"] .banner-kz .ir{background:rgba(255,255,255,.2)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .cta{background:var(--surface);border:1px solid var(--line)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .cta :is(h2,p,small,.link-ej){color:var(--ink)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .cta button{background:var(--fx-lleno) !important;color:var(--fx-sobre) !important}
/* etiquetas de los pares */
:root.cn[data-tema="oscuro"] .ph .st,:root.cn[data-tema="oscuro"] #v-hoy .ph .st{background:rgba(255,255,255,.1) !important;color:#FFFFFF !important}
:root.cn[data-tema="claro"] .ph .st,:root.cn[data-tema="claro"] #v-hoy .ph .st{background:rgba(0,0,0,.05) !important;color:#000000 !important}
:root.cn[data-tema="oscuro"] .ph-b b{color:#FFFFFF}
/* los detalles en coral */
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) nav a[aria-current]{color:var(--det-texto) !important}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) :is(.kzbar i,.modo-kz .barra i){background:var(--det)}
:root.cn[data-tema="oscuro"] .kzbar{background:rgba(255,138,126,.25)}
:root.cn[data-tema="claro"] .kzbar{background:rgba(232,69,106,.18)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .anillo .seg{stroke:var(--det)}
/* lo demás que era coral, en blanco, negro y grises */
:root.cn[data-tema="oscuro"] .repaso::before{background:conic-gradient(#FFFFFF,#8E8E93,#3A3A3C,#FFFFFF)}
:root.cn[data-tema="claro"] .repaso::before{background:conic-gradient(#000000,#C7C7CC,#8E8E93,#000000)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .repaso::after{background:var(--surface)}
:root.cn[data-tema="oscuro"] .mbar .franja{background:linear-gradient(90deg,#FFFFFF,#8E8E93)}
:root.cn[data-tema="claro"] .mbar .franja{background:linear-gradient(90deg,#000000,#6E6E73)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .mbar .pto{border-color:var(--ink)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .tip{border-color:rgba(255,255,255,.3)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .tip b{color:#FFFFFF}
:root.cn[data-tema="oscuro"] .modo-kz{background:radial-gradient(120% 80% at 50% 0%,#1C1C1E,#000000 70%)}
:root.cn[data-tema="claro"] .modo-kz{background:radial-gradient(120% 80% at 50% 0%,#3A3A3C,#000000 70%)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) :is(.modo-kz small,.reloj-kz span,.modo-kz .pie){color:#C7C7CC}
/* el ícono de la sesión, las pistas de la banda y los íconos de los botones llenos */
:root.cn[data-tema="oscuro"] .ses-ico svg{fill:#FFFFFF}
:root.cn[data-tema="claro"] #s-band rect[fill="rgba(255,255,255,0.08)"]{fill:rgba(0,0,0,.05)}
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) .btn-subir svg path{stroke:var(--fx-sobre)}
/* las tarjetas, de un solo color (la segunda superficie no va debajo de texto tenue: #8E8E93 sobre #2C2C2E no llega a AA) */
:root.cn:is([data-tema="oscuro"],[data-tema="claro"]) :is(.panel,.tile){background:var(--surface)}
/* --- fin D1e --- */