/* ==========================================================================
   MichaelMontes.us · ROG Ally · Optimizadores · Paneles ASUS
   Reutiliza los tokens de /core/base.css y el lenguaje de
   /rog-ally/optimizadores/assets/styles.css. No modifica nada existente.
   Texto visible >= 16 px · sin scroll horizontal.
   ========================================================================== */

.panShell{width:min(1200px,calc(100% - 30px));margin:0 auto;padding:22px 0 64px}

.panCrumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.panCrumbs a{color:var(--muted);text-decoration:none;font-weight:800;font-size:1rem}
.panCrumbs a:hover{color:var(--white)}

.panHero{
  padding:24px 26px;border:5px solid var(--ink);border-radius:22px 15px 20px 16px;
  background:var(--paper);box-shadow:8px 8px 0 var(--shadow);
}
.panHero .panKicker{
  display:inline-block;padding:5px 10px;border:3px solid var(--ink);border-radius:9px 7px 10px 8px;
  background:var(--yellow);color:#17324d;font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
}
.panHero h1{margin:12px 0 8px;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;letter-spacing:-.03em;color:#73bfff}
.panHero p{margin:0;max-width:900px;color:var(--muted);font-size:17px}

.panCredit{
  margin-top:16px;padding:12px 15px;border:3px dashed var(--paper-3,#294660);
  border-radius:12px;color:var(--muted);font-size:1rem;line-height:1.5;
}
.panCredit a{color:var(--yellow);font-weight:800}

/* --------------------------------------------------------------- indice */
.panIndex{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 8px}
.panIndex a{
  text-decoration:none;padding:8px 12px;border:3px solid var(--ink);
  border-radius:11px 8px 12px 9px;background:#203852;color:var(--white);
  font-size:1rem;font-weight:900;box-shadow:4px 4px 0 var(--shadow);
}
.panIndex a:active{transform:translate(3px,3px);box-shadow:none}

/* ---------------------------------------------------------------- panel */
.panel{
  margin-top:26px;padding:20px;border:5px solid var(--ink);
  border-radius:20px 14px 21px 15px;background:var(--paper);
  box-shadow:8px 8px 0 var(--shadow);scroll-margin-top:90px;
}
.panelHead{display:flex;align-items:flex-start;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.panelHead .panMark{
  display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;
  border:3px solid var(--ink);border-radius:14px 10px 15px 11px;
  background:#f7f3e8;box-shadow:4px 4px 0 var(--shadow);font-size:24px;
}
.panelHead h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.06;color:var(--white)}
.panelHead .panSub{margin:4px 0 0;color:var(--yellow);font-size:1rem;font-weight:900}

/* --------------------------------------------------------- imagen principal */
.panMain{margin:0}
.panFigure{margin:0}
.panShot{
  display:block;width:100%;height:auto;border:4px solid var(--ink);
  border-radius:14px 10px 15px 11px;background:#06172a;box-shadow:6px 6px 0 var(--shadow);
  cursor:zoom-in;
}
.panCap{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  margin:10px 0 0;padding:0 2px;color:var(--muted);font-size:1rem;line-height:1.5;
}
.panCap .panSrc{margin-left:auto;white-space:nowrap}
.panCap a{color:var(--blue);font-weight:800;text-decoration:none}
.panCap a:hover{text-decoration:underline}

.panPending{
  padding:26px 20px;border:4px dashed var(--paper-3,#294660);border-radius:14px;
  background:var(--deep,#06172a);color:var(--muted);font-size:1rem;text-align:center;line-height:1.6;
}
.panPending strong{display:block;color:var(--white);font-size:1.05rem;margin-bottom:6px}

/* etiqueta de imagen generica */
.panGeneric{
  display:inline-block;margin-bottom:9px;padding:5px 11px;border:3px solid var(--ink);
  border-radius:10px 7px 11px 8px;background:#ff922b;color:#17324d;
  font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--shadow);
}
.panCap code{
  font-family:ui-monospace,Consolas,monospace;font-size:1rem;
  background:var(--paper);border:2px solid var(--ink);border-radius:7px;padding:2px 6px;color:var(--yellow);
}

/* ------------------------------------------------------------- secundarias */
.panThumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px;margin-top:16px}
.panThumb{margin:0;cursor:zoom-in}
.panThumb img{
  display:block;width:100%;height:auto;border:3px solid var(--ink);
  border-radius:11px 8px 12px 9px;background:#06172a;box-shadow:4px 4px 0 var(--shadow);
}
.panThumb figcaption{margin-top:8px;color:var(--muted);font-size:1rem;line-height:1.45}

/* ------------------------------------------------------------------ texto */
.panBlocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:18px}
.panBlock{padding:14px;border:3px solid var(--ink);border-radius:14px 10px 15px 11px;background:var(--deep,#06172a)}
.panBlock h3{margin:0 0 8px;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.panBlock p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.panBlock ul{margin:0;padding-left:20px;color:var(--muted);font-size:1rem;line-height:1.55}
.panBlock li{margin-bottom:5px}
.panBlock.tip{border-color:var(--yellow)}
.panBlock.tip h3{color:var(--yellow)}

.panNote{margin-top:14px;padding:12px 14px;border:3px solid #ffb160;border-radius:12px;background:#3a2a16;color:#ffd9a8;font-size:1rem;line-height:1.5}

.panFoot{margin-top:26px;padding:16px;border:4px solid var(--ink);border-radius:16px 11px 17px 12px;background:var(--paper);box-shadow:6px 6px 0 var(--shadow);color:var(--muted);font-size:1rem;line-height:1.55}
.panFoot a{color:var(--yellow);font-weight:800}

/* --------------------------------------------------------------- lightbox */
.panLight{
  width:min(1500px,calc(100% - 20px));max-height:94vh;padding:0;border:5px solid var(--ink);
  border-radius:18px 12px 19px 13px;background:#06172a;box-shadow:10px 10px 0 var(--shadow);
}
.panLight::backdrop{background:rgba(2,9,17,.9)}
.panLight img{display:block;width:100%;height:auto}
.panLightCap{padding:14px 16px;color:var(--muted);font-size:1rem;line-height:1.5;border-top:4px solid var(--ink)}
.panLightCap strong{color:var(--white)}
.panLightClose{
  position:absolute;top:10px;right:10px;width:48px;height:48px;border:3px solid var(--ink);
  border-radius:13px 10px 14px 11px;background:#ffd9d9;color:#17324d;font-size:22px;
  font-weight:900;cursor:pointer;box-shadow:4px 4px 0 var(--shadow);
}

/* ------------------------------------------------------------------ movil */
@media(max-width:820px){
  .panBlocks{grid-template-columns:1fr}
}
@media(max-width:650px){
  .panShell{width:calc(100% - 20px);padding:16px 0 40px}
  .panHero{padding:18px}
  .panHero h1{font-size:clamp(1.8rem,8.5vw,2.3rem)}
  .panel{padding:15px}
  .panThumbs{grid-template-columns:1fr}
  .panCap .panSrc{margin-left:0}
}

@media(prefers-reduced-motion:reduce){ .panIndex a{transition:none} }