<style>
.ball,.draw-date.hoy,.draw-hour,.draw-name,.nombre-grupo {
    font-weight:700
}
body {
    font-family:'Segoe UI',sans-serif;
    background:#f9f9f9;
    margin:0;
    padding:0
}
main {
    padding:10px;
    max-width:800px;
    margin:auto
}
.selector-fecha {
    text-align:center;
    margin:20px 0
}
.selector-fecha input {
    padding:10px;
    font-size:16px;
    border:2px solid #007bff;
    border-radius:6px;
    text-align:center
}
.lottery-group {
    background:#fff;
    border-radius:8px;
    box-shadow:0 0 6px rgba(0,0,0,.5);
    margin:20px 0;
    padding:15px
}
.nombre-grupo {
    font-size:20px;
    margin-top:0;
    color:#387dff;
    border-bottom:1px solid #ddd;
    padding-bottom:5px;
    text-align:center
}
.draw-item {
    padding:6px 0;
    border-bottom:2px solid #eee
}
.draw-header {
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:10px
}
.draw-name {
    color:#333;
    margin:0
}
.draw-name a {
    text-decoration:none;
    color:inherit
}
.draw-hour {
    font-size:14px;
    color:#666;
    text-align:center;
    min-width:80px
}
.draw-links a:hover,.draw-name a:hover,.footer-column ul li a:hover {
    text-decoration:underline
}
.logo {
    height:50px;
    width:50px;
    object-fit:contain
}
.horario-tabla,.tabla-loterias {
    width:100%;
    border-collapse:collapse;
    margin-bottom:30px
}
.draw-date {
    font-size:13px;
    color:#333;
    margin-top:5px
}
.draw-date.hoy {
    background:#104c8d;
    color:#fff;
    border-radius:4px;
    padding:3px 6px;
    display:inline-block
}
.balls {
    display:flex;
    gap:6px;
    margin-top:8px;
    flex-wrap:wrap
}
.ball {
    min-width:32px;
    height:40px;
    padding:0 4px;
    border-radius:16px;
    background:#eceff1;
    color:#212121;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #b0bec5;
    white-space:nowrap
}
.balls.hoy .ball:not(.personalizado) {
    background:linear-gradient(135deg,#104c8d 0,#5a8fc7 100%);
    color:#fff
}
.ball.rojo {
    background:#c00;
    color:#fff
}
.ball.naranja {
    background:#9c3b00;
    color:#fff
}
.ball.blue {
    background:#00f;
    color:#fff
}
.ball.red {
    background:#8b0000;
    color:#fff
}
.ball.white {
    background:#fff;
    color:#000;
    border:1px solid #ccc
}
.draw-links {
    margin-top:6px;
    font-size:13px
}
.draw-links a {
    color:#272323;
    text-decoration:none;
    margin-right:25px
}
.horario-tabla {
    font-size:15px
}
.horario-tabla thead {
    background-color:#104c8d;
    color:#fff
}
.horario-tabla td,.horario-tabla th {
    border:1px solid #ccc;
    padding:8px 12px;
    text-align:left
}
@media screen and (max-width:600px) {
    .horario-tabla thead {
        display:none
    }
    .horario-tabla,.horario-tabla tbody,.horario-tabla td,.horario-tabla tr {
        display:block;
        width:100%
    }
    .horario-tabla tr {
        margin-bottom:15px;
        background:#f9f9f9;
        border:1px solid #ddd;
        padding:10px
    }
    .horario-tabla td {
        text-align:right;
        padding-left:50%;
        position:relative
    }
    .horario-tabla td::before {
        content:attr(data-label);
        position:absolute;
        left:12px;
        width:45%;
        padding-left:5px;
        font-weight:700;
        text-align:left;
        color:#333
    }
}
.tabla-loterias {
    font-size:15px;
    background-color:#fff;
    border:1px solid #ddd
}
.footer,.tabla-loterias th {
    background-color:#104c8d;
    color:#fff
}
.tabla-loterias th {
    padding:10px;
    text-align:left
}
.tabla-loterias td {
    padding:10px;
    border-top:1px solid #ddd
}
@media screen and (max-width:768px) {
    .tabla-loterias thead {
        display:none
    }
    .tabla-loterias tr {
        display:block;
        margin-bottom:20px;
        border:1px solid #ccc;
        border-radius:6px;
        overflow:hidden;
        box-shadow:0 2px 4px rgba(0,0,0,.05)
    }
    .tabla-loterias td {
        display:flex;
        justify-content:space-between;
        padding:10px;
        border:none;
        border-bottom:1px solid #eee
    }
    .tabla-loterias td::before {
        content:attr(data-label);
        font-weight:700;
        color:#333
    }
    .tabla-loterias td:last-child {
        border-bottom:none
    }
}
.footer {
    padding:40px 20px 10px;
    font-size:15px;
    margin-top:40px
}
.footer-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:1100px;
    margin:0 auto;
    gap:30px
}
.icono-estadistica,.icono-historial,.icono-reloj {
    width:20px;
    height:20px;
    vertical-align:middle;
    margin-right:6px
}
.footer-column {
    flex:1 1 200px
}
.footer-column h4 {
    margin-bottom:12px;
    font-size:16px;
    border-bottom:1px solid #fff;
    padding-bottom:5px
}
.footer-column ul {
    list-style:none;
    padding:0;
    margin:0
}
.footer-column ul li {
    margin-bottom:8px
}
.footer-column ul li a {
    color:#fff;
    text-decoration:none
}
.social-icons img {
    width:24px;
    height:24px;
    filter:brightness(0) invert(1)
}
.footer-bottom {
    text-align:center;
    margin-top:30px;
    font-size:13px;
    border-top:1px solid rgba(255,255,255,.2);
    padding-top:15px
}
.social-icons {
    display:flex;
    gap:10px;
    display:flex;
    gap:15px;
    list-style:none;
    padding:0
}
.social-icons li a {
    color:#fff;
    font-size:20px;
    transition:color .3s
}
.social-icons li a:hover {
    color:gold
}
.icono-historial {
    stroke:#007bff;
    stroke-width:2
}
.icono-estadistica {
    stroke:#28a745;
    stroke-width:2
}
.icono-reloj {
    stroke:#ffc107;
    stroke-width:2
}
.consulta-tarjeta {
  border: 1px solid #007bff;
  background: #f1f8ff;
  border-radius: 8px;
  padding: 15px;
  margin: 40px 0 20px;
}
.consulta-tarjeta h3 {
  margin-top: 0;
  color: #104c8d;
}
.consulta-tarjeta ul {
  padding-left: 20px;
}
.consulta-tarjeta li {
  margin-bottom: 6px;
  font-weight: 500;
}
form input[type="number"] {
  padding: 6px;
  font-size: 16px;
  width: 80px;
  margin: 0 10px;
}
form button {
  padding: 6px 12px;
  font-size: 16px;
  background-color: #104c8d;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
form button:hover {
  background-color: #0b3870;
}
.loader {
  display: none;
  margin-top: 15px;
  text-align: center;
}
.loader span {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 4px solid #104c8d;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}
@keyframes girar {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.resultado-item {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 15px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.resultado-item .fecha {
  font-weight: 600;
  color: #104c8d;
  font-size: 15px;
  margin-bottom: 5px;
}

.resultado-item .info {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.resultado-item .etiqueta {
  display: inline-block;
  background: #eee;
  color: #000;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  margin-right: 6px;
}

.resultado-item .etiqueta.bono {
  background: #c00;
  color: #fff;
}
.resultado-item .etiqueta.super {
  background: #a35200;
  color: #fff;
}

.ball.loto {
  background: #e0f7fa;
  color: #006064;
  border: 1px solid #00acc1;
}

.consulta-tarjeta {
  margin-top: 30px;
}
.resultado-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 15px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.08);
}
.resultado-item .fecha {
  font-weight: 700;
  color: #104c8d;
  margin-bottom: 5px;
}
.resultado-item .info {
  font-size: 15px;
  color: #333;
}
.resultado-item .etiqueta {
  display: inline-block;
  background: #e9ecef;
  color: #000;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  margin: 6px 6px 0 0;
  font-size: 14px;
}
.resultado-item .etiqueta.bono {
  background: #dc3545;
  color: #fff;
}
.resultado-item .etiqueta.super {
  background: #fd7e14;
  color: #fff;
}
.loader {
  display: none;
  text-align: center;
  margin: 20px 0;
}
.loader span {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #104c8d;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}
@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.tabla-container {
  overflow-x: auto;
}

.tabla-loterias {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 15px;
}

.tabla-loterias th {
  background: #104c8d;
  color: #fff;
  text-align: left;
  padding: 10px;
}

.tabla-loterias td {
  padding: 10px;
  border-top: 1px solid #ddd;
}

.tabla-loterias td .etiqueta {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: bold;
  background: #e0e0e0;
  color: #333;
}

/* Vista m vil */
@media screen and (max-width: 600px) {
  .tabla-loterias thead {
    display: none;
  }

  .tabla-loterias tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  .tabla-loterias td {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .tabla-loterias td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #104c8d;
  }

  .tabla-loterias td:last-child {
    border-bottom: none;
  }
}

@media screen and (max-width: 768px) {
  .tabla-loterias {
    font-size: 15px;
  }

  .tabla-loterias thead {
    background-color: #104c8d;
    color: #fff;
  }

  .tabla-loterias tr {
    border-bottom: 1px solid #ccc;
  }

  .tabla-loterias td,
  .tabla-loterias th {
    padding: 10px;
    text-align: left;
  }
}
.nombre-grupo {
    font-weight: bold;
}
.draw-name a {
   font-weight: bold;
}
</style>
