/* ==========================================================================
   Botones del sitio (base común)
   Se carga desde _scriptscss.php DESPUÉS de style.css.

   Uso: <button class="bm-btn bm-btn--primario">…</button>
        <a class="bm-btn bm-btn--secundario bm-btn--chico" href="…">…</a>

   Especificidad: los selectores van calificados con el elemento
   (button.bm-btn, a.bm-btn, input.bm-btn → 0,1,1) para ganarle sin
   !important a las reglas genéricas del tema:
     - button, input[type=submit|button|reset]   (style.css:1056)
     - button:hover, input[type=button]:hover…   (style.css:1090)
     - a:hover / a:focus                         (style.css:123, 306)
   En los empates (input[type=…], 0,1,1 y 0,2,1) gana esta hoja por orden.

   El texto va siempre centrado dentro del botón, en todas las variantes; si
   no entra en una línea, se parte en dos en vez de desbordarse.

   Los colores y tamaños se manejan con variables: cada variante solo cambia
   variables, y la regla base es la única que las aplica.
   ========================================================================== */

.bm-btn {
	--bm-fondo: #161619;
	--bm-texto: #fff;
	--bm-borde: #161619;
	--bm-fondo-hover: #3a3a3f;
	--bm-texto-hover: #fff;
	--bm-borde-hover: #3a3a3f;
	--bm-alto: 44px;
	--bm-padding-x: 24px;
	--bm-letra: 14px;
}

/* Base */
button.bm-btn,
a.bm-btn,
input.bm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--bm-alto);
	padding: 6px var(--bm-padding-x);
	margin: 0;
	font-family: inherit;
	font-size: var(--bm-letra);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	vertical-align: middle;
	color: var(--bm-texto);
	background-color: var(--bm-fondo);
	border: 1px solid var(--bm-borde);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Foco: anula el button:focus del tema (que pinta todo de negro). Va antes
   del hover para que, con el botón enfocado después del clic, el hover siga
   funcionando. */
button.bm-btn:focus,
a.bm-btn:focus,
input.bm-btn:focus {
	color: var(--bm-texto);
	background-color: var(--bm-fondo);
	border-color: var(--bm-borde);
	outline: none;
}

button.bm-btn:hover,
a.bm-btn:hover,
input.bm-btn:hover {
	color: var(--bm-texto-hover);
	background-color: var(--bm-fondo-hover);
	border-color: var(--bm-borde-hover);
	text-decoration: none;
}

button.bm-btn:focus-visible,
a.bm-btn:focus-visible,
input.bm-btn:focus-visible {
	outline: 2px solid #161619;
	outline-offset: 2px;
}

/* Deshabilitado: sin hover */
button.bm-btn:disabled,
input.bm-btn:disabled,
a.bm-btn[aria-disabled="true"] {
	color: var(--bm-texto);
	background-color: var(--bm-fondo);
	border-color: var(--bm-borde);
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---------- Variantes de color ---------- */

/* Primario: negro del sitio, texto blanco (son los valores base) */
.bm-btn--primario {
	--bm-fondo: #161619;
	--bm-texto: #fff;
	--bm-borde: #161619;
	--bm-fondo-hover: #3a3a3f;
	--bm-texto-hover: #fff;
	--bm-borde-hover: #3a3a3f;
}

/* Secundario: blanco con contorno negro; en hover se invierte */
.bm-btn--secundario {
	--bm-fondo: #fff;
	--bm-texto: #161619;
	--bm-borde: #161619;
	--bm-fondo-hover: #161619;
	--bm-texto-hover: #fff;
	--bm-borde-hover: #161619;
}

/* Contorno: fondo transparente, borde y texto del color del contenedor
   (currentColor). Sirve sobre fondos oscuros o de color, donde el
   secundario (fondo blanco) no corresponde. */
.bm-btn--contorno {
	--bm-fondo: transparent;
	--bm-texto: currentColor;
	--bm-borde: currentColor;
	--bm-fondo-hover: transparent;
	--bm-texto-hover: currentColor;
	--bm-borde-hover: currentColor;
}
button.bm-btn.bm-btn--contorno:hover,
a.bm-btn.bm-btn--contorno:hover,
input.bm-btn.bm-btn--contorno:hover {
	opacity: 0.75;
}

/* Peligro (acciones destructivas: eliminar, vaciar).
   Opción B, rojo oscuro: #b42318 sobre blanco = 6,57:1 (pasa WCAG AA).
   El #e74c3c que usa hoy el modal de _footer.php da 3,82:1 y no pasa.
   Opción A, dentro de la paleta: reemplazar las seis variables por
     --bm-fondo: #fff; --bm-texto: #161619; --bm-borde: #161619;
     --bm-fondo-hover: #161619; --bm-texto-hover: #fff; --bm-borde-hover: #161619;
   y agregar border-width: 2px (se distingue del secundario solo por el borde). */
.bm-btn--peligro {
	--bm-fondo: #b42318;
	--bm-texto: #fff;
	--bm-borde: #b42318;
	--bm-fondo-hover: #8f1d14;
	--bm-texto-hover: #fff;
	--bm-borde-hover: #8f1d14;
}

/* ---------- Tamaños ---------- */

/* Normal (sin modificador): 44px de alto, el mínimo recomendado para tocar
   en pantallas táctiles. */

/* Chico: 32px de alto, para acciones secundarias dentro de paneles, tablas
   y modales. Mismo alto que .button.small del tema. */
.bm-btn--chico {
	--bm-alto: 32px;
	--bm-padding-x: 14px;
	--bm-letra: 12px;
}

/* ---------- Ancho completo ---------- */

/* Siempre a ancho completo (paneles, resúmenes, modales). */
button.bm-btn.bm-btn--bloque,
a.bm-btn.bm-btn--bloque,
input.bm-btn.bm-btn--bloque {
	display: flex;
	width: 100%;
}

/* ---------- Ancho completo en mobile ---------- */

/* En mobile ocupa todo el ancho de su contenedor. */
@media (max-width: 767px) {
	button.bm-btn.bm-btn--bloque-mobile,
	a.bm-btn.bm-btn--bloque-mobile,
	input.bm-btn.bm-btn--bloque-mobile {
		display: flex;
		width: 100%;
	}
}

/* ==========================================================================
   Caja común de los modales del sitio: radio 0 como el resto del sitio, con el
   borde de las tarjetas, la misma sombra y el mismo padding. En celular ocupa
   el ancho de la pantalla menos 16px por lado.
   La usan los modales de _footer.php, mostrarModalMsg (direccionesentrega.php),
   mostrarAlertaCompra (compra.php), mostrarAlerta (informarpago.php), el
   submodal de sucursales (_setdireccionentrega.php) y el agradecimiento de
   Mis compras (listado_compras.php).
   ========================================================================== */
.modal-caja {
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 420px;
	padding: 30px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 0;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
	text-align: center;
}

/* Título de los modales de _footer.php */
.modal-caja-titulo {
	margin: 0 0 15px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #161619;
}

/* Mismo corte que tenía en _footer.php */
@media (max-width: 576px) {
	.modal-caja {
		padding: 20px;
	}
}