/* ============================================================
   Hoja de estilos compartida del blog (23/09/2026)
   Sustituye el <style> embebido que llevaba cada post -- antes
   cada generador (generar_blog.py, generar_blog_alineaciones.py,
   generar_blog_especulacion.py, generar_blog_onfire_real.py,
   generar_blog_visual.py) duplicaba su propio bloque, con look de
   plantilla genérica (tarjetas con borde de color, pastillas con
   emoji, numeración en circulitos). Un solo archivo para las ~50
   entradas ya publicadas + todo lo que se genere de aquí en
   adelante -- cambiar el diseño del blog vuelve a ser UN sitio,
   no 50. Mismo verde+dorado de siempre, tipografía y componentes
   revisados.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,500&display=swap');

:root{
  --bg:#0a1611; --bg-2:#0d1c15;
  --gold:#f0c040; --gold-soft:rgba(240,192,64,.14); --gold-dim:rgba(240,192,64,.55);
  --ink:#f4f2ea; --ink-dim:#c3cbc4; --ink-faint:#8b968d;
  --line:rgba(244,242,234,.10);
  --panel:#122419;
  --verde:#22c55e; --azul:#60a5fa; --rojo:#f87171;
}

*{box-sizing:border-box}
body{
  margin:0; padding:16px; max-width:900px; margin-inline:auto;
  font-family:'DM Sans',-apple-system,sans-serif; background:var(--bg); color:var(--ink);
  line-height:1.8;
  background-image:radial-gradient(900px 360px at 50% -140px, rgba(240,192,64,.08), transparent 60%);
  background-repeat:no-repeat;
}
::selection{background:var(--gold);color:#111}
a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-dim)}
a:hover{border-bottom-color:var(--gold)}
strong{color:var(--gold);font-weight:700}

/* ---------- Cabecera / breadcrumb ---------- */
.crumb{font-size:.85em;color:var(--ink-faint);margin-bottom:18px;border-bottom:none}
.crumb a{border-bottom:none;color:var(--ink-faint)}
.crumb a:hover{color:var(--gold)}
.header{background:transparent;border-bottom:1px solid var(--line);padding:14px 0;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.5px;color:var(--gold)}
.back{font-size:12px;color:var(--ink-faint);border-bottom:none;padding:6px 14px;border:1px solid var(--line);border-radius:20px}
.back:hover{color:var(--gold);border-color:var(--gold-dim)}
.fecha{font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;border-bottom:none}

/* ---------- Tipografía ---------- */
h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.2px;
  font-size:clamp(2.2em,6vw,3.4em);line-height:.96;color:var(--ink);margin:.15em 0 .3em;
}
.subtitle{font-family:'DM Sans',sans-serif;font-style:italic;font-weight:500;font-size:1.15em;line-height:1.5;color:var(--ink-dim);margin-bottom:26px}
h2{font-size:1.55em;font-weight:800;color:var(--ink);margin:2em 0 .6em;padding-bottom:0;border-bottom:none}
h2::before{content:'';display:block;width:26px;height:2px;background:var(--gold);margin-bottom:14px}
h3{color:var(--gold);font-size:1.1em;font-weight:700;margin:1.4em 0 .5em}
p{font-size:1.02em;line-height:1.85;color:var(--ink-dim);margin-bottom:1.1em}
ul,ol{font-size:1.02em;line-height:1.85;color:var(--ink-dim);margin-bottom:1.1em;padding-left:22px}
li{margin-bottom:6px}
.container{max-width:800px;margin:0 auto;padding:0}

.lead,.intro{
  font-size:1.02em;font-weight:400;color:var(--ink);
  padding:20px 22px;background:var(--panel);border-radius:4px;margin:22px 0;line-height:1.75;border-left:none;
}
.epic{
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.7em;line-height:1.25;letter-spacing:.2px;
  color:var(--ink);text-align:left;padding:0 0 0 22px;margin:38px 0;background:none;border-radius:0;
  border-left:2px solid var(--gold);
}

/* ---------- Tarjetas de aviso (tip/warn/pos/neg) -- sin caja de
   color a la izquierda: fondo plano + una etiqueta de texto ---------- */
.card,.tip{
  background:var(--panel);border:none;border-left:none;border-radius:4px;
  padding:20px 22px;margin:16px 0;
}
.card h3{margin-top:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.card p{margin:0;font-size:.98em;color:var(--ink-dim)}
.card.tip,.card.warn,.card.pos,.card.neg{border-left:2px solid var(--gold)}
.card.tip{border-color:var(--azul)}
.card.warn{border-color:var(--gold)}
.card.pos{border-color:var(--verde)}
.card.neg{border-color:var(--rojo)}

.tag{
  font-size:.68em;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  background:none;color:var(--ink-faint);padding:0;border-radius:0;
}
.tag.azul{color:var(--azul)}
.tag.amarillo{color:var(--gold)}
.tag.verde{color:var(--verde)}

/* ---------- Pasos numerados -- cifra fantasma en vez de circulito
   relleno, mismo idioma tipográfico que el titular ---------- */
.step{display:flex;gap:20px;margin:20px 0;align-items:flex-start}
.step .num{
  flex-shrink:0;width:46px;height:auto;border-radius:0;background:none;
  font-family:'Bebas Neue',sans-serif;font-size:2.3em;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--gold);
  display:block;text-align:left;
}
.step .txt{flex:1;padding-top:6px;font-size:1.02em;line-height:1.8;color:var(--ink-dim)}

/* ---------- CTA -- un único botón de acento dorado ---------- */
.cta{
  display:inline-block;background:var(--gold-soft);border:1.5px solid var(--gold-dim);
  border-radius:8px;padding:13px 26px;color:var(--gold)!important;font-weight:800;font-size:.95em;
  margin:16px 0;border-bottom:none;text-align:center;
}
.cta:hover{background:var(--gold);color:#111!important;border-color:var(--gold)}

/* ---------- FAQ -- divisores, sin caja ---------- */
.faq-item{background:none;border:none;border-radius:0;border-bottom:1px solid var(--line);padding:18px 0;margin:0}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'+ ';color:var(--gold);font-weight:800}
.faq-item[open] summary::before{content:'− '}
.faq-item p{margin:10px 0 0;font-size:.95em;color:var(--ink-faint)}

/* ---------- Rejillas de jugadores (chollos / on-fire / especulación) ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:16px 0}
.pcard,.pcard-big{
  display:flex;align-items:center;gap:10px;background:var(--panel);
  padding:10px 12px;border-radius:6px;transition:background .15s;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
}
.pcard:hover,.pcard-big:hover{background:#17301f;border-bottom-color:var(--gold-dim)}
.pav,.pav-big{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;font-size:.9em}
.pav-big{width:40px;height:40px;font-size:1em}
.pinfo,.pinfo-big{flex:1;min-width:0}
.pname,.pname-big{font-size:.92em;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname-big{font-size:1em}
.pmeta,.pmeta-big{font-size:.78em;color:var(--ink-faint);margin-top:2px}
.pextra{font-size:.78em;font-weight:700;margin-top:3px;color:var(--verde)}
.prank{position:absolute;top:8px;right:10px;font-size:.7em;font-weight:700;color:var(--ink-faint)}

/* ---------- Partidos / alineaciones ---------- */
.partido{background:var(--panel);border:none;border-radius:6px;padding:20px;margin:22px 0}
.partido-head{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.team{display:flex;flex-direction:column;align-items:center;gap:6px}
.team-name{font-weight:700;font-size:1.05em;color:var(--ink);text-align:center}
.team-fav{font-size:.78em;padding:4px 10px;border-radius:12px;background:rgba(34,197,94,.12);color:var(--verde);font-weight:700}
.vs{font-family:'Bebas Neue',sans-serif;font-weight:400;color:var(--gold);font-size:1.3em}
.analisis{background:none;border-left:2px solid var(--gold);padding:12px 0 12px 16px;border-radius:0;margin:16px 0}
.analisis-head{font-size:.72em;font-weight:700;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.analisis p{margin:0;font-size:.95em;color:var(--ink-dim)}
.section-block{margin:18px 0}
.section-head{font-size:.72em;font-weight:700;color:var(--ink-faint);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.block-title{margin-top:32px;color:var(--ink);font-size:1.3em;font-weight:800}

.lineups-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
@media(max-width:600px){.lineups-wrap{grid-template-columns:1fr}}
.lineup-col{background:var(--panel);border-radius:6px;padding:16px;border:none}
.lineup-title{margin:0 0 14px;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.15em;letter-spacing:.3px;color:var(--gold);text-align:center}
.lineup{display:flex;flex-direction:column;gap:8px}
.row-pos{display:flex;align-items:center;gap:8px}
.row-label{font-size:1.1em;flex-shrink:0;width:24px;text-align:center;opacity:.7}
.row-players{display:flex;flex-direction:column;gap:6px;flex:1}

/* ---------- Tablas ---------- */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.94em}
th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line)}
th{color:var(--gold);font-weight:700;font-size:.8em;text-transform:uppercase;letter-spacing:.8px}
td.pts{color:var(--verde);font-weight:700;white-space:nowrap}
td.neg{color:var(--rojo);font-weight:700;white-space:nowrap}

/* ---------- Navegación inferior / pie ---------- */
nav.menu{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 20px;font-size:.85em}
nav.menu a{background:var(--panel);padding:8px 16px;border-radius:20px;color:var(--ink-dim);border-bottom:none}
nav.menu a:hover{color:var(--gold)}
.footer,footer{text-align:center;padding:28px 0;font-size:.8em;color:var(--ink-faint);border-top:1px solid var(--line);margin-top:48px;opacity:1}
.footer a,footer a{color:var(--ink-faint);border-bottom:none}

@media(max-width:600px){
  body{padding:14px}
  .lineups-wrap{grid-template-columns:1fr}
}