@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

/* Transicion suave entre paginas: en navegadores que lo soportan, cualquier
   clic a otra pagina del mismo sitio hace un fundido en vez de un salto
   seco. Si el navegador no lo soporta, simplemente se ignora - no rompe
   nada, es una mejora progresiva sin ningun riesgo. */
@view-transition {
  navigation: auto;
}

:root{
  --bg-deep:#0c0b09;
  --bg-panel:#161310;
  --bg-panel-raised:#1e1a14;
  --line:#2e2920;
  --rust:#d1631f;
  --rust-bright:#ff9142;
  --steel-text:#f3eee3;
  --muted:#a89d89;
  --ok:#4ade80;
  --warn:#f87171;
  --gold:#fbbf24;
  --radius:7px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  position:relative;
  background-color:var(--bg-deep);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px);
  color:var(--steel-text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
}
/* Manchas de luz ambiental independientes, cada una con su propio tamaño,
   intensidad y ritmo de movimiento - en vez de una sola imagen de fondo
   compartida, así se mueven de forma organica, no todas a la vez de forma
   mecanica. Se colocan detras de todo el contenido real (z-index:-1) pero
   por delante del color de fondo solido del body. */
.bg-glow{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:-1;will-change:transform}
.bg-glow-1{width:900px;height:700px;top:-220px;left:-180px;background:rgba(209,99,31,.14);animation:glowDrift1 26s ease-in-out infinite alternate}
.bg-glow-2{width:700px;height:650px;bottom:-200px;right:-120px;background:rgba(209,99,31,.10);animation:glowDrift2 32s ease-in-out infinite alternate}
.bg-glow-3{width:500px;height:500px;top:35%;left:60%;background:rgba(255,145,66,.06);animation:glowDrift3 22s ease-in-out infinite alternate}
@keyframes glowDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(90px,60px) scale(1.08)}}
@keyframes glowDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-70px,-50px) scale(1.05)}}
@keyframes glowDrift3{0%{transform:translate(0,0)}100%{transform:translate(-60px,40px)}}
@media (prefers-reduced-motion: reduce){
  .bg-glow-1,.bg-glow-2,.bg-glow-3{animation:none}
}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',monospace}

/* --- hazard stripe: elemento firma, usado con moderación --- */
.hazard{
  height:6px;
  background:repeating-linear-gradient(135deg, var(--rust) 0 14px, #1a1712 14px 28px);
  opacity:.85;
}

header.site{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel));
}
.site-inner{
  max-width:1240px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark-img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.brand-name{font-family:'Oswald';font-weight:600;letter-spacing:.06em;font-size:19px;text-transform:uppercase}
.brand-name em{color:var(--rust-bright);font-style:normal}
nav.site{display:flex;gap:6px}
nav.site a{
  padding:9px 16px;font-family:'Oswald';font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid transparent;border-radius:var(--radius);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
nav.site a:hover{color:var(--steel-text);border-color:var(--line);background:rgba(255,255,255,0.03)}
nav.site a.active{
  color:var(--rust-bright);border-color:var(--rust);
  background:linear-gradient(155deg, rgba(209,99,31,.16), rgba(209,99,31,.04));
  box-shadow:0 0 16px rgba(209,99,31,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.currency-toggle{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 4px 10px rgba(0,0,0,.25);
  color:var(--rust-bright);font-family:'JetBrains Mono';font-weight:700;font-size:14px;cursor:pointer;
  margin-left:4px;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 4px 10px rgba(0,0,0,.25);
  color:var(--muted);font-size:15px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.icon-btn:hover{color:var(--gold);border-color:var(--gold)}
.icon-btn.active{color:var(--gold);border-color:var(--gold)}
.currency-toggle:hover{border-color:var(--rust);transform:scale(1.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 10px rgba(0,0,0,.25), 0 0 14px rgba(209,99,31,.45)}
.steam-market-btn-inline{
  padding:10px 20px;background:var(--rust);border:none;border-radius:var(--radius);
  color:#fff;font-family:'Oswald';font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:background .18s ease,box-shadow .25s ease,transform .15s ease;
  box-shadow:0 0 0 rgba(209,99,31,0);
}
.steam-market-btn-inline:hover{background:var(--rust-bright);box-shadow:0 0 24px rgba(209,99,31,.55);transform:translateY(-1px)}
.steam-market-btn-inline:active{transform:translateY(0) scale(.98)}

.wrap{max-width:1240px;margin:0 auto;padding:32px 24px 80px}

.page-head{margin-bottom:32px}
.eyebrow{font-family:'Oswald';font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust-bright);margin:0 0 8px;font-weight:600}
h1{font-family:'Oswald';font-weight:700;font-size:42px;margin:0 0 10px;letter-spacing:-.01em;line-height:1.05}
.sub{color:var(--muted);font-size:16px;margin:0;max-width:640px;line-height:1.5}

.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 16px;
  padding:16px;background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 20px rgba(0,0,0,.16);
}
.toolbar input,.toolbar select{
  background:var(--bg-deep);
  border:1px solid var(--line);color:var(--steel-text);
  padding:10px 14px;border-radius:calc(var(--radius) - 2px);font-family:'Inter';font-size:14px;
  height:40px;transition:border-color .15s,box-shadow .2s ease;
}
.toolbar input:focus,.toolbar select:focus{border-color:var(--rust);box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 0 0 3px rgba(209,99,31,.15);outline:none}
.toolbar select{
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89d89'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.toolbar input{flex:1;min-width:220px}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--rust)}
.toolbar select:hover{border-color:var(--muted)}
.collection-select{max-width:200px;text-overflow:ellipsis}

/* --- grupos de filtro tipo pastilla, mismo lenguaje visual que las
   pestañas de rango de la gráfica (24h/7d/etc) --- */
.pill-group{display:flex;gap:4px;background:var(--bg-deep);border:1px solid var(--line);border-radius:calc(var(--radius) - 2px);padding:3px}
.pill-opt{
  position:relative;padding:7px 12px;border-radius:5px;cursor:pointer;
  font-family:'Oswald';font-size:12.5px;letter-spacing:.02em;color:var(--muted);
  transition:color .18s ease,background .18s ease;white-space:nowrap;
}
.pill-opt input{position:absolute;opacity:0;pointer-events:none}
.pill-opt:hover{color:var(--steel-text)}
.pill-opt.active{
  color:var(--rust-bright);font-weight:600;
  background:linear-gradient(155deg, rgba(209,99,31,.2), rgba(209,99,31,.06));
  box-shadow:0 0 0 1px var(--rust) inset, 0 0 14px rgba(209,99,31,.35);
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

.card{
  background:linear-gradient(165deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--radius);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;
  animation:cardIn .35s ease backwards;
}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.grid .card:nth-child(1){animation-delay:.02s}
.grid .card:nth-child(2){animation-delay:.05s}
.grid .card:nth-child(3){animation-delay:.08s}
.grid .card:nth-child(4){animation-delay:.11s}
.grid .card:nth-child(5){animation-delay:.14s}
.grid .card:nth-child(6){animation-delay:.17s}
.grid .card:nth-child(7){animation-delay:.2s}
.grid .card:nth-child(8){animation-delay:.23s}
.card:hover{border-color:var(--rust);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.card:hover .card-img img{transform:scale(1.06)}
.card.rar-abnormal{border-left-color:var(--gold)}
.card.rar-normal{border-left-color:var(--line)}

.card-top{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.2)}
.pill{
  font-family:'Oswald';font-size:10px;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;flex:1;text-align:center;transition:background .18s ease,color .18s ease;
}
.pill.ok{color:var(--ok);background:rgba(74,222,128,.14)}
.pill.warn{color:var(--warn);background:rgba(248,113,113,.14)}
.pill.unknown{color:var(--muted);background:rgba(255,255,255,.03)}

.attr-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.attr-tag{
  font-size:10.5px;padding:2px 6px;border-radius:2px;border:1px solid var(--line);
  color:var(--steel-text);background:rgba(255,255,255,.02);white-space:nowrap;
}
.attr-tag.gold,.attr-tag.clr-gold{color:var(--gold);border-color:var(--gold);background:rgba(251,191,36,.14)}
.attr-tag.purple,.attr-tag.clr-purple{color:#b98bff;border-color:#b98bff;background:rgba(185,139,255,.14)}
.attr-tag.clr-amber{color:#ffb054;border-color:#ffb054;background:rgba(255,176,84,.14)}
.attr-tag.clr-yellow{color:#f5e05a;border-color:#f5e05a;background:rgba(245,224,90,.14)}
.attr-tag.clr-cyan{color:#5ee3f5;border-color:#5ee3f5;background:rgba(94,227,245,.14)}
.attr-tag.clr-violet{color:#a68bff;border-color:#a68bff;background:rgba(166,139,255,.14)}
.attr-tag.clr-olive{color:#a8cc6e;border-color:#a8cc6e;background:rgba(168,204,110,.14)}
.attr-tag.clr-bronze{color:#e0a06a;border-color:#e0a06a;background:rgba(224,160,106,.14)}
.card-img{
  aspect-ratio:1;background:#0f0d09 radial-gradient(circle at 50% 40%, #221d14, #0f0d09);
  display:flex;align-items:center;justify-content:center;position:relative;
  overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;
}
.card-img::before{
  content:'';position:absolute;left:50%;top:58%;width:70%;height:40%;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(22px);
  background:radial-gradient(circle, rgba(201,162,39,.4), transparent 70%);
  animation:imgGlowPulse 4s ease-in-out infinite;pointer-events:none;
}
.rar-normal .card-img::before{background:radial-gradient(circle, rgba(150,150,150,.18), transparent 70%)}
@keyframes imgGlowPulse{0%,100%{opacity:.7}50%{opacity:1}}
.card-img img{max-width:82%;max-height:82%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));transition:transform .3s ease;position:relative;z-index:1}
.card-img .noimg{color:var(--muted);font-family:'Oswald';font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.badges{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
.badge{
  font-family:'Oswald';font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;background:rgba(0,0,0,.55);border:1px solid var(--line);color:var(--steel-text);
}
.badge.gold{color:var(--gold);border-color:var(--gold)}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-name{font-size:14px;font-weight:600;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;min-height:18px;gap:8px}
.card-collection{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.card-collection-link{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;transition:color .15s ease}
.card-collection-link:hover{color:var(--rust-bright)}
.card-market-price{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px}
.card-market-price .mono{font-size:17px;font-weight:700;color:var(--steel-text)}
.mp-tag{
  font-family:'Oswald';font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:#66c0f4;border:1px solid #2a475e;background:rgba(102,192,244,.08);
  padding:1px 6px;border-radius:2px;
}
.price-launch::before{content:'Lanz. ';font-size:9px;color:var(--muted);font-family:'Oswald';text-transform:uppercase;letter-spacing:.03em}
.price-usd-approx{color:var(--muted);font-size:10.5px;margin-left:2px}
.flag{font-size:11px;padding:1px 6px;border-radius:2px;font-family:'Oswald';letter-spacing:.04em}
.flag.ok{color:var(--ok);border:1px solid var(--ok)}
.flag.warn{color:var(--warn);border:1px solid var(--warn)}
.flag.unknown{color:var(--muted);border:1px solid var(--line)}

.empty{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}

/* --- skin detail --- */
.detail{display:grid;grid-template-columns:340px 1fr;gap:32px}
@media (max-width:820px){.detail{grid-template-columns:1fr}}

/* Menu de movil: elemento <details> nativo del navegador, se abre y cierra
   solo sin necesitar JavaScript - no puede fallar por un problema de
   script. Por encima de 860px se ve el menu de escritorio normal; por
   debajo, se esconde ese y aparece este. Esta regla de aqui SIEMPRE se
   aplica (no esta dentro de ninguna media query), para que el panel de
   movil quede oculto en escritorio de verdad, pase lo que pase. */
.mobile-nav-bar{display:none}

@media (max-width:860px){
  nav.site.desktop-nav{display:none}
  .mobile-nav-bar{display:flex;align-items:center;gap:8px}
  .mobile-nav{position:relative}
  .mobile-nav-btn{
    display:flex;align-items:center;gap:8px;padding:9px 14px;list-style:none;cursor:pointer;
    background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
    color:var(--steel-text);font-family:'Oswald';font-size:13px;letter-spacing:.03em;user-select:none;
  }
  .mobile-nav-btn::-webkit-details-marker{display:none}
  .mobile-nav[open] .mobile-nav-btn{border-color:var(--rust);color:var(--rust-bright)}
  .mobile-nav-panel{
    position:absolute;top:calc(100% + 8px);right:0;z-index:95;min-width:200px;
    display:flex;flex-direction:column;gap:4px;padding:10px;
    background:linear-gradient(165deg, var(--bg-panel-raised), var(--bg-panel));
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 40px rgba(0,0,0,.55);
  }
  .mobile-nav-panel a{padding:11px 14px;border-radius:6px;font-family:'Oswald';font-size:13px;color:var(--muted)}
  .mobile-nav-panel a.active{color:var(--rust-bright);background:rgba(209,99,31,.14)}
  .mobile-nav-panel a:hover{background:rgba(255,255,255,.05);color:var(--steel-text)}
}

/* --- ajustes de movil: antes solo habia una regla en toda la hoja de
   estilos, y varias cosas se apretaban o se desbordaban en pantallas
   estrechas sin ningun ajuste --- */
@media (max-width:640px){
  .site-inner{padding:14px 16px;gap:10px}
  .brand-name{font-size:15px}
  .brand-mark-img{width:30px;height:30px}
  .currency-toggle{width:32px;height:32px;font-size:14px}

  h1{font-size:28px}
  .eyebrow{font-size:10.5px;letter-spacing:.1em}
  .sub{font-size:13.5px}

  /* La fila de 5 estadisticas de la grafica se apretaba demasiado en
     movil - pasa a dos columnas que envuelven, en vez de 5 a la fuerza
     en una sola fila. */
  .chart-stats-row{flex-wrap:wrap}
  .chart-stats-row .chart-stat{flex:1 1 calc(33.333% - 6px);min-width:90px}
  .chart-stat-v.chart-stat-big{font-size:15px}

  /* Pestañas 24h/7d/1mes/Total: sin margen de sobra en pantallas muy
     estrechas, se acortan un poco y se permite que envuelvan como red de
     seguridad si aun asi no caben. */
  .chart-range-tabs{flex-wrap:wrap;gap:4px}
  .range-tab{padding:6px 10px;font-size:11px}

  .card-top{flex-wrap:wrap;gap:4px}
  .toolbar select,.toolbar input{font-size:13px;padding:9px 10px}

  canvas#priceChart{height:180px}
}
.detail-img{
  background:#0f0d09 radial-gradient(circle at 50% 40%, #221d14, #0f0d09);
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:20px;
  position:relative;overflow:hidden;
}
.detail-img::before{
  content:'';position:absolute;left:50%;top:60%;width:60%;height:36%;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(30px);
  background:radial-gradient(circle, rgba(201,162,39,.4), transparent 70%);
  animation:imgGlowPulse 4s ease-in-out infinite;pointer-events:none;
}
.rar-normal-skin .detail-img::before{background:radial-gradient(circle, rgba(150,150,150,.2), transparent 70%)}
.detail-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.55));position:relative;z-index:1}
.stat-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.stat-row .k{color:var(--muted)}
.stat-row .v{font-family:'JetBrains Mono';font-weight:500}
.section-title{font-family:'Oswald';text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--rust-bright);margin:26px 0 12px}

table.rotations{width:100%;border-collapse:collapse;font-size:14px}
table.rotations th{text-align:left;color:var(--muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line);font-family:'Oswald';text-transform:uppercase;font-size:11px;letter-spacing:.06em}
table.rotations td{padding:9px 10px;border-bottom:1px solid var(--line)}
table.rotations tr:hover td{background:rgba(255,255,255,.02)}

canvas#priceChart{
  width:100%;height:220px;
  background:linear-gradient(165deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 26px rgba(0,0,0,.22);
}

.pagination{display:flex;gap:8px;justify-content:center;margin-top:32px}
.pagination a{padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);font-family:'Oswald';font-size:13px}
.pagination a.active{border-color:var(--rust);color:var(--rust-bright)}


/* --- línea de tiempo horizontal de rotaciones --- */
.timeline-scroll{
  display:flex;gap:8px;overflow-x:auto;padding:20px 4px 26px;margin-bottom:24px;
  border-bottom:1px solid var(--line);scroll-behavior:smooth;
}
.timeline-pill{
  flex:0 0 auto;display:flex;flex-direction:column;gap:2px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 4px 12px rgba(0,0,0,.16);
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.timeline-pill:hover{border-color:var(--rust);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 18px rgba(0,0,0,.28), 0 0 16px rgba(209,99,31,.2)}
.timeline-pill.active{
  background:linear-gradient(155deg, rgba(209,99,31,.16), rgba(209,99,31,.04));
  border-color:var(--rust);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 4px 12px rgba(0,0,0,.16), 0 0 20px rgba(209,99,31,.35);
}
.timeline-pill.active .tp-date{color:var(--rust-bright)}
.tp-date{font-family:'Oswald';font-size:13px;letter-spacing:.03em}
.tp-count{font-family:'JetBrains Mono';font-size:11px;color:var(--muted)}

.card-img.broken{position:relative}
.card-img.broken img{display:none}
.card-img.broken::after{content:'Imagen rota';color:var(--muted);font-family:'Oswald';font-size:11px;text-transform:uppercase;letter-spacing:.08em}

/* --- explicaciones emergentes de términos técnicos --- */
.term{position:relative;border-bottom:1px dotted var(--muted);cursor:help}
.term-tip{
  display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:220px;padding:10px 12px;background:var(--bg-panel-raised);border:1px solid var(--rust);
  border-radius:var(--radius);font-family:'Inter';font-size:12px;font-weight:400;line-height:1.4;
  color:var(--steel-text);z-index:20;white-space:normal;text-transform:none;letter-spacing:normal;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.term:hover .term-tip,.term:focus .term-tip{display:block}

/* --- tarjeta del Mercado de Steam --- */
.steam-market-card{
  display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;
  background:linear-gradient(135deg,#1b2838 0%,#16202c 100%);
  border:1px solid #2a475e;border-radius:var(--radius);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.steam-market-card:hover{
  border-color:#66c0f4;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(102,192,244,.15);
}
.steam-icon{flex:0 0 auto}
.steam-market-info{flex:1;min-width:0}
.steam-market-title{
  font-family:'Oswald';font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;
  color:#c7d5e0;
}
.steam-market-sub{font-family:'JetBrains Mono';font-size:12px;color:#66c0f4;margin-top:2px}
.steam-market-arrow{color:#66c0f4;font-size:18px;flex:0 0 auto;transition:transform .18s}
.steam-market-card:hover .steam-market-arrow{transform:translate(2px,-2px)}

/* --- pestañas de imagen (icono / 3D) --- */
.img-tabs{display:flex;gap:4px;margin-bottom:8px}
.img-tab{
  padding:6px 12px;font-family:'Oswald';font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);
}
.img-tab.active{color:var(--steel-text);border-color:var(--rust);background:rgba(209,99,31,.08)}
.img-tab:not(.active):hover{color:var(--steel-text);border-color:var(--muted)}

/* --- chips de filtro por atributo --- */
.attr-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 20px}
.attr-chip{
  display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);
  border-radius:4px;font-family:'Oswald';font-size:11.5px;letter-spacing:.03em;
  color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s,box-shadow .15s;
}
.attr-chip-icon{font-size:13px}
.attr-chip:hover{border-color:currentColor;color:var(--steel-text)}
.attr-chip.active{color:#fff;font-weight:600;box-shadow:0 0 14px currentColor}
.attr-chip.active::before{content:'✓';margin-right:2px;font-weight:700}
.attr-chip.clr-amber{border-color:#ffb05455;color:#ffb054}.attr-chip.clr-amber.active{background:rgba(255,176,84,.18);border-color:#ffb054;color:#ffb054}
.attr-chip.clr-yellow{border-color:#f5e05a55;color:#f5e05a}.attr-chip.clr-yellow.active{background:rgba(245,224,90,.18);border-color:#f5e05a;color:#f5e05a}
.attr-chip.clr-cyan{border-color:#5ee3f555;color:#5ee3f5}.attr-chip.clr-cyan.active{background:rgba(94,227,245,.18);border-color:#5ee3f5;color:#5ee3f5}
.attr-chip.clr-violet{border-color:#a68bff55;color:#a68bff}.attr-chip.clr-violet.active{background:rgba(166,139,255,.18);border-color:#a68bff;color:#a68bff}
.attr-chip.clr-olive{border-color:#a8cc6e55;color:#a8cc6e}.attr-chip.clr-olive.active{background:rgba(168,204,110,.18);border-color:#a8cc6e;color:#a8cc6e}
.attr-chip.clr-purple{border-color:#b98bff55;color:#b98bff}.attr-chip.clr-purple.active{background:rgba(185,139,255,.18);border-color:#b98bff;color:#b98bff}
.attr-chip.clr-bronze{border-color:#e0a06a55;color:#e0a06a}.attr-chip.clr-bronze.active{background:rgba(224,160,106,.18);border-color:#e0a06a;color:#e0a06a}
.attr-chip input{accent-color:currentColor;cursor:pointer}
.attr-chip.clear-chip{color:var(--warn);border-color:var(--warn);text-decoration:none}
.attr-chip.clear-chip:hover{background:rgba(248,113,113,.1)}

/* --- galería de fotos del artista (Steam Workshop) --- */
.gallery-wrap{position:relative;display:flex;align-items:center;gap:6px}
.gallery-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-behavior:smooth}
.gallery-thumb{
  flex:0 0 auto;width:100px;height:100px;border-radius:var(--radius);overflow:hidden;padding:0;
  border:1px solid var(--line);background:#0f0d09;cursor:pointer;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.gallery-thumb:hover{border-color:var(--rust)}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-nav{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg-panel);color:var(--steel-text);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;
}
.gallery-nav:hover{border-color:var(--rust);color:var(--rust-bright)}

/* --- vista previa flotante al pasar el ratón (sin necesidad de clic) --- */
.gallery-hover-preview{
  display:none;position:fixed;transform:translate(-50%,-100%);z-index:60;
  padding:6px;background:var(--bg-panel-raised);border:1px solid var(--rust);border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.6);pointer-events:none;
}
.gallery-hover-preview.visible{display:block}
.gallery-hover-preview img{width:220px;height:220px;object-fit:cover;border-radius:2px;display:block}

/* --- lightbox de foto ampliada --- */
.lightbox{
  display:flex;position:fixed;inset:0;background:rgba(10,8,6,.92);z-index:100;
  align-items:center;justify-content:center;padding:40px;
  opacity:0;visibility:hidden;transition:opacity .2s ease;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:2px;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scale(.96);transition:transform .2s ease,opacity .16s ease}
.lightbox img.fading{opacity:0;transform:scale(.92)}
.lightbox.open img{transform:scale(1)}
.lightbox-close{
  position:absolute;top:20px;right:24px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--steel-text);
  font-size:16px;cursor:pointer;transition:border-color .15s,background .15s;
}
.lightbox-close:hover{border-color:var(--rust);background:rgba(255,255,255,.1)}
.lightbox-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--steel-text);
  font-size:22px;cursor:pointer;transition:border-color .15s,background .15s;
}
.lightbox-arrow:hover{border-color:var(--rust);background:rgba(255,255,255,.1)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

/* --- adelanto del apartado de análisis (aún sin modelo real) --- */
.analysis-note{font-size:11.5px;color:var(--muted);line-height:1.5;padding:12px 0 14px;border-top:1px solid var(--line);margin-top:2px}

/* --- controles de la gráfica de precio --- */
.chart-live-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
.chart-live-dot.pulse{background:var(--ok);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:chartPulse 2s infinite}
@keyframes chartPulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.chart-range-tabs{display:flex;gap:6px;margin-bottom:10px;position:relative}
.range-tab-indicator{
  position:absolute;top:0;height:100%;border-radius:var(--radius);
  background:rgba(209,99,31,.14);border:1px solid var(--rust);
  box-shadow:0 0 16px rgba(209,99,31,.3);
  transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:0;
}
.range-tab{
  position:relative;z-index:1;padding:6px 14px;border:1px solid transparent;border-radius:var(--radius);
  background:transparent;color:var(--muted);font-family:'Oswald';font-size:12px;letter-spacing:.03em;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.range-tab:hover{border-color:var(--muted);color:var(--steel-text)}
.range-tab.active{color:var(--rust-bright)}
.chart-legend{display:flex;gap:14px;margin-top:8px}
.legend-item{display:flex;align-items:center;gap:6px;font-family:'Oswald';font-size:11px;letter-spacing:.03em;color:var(--muted)}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}

.section-title-row{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.badge-soon{
  font-family:'Oswald';font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:3px 10px;border-radius:20px;background:rgba(201,162,39,.08);
}
.analysis-box{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent)}
.analysis-score{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.analysis-score-num{font-family:'Oswald';font-size:26px;color:var(--muted);letter-spacing:.02em}
.analysis-score-sub{font-family:'Oswald';font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:2px}
.analysis-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.analysis-tile{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 16px rgba(0,0,0,.16);
  transition:box-shadow .2s ease,transform .2s ease;
}
.analysis-tile:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 22px rgba(0,0,0,.24)}
.analysis-tile-icon{font-size:16px;color:var(--rust);opacity:.85;line-height:1.3}
.analysis-tile-k{font-family:'Oswald';font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.analysis-tile-v{font-family:'JetBrains Mono';font-size:14px;font-weight:600;color:var(--text);margin-top:3px}

/* Grupo "prediccion" - deliberadamente discreto, para que se note de un
   vistazo que aun no esta activo, sin necesidad de leer el texto */
.analysis-group-pending{opacity:.55}
.analysis-group-pending .analysis-tile{border-style:dashed}
.analysis-group-pending .analysis-tile-icon{color:var(--muted);opacity:.6}
.analysis-group-pending .analysis-tile-v{font-style:italic;font-weight:400;color:var(--muted)}

/* --- cuenta atrás de la próxima rotación --- */
.countdown-box{
  background:linear-gradient(165deg, rgba(209,99,31,.1), var(--bg-panel-raised) 40%, var(--bg-panel));
  border:1px solid var(--rust);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:20px;text-align:center;
  box-shadow:0 0 0 1px rgba(209,99,31,.15), 0 0 40px rgba(209,99,31,.18), 0 10px 30px rgba(0,0,0,.3);
  animation:countdownGlow 3s ease-in-out infinite;
}
@keyframes countdownGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(209,99,31,.15), 0 0 40px rgba(209,99,31,.18), 0 10px 30px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 1px rgba(209,99,31,.25), 0 0 55px rgba(209,99,31,.3), 0 10px 30px rgba(0,0,0,.3)}
}
.cd-label{font-family:'Oswald';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:6px}
.cd-icon{font-size:14px;color:var(--rust-bright)}
.cd-timer{font-family:'JetBrains Mono';font-size:34px;font-weight:500;color:var(--rust-bright);letter-spacing:.02em;animation:cdGlow 2.4s ease-in-out infinite}
@keyframes cdGlow{0%,100%{text-shadow:0 0 8px rgba(255,145,66,.25)}50%{text-shadow:0 0 26px rgba(255,145,66,.6)}}

/* --- panel de estado en vivo --- */
.status-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:22px}
.status-item{
  display:flex;align-items:flex-start;gap:10px;padding:18px 20px;
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 20px rgba(0,0,0,.18);
  transition:box-shadow .25s ease,transform .25s ease;
}
.status-item:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 28px rgba(0,0,0,.28)}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}

/* --- iconos de categoria con color propio, uno por tipo de tarjeta de estado --- */
.status-icon{
  width:38px;height:38px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;
}
.status-icon-catalog,.status-icon-store,.status-icon-price,.status-icon-gallery,.status-icon-scmm{
  background:rgba(209,99,31,.16);color:var(--rust-bright);border:1px solid rgba(209,99,31,.4);
}
.status-dot.status-fresh{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.status-dot.status-ok{background:var(--gold)}
.status-dot.status-stale{background:var(--warn)}
.status-text{flex:1;min-width:0}
.status-k{font-family:'Oswald';font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between;gap:8px}
.status-word{font-size:10px;letter-spacing:.03em;padding:1px 6px;border-radius:2px}
.status-word.status-fresh{color:var(--ok);background:rgba(74,222,128,.12)}
.status-word.status-ok{color:var(--gold);background:rgba(201,162,39,.12)}
.status-word.status-stale{color:var(--warn);background:rgba(248,113,113,.12)}
.status-v{font-size:12.5px;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono'}

/* --- esqueleto de carga (scroll infinito) --- */
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
.skeleton-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.skeleton-img{aspect-ratio:1;background:linear-gradient(90deg,#1d1912 25%,#241f16 50%,#1d1912 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skeleton-line{height:10px;margin:14px 12px;border-radius:2px;background:linear-gradient(90deg,#1d1912 25%,#241f16 50%,#1d1912 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
.skeleton-line.short{width:50%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- entrada suave de secciones al cargar la página --- */
.page-head,.status-panel,.timeline-scroll,.countdown-box{animation:fadeUp .4s ease backwards}
.status-panel{animation-delay:.05s}
.timeline-scroll{animation-delay:.1s}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* --- tooltip al pasar el ratón por la gráfica de precio --- */
.chart-tooltip{
  display:none;position:fixed;transform:translate(-50%,-100%);z-index:70;
  padding:8px 12px;background:var(--bg-panel-raised);border:1px solid var(--rust);
  border-radius:var(--radius);font-size:12px;line-height:1.5;white-space:nowrap;
  pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.chart-tooltip.visible{display:block}
.chart-tooltip strong{color:var(--rust-bright);font-family:'Oswald';font-size:11px;letter-spacing:.03em;text-transform:uppercase}

/* --- fila de estadísticas siempre visible, sin necesitar hover --- */
.chart-stats-row{display:flex;gap:8px;margin-bottom:12px}
.chart-stat{
  flex:1;padding:10px 8px;text-align:center;
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 14px rgba(0,0,0,.16);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.chart-stat:hover{border-color:var(--muted);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 20px rgba(0,0,0,.24)}
.chart-stat-highlight{background:linear-gradient(155deg,rgba(209,99,31,.16),rgba(209,99,31,.03));border-color:var(--rust)}
.chart-stat-k{display:block;font-family:'Oswald';font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.chart-stat-v{display:block;font-family:'JetBrains Mono';font-size:14px;margin-top:3px}
.chart-stat-v.chart-stat-big{font-size:18px;font-weight:600;color:var(--rust-bright)}
.stat-up{color:var(--ok)}
.stat-down{color:var(--warn)}
.chart-stat-v.stat-up{color:var(--ok)}
.chart-stat-v.stat-down{color:var(--warn)}
.analysis-tile-v.stat-up{color:var(--ok)}
.analysis-tile-v.stat-down{color:var(--warn)}

/* --- insignia de cantidad, para el inventario --- */
.qty-badge{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);border:1px solid var(--rust);
  color:var(--rust-bright);font-family:'JetBrains Mono';font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:12px;
}

/* --- subtitulo dentro del apartado de analisis, para separar real vs prediccion --- */
.analysis-subtitle{font-family:'Oswald';font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* --- ficha rapida de datos de la skin (colores, descomposicion) --- */
.skin-detail-panel{margin-top:14px;padding:14px 16px;background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 16px rgba(0,0,0,.16)}
.skin-detail-desc{font-size:13px;line-height:1.6;color:var(--text)}
.skin-facts{display:flex;flex-wrap:wrap;gap:20px}
.skin-detail-desc + .skin-facts{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.skin-fact{display:flex;flex-direction:column;gap:4px}
.skin-fact-k{font-family:'Oswald';font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.skin-fact-v{font-size:12.5px;display:flex;align-items:center;gap:6px}
.skin-color-swatches{flex-wrap:wrap}
.color-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex-shrink:0;display:inline-block}

/* --- fila compacta de datos SCMM en la tarjeta (liquidez, supply, variacion) --- */
.card-scmm-strip{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.card-scmm-stat{
  font-family:'JetBrains Mono';font-size:10.5px;color:var(--muted);
  background:var(--bg-panel);border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;
}
.card-scmm-stat.stat-up{color:var(--ok);border-color:rgba(74,222,128,.4)}
.card-scmm-stat.stat-down{color:var(--warn);border-color:rgba(248,113,113,.4)}

/* --- tooltip propio para los iconos de datos en las tarjetas, pensado
   para que se entienda sin saber nada del tema --- */
.has-tip{position:relative;cursor:help}
.has-tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  width:180px;padding:8px 10px;background:var(--bg-panel-raised);border:1px solid var(--rust);
  border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:11px;line-height:1.4;
  color:var(--text);text-align:left;white-space:normal;
  opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:60;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.has-tip:hover::after{opacity:1}

/* --- aviso de posible manipulacion de mercado, visible en la propia tarjeta --- */
.card-manipulation-warn{
  margin-top:6px;padding:4px 8px;background:rgba(248,113,113,.12);border:1px solid var(--warn);
  border-radius:3px;color:var(--warn);font-size:10.5px;font-weight:600;text-align:center;cursor:help;
}

/* --- skin retirada de la tienda del juego --- */
.card.is-retired{
  border-color:var(--gold);border-left-color:var(--gold);
  box-shadow:0 0 0 1px rgba(251,191,36,.35), 0 0 22px rgba(251,191,36,.18);
  animation:cardIn .35s ease backwards, retiredGlow 3.2s ease-in-out infinite .4s;
}
@keyframes retiredGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(251,191,36,.30), 0 0 14px rgba(251,191,36,.12)}
  50%{box-shadow:0 0 0 1px rgba(251,191,36,.60), 0 0 28px rgba(251,191,36,.30)}
}
.card.is-retired .card-img::before{background:radial-gradient(circle, rgba(251,191,36,.28), transparent 70%)}
.retired-ribbon{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:6px 8px;text-align:center;cursor:help;
  font-family:'Oswald';font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1a1204;
  background:repeating-linear-gradient(-45deg,#fbbf24 0 12px,#f59e0b 12px 24px);
  box-shadow:0 -4px 14px rgba(0,0,0,.45);
}
.retired-ribbon span{display:inline-block;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.card.is-retired .card-img{overflow:hidden}
/* Cuadro de explicación: dentro de la imagen (no se recorta) y con colores propios, bien legible */
.retired-tip{
  position:absolute;left:8px;right:8px;bottom:40px;z-index:5;padding:10px 12px;
  background:#120e05;border:1px solid var(--gold);border-radius:6px;
  color:#fff4d6;font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.45;font-weight:400;
  letter-spacing:normal;text-transform:none;text-align:left;
  box-shadow:0 10px 24px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s;pointer-events:none;
}
.retired-tip b{display:block;margin-bottom:3px;color:var(--gold);font-family:'Oswald';font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.retired-ribbon{cursor:help}
.retired-ribbon:hover + .retired-tip,.retired-ribbon:focus + .retired-tip{opacity:1;visibility:visible;transform:none}

.removed-banner{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin:0 0 22px;padding:18px 20px 18px 26px;
  background:linear-gradient(120deg, rgba(251,191,36,.16), rgba(251,191,36,.04));
  border:1px solid var(--gold);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 28px rgba(251,191,36,.14);color:var(--steel-text);
}
.removed-banner::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:10px;
  background:repeating-linear-gradient(-45deg,#fbbf24 0 10px,#1a1204 10px 20px);
}
.removed-banner .rb-ico{font-size:38px;line-height:1;filter:drop-shadow(0 0 10px rgba(251,191,36,.6))}
.removed-banner h2{margin:0 0 4px;font-family:'Oswald';font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.removed-banner p{margin:0 0 10px;font-size:14px;line-height:1.5}
.rb-facts{display:flex;flex-wrap:wrap;gap:10px}
.rb-fact{padding:6px 12px;background:rgba(0,0,0,.28);border:1px solid rgba(251,191,36,.35);border-radius:4px;min-width:120px}
.rb-fact b{display:block;font-family:'Oswald';font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.rb-fact span{font-family:'Oswald';font-size:16px;color:var(--gold)}
.retired-chip{
  display:inline-block;margin-left:10px;padding:3px 10px;vertical-align:middle;border-radius:3px;
  font-family:'Oswald';font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1a1204;
  background:repeating-linear-gradient(-45deg,#fbbf24 0 8px,#f59e0b 8px 16px);
}
@media (max-width:600px){
  .removed-banner{grid-template-columns:1fr;gap:8px;padding:16px 14px 16px 22px}
  .removed-banner .rb-ico{font-size:30px}
  .rb-fact{flex:1 1 130px}
}
@media (prefers-reduced-motion:reduce){.card.is-retired{animation:none}}

/* --- pagina de retiradas --- */
.retired-item{display:flex;flex-direction:column;gap:6px}
.retired-item .card{flex:1}
.retired-facts{display:flex;flex-wrap:wrap;gap:6px}
.retired-facts>div{flex:1 1 90px;padding:6px 8px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.3);border-radius:4px}
.retired-facts b{display:block;font-family:'Oswald';font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.retired-facts span{font-family:'JetBrains Mono';font-size:12.5px;color:var(--gold)}
.retired-facts .stat-up{color:var(--ok)}.retired-facts .stat-down{color:var(--warn)}
.retired-link{display:inline-block;margin:6px 0 0;padding:6px 12px;border:1px solid var(--gold);border-radius:4px;color:var(--gold);font-family:'Oswald';font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.retired-link:hover{background:rgba(251,191,36,.12)}

/* --- pagina de comparacion lado a lado --- */
.cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin:24px 0}
.cmp-side{text-align:center}
.cmp-name{display:block;margin-top:10px;font-family:'Oswald';font-size:15px;font-weight:600;color:var(--steel-text)}
.cmp-vs{font-family:'Oswald';font-size:18px;color:var(--rust-bright);font-weight:700}
.cmp-table{
  background:linear-gradient(155deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 20px rgba(0,0,0,.18);
}
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:none}
.cmp-val{font-family:'JetBrains Mono';font-size:14px;text-align:center}
.cmp-val.cmp-win{color:var(--ok);font-weight:700;text-shadow:0 0 12px rgba(74,222,128,.4)}
.cmp-label{font-family:'Oswald';font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap}
@media (max-width:640px){
  .cmp-row{grid-template-columns:1fr;gap:2px;text-align:center;padding:10px 14px}
  .cmp-label{order:-1}
}

/* --- estrella de favoritos, guardada solo en el navegador, sin cuenta --- */
.fav-star{
  position:absolute;top:8px;right:8px;z-index:5;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15);
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s ease,border-color .15s ease,transform .15s ease;
}
.fav-star span{transform:translateY(-1px)}
.fav-star:hover{color:var(--gold);transform:scale(1.1)}
.detail-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.fav-star-detail{position:static;width:38px;height:38px;font-size:18px;flex-shrink:0;margin-top:4px}
.fav-star.active{color:var(--gold);border-color:var(--gold);text-shadow:0 0 8px rgba(251,191,36,.6)}
.card{position:relative}

/* --- transicion suave cuando un precio se actualiza en vivo, no un cambio
   brusco de golpe --- */
@keyframes valueFlash{
  0%{background:rgba(255,145,66,.35)}
  100%{background:transparent}
}
.value-flash{animation:valueFlash 1.2s ease-out;border-radius:3px}


/* --- calculadora de raid --- */
.raid-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.raid-group{font-family:'Oswald';font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-bright);margin:18px 0 8px;font-weight:600}
.raid-group:first-child{margin-top:0}
.raid-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.raid-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel));border:1px solid var(--line);border-top:3px solid var(--tier);border-radius:var(--radius);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;overflow:hidden}
.raid-card:hover{transform:translateY(-2px)}
.raid-card.on{border-color:var(--rust-bright);border-top-color:var(--rust-bright);box-shadow:0 0 18px rgba(255,145,66,.25)}
.raid-card-main{display:flex;align-items:center;gap:12px;padding:12px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;width:100%}
.raid-ico{display:inline-flex;flex:0 0 54px;width:54px;height:54px;padding:6px;border-radius:8px;background:rgba(0,0,0,.28)}
.raid-ico svg{width:100%;height:100%}
.raid-ico.sm{flex-basis:34px;width:34px;height:34px;padding:3px;border-radius:6px}
.raid-ico.xs{flex-basis:22px;width:22px;height:22px;padding:2px;border-radius:4px}
.raid-name{display:flex;flex-direction:column;gap:5px;min-width:0}
.raid-name b{font-size:14px;font-weight:600;color:var(--steel-text);line-height:1.25}
.raid-name small{font-family:'JetBrains Mono';font-size:11px;color:var(--muted)}
.raid-hp{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.raid-hp i{display:block;height:100%;background:var(--tier);border-radius:3px}
.raid-step{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 12px 10px}
.raid-step button{width:38px;height:34px;border-radius:6px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:18px;line-height:1;cursor:pointer}
.raid-step button:hover{border-color:var(--rust-bright);color:var(--rust-bright)}
.raid-step output{min-width:30px;text-align:center;font-family:'JetBrains Mono';font-size:16px;color:var(--steel-text)}
.raid-card.on .raid-step output{color:var(--rust-bright);font-weight:700}
.raid-result{position:sticky;top:84px;padding:18px;background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 20px rgba(0,0,0,.2);max-height:calc(100vh - 100px);overflow:auto}
.raid-result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.raid-result-head h2{margin:0;font-family:'Oswald';font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-text)}
.raid-reset{background:none;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:12px;padding:4px 10px;cursor:pointer}
.raid-reset:hover{color:var(--warn);border-color:var(--warn)}
.raid-empty{padding:26px 10px;color:var(--muted);font-size:14px;text-align:center;line-height:1.5}
.raid-empty-ico{display:block;font-size:34px;margin-bottom:8px}
.raid-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.raid-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--tier);font-size:12px;color:var(--steel-text)}
.raid-methods{display:grid;gap:10px}
.raid-method{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.18)}
.raid-method.best{border-color:var(--ok);background:rgba(74,222,128,.07)}
.raid-method-top{display:flex;align-items:center;gap:10px;color:var(--steel-text);font-size:15px}
.raid-method-top em{margin-left:auto;padding:1px 7px;border-radius:3px;background:var(--ok);color:#06210f;font-size:10px;font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:'Oswald'}
.raid-bar{height:7px;margin:8px 0;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.raid-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--rust),var(--rust-bright));transition:width .35s ease}
.raid-method.best .raid-bar i{background:linear-gradient(90deg,#22a559,var(--ok))}
.raid-method-res{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.raid-method-res b{font-family:'JetBrains Mono';color:var(--steel-text);font-weight:600}
.raid-best{margin:12px 0 0;font-size:14px;color:var(--steel-text);line-height:1.45}
.raid-ref{margin-top:34px}
.raid-ref h2{margin:0;font-family:'Oswald';font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-text)}
.raid-ref-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.raid-ref-sub{margin:6px 0 12px;color:var(--muted);font-size:13.5px}
.raid-toggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.raid-toggle button{padding:6px 14px;background:var(--bg-panel);border:0;color:var(--muted);font-size:13px;cursor:pointer}
.raid-toggle button.on{background:var(--rust);color:#fff}
.raid-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel))}
.raid-reftable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.raid-reftable th{padding:10px 10px;text-align:right;font-family:'Oswald';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);white-space:nowrap}
.raid-reftable th:first-child{text-align:left}
.raid-th-ico{display:inline-block;width:22px;height:22px;vertical-align:middle;margin-right:5px}
.raid-th-ico svg{width:100%;height:100%}
.raid-reftable td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--steel-text)}
.raid-reftable td.num{text-align:right;font-family:'JetBrains Mono'}
.raid-reftable td.best{color:var(--ok);font-weight:700;background:rgba(74,222,128,.07)}
.raid-reftable td.other{color:var(--muted);font-size:12px}
.raid-ref-name{white-space:nowrap}
.raid-ref-name .raid-ico{vertical-align:middle;margin-right:10px}
.raid-ref-group td{padding:6px 10px;background:rgba(255,145,66,.07);font-family:'Oswald';font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-bright)}
.raid-add{width:30px;height:28px;border-radius:5px;border:1px solid var(--line);background:var(--bg-panel);color:var(--rust-bright);cursor:pointer}
.raid-add:hover{border-color:var(--rust-bright)}
.raid-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.raid-note a{color:var(--rust-bright);border-bottom:1px dotted currentColor}
@media (max-width:860px){
  .raid-layout{grid-template-columns:1fr}
  .raid-result{position:static;max-height:none}
  .raid-rows{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .raid-rows{grid-template-columns:1fr}
}

.raid-fab{display:none;position:fixed;right:14px;bottom:16px;z-index:40;padding:11px 18px;border-radius:24px;border:0;background:var(--rust-bright);color:#1a0d02;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.5);cursor:pointer}
@media (max-width:860px){.raid-fab.show{display:block}}

/* --- planificador de electricidad --- */
.el-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.el-palette,.el-actions{display:flex;flex-wrap:wrap;gap:8px}
.el-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);border-left:3px solid var(--c);background:var(--bg-panel);color:var(--steel-text);font-size:13px;cursor:pointer}
.el-chip small{font-family:'JetBrains Mono';color:var(--muted);font-size:11px}
.el-chip:hover{border-color:var(--c)}
.el-btn{padding:7px 12px;border-radius:7px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:13px;cursor:pointer}
.el-btn:hover{border-color:var(--rust-bright)}
.el-btn.on,.el-btn.primary{background:var(--rust);border-color:var(--rust);color:#fff}
.el-hint{margin:10px 0 14px;font-size:13px;color:var(--muted)}
.el-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:20px;align-items:start}
.el-canvaswrap{border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/20px 20px,rgba(0,0,0,.3);overflow:hidden}
#elSvg{display:block;width:100%;height:auto;min-height:260px;user-select:none}
.el-wire{stroke:#f4c542;stroke-width:3;stroke-linecap:round;opacity:.85}
.el-wire.bad{stroke:#ef4444}
.el-node{cursor:grab}
.el-node.sel circle{filter:drop-shadow(0 0 6px rgba(255,145,66,.8))}
.el-node.from circle{stroke-dasharray:5 4}
.el-lbl{fill:#cfd5db;font-size:8.5px}
.el-val{fill:#f4c542;font-size:9.5px;font-family:'JetBrains Mono'}
.el-node.bad .el-val{fill:#ef4444}
.el-side{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel))}
.el-side h3{margin:0 0 10px;font-family:'Oswald';font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-text)}
.el-side h3:not(:first-child){margin-top:18px}
.el-net{padding:9px 11px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px}
.el-net.ok{border-color:var(--ok)}
.el-net.bad{border-color:#ef4444}
.el-net.bad .raid-bar i{background:#ef4444}
.el-net.ok .raid-bar i{background:var(--ok)}
.el-net-top{display:flex;justify-content:space-between;font-size:13px;color:var(--steel-text)}
.el-net-top span{font-family:'JetBrains Mono'}
.el-net small,.el-muted{color:var(--muted);font-size:12.5px}
.el-sel{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--steel-text)}
.el-sel input{display:block;width:100%;margin:8px 0}
.el-save{display:flex;gap:8px}
.el-save input{flex:1;min-width:0;padding:7px 10px;border-radius:7px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--steel-text);font-size:13px}
.el-saved{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.el-saved li{display:flex;gap:6px}
.el-saved li button:first-child{flex:1;text-align:left;padding:7px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:13px;cursor:pointer}
.el-saved .x{width:34px;border-radius:6px;border:1px solid var(--line);background:var(--bg-panel);color:var(--muted);cursor:pointer}
.el-saved .x:hover{color:var(--warn);border-color:var(--warn)}
.el-share{display:flex;gap:8px}
.el-msg{min-height:18px;margin:10px 0 0;font-size:12.5px;color:var(--rust-bright)}
.el-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.el-tpl{display:flex;flex-direction:column;gap:5px;padding:12px;text-align:left;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);cursor:pointer}
.el-tpl span{font-size:12.5px;color:var(--muted)}
.el-tpl:hover{border-color:var(--rust-bright)}
@media (max-width:860px){.el-layout{grid-template-columns:1fr}}
.raid-ico img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.raid-th-ico img{width:100%;height:100%;object-fit:contain}
.raid-th-ico{width:26px;height:26px}
.raid-method.nodata{opacity:.55}
.raid-method-top em.nd{background:rgba(255,255,255,.12);color:var(--muted)}
.raid-ico.xs img{filter:none}

/* --- electricidad v2 --- */
.el-section{margin-top:34px}
.el-section h2{margin:0;font-family:'Oswald';font-size:22px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-text)}
.el-jump{margin:14px 0 0}
.el-jump .el-btn{display:inline-block;padding:10px 18px;font-size:14px;text-decoration:none}
.el-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin-top:6px}
.el-plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel));overflow:hidden}
.el-plan-svg{background:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/18px 18px,rgba(0,0,0,.3);border-bottom:1px solid var(--line)}
.el-plan-svg svg{display:block;width:100%;height:auto}
.el-plan-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.el-plan-body h3{margin:0;font-size:16px;color:var(--steel-text)}
.el-plan-body p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
.el-plan-pw{display:flex;gap:8px;font-family:'JetBrains Mono';font-size:12px}
.el-plan-pw span{padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.07);color:var(--steel-text)}
.el-plan-pw .ok{background:rgba(74,222,128,.15);color:var(--ok)}
.el-plan details{font-size:13px;color:var(--steel-text)}
.el-plan summary{cursor:pointer;color:var(--rust-bright)}
.el-plan ol{margin:8px 0 0;padding-left:20px;color:var(--muted);line-height:1.5}
.el-plan .el-btn{margin-top:auto}
.el-cat{margin-bottom:10px}
.el-cat h4{margin:0 0 6px;font-family:'Oswald';font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-bright);font-weight:500}
.el-chips{display:flex;flex-wrap:wrap;gap:6px}
.el-chip{padding:5px 10px 5px 6px}
.el-chip-ico{width:26px;height:26px;object-fit:contain;flex:0 0 26px}
.el-glyph{display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.el-actions{margin:12px 0 4px}
.el-layout{margin-top:12px}
.el-run{display:block;margin-top:4px}
.raid-ico .el-glyph{width:100%;height:100%}
.el-node image{pointer-events:none}

/* --- electricidad v3: diagramas con puertos estilo Rustrician --- */
.el-plans{grid-template-columns:1fr;gap:16px}
.el-plan{flex-direction:row;align-items:stretch}
.el-plan-svg{flex:1;min-width:0;overflow:auto;padding:12px;border-bottom:0;border-right:1px solid var(--line);display:flex;align-items:center}
.el-plan-svg svg{flex:0 0 auto;width:auto;max-width:none}
.el-plan-body{flex:0 0 310px}
.el-steps{margin:2px 0 6px;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.5}
.el-steps li{margin-bottom:3px}
.el-canvaswrap{overflow:auto;max-height:660px}
#elSvg{display:block;width:1000px;height:620px;min-height:0}
.el-card{fill:#16171a;stroke-width:2}
.el-headbg{opacity:.28}
.el-title{fill:#f3f3f3;font-size:12px;font-weight:600}
.el-sub{fill:#aeb4bb;font-size:10px;font-family:'JetBrains Mono',monospace}
.el-plabel{fill:#cfd5db;font-size:10.5px}
.el-port .hit{fill:transparent;cursor:crosshair}
.el-port .dot{fill:#16171a;stroke-width:2.5}
.el-port.in .dot{stroke:#6aa9ff}
.el-port.out .dot{stroke:#ffb347}
.el-port.in.on .dot{fill:#6aa9ff}
.el-port.out.on .dot{fill:#ffb347}
.el-port.pend .dot{fill:#fff;stroke:#fff}
.el-port.ok .dot{animation:elPulse 1s ease-in-out infinite}
@keyframes elPulse{50%{stroke-width:5}}
.el-wire{fill:none;stroke:#f4c542;stroke-width:3;stroke-linecap:round;opacity:.92}
.el-wire.bad{stroke:#ef4444}
.el-wire.sel{stroke:#fff;stroke-width:4.5}
.el-wire.temp{stroke:#fff;stroke-dasharray:6 5;opacity:.8}
.el-wire-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer}
.el-node{cursor:grab}
.el-node.sel .el-card{filter:drop-shadow(0 0 7px rgba(255,145,66,.85))}
.el-node.bad .el-card{fill:#251415}
@media (max-width:900px){
  .el-plan{flex-direction:column}
  .el-plan-svg{border-right:0;border-bottom:1px solid var(--line)}
  .el-plan-body{flex-basis:auto}
}

/* ===== Planos de electricidad (ex-) ===== */
.ex-noscroll{overflow:hidden}
.ex-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin:6px 0 14px}
.ex-head h1{margin:0}
.ex-head .eyebrow{margin:0 0 4px}
.ex-head .sub{margin:0;max-width:520px;color:var(--muted);font-size:14px}
.ex-app{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.ex-mobtabs{display:none}
.ex-input{width:100%;padding:8px 11px;border-radius:7px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--steel-text);font-size:13.5px}
.ex-btn{padding:7px 12px;border-radius:7px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:13px;cursor:pointer;white-space:nowrap}
.ex-btn:hover{border-color:var(--rust-bright)}
.ex-btn.primary{background:var(--rust);border-color:var(--rust);color:#fff}
.ex-btn.ic{width:34px;padding:7px 0;font-size:17px;line-height:1}
.ex-muted{color:var(--muted);font-size:12.5px;margin:6px 0}
.ex-sp{flex:1}
/* biblioteca */
.ex-lib{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel));padding:12px;position:sticky;top:76px;max-height:calc(100vh - 92px);display:flex;flex-direction:column;min-height:0}
.ex-lib > div:not(.ex-ltabs){min-height:0;display:flex;flex-direction:column;overflow:hidden;flex:1}
.ex-lib [hidden]{display:none!important}
.ex-ltabs{display:flex;gap:4px;margin-bottom:10px}
.ex-ltabs button{flex:1;padding:7px 4px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;cursor:pointer}
.ex-ltabs button.on{background:var(--rust);border-color:var(--rust);color:#fff}
.ex-cats{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 4px}
.ex-cat{padding:3px 9px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
.ex-cat.on{background:rgba(255,145,66,.18);border-color:var(--rust-bright);color:var(--rust-bright)}
.ex-count{font-size:11.5px;color:var(--muted);margin:2px 0 6px}
.ex-planlist{display:grid;gap:7px;overflow:auto;padding-right:3px;flex:1;min-height:120px;align-content:start}
.ex-plan{display:flex;align-items:center;gap:10px;padding:6px;text-align:left;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.18);color:var(--steel-text);cursor:pointer}
.ex-plan:hover{border-color:var(--rust-bright)}
.ex-plan.on{border-color:var(--rust-bright);background:rgba(255,145,66,.1)}
.ex-plan svg{flex:0 0 118px;width:118px;height:64px;border-radius:5px;background:#0f1316;border:1px solid rgba(255,255,255,.06)}
.ex-plan-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ex-plan-t b{font-size:13px;line-height:1.25}
.ex-plan-t small{font-size:11px;color:var(--muted)}
.ex-saved{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;overflow:auto}
.ex-saved li{display:flex;gap:6px}
.ex-saved li button:first-child{flex:1;text-align:left;padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:13px;cursor:pointer}
.ex-saved .x{width:34px;border-radius:6px;border:1px solid var(--line);background:var(--bg-panel);color:var(--muted);cursor:pointer}
.ex-saved .x:hover{color:var(--warn);border-color:var(--warn)}
.ex-row{display:flex;gap:8px}
/* escenario */
.ex-stage{min-width:0}
.ex-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.ex-name{flex:1 1 180px;max-width:260px;width:auto}
.ex-palette{margin-bottom:8px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(0,0,0,.18);padding:6px 10px}
.ex-palette summary{cursor:pointer;font-size:13px;color:var(--steel-text);padding:4px 0}
.ex-palette summary small{color:var(--muted)}
.ex-palette .ex-input{margin:6px 0 8px;max-width:300px}
.ex-pcat{margin-bottom:8px}
.ex-pcat h4{margin:0 0 5px;font-family:'Oswald';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust-bright);font-weight:500}
.ex-chips{display:flex;flex-wrap:wrap;gap:5px}
.ex-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:7px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:12px;cursor:pointer}
.ex-chip:hover{border-color:var(--rust-bright)}
.ex-chip.source{border-left:3px solid #f4c542}.ex-chip.battery{border-left:3px solid #4ade80}.ex-chip.wire{border-left:3px solid #9aa3ab}.ex-chip.load{border-left:3px solid #ff9142}
.ex-chip small{font-family:'JetBrains Mono';color:var(--muted);font-size:10.5px}
.ex-chip-ico{width:24px;height:24px;object-fit:contain;flex:0 0 24px}
.ex-glyph{display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ex-canvaswrap{position:relative;height:min(64vh,620px);min-height:380px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#0f1316;background-image:radial-gradient(ellipse at 50% 40%,rgba(255,145,66,.05),transparent 70%),linear-gradient(rgba(150,175,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(150,175,200,.07) 1px,transparent 1px);background-size:100% 100%,24px 24px,24px 24px;box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
#exSvg{display:block;width:100%;height:100%;cursor:grab;user-select:none;-webkit-user-select:none}
.ex-hint{position:absolute;left:8px;bottom:6px;font-size:11px;color:#8b97a3;background:rgba(0,0,0,.45);padding:2px 8px;border-radius:10px;pointer-events:none}
.ex-msg{min-height:18px;margin:8px 2px 0;font-size:12.5px;color:var(--rust-bright)}
/* nodos y cables */
.ex-hit{fill:transparent;cursor:grab}
.ex-node image,.ex-node>text:not(.ex-nm):not(.ex-run):not(.ex-need){transition:filter .15s}
.ex-node.yellow image,.ex-node.yellow .ex-g{filter:drop-shadow(0 0 3px #ffd400) drop-shadow(0 0 7px #ffd400)}
.ex-node.red image,.ex-node.red .ex-g{filter:drop-shadow(0 0 3px #e53935) drop-shadow(0 0 7px #e53935)}
.ex-node.green image,.ex-node.green .ex-g{filter:drop-shadow(0 0 3px #2fc25b) drop-shadow(0 0 6px #2fc25b)}
.ex-node.swoff image{opacity:.55}
.ex-node.sel .ex-hit{fill:rgba(60,130,230,.10);stroke:#3c82e6;stroke-width:1.5;stroke-dasharray:4 3}
.ex-nm{font-size:8.5px;fill:#d5dbe0;font-weight:600;paint-order:stroke;stroke:#0f1316;stroke-width:2.5px}
.ex-need{font-size:8.5px;fill:#5fe08a;font-family:'JetBrains Mono',monospace;paint-order:stroke;stroke:#0f1316;stroke-width:2.5px}
.ex-need.lack{fill:#ff6b64;font-weight:700}
.ex-run{font-size:9.5px;fill:#fff;font-weight:700;paint-order:stroke;stroke:#0f1316;stroke-width:3px}
.ex-plabel{font-size:8px;fill:#cfd8e0;opacity:0;pointer-events:none;paint-order:stroke;stroke:#0f1316;stroke-width:2.5px}
.ex-node:hover .ex-plabel,.ex-node.sel .ex-plabel{opacity:1}
.ex-port .hit{fill:transparent;cursor:crosshair}
.ex-port .dot{fill:#1d2a3a;stroke:#6fa8ff;stroke-width:1.6}
.ex-port.on .dot{fill:#6fa8ff}
.ex-port.water .dot{fill:#10303a;stroke:#2cc7ea}
.ex-port.water.on .dot{fill:#2cc7ea}
.ex-port.pend .dot{fill:#ff9142;stroke:#ff9142;r:5.5}
.ex-port.ok .dot{animation:exPulse .9s ease-in-out infinite}
@keyframes exPulse{50%{stroke-width:4;fill:#ffe38a}}
.ex-wire{fill:none;stroke:#6fa8ff;stroke-width:2.2;stroke-dasharray:6 4;stroke-linecap:round}
.ex-wire.zero{stroke:#5b6f86;opacity:.7}
.ex-wire.water{stroke:#2cc7ea;stroke-dasharray:2 4;stroke-width:2.6}
.ex-wire.bad{stroke:#ff5a52}
.ex-wire.sel{stroke:#ff9142;stroke-width:3.4}
.ex-wire.temp{stroke:#ff9142;opacity:.85}
.ex-wire-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.ex-wl rect{fill:#1a2129;stroke:#41566e;stroke-width:.8}
.ex-wl text{font-size:8.5px;fill:#e6edf3;font-family:'JetBrains Mono',monospace;font-weight:600}
/* panel inferior */
.ex-info{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;margin-top:8px}
.ex-balance,.ex-sel,.ex-steps{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel));font-size:13px;color:var(--steel-text)}
.ex-side{display:grid;gap:12px;align-content:start}
.ex-side [hidden]{display:none}
.ex-balance h3,.ex-sel h3,.ex-steps h3{margin:0 0 8px;font-family:'Oswald';font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.ex-tot{display:flex;gap:10px}
.ex-tot span{flex:1;padding:6px 9px;border-radius:7px;background:rgba(255,255,255,.05);display:flex;flex-direction:column}
.ex-tot small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ex-tot b{font-family:'JetBrains Mono';font-size:17px}
.ex-tot .ok{background:rgba(74,222,128,.14)}.ex-tot .ok b{color:var(--ok)}
.ex-tot .bad{background:rgba(239,68,68,.14)}.ex-tot .bad b{color:#f87171}
.ex-lacks{margin:8px 0 0;padding-left:18px;color:#f3a3a3;font-size:12.5px}
.ex-ok{margin:8px 0 0;color:var(--ok);font-size:12.5px}
.ex-run-l{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.ex-sel label{display:block;margin:6px 0}
.ex-sel input[type=range]{display:block;width:100%;margin:6px 0}
.ex-sel small,.ex-ports{color:var(--muted);font-size:12px;line-height:1.5}
.ex-ports{margin:8px 0 0}
.ex-steps p{margin:0 0 6px;color:var(--muted)}
.ex-steps ol{margin:0;padding-left:20px;line-height:1.5;color:var(--steel-text)}
.ex-section{margin-top:34px}
.ex-section h2{margin:0;font-family:'Oswald';font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-text)}
/* pantalla completa */
.ex-stage.ex-full{position:fixed;inset:0;z-index:2000;background:var(--bg,#0e0e0e);padding:10px;display:flex;flex-direction:column;overflow:auto}
.ex-stage.ex-full .ex-canvaswrap{flex:1;height:auto;min-height:300px}
.ex-stage.ex-full .ex-palette,.ex-stage.ex-full .ex-info{flex:0 0 auto}
/* móvil */
@media (max-width:900px){
  .ex-app{grid-template-columns:1fr}
  .ex-mobtabs{display:flex;gap:6px}
  .ex-mobtabs button{flex:1;padding:9px;border-radius:8px;border:1px solid var(--line);background:var(--bg-panel);color:var(--muted);font-size:14px;cursor:pointer}
  .ex-mobtabs button.on{background:var(--rust);border-color:var(--rust);color:#fff}
  .ex-app[data-tab="stage"] .ex-lib{display:none}
  .ex-app[data-tab="lib"] .ex-stage{display:none}
  .ex-lib{position:static;max-height:none}
  .ex-planlist{max-height:none;overflow:visible}
  .ex-info{grid-template-columns:1fr}
  .ex-canvaswrap{height:58vh;min-height:320px}
  .ex-name{max-width:none}
  .ex-head .sub{display:none}
  .ex-btn{padding:6px 9px;font-size:12.5px}
  .ex-bar{gap:5px}
}

/* puertos y cables industriales */
.ex-port.item .dot{fill:#3a2a10;stroke:#ffb347}
.ex-port.item.on .dot{fill:#ffb347}
.ex-wire.item{stroke:#ffb347;stroke-dasharray:10 3 2 3;stroke-width:2.6}

/* legibilidad v13 */
.ex-nm{font-size:11px;font-weight:600}
.ex-need{font-size:10.5px}
.ex-run{font-size:11px}
.ex-plabel{font-size:9.5px}
.ex-wl text{font-size:10px}
.ex-wire{stroke-width:1.9;opacity:.85}
.ex-wire.item{stroke-width:3.2;opacity:1}
.ex-wire.water{stroke-width:2.8;opacity:1}
.ex-legend{position:absolute;right:8px;bottom:6px;display:flex;gap:10px;font-size:11px;background:rgba(0,0,0,.5);padding:2px 9px;border-radius:10px;pointer-events:none}
.ex-legend .lp{color:#6fa8ff}.ex-legend .li{color:#ffb347}.ex-legend .lw{color:#2cc7ea}.ex-legend .la{color:#9aa4ad}
.ex-wire.attach{stroke:#9aa4ad;stroke-dasharray:2 5;stroke-width:2.4;opacity:.9;fill:none}
.ex-port.attach .dot{fill:#222a30;stroke:#9aa4ad}.ex-port.attach.on .dot{fill:#9aa4ad}
@media (max-width:900px){.ex-legend{display:none}}


/* ---- Barras de desplazamiento a juego con el sitio ---- */
:root{color-scheme:dark}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:#5a3a22 #130f0b}
}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#130f0b;border-left:1px solid rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8a4a1f,#5a3318);border-radius:8px;border:3px solid #130f0b;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff9142,#c4631f)}
::-webkit-scrollbar-thumb:active{background:#ff9142}
::-webkit-scrollbar-corner{background:#130f0b}
@media (max-width:700px){::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{border-width:2px}}

.timeline-scroll,.gallery-strip,.raid-tablewrap,.el-canvaswrap{scrollbar-gutter:auto}
.timeline-scroll::-webkit-scrollbar,.gallery-strip::-webkit-scrollbar,.raid-tablewrap::-webkit-scrollbar{height:10px}
.timeline-scroll::-webkit-scrollbar-track,.gallery-strip::-webkit-scrollbar-track,.raid-tablewrap::-webkit-scrollbar-track{background:#130f0b;border-top:1px solid rgba(255,255,255,.04);border-left:0;border-radius:0 0 8px 8px}

/* alertas de precio (favoritos) */
.al-box{margin:0 0 26px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(165deg,var(--bg-panel-raised),var(--bg-panel))}
.al-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.al-head h2{margin:0;font-family:'Oswald';font-size:18px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-text)}
.al-sub{font-size:12.5px;color:var(--muted)}
.al-fired{margin:0 0 12px;padding:10px 12px;border-radius:8px;border:1px solid var(--ok);background:rgba(74,222,128,.08);font-size:13.5px;line-height:1.5;color:var(--steel-text)}
.al-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,.7fr) auto;gap:10px;align-items:end}
.al-form label{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.al-form select,.al-form input{padding:9px 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg-panel);color:var(--steel-text);font-size:14px;min-width:0}
.al-form select:focus,.al-form input:focus{outline:2px solid var(--rust-bright);outline-offset:1px}
.al-btn{padding:10px 16px;border-radius:6px;border:0;background:var(--rust-bright);color:#1a0d02;font-weight:700;cursor:pointer}
.al-btn:hover{filter:brightness(1.08)}
.al-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.al-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.18);font-size:13.5px;color:var(--steel-text)}
.al-list li.hit{border-color:var(--ok);background:rgba(74,222,128,.07)}
.al-list li small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.al-list li.hit small{color:var(--ok)}
.al-list li button{background:none;border:1px solid var(--line);border-radius:5px;color:var(--muted);width:28px;height:28px;cursor:pointer}
.al-list li button:hover{color:var(--warn);border-color:var(--warn)}
.al-list .empty-al{color:var(--muted);justify-content:center}
@media (max-width:760px){.al-form{grid-template-columns:1fr 1fr}.al-form label:first-child{grid-column:1/-1}.al-btn{grid-column:1/-1}}