.logo-wrapper {
	padding-top:20px !important;
	padding-bottom:20px !important;
}
.logo-wrapper img {
	width:80%;
	height:auto;
}

.card-style {
	padding: 20px;
	border-radius: 12px;
	color:#fff;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.card-header h6 {
	font-weight:700;
	font-size:22px;
	color:#fff !important;
	margin-bottom:0 !important;
	line-height:1 !important;
}

.ultimas-bolas__wrap {
	display: flex;
	justify-content: center;
	gap: .5rem;
}

.bg-amarillo {
	background:#E4BD54;
	box-shadow: 0 0 0 0.35rem rgba(235, 189, 42, 0.25) !important;
}

h6.color-rojo {
	color: #7B0E00 !important;
	font-weight:700;
	margin-bottom:0 !important;
	line-height:1 !important;
}

label.roja {
	color: #7B0E00 !important;
	font-weight:600;
}

.icon-rojo {
	color: #7B0E00 !important;
	stroke-width: 3;
}

.bg-rojo {
	background: #7B0E00;
	box-shadow: 0 0 0 0.35rem rgba(227, 145, 145, 0.25) !important;
}

.btn-amarillo {
	background: #E7B522;
	box-shadow: 0 0 0 0.15rem rgba(235, 189, 42, 0.25) !important;
}

.btn-juego-bingo {
	border:0;
	color: #7B0E00;
	font-weight:bold;
	padding-top:15px;
	padding-bottom:15px;
	font-size:24px;
}

.btn-green {
	background-color: #28a745;
	color: #fff;
}

.btn-green:hover, .btn-green:active, .btn-green:focus {
	background: #00dd2e;
	color: #fff;
}


.btn-amarillo:hover, .btn-success:hover {
	background-color: #ecba27;
	color: #7B0E00;
}

.btn-amarillo:active, .btn-success:active {
	background-color: #ecba27 !important;
	color: #7B0E00 !important;
}

.btn:disabled {
	background-color: gray;
	border-color:gray;
}

.bolas-restantes {
	color: #7B0E00;
	font-size:20px;
}


.form-check.form-switch .form-check-input {
	width: 50px;
	height: 26px;
}

.form-check.form-switch .form-check-input:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-select:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(38, 143, 255, .25);
}

.form-select option {
	padding: .375rem .75rem;
	font-size: 1rem;
}

.form-select:hover {
	border-color: #80bdff;
}

.form-select:disabled {
	background-color: #e9ecef;
	border-color: #ced4da;
	cursor: not-allowed;
}

.w-auto {
	width: auto;
}

.input-group {
	display: flex;
	align-items: stretch;
}

.form-control {
	position: relative;
	flex: 1;
	display: block;
	width: 1%;
	padding: .375rem .75rem;
	font-size: 20px;
	font-weight:bold;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.center-form-control {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.form-control:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 .25rem rgba(38, 143, 255, .25);
}

.input-group-text {
	display: flex;
	align-items: center;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight:bold;
	color: #495057;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-left: 0;
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem;
}

.left-input {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: .25rem !important;
	border-bottom-left-radius: .25rem !important;
}

.input-group .form-control:focus + .input-group-text,
.input-group .form-control:active + .input-group-text {
	border-color: #80bdff;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"]:focus {
  outline: none;
}

.tipo-bingo-web {
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
	height: 100%;
	padding:20px;
	background:#fff;
	border-radius:10px;
}

.table-shadow {
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
}

.table-shadow td, .table-shadow th {
	vertical-align: middle;
}

.circulo-icon {
	width: 4rem;
	height: 4rem;
	background-color: #9D2010;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.circulo-numero {
	color: white;
	font-weight: bold;
	font-size: 1.25rem;
}

.caracteristicas-tipo-bingo {
	text-align:left;
}

.caracteristicas-tipo-bingo li {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
	text-align:left;
}

.icon-check {
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	color: #9D2010;
	margin-right: 0.5rem;
}

.funcionalidades-tipo-bingo_box {
	background-color: #f8f9fa;
	border-radius: 0.375rem;
	padding: 1rem;
	text-align:left;
	border-radius:10px;
}

.pantallazo-juego-bingo {
	border-radius:10px;
}

.bola-90, .bola-75 {
	width: 80px;
	height: 80px;
	background: radial-gradient(white, #ccc);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	font-weight:bold;
	margin: auto;
	position:relative;
}

.bola-90::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	border: 7px solid #007bff; /* Contorno azul */
	border-radius: 50%;
	background: transparent; /* Sin relleno */
	transform: translate(-50%, -50%);
}

.bola-75::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	border: 7px solid #ffc107; /* Contorno azul */
	border-radius: 50%;
	background: transparent; /* Sin relleno */
	transform: translate(-50%, -50%);
}

.app-promo-box {
	background: linear-gradient(135deg, #fdfdfd, #f0f0f0);
	border: 2px solid #222;
	border-radius: 1rem;
	padding: 1.5rem;
	margin: 2rem 0;
	box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
	text-align: center;
}

.app-promo-content h4 {
	font-size: 1.4rem;
	color: #111;
	margin-bottom: 0.5rem;
}

.app-promo-content p {
	color: #444;
	margin-bottom: 1.25rem;
}

.app-buttons_2 {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.store-badge {
	height: 50px;
	transition: transform 0.2s ease;
}

.store-badge:hover {
	transform: scale(1.05);
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.w-50 {
	width: 50%;
}

/* bingo 75 */

.b75-ball {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 62px;
	margin: auto;
}

.b75-number-circle {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: white;
	border: 4px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease-in-out;
	margin: 0 auto;
	color:#000;
	font-size:22px;
	font-weight: bold;
}

.row-B .b75-number-circle {
	border-color: rgb(0, 123, 255);
}

.row-I .b75-number-circle {
	border-color: rgb(220, 53, 69);
}

.row-N .b75-number-circle {
	border-color: rgb(108, 117, 125);
}

.row-G .b75-number-circle {
	border-color: rgb(40, 167, 69);
}

.row-O .b75-number-circle {
	border-color: rgb(255, 193, 7);
}

.row-B .letter-cell {
	background: linear-gradient(45deg, #0056b3, #007bff);
	border:0;
}

.row-I .letter-cell {
	background: linear-gradient(45deg, #ff4d4d, #b30000);
	border:0;
}

.row-N .letter-cell{
	background: linear-gradient(45deg, #e1e3e5, #6c757d);
	border:0;
}

.row-G .letter-cell {
	background: linear-gradient(45deg, #6fda8c, #3ec14a);
	border:0;
}

.row-O .letter-cell {
	background: linear-gradient(45deg, #ffe066, #ffbf00);
	border:0;
}

.intervalo {
	max-width:100%;
}

@media (min-width: 992px) {
	.intervalo {
		max-width:35%;
	}
}

#bingo75-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
}

.bingo-row {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 4px;
}

@media (max-width: 767px) {
  #bingo75-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .bingo-row {
    display: contents;
  }

  /* Letras (fila 1) */
  .row-B .letter-cell { grid-column: 1; grid-row: 1; }
  .row-I .letter-cell { grid-column: 2; grid-row: 1; }
  .row-N .letter-cell { grid-column: 3; grid-row: 1; }
  .row-G .letter-cell { grid-column: 4; grid-row: 1; }
  .row-O .letter-cell { grid-column: 5; grid-row: 1; }

  /* Números columna B */
  .row-B .b75-number-circle:nth-child(2) { grid-column: 1; grid-row: 2; }
  .row-B .b75-number-circle:nth-child(3) { grid-column: 1; grid-row: 3; }
  .row-B .b75-number-circle:nth-child(4) { grid-column: 1; grid-row: 4; }
  .row-B .b75-number-circle:nth-child(5) { grid-column: 1; grid-row: 5; }
  .row-B .b75-number-circle:nth-child(6) { grid-column: 1; grid-row: 6; }
  .row-B .b75-number-circle:nth-child(7) { grid-column: 1; grid-row: 7; }
  .row-B .b75-number-circle:nth-child(8) { grid-column: 1; grid-row: 8; }
  .row-B .b75-number-circle:nth-child(9) { grid-column: 1; grid-row: 9; }
  .row-B .b75-number-circle:nth-child(10) { grid-column: 1; grid-row: 10; }
  .row-B .b75-number-circle:nth-child(11) { grid-column: 1; grid-row: 11; }
  .row-B .b75-number-circle:nth-child(12) { grid-column: 1; grid-row: 12; }
  .row-B .b75-number-circle:nth-child(13) { grid-column: 1; grid-row: 13; }
  .row-B .b75-number-circle:nth-child(14) { grid-column: 1; grid-row: 14; }
  .row-B .b75-number-circle:nth-child(15) { grid-column: 1; grid-row: 15; }
  .row-B .b75-number-circle:nth-child(16) { grid-column: 1; grid-row: 16; }

  /* Números columna I */
  .row-I .b75-number-circle:nth-child(2) { grid-column: 2; grid-row: 2; }
  .row-I .b75-number-circle:nth-child(3) { grid-column: 2; grid-row: 3; }
  .row-I .b75-number-circle:nth-child(4) { grid-column: 2; grid-row: 4; }
  .row-I .b75-number-circle:nth-child(5) { grid-column: 2; grid-row: 5; }
  .row-I .b75-number-circle:nth-child(6) { grid-column: 2; grid-row: 6; }
  .row-I .b75-number-circle:nth-child(7) { grid-column: 2; grid-row: 7; }
  .row-I .b75-number-circle:nth-child(8) { grid-column: 2; grid-row: 8; }
  .row-I .b75-number-circle:nth-child(9) { grid-column: 2; grid-row: 9; }
  .row-I .b75-number-circle:nth-child(10) { grid-column: 2; grid-row: 10; }
  .row-I .b75-number-circle:nth-child(11) { grid-column: 2; grid-row: 11; }
  .row-I .b75-number-circle:nth-child(12) { grid-column: 2; grid-row: 12; }
  .row-I .b75-number-circle:nth-child(13) { grid-column: 2; grid-row: 13; }
  .row-I .b75-number-circle:nth-child(14) { grid-column: 2; grid-row: 14; }
  .row-I .b75-number-circle:nth-child(15) { grid-column: 2; grid-row: 15; }
  .row-I .b75-number-circle:nth-child(16) { grid-column: 2; grid-row: 16; }

  /* Números columna N */
  .row-N .b75-number-circle:nth-child(2) { grid-column: 3; grid-row: 2; }
  .row-N .b75-number-circle:nth-child(3) { grid-column: 3; grid-row: 3; }
  .row-N .b75-number-circle:nth-child(4) { grid-column: 3; grid-row: 4; }
  .row-N .b75-number-circle:nth-child(5) { grid-column: 3; grid-row: 5; }
  .row-N .b75-number-circle:nth-child(6) { grid-column: 3; grid-row: 6; }
  .row-N .b75-number-circle:nth-child(7) { grid-column: 3; grid-row: 7; }
  .row-N .b75-number-circle:nth-child(8) { grid-column: 3; grid-row: 8; }
  .row-N .b75-number-circle:nth-child(9) { grid-column: 3; grid-row: 9; }
  .row-N .b75-number-circle:nth-child(10) { grid-column: 3; grid-row: 10; }
  .row-N .b75-number-circle:nth-child(11) { grid-column: 3; grid-row: 11; }
  .row-N .b75-number-circle:nth-child(12) { grid-column: 3; grid-row: 12; }
  .row-N .b75-number-circle:nth-child(13) { grid-column: 3; grid-row: 13; }
  .row-N .b75-number-circle:nth-child(14) { grid-column: 3; grid-row: 14; }
  .row-N .b75-number-circle:nth-child(15) { grid-column: 3; grid-row: 15; }
  .row-N .b75-number-circle:nth-child(16) { grid-column: 3; grid-row: 16; }

  /* Números columna G */
  .row-G .b75-number-circle:nth-child(2) { grid-column: 4; grid-row: 2; }
  .row-G .b75-number-circle:nth-child(3) { grid-column: 4; grid-row: 3; }
  .row-G .b75-number-circle:nth-child(4) { grid-column: 4; grid-row: 4; }
  .row-G .b75-number-circle:nth-child(5) { grid-column: 4; grid-row: 5; }
  .row-G .b75-number-circle:nth-child(6) { grid-column: 4; grid-row: 6; }
  .row-G .b75-number-circle:nth-child(7) { grid-column: 4; grid-row: 7; }
  .row-G .b75-number-circle:nth-child(8) { grid-column: 4; grid-row: 8; }
  .row-G .b75-number-circle:nth-child(9) { grid-column: 4; grid-row: 9; }
  .row-G .b75-number-circle:nth-child(10) { grid-column: 4; grid-row: 10; }
  .row-G .b75-number-circle:nth-child(11) { grid-column: 4; grid-row: 11; }
  .row-G .b75-number-circle:nth-child(12) { grid-column: 4; grid-row: 12; }
  .row-G .b75-number-circle:nth-child(13) { grid-column: 4; grid-row: 13; }
  .row-G .b75-number-circle:nth-child(14) { grid-column: 4; grid-row: 14; }
  .row-G .b75-number-circle:nth-child(15) { grid-column: 4; grid-row: 15; }
  .row-G .b75-number-circle:nth-child(16) { grid-column: 4; grid-row: 16; }

  /* Números columna O */
  .row-O .b75-number-circle:nth-child(2) { grid-column: 5; grid-row: 2; }
  .row-O .b75-number-circle:nth-child(3) { grid-column: 5; grid-row: 3; }
  .row-O .b75-number-circle:nth-child(4) { grid-column: 5; grid-row: 4; }
  .row-O .b75-number-circle:nth-child(5) { grid-column: 5; grid-row: 5; }
  .row-O .b75-number-circle:nth-child(6) { grid-column: 5; grid-row: 6; }
  .row-O .b75-number-circle:nth-child(7) { grid-column: 5; grid-row: 7; }
  .row-O .b75-number-circle:nth-child(8) { grid-column: 5; grid-row: 8; }
  .row-O .b75-number-circle:nth-child(9) { grid-column: 5; grid-row: 9; }
  .row-O .b75-number-circle:nth-child(10) { grid-column: 5; grid-row: 10; }
  .row-O .b75-number-circle:nth-child(11) { grid-column: 5; grid-row: 11; }
  .row-O .b75-number-circle:nth-child(12) { grid-column: 5; grid-row: 12; }
  .row-O .b75-number-circle:nth-child(13) { grid-column: 5; grid-row: 13; }
  .row-O .b75-number-circle:nth-child(14) { grid-column: 5; grid-row: 14; }
  .row-O .b75-number-circle:nth-child(15) { grid-column: 5; grid-row: 15; }
  .row-O .b75-number-circle:nth-child(16) { grid-column: 5; grid-row: 16; }

}

.contenedor-flex {
	display: flex;
	flex-direction: column; /* vertical por defecto */
}

@media(min-width: 992px) {
	.contenedor-flex {
		flex-direction: column; /* o row si quieres */
	}

	.panel-numeros {
		order: 1; /* aparece antes */
	}

	.botones-juego {
		order: 2;
	}
}

@media(max-width: 991px) {
	.panel-numeros {
		order: 2; /* aparece después */
	}

	.botones-juego {
		order: 1;
	}
}

/* bingo 90 */

.b90-ball {
	width: 120px;
	height: 120px;
	background: radial-gradient(white, #ccc);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 52px;
	margin: auto;
	position:relative;
}

.b90-ball::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border: 7px solid #007bff; /* Contorno azul */
	border-radius: 50%;
	background: transparent; /* Sin relleno */
	transform: translate(-50%, -50%);
}

.panel-numeros-90 {
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	background-color: #f8f9fa;
}

.b90-grid-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
	justify-items: center;
	grid-auto-rows: 1fr;
}

.b90-number-circle {
	width: 90%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle, white, #ccc);
	border-radius: 50%;
	border: 4px solid #007bff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: #000;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

@media (max-width: 767px) {
	.b90-grid-container {
		grid-template-columns: repeat(5, 1fr);
	}

	.b90-number-circle {
		width: 100%;
		font-size: 1.25rem;
	}
}


@media (min-width: 768px) and (max-width: 991px) {
	.b90-grid-container {
		grid-template-columns: repeat(6, 1fr);
	}

	.b90-number-circle {
		font-size: 1.5rem;
	}
}


@media (min-width: 992px) {
	.b90-grid-container {
		grid-template-columns: repeat(10, 1fr);
	}

	.b90-number-circle {
		font-size: 1.5rem;
	}
}