body {
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-mobile-menu] {
  transition: max-height 0.2s ease;
}

[data-result-details].hidden,
[data-prize-table].hidden {
  display: none;
}

/* Public CMS pages (CKEditor output) */
.richtext {
  color: #0f172a; /* slate-900 */
  line-height: 1.75;
  font-size: 1rem;
}

.richtext > *:first-child {
  margin-top: 0;
}

.richtext > *:last-child {
  margin-bottom: 0;
}

.richtext p {
  margin: 0.85rem 0;
  color: #334155; /* slate-700 */
}

.richtext a {
  color: #0a1e42;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.richtext a:hover {
  color: #142d5c;
}

.richtext h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 800;
  color: #0a1e42;
}

.richtext h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 800;
  color: #0a1e42;
}

.richtext h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 800;
  color: #0a1e42;
}

.richtext ul,
.richtext ol {
  margin: 0.85rem 0 0.85rem 1.25rem;
  color: #334155;
}

.richtext ul {
  list-style: disc;
}

.richtext ol {
  list-style: decimal;
}

.richtext li {
  margin: 0.35rem 0;
}

.richtext hr {
  border: none;
  border-top: 1px solid #e2e8f0; /* slate-200 */
  margin: 2rem 0;
}

.richtext blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #fbbf24; /* amber-400 */
  background: #f8fafc; /* slate-50 */
  color: #334155;
}

.richtext code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: #f1f5f9; /* slate-100 */
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.richtext pre {
  margin: 1.25rem 0;
  padding: 1rem;
  overflow: auto;
  border-radius: 12px;
  background: #0b1220;
  color: #e2e8f0;
}

.richtext pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

.richtext img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Default sizing for CMS images (only when not manually resized) */
/* image2 resizer uses width/height ATTRIBUTES, so we must not override when [width] exists. */
.richtext img:not([style*="width"]):not([width]):not(.img-sm):not(.img-md):not(.img-lg):not(.img-full) {
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0.75rem auto;
}

/* Optional size classes (usable via Styles dropdown in CKEditor) */
.richtext img.img-sm { width: 100%; max-width: 360px; display:block; margin:0.75rem auto; }
.richtext img.img-md { width: 100%; max-width: 520px; display:block; margin:0.75rem auto; }
.richtext img.img-lg { width: 100%; max-width: 720px; display:block; margin:0.75rem auto; }
.richtext img.img-full { width: 100%; max-width: none; display:block; margin:0.75rem auto; }

.richtext figure {
  margin: 1.25rem 0;
}

.richtext figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #64748b; /* slate-500 */
}

.richtext table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.25rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.richtext th,
.richtext td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.richtext th {
  background: #f8fafc;
  font-weight: 700;
  color: #0f172a;
}

.richtext tr:last-child td {
  border-bottom: none;
}

.richtext iframe,
.richtext video {
  max-width: 100%;
}

.richtext iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 12px;
}

/* Resultados: evitar overflow horizontal en móvil (tablas y celdas largas) */
@media (max-width: 640px) {
  [data-prize-table],
  [data-result-details] {
    max-width: 100%;
  }

  [data-prize-table] table,
  [data-result-details] table {
    width: 100%;
    table-layout: fixed;
  }

  [data-prize-table] th,
  [data-prize-table] td,
  [data-result-details] th,
  [data-result-details] td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Resultados: responsive fluido (todas las pantallas, no solo 360px) */
.result-ball {
  width: clamp(2rem, 7.5vw, 2.5rem) !important;
  height: clamp(2rem, 7.5vw, 2.5rem) !important;
  font-size: clamp(0.85rem, 3.2vw, 1rem) !important;
  line-height: 1 !important;
  flex: 0 0 auto;
}

.result-key-ball {
  width: clamp(2.25rem, 9vw, 3rem) !important;
  height: clamp(2.25rem, 9vw, 3rem) !important;
  font-size: clamp(1rem, 4vw, 1.125rem) !important;
  line-height: 1 !important;
}

.result-star {
  width: clamp(2rem, 7.5vw, 2.5rem) !important;
  height: clamp(2rem, 7.5vw, 2.5rem) !important;
  flex: 0 0 auto;
}

.result-ticket {
  font-size: clamp(1.4rem, 6.5vw, 1.875rem) !important;
  letter-spacing: clamp(0.08em, 0.6vw, 0.25em) !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* A partir de 500px (y menos) se nota la reducción */
@media (max-width: 500px) {
  .result-ball {
    width: clamp(1.55rem, 7vw, 2rem) !important;
    height: clamp(1.55rem, 7vw, 2rem) !important;
    font-size: clamp(0.75rem, 3.5vw, 0.9rem) !important;
  }

  .result-star {
    width: clamp(1.55rem, 7vw, 2rem) !important;
    height: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .result-key-ball {
    width: clamp(1.85rem, 8.5vw, 2.35rem) !important;
    height: clamp(1.85rem, 8.5vw, 2.35rem) !important;
    font-size: clamp(0.9rem, 4vw, 1.05rem) !important;
  }

  .result-ticket {
    font-size: clamp(1.15rem, 7vw, 1.6rem) !important;
    letter-spacing: clamp(0.04em, 0.35vw, 0.14em) !important;
  }
}