:root {
  --ml-bg: #f5f7fb;
  --ml-surface: rgba(255,255,255,.92);
  --ml-text: #172033;
  --ml-muted: #667085;
  --ml-border: #e4e9f2;
  --ml-primary: #2457d6;
  --ml-primary-dark: #173d9f;
  --ml-accent: #0f9f8f;
  --ml-warm: #e9951a;
  --ml-shadow: 0 18px 50px rgba(28, 45, 84, .10);
  --ml-radius: 1.35rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  z-index: 0;
  color: var(--ml-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(36,87,214,.08), transparent 28rem),
    radial-gradient(circle at 95% 8%, rgba(15,159,143,.08), transparent 24rem),
    var(--ml-bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Bombo de lotería suministrado por el autor: marca de agua común a toda la web. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/bombo-loteria.png");
  background-repeat: no-repeat;
  background-position: center 54%;
  background-size: min(1080px, 94vw) auto;
  opacity: .105;
  filter: grayscale(1) contrast(.88);
}

a { color: var(--ml-primary-dark); }
a:hover { color: var(--ml-primary); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: .75rem 1rem;
  background: #111827;
  color: #fff;
}
.skip-link:focus { left: .75rem; top: .75rem; border-radius: .5rem; }

.site-nav {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(228,233,242,.95);
}
.navbar-brand {
  font-weight: 850;
  letter-spacing: -.03em;
  color: var(--ml-text) !important;
}
.brand-mark {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-grid;
  place-items: center;
  border-radius: .75rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ml-primary), var(--ml-accent));
  box-shadow: 0 8px 20px rgba(36,87,214,.24);
  font-size: .9rem;
  font-weight: 900;
}

.hero {
  padding: clamp(3rem, 8vw, 6.8rem) 0 3.2rem;
}
.hero-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(228,233,242,.9);
  background: var(--ml-surface);
  box-shadow: var(--ml-shadow);
  border-radius: calc(var(--ml-radius) + .35rem);
  padding: clamp(1.6rem, 5vw, 4rem);
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 20rem;
  height: 20rem;
  right: -8rem;
  top: -9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(36,87,214,.13), rgba(15,159,143,.13));
  pointer-events: none;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border: 1px solid #d7e1ff;
  border-radius: 999px;
  background: #f0f4ff;
  color: #264ba8;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.display-title {
  max-width: 900px;
  margin: 1rem 0 .8rem;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.055em;
}
.hero-lead {
  max-width: 760px;
  font-size: clamp(1rem, 2vw, 1.24rem);
  color: var(--ml-muted);
}

.section-title {
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  letter-spacing: -.035em;
  font-weight: 850;
}
.section-subtitle { color: var(--ml-muted); max-width: 760px; }

.game-card {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(28,45,84,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: #ccd8f3;
  box-shadow: 0 18px 38px rgba(28,45,84,.11);
}
.game-card .card-body { padding: 1.4rem; display:flex; flex-direction:column; flex:1; }
.game-card .card-title { font-weight: 850; letter-spacing: -.025em; }
.game-card .card-text { color: var(--ml-muted); }
.game-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 1rem;
  font-weight: 900;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #eaf0ff, #e8fbf7);
  color: var(--ml-primary-dark);
  border: 1px solid #dfe7f5;
}
.game-meta { display:flex; flex-wrap:wrap; gap:.45rem; margin: .9rem 0 1.2rem; }
.meta-pill {
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #f5f7fb;
  border: 1px solid var(--ml-border);
  color: #536078;
  font-size: .77rem;
  font-weight: 700;
}

.btn-ml {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ml-primary);
  --bs-btn-border-color: var(--ml-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ml-primary-dark);
  --bs-btn-hover-border-color: var(--ml-primary-dark);
  --bs-btn-focus-shadow-rgb: 36,87,214;
  border-radius: .85rem;
  font-weight: 800;
  padding: .75rem 1rem;
}
.btn-soft {
  border: 1px solid var(--ml-border);
  background: #fff;
  color: var(--ml-text);
  border-radius: .85rem;
  font-weight: 750;
}
.btn-soft:hover { background: #f7f9fc; border-color: #ccd5e5; }

.info-band {
  border: 1px solid #dfe7f5;
  background: linear-gradient(120deg, #fff, #f5f8ff);
  border-radius: var(--ml-radius);
  padding: 1.25rem;
}
.info-value { font-size: 1.35rem; font-weight: 900; letter-spacing: -.03em; }
.info-label { font-size: .78rem; color: var(--ml-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 750; }

.content-card, .generator-card {
  border: 1px solid var(--ml-border);
  background: rgba(255,255,255,.95);
  border-radius: var(--ml-radius);
  box-shadow: 0 12px 32px rgba(28,45,84,.065);
}
.content-card { padding: clamp(1.2rem, 3vw, 2rem); }
.content-card h2, .content-card h3 { font-weight: 850; letter-spacing: -.025em; }
.rule-list { margin:0; padding-left: 1.2rem; }
.rule-list li + li { margin-top: .55rem; }

.generator-card { padding: clamp(1.2rem, 3vw, 2rem); position: sticky; top: 5.5rem; }
.generator-card h2 { font-size: 1.4rem; font-weight: 850; letter-spacing: -.03em; }
.form-control, .form-select {
  border-radius: .8rem;
  border-color: #d7deea;
  min-height: 3rem;
}
.form-control:focus, .form-select:focus, .btn:focus-visible, a:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(36,87,214,.18);
  outline: none;
}

.results-list { display:grid; gap:.7rem; margin-top: 1rem; }
.result-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .8rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ml-border);
  border-radius: 1rem;
  background: #fbfcfe;
}
.result-index { flex: 0 0 auto; min-width:2.2rem; color:var(--ml-muted); font-size:.78rem; font-weight:800; }
.number-group { display:flex; flex-wrap:wrap; gap:.38rem; flex:1; }
.ball {
  width: 2.22rem;
  height: 2.22rem;
  display:inline-grid;
  place-items:center;
  border-radius: 50%;
  border: 1px solid #cdd8f2;
  background: #fff;
  color: #1f418f;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ball.special {
  border-radius: .72rem;
  background: #eefaf7;
  border-color: #bee8de;
  color: #087c70;
}
.special-label { font-size:.7rem; color:var(--ml-muted); font-weight:750; align-self:center; margin-left:.18rem; }

.notice {
  border-left: 4px solid var(--ml-warm);
  background: #fff8ed;
  padding: .95rem 1rem;
  border-radius: .2rem .9rem .9rem .2rem;
  color: #6f4a12;
  font-size: .92rem;
}
.future-card {
  border: 1px dashed #bdc9dd;
  background: rgba(255,255,255,.65);
  border-radius: var(--ml-radius);
  padding: 1.4rem;
}

.footer-title { color: var(--ml-text); font-weight: 850; }

@media (max-width: 991.98px) {
  .generator-card { position: static; }
  .hero { padding-top: 2rem; }
}
@media (max-width: 575.98px) {
  .container { --bs-gutter-x: 1.2rem; }
  .hero-panel { border-radius: 1.2rem; }
  .result-row { align-items:flex-start; }
  .ball { width: 2rem; height: 2rem; font-size:.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}


/* Apoyo / donativo */
.nav-support {
  color: #8d4d10 !important;
  font-weight: 800;
}
.hero-support-hint {
  max-width: 760px;
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid #eadbc8;
  border-radius: .9rem;
  background: rgba(255, 250, 242, .88);
  color: #6f4a12;
  font-size: .94rem;
}
.support-section {
  padding: 2rem 0 0;
}
.support-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.45rem, 4vw, 2.75rem);
  border: 1px solid #e8dbc7;
  border-radius: calc(var(--ml-radius) + .2rem);
  background:
    radial-gradient(circle at 92% 8%, rgba(250, 190, 80, .16), transparent 24rem),
    linear-gradient(135deg, #fffdf9 0%, #fff8ed 55%, #f8fbff 100%);
  box-shadow: 0 18px 50px rgba(72, 52, 24, .09);
}
.support-card::after {
  content: "";
  position: absolute;
  inset: auto -5rem -7rem auto;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: rgba(36, 87, 214, .045);
  pointer-events: none;
}
.support-icon {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #eadbc8;
  color: #c4682a;
  box-shadow: 0 8px 22px rgba(97, 65, 24, .08);
  font-size: 1.35rem;
}
.support-title {
  max-width: 900px;
  margin: .7rem 0 1rem;
  font-size: clamp(1.65rem, 3.7vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 900;
}
.support-lead,
.support-highlight,
.support-note {
  max-width: 900px;
}
.support-lead {
  color: var(--ml-muted);
  font-size: 1.03rem;
}
.support-highlight {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid #d58a37;
  border-radius: .2rem .9rem .9rem .2rem;
  background: rgba(255,255,255,.76);
  color: #58401f;
}
.support-note {
  color: #6d7280;
  font-size: .9rem;
}
.paypal-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.2rem;
  margin: 1.35rem 0 1rem;
}
.paypal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .15rem;
  border-radius: .65rem;
  background: #fff;
}
.paypal-link img {
  display: block;
  max-width: 100%;
  height: auto;
}
.paypal-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .72rem 1rem;
  border: 1px solid #d8c7ab;
  border-radius: .85rem;
  background: #fff;
  color: #745019;
  font-weight: 850;
  text-decoration: none;
}
.paypal-text-link:hover {
  background: #fffaf2;
  color: #5c3c0e;
}
.support-thanks {
  color: #4e586b;
  font-size: .94rem;
}

/* Pie de página inspirado en el index original del proyecto */
.site-footer {
  margin-top: 1.5rem;
  padding: 2.2rem 0;
  background: #fff;
  border-top: 1px solid var(--ml-border);
  color: var(--ml-muted);
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
}
.footer-source {
  text-align: right;
}
.footer-source a {
  font-weight: 750;
}
.footer-sep {
  margin: 0 .4rem;
  color: #a0a8b5;
}

@media (max-width: 767.98px) {
  .paypal-box {
    align-items: flex-start;
    flex-direction: column;
  }
  .paypal-text-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-source {
    text-align: left;
    padding-top: 1rem;
    border-top: 1px solid var(--ml-border);
  }
  .footer-sep {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

/* Coste de las combinaciones */
.cost-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #d6e1f5;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f7f9ff 0%, #f1fbf8 100%);
}
.cost-heading {
  margin-bottom: .65rem;
  color: var(--ml-primary-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.cost-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .3rem 0;
  color: var(--ml-text);
  font-size: .9rem;
}
.cost-line > span {
  padding-right: .5rem;
}
.cost-line strong {
  flex: 0 0 auto;
  margin-left: 1rem;
  color: #123f7a;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.cost-total {
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px solid #d6e1f5;
  color: var(--ml-text);
  font-weight: 800;
}
.cost-total strong {
  color: #0b2f6b;
  font-size: 1.35rem;
  letter-spacing: -.025em;
}
.cost-note {
  margin-top: .65rem;
  color: #69758b;
  font-size: .76rem;
  line-height: 1.45;
}
@media (max-width: 420px) {
  .cost-line { align-items: flex-start; gap: 1rem; font-size: .84rem; }
  .cost-line > span { padding-right: .35rem; }
  .cost-line strong { margin-left: .6rem; }
  .cost-total strong { font-size: 1.18rem; }
}

/* Precio visible en cada combinación generada */
.bet-cost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: .42rem .62rem;
  border: 1px solid #cbd8f2;
  border-radius: .72rem;
  background: #eef3ff;
  color: #123f7a;
  font-size: .82rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El total debe ser visible aun antes de ejecutar JavaScript. */
.cost-panel [data-total-cost] {
  display: inline-block;
  min-width: 5.4rem;
  text-align: right;
}

@media (max-width: 575.98px) {
  .result-row { flex-wrap: wrap; }
  .bet-cost { margin-left: 3rem; }
}

/* v20260923-5: refuerzo visual de importes. Los estilos críticos también están inline en HTML. */
.cost-panel .cost-line {
  justify-content: flex-start !important;
  column-gap: 1.6rem !important;
}
.cost-panel .cost-line strong {
  color: #123f7a !important;
  margin-left: .35rem !important;
}
.cost-panel .cost-total strong {
  color: #082f6d !important;
  background: #e7efff;
  padding: .14rem .48rem;
  border-radius: .45rem;
}

/* =========================================================
   Reducciones Primitiva · v20260923-7
   ========================================================= */
.reduction-tool-card {
  border: 1px solid var(--ml-border);
  background: rgba(255,255,255,.97);
  border-radius: var(--ml-radius);
  box-shadow: 0 16px 42px rgba(28,45,84,.08);
  padding: clamp(1.2rem, 3vw, 2rem);
}
.reduction-number-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(2.4rem, 1fr));
  gap: .48rem;
}
.pick-ball {
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid #ccd7ed;
  border-radius: 50%;
  background: #fff;
  color: #24457f;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pick-ball:hover {
  transform: translateY(-1px);
  border-color: #8ea9df;
  box-shadow: 0 5px 14px rgba(36,87,214,.11);
}
.pick-ball.is-selected {
  color: #fff;
  border-color: var(--ml-primary);
  background: linear-gradient(135deg, var(--ml-primary), var(--ml-primary-dark));
  box-shadow: 0 6px 16px rgba(36,87,214,.22);
}
.selection-strip {
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  justify-content:space-between;
  padding:.85rem 1rem;
  border:1px solid #dce5f5;
  border-radius:1rem;
  background:#f8faff;
}
.selection-count {
  flex:0 0 auto;
  min-width:2.7rem;
  min-height:2.7rem;
  display:grid;
  place-items:center;
  border-radius:.8rem;
  color:#fff;
  background:var(--ml-primary-dark);
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.selection-preview {
  color:#4f5e77;
  font-size:.88rem;
  line-height:1.55;
  word-break:break-word;
}
.reduction-config {
  border:1px solid #dfe7f5;
  border-radius:1rem;
  background:linear-gradient(120deg,#fff,#f6f9ff);
  padding:1rem;
}
.reduction-status {
  min-height:1.55rem;
  margin-top:.8rem;
  font-size:.88rem;
  font-weight:650;
}
.reduction-progress {
  margin-top:1rem;
  padding:.8rem 1rem;
  border:1px solid #dfe7f5;
  border-radius:1rem;
  background:#f9fbff;
}
.reduction-progress .progress { height:.55rem; background:#e8edf6; }
.reduction-progress .progress-bar { background:linear-gradient(90deg,var(--ml-primary),var(--ml-accent)); }
.reference-pattern {
  display:grid;
  gap:.55rem;
  margin-top:1rem;
}
.reference-row {
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.7rem .8rem;
  border:1px solid var(--ml-border);
  border-radius:.9rem;
  background:#fbfcfe;
}
.reference-letter {
  flex:0 0 auto;
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:.65rem;
  background:#eaf0ff;
  color:var(--ml-primary-dark);
  font-weight:900;
}
.reference-numbers {
  color:#24457f;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
.reduction-results-panel {
  margin-top:1.4rem;
  border-top:1px solid var(--ml-border);
  padding-top:1.4rem;
}
.reduction-summary-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}
.reduction-summary-grid > div {
  padding:.85rem .9rem;
  border:1px solid #dfe7f5;
  border-radius:.95rem;
  background:#f9fbff;
}
.summary-label {
  display:block;
  margin-bottom:.18rem;
  color:#6b778c;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.reduction-summary-grid strong {
  display:block;
  color:#172033;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.reduction-summary-grid .summary-accent {
  color:#0b3d7a;
  font-size:1.22rem;
}
.verification-badge {
  display:inline-flex;
  align-items:center;
  padding:.35rem .65rem;
  border:1px solid #bfe3dc;
  border-radius:999px;
  background:#eefaf7;
  color:#087c70;
  font-size:.76rem;
  font-weight:850;
}
.verification-badge.is-optimal {
  border-color:#b8caef;
  background:#eef3ff;
  color:#173d9f;
}
.solver-method { color:#667085; font-size:.78rem; font-weight:650; }
.reduction-result-row .number-group { justify-content:flex-start; }
.reduction-result-row .bet-cost { margin-left:auto; }
.reduction-definition {
  border-left:4px solid var(--ml-primary);
  padding:1rem 1.1rem;
  border-radius:.2rem 1rem 1rem .2rem;
  background:#f1f5ff;
  color:#32466f;
}
.reduction-definition strong { color:#173d9f; }
.reduction-limit-note {
  color:#6b7280;
  font-size:.78rem;
  line-height:1.5;
}

@media (max-width: 991.98px) {
  .reduction-number-grid { grid-template-columns:repeat(8,minmax(2.35rem,1fr)); }
  .reduction-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
  .reduction-number-grid { grid-template-columns:repeat(7,minmax(2.25rem,1fr)); gap:.38rem; }
  .pick-ball { font-size:.86rem; }
  .selection-strip { flex-direction:column; }
  .reduction-summary-grid { grid-template-columns:1fr; }
  .reduction-result-row .bet-cost { margin-left:3rem; }
}
@media (max-width: 390px) {
  .reduction-number-grid { grid-template-columns:repeat(6,minmax(2.2rem,1fr)); }
}

@media (max-width: 767.98px) {
  body::before {
    background-position: center 48%;
    background-size: 155vw auto;
    opacity: .075;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::before { opacity: .045; }
}