/* Estilos responsive específicos para Resultados y componentes de sorteos */

/* A partir de 718px hacia abajo, compactar diseño y permitir scroll en tablas */
@media (max-width: 718px) {
  /* Página de resultados: contenedor principal */
  .results-page main {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 1rem;
  }

  /* Nombres de sorteos: permitir saltos respetando espacios (en todas las páginas) */
  .font-bold.uppercase.tracking-wide.truncate {
    white-space: break-spaces;
  }

  /* Cabecera de la página de resultados */
  .results-page h1 {
    font-size: 1.1rem;
  }

  .results-page a[href="/sorteos-anteriores/"] {
    font-size: 0.75rem;
  }

  /* Tarjetas de resultados: asegurar que se ajustan al ancho */
  .results-page .bg-white.border.overflow-hidden {
    width: 100%;
    max-width: 100%;
    border-radius: 0.6rem;
  }


  /* Cabeceras de tarjetas: menos padding vertical */
  .results-page .bg-white.border.overflow-hidden > .px-3,
  .results-page .bg-white.border.overflow-hidden > .px-4 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Contenido de tarjetas: reducir padding general */
  .results-page .bg-white.border.overflow-hidden > .p-3,
  .results-page .bg-white.border.overflow-hidden > .p-4 {
    padding: 0.75rem;
  }

  /* Títulos y textos grandes dentro de las tarjetas */
  .results-page .bg-white.border.overflow-hidden span.font-bold,
  .results-page .bg-white.border.overflow-hidden span.font-black {
    font-size: 0.85rem;
  }

  /* Números en bolas / estrellas / tickets: aún más pequeños desde 718px */
  .result-ball {
    width: 1.6rem !important;
    height: 1.6rem !important;
    font-size: 0.75rem !important;
  }

  .result-star {
    width: 1.6rem !important;
    height: 1.6rem !important;
  }

  .result-ticket {
    font-size: 1.15rem !important;
    letter-spacing: 0.06em !important;
  }

  .result-key-ball {
    width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: 0.9rem !important;
  }

  /* Tablas de detalles y de premios: permitir scroll horizontal dentro del contenedor */
  .results-page [data-result-details] .overflow-x-auto,
  .results-page [data-prize-table] .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Forzar que las tablas tengan un mínimo de ancho para que el scroll tenga efecto */
  .results-page [data-result-details] table,
  .results-page [data-prize-table] table {
    min-width: 520px;
  }

  /* Ajustar tamaño de texto en tablas para móviles pequeños */
  .results-page [data-result-details] table,
  .results-page [data-prize-table] table {
    font-size: 0.75rem;
  }

  .results-page [data-result-details] th,
  .results-page [data-result-details] td,
  .results-page [data-prize-table] th,
  .results-page [data-prize-table] td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}