/* LOTERIA MEXICANA — estilos del modulo compartido (public/loteria/
   loteria.js), usados por /b, /r, /tv y la compra web. Los colores van
   por variables con respaldo: cada pagina puede ajustarlos a su paleta
   sin tocar este archivo. */
.lot-carton, .lot-tablero {
  --lot-borde: rgba(255, 255, 255, 0.18);
  --lot-marca: #f5c542;
  --lot-sel: #e040fb;
  --lot-texto: inherit;
  display: grid; gap: 6px;
}
.lot-tablero { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.lot-tablero.compacto { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.lot-carta {
  position: relative; display: block; margin: 0; padding: 3px; min-width: 0;
  font: inherit; color: var(--lot-texto); text-align: center;
  background: rgba(255, 255, 255, 0.06); border: 2px solid var(--lot-borde); border-radius: 6px;
}
.lot-carta img {
  display: block; width: 100%; aspect-ratio: 85 / 120; object-fit: cover; border-radius: 3px; background: #fff;
}
.lot-num {
  position: absolute; top: 5px; left: 5px; padding: 0 3px; border-radius: 2px;
  background: #fff; color: #14123a; font-size: 11px; font-weight: 700; line-height: 1.3;
}
.lot-nombre {
  display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* acertada / cantada: borde y ficha del color de marca */
.lot-carta.marcada { border-color: var(--lot-marca); box-shadow: 0 0 0 1px var(--lot-marca); }
.lot-carta.marcada::after {
  content: ''; position: absolute; top: 34%; left: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--lot-marca); opacity: 0.85; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.lot-carta.ultima { box-shadow: 0 0 0 3px var(--lot-marca); transform: scale(1.04); z-index: 1; }
.lot-carta.lot-hueco { aspect-ratio: 85 / 138; border-style: dashed; background: transparent; }
/* tablero para elegir: botones */
button.lot-carta { cursor: pointer; }
button.lot-carta:hover:not(:disabled), button.lot-carta:focus-visible { border-color: var(--lot-sel); }
button.lot-carta.sel { border-color: var(--lot-sel); box-shadow: 0 0 0 2px var(--lot-sel); }
button.lot-carta:disabled { opacity: 0.35; cursor: not-allowed; }
/* la ultima carta cantada, en grande (/tv) */
.lot-grande { position: relative; display: flex; flex-direction: column; align-items: center; }
.lot-grande img { display: block; height: 100%; max-height: 100%; aspect-ratio: 353 / 500; object-fit: cover; border-radius: 10px; background: #fff; }
.lot-grande-num {
  position: absolute; top: 3%; left: 50%; transform: translateX(-50%); padding: 0.05em 0.35em; border-radius: 0.2em;
  background: #fff; color: #14123a; font-weight: 800;
}
.lot-grande-nombre { margin-top: 0.3em; font-weight: 800; text-align: center; }
.lot-grande.vacia { justify-content: center; }