/* extracted from como-jugar.php */
.guide{max-width:1180px;margin:0 auto;padding:16px 14px 40px}
.guide-hero{padding:22px 22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface));box-shadow:0 10px 28px rgba(15,23,42,.07);margin-bottom:12px}
.guide-hero h1{font-size:clamp(1.55rem,3.2vw,2.15rem);margin:0 0 6px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.guide-hero p{color:var(--muted);max-width:860px;line-height:1.5;margin:0;font-size:.95rem}
.guide-nav{display:flex;gap:6px;overflow:auto;padding:4px 0 10px;position:sticky;top:56px;z-index:10;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px)}
.guide-nav a{white-space:nowrap;text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface);font-weight:750;font-size:.8rem}
.guide-nav a:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));color:var(--brand)}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.guide-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px;box-shadow:0 4px 16px rgba(15,23,42,.04)}
.guide-card.full{grid-column:1/-1}
.guide-card h2{margin:0 0 10px;font-size:1.08rem;display:flex;align-items:center;gap:8px}
.guide-card h3{margin:14px 0 6px;font-size:.92rem}
.guide-card p,.guide-card li{line-height:1.5;color:var(--muted);font-size:.9rem}
.guide-card p{margin:6px 0}
.guide-card ul{padding-left:18px;margin:6px 0}
.piece-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.piece{display:flex;gap:12px;align-items:flex-start;padding:14px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,var(--surface-2),color-mix(in srgb,var(--surface) 70%,var(--surface-2)));font-size:.88rem;color:var(--muted);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.piece-glyph{flex:0 0 auto;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;line-height:1;background:linear-gradient(160deg,#fff,#f1f5f9);border:1px solid var(--line);box-shadow:0 6px 16px rgba(15,23,42,.08)}
.piece-glyph img{width:48px;height:48px;display:block;object-fit:contain}
.piece{padding:16px!important;gap:14px!important;align-items:center!important}
.piece strong{font-size:1.05rem!important}
.piece-body{min-width:0;flex:1}
.piece strong{display:block;color:var(--ink);margin-bottom:4px;font-size:.95rem}
.tip{border-left:3px solid var(--brand);padding:10px 12px;background:color-mix(in srgb,var(--brand) 8%,var(--surface-2));border-radius:0 12px 12px 0;margin:10px 0;font-size:.88rem;color:var(--ink);line-height:1.5}
.tip.warning{border-left-color:#f59e0b;background:color-mix(in srgb,#f59e0b 10%,var(--surface-2))}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.check{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:.88rem;color:var(--muted);line-height:1.45}
.check strong{color:var(--ink)}
.guide code{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:.86em}
/* Tablero de coordenadas */
.coord-layout{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px;align-items:center}
.coord-board-wrap{max-width:280px;margin:0 auto;width:100%}
.coord-mid{display:grid;grid-template-columns:22px 1fr;gap:4px;align-items:stretch}
.coord-ranks{display:grid;grid-template-rows:repeat(8,1fr);font-weight:850;font-size:.85rem;color:var(--ink)}
.coord-ranks span{display:flex;align-items:center;justify-content:center}
.coord-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;width:100%;border:3px solid #0c3016;border-radius:6px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.coord-files{display:grid;grid-template-columns:22px repeat(8,1fr);gap:4px;margin-top:4px;font-weight:850;font-size:.85rem;color:var(--ink)}
.coord-files span{display:flex;align-items:center;justify-content:center;text-transform:lowercase}
.coord-files-spacer{visibility:hidden}
.coord-sq{display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;opacity:.55}
.coord-sq.light{background:#f0d9b5;color:#5b4630}
.coord-sq.dark{background:#b58863;color:#fff8e8}
.coord-sq.hl{outline:2px solid #0d9488;outline-offset:-2px;opacity:1;font-weight:850;font-size:.65rem;background:#99f6e4;color:#0f766e}
.coord-explain{font-size:.92rem;color:var(--muted);line-height:1.55}
.coord-explain strong{color:var(--ink)}
.coord-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.coord-chip{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:.82rem;font-weight:750;color:var(--ink)}
.piece-glyph{color:#1a1a1a}
.piece-glyph .piece-svg{display:block}
.check{display:flex;align-items:flex-start;gap:8px}
.check .check-ico{flex:0 0 auto;margin-top:2px}
.guide h1 .ico,.guide h2 .ico,.guide h3 .ico{vertical-align:-4px;margin-right:4px}
@media(max-width:900px){.guide-grid{grid-template-columns:1fr}.checklist,.piece-grid{grid-template-columns:1fr}.coord-layout{grid-template-columns:1fr}}

/* Piezas: icono izquierda + texto derecha */
#piezas .piece-grid .piece,
.piece-grid .piece {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  text-align: left !important;
  padding: 16px 18px !important;
}
#piezas .piece-glyph,
.piece-grid .piece-glyph {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  order: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  position: relative !important;
}
#piezas .piece-glyph img,
.piece-grid .piece-glyph img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
}
/* Fallback Unicode si el SVG no carga */
.piece-glyph.glyph-fallback::before,
.piece-glyph:not(:has(img[src]))::before {
  content: attr(data-glyph);
  font-size: 2rem;
  line-height: 1;
  color: #1e293b;
}
.piece-glyph.glyph-fallback img { display: none !important; }
#piezas .piece-body,
.piece-grid .piece-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  order: 1 !important;
}
#piezas .piece-body strong,
.piece-grid .piece-body strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.05rem;
  color: #0f172a;
}