/**
 * Estilos del formulario de donación - Fundación Doctora Clown
 * Paleta: rojo principal (configurable), fondo blanco/gris muy claro, texto #333
 *
 * Nota de accesibilidad: el rojo de marca (--dc-color-principal) se usa para
 * bordes, cintas y fondos sólidos grandes, donde su contraste es adecuado.
 * Para TEXTO en rojo y para el relleno del botón principal se usa
 * --dc-color-principal-oscuro (generado con color-mix a partir del mismo
 * hex configurado), que sí cumple el mínimo AA de 4.5:1 sobre blanco.
 */

.dc-donacion-wrap {
	--dc-color-principal: #e62e2d;
	--dc-color-principal-oscuro: color-mix(in srgb, var(--dc-color-principal) 78%, black);
	--dc-color-fondo: #ffffff;
	--dc-color-fondo-suave: #f9f9f9;
	--dc-color-texto: #333333;
	--dc-color-borde: #e2e2e2;

	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--dc-color-texto);
}

.dc-donacion-wrap * {
	box-sizing: border-box;
}

/* Foco de teclado visible en todos los controles interactivos (accesibilidad) */
.dc-donacion-wrap button:focus-visible,
.dc-donacion-wrap input:focus-visible {
	outline: 2px solid var(--dc-color-principal-oscuro);
	outline-offset: 2px;
}

.dc-donacion-columna {
	background: var(--dc-color-fondo);
	border: 1px solid var(--dc-color-borde);
	border-radius: 12px;
	padding: 28px;
	flex: 1 1 0;
}

.dc-donacion-principal {
	max-width: 460px;
}

.dc-donacion-manual {
	max-width: 340px;
	background: var(--dc-color-fondo-suave);
	align-self: center;
}

.dc-donacion-separador {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.dc-donacion-separador::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--dc-color-borde);
}

.dc-donacion-separador span {
	position: relative;
	background: #fff;
	padding: 6px;
	color: #999;
	font-size: 13px;
}

/* Barra de pasos 1-2-3 */
.dc-donacion-pasos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 18px;
}

.dc-paso {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dc-color-principal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	opacity: 0.35;
}

.dc-paso-activo {
	opacity: 1;
}

.dc-paso-linea {
	width: 22px;
	height: 2px;
	background: var(--dc-color-borde);
}

.dc-donacion-titulo {
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 20px;
}

/* Selector de frecuencia */
.dc-donacion-frecuencia {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.dc-frecuencia-btn {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--dc-color-borde);
	background: #fff;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var(--dc-color-texto);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dc-frecuencia-btn.dc-activo {
	border-color: var(--dc-color-principal);
	color: var(--dc-color-principal-oscuro);
	background: color-mix(in srgb, var(--dc-color-principal) 6%, white);
}

/* Grilla de montos */
.dc-donacion-montos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 14px;
	/* Espacio para la etiqueta "Más elegido", que flota sobre el botón */
	padding-top: 22px;
}

/* Sin esto, el atributo HTML "hidden" no ocultaría la grilla: una regla de
   autor con display:grid (como la de arriba) le gana por cascada a la hoja
   de estilos por defecto del navegador que oculta elementos [hidden] —
   gotcha clásico de CSS. Se usa para alternar entre la grilla y el bloque
   de "Nariz de Rubí" al cambiar a la pestaña "Donación anual". */
.dc-donacion-montos[hidden] {
	display: none;
}

.dc-monto-btn {
	position: relative;
	overflow: visible;
	width: 100%;
	padding: 14px 8px;
	border: 1px solid var(--dc-color-borde);
	background: #fff;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	color: var(--dc-color-texto);
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.dc-monto-btn:hover {
	border-color: var(--dc-color-principal);
}

.dc-monto-btn.dc-activo {
	border-color: var(--dc-color-principal);
	border-width: 2px;
	color: var(--dc-color-principal-oscuro);
}

/* Etiqueta "Más elegido" sobre el monto recomendado */
.dc-monto-btn-wrap {
	position: relative;
}

.dc-badge-recomendado {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--dc-color-principal-oscuro);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	z-index: 1;
	pointer-events: none;
	line-height: 1.4;
}

/* Cinta de esquina con check para el monto activo, dentro de un contenedor
   con overflow:hidden propio para que no se recorte con la etiqueta de arriba */
.dc-monto-btn-cinta {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 7px;
	pointer-events: none;
}

.dc-monto-btn.dc-activo .dc-monto-btn-cinta::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 26px 26px 0;
	border-color: transparent var(--dc-color-principal) transparent transparent;
}

.dc-monto-btn.dc-activo .dc-monto-btn-cinta::after {
	content: "\2713";
	position: absolute;
	top: 1px;
	right: 2px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.dc-monto-otro.dc-activo .dc-monto-btn-cinta::before,
.dc-monto-otro.dc-activo .dc-monto-btn-cinta::after {
	/* "Otra cantidad" no necesita la cinta: su estado activo ya se ve
	   reflejado en el campo numérico que aparece debajo. */
	content: none;
}

.dc-monto-otro {
	font-size: 13px;
}

/* --- Niveles de donación (medallas) ------------------------------------- */
/* Grid de 4 columnas (Bronce/Plata/Oro/Diamante) en vez de las 3+1 del modo
   simple. La etiqueta de nivel ocupa el mismo espacio reservado arriba que
   antes usaba el badge "Más elegido" (los dos mecanismos son mutuamente
   excluyentes, nunca conviven). */
.dc-donacion-niveles {
	grid-template-columns: repeat(4, 1fr);
	/* La etiqueta de nivel ya ocupa espacio en el flujo normal (no está
	   posicionada en absoluto como el badge "Más elegido"), así que no
	   necesita el padding-top reservado para ese badge. */
	padding-top: 0;
}

.dc-nivel-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dc-nivel-etiqueta {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 8px;
	max-width: 100%;
}

/* El ícono vive en su propio bloque de altura fija, siempre primero, así
   queda exactamente a la misma altura en las 4 columnas — sin depender de
   cuántas líneas ocupe el nombre debajo (esa fue la causa del desalineamiento
   en el intento anterior: usar justify-content:flex-end dejaba flotar el
   ícono según el contenido). */
.dc-nivel-icono-wrap {
	line-height: 0;
	margin-bottom: 6px;
}

/* Mismo tamaño que los círculos numerados del indicador de pasos (1-2-3),
   para que la medalla se sienta parte del mismo lenguaje visual. */
.dc-nivel-icono {
	width: 26px;
	height: 26px;
	display: block;
	margin: 0 auto;
}

/* El nombre se divide siempre en exactamente 2 líneas fijas desde PHP
   (dividir_nombre_nivel(): todo menos la última palabra / la última
   palabra), en vez de dejar que el ancho de cada columna decida dónde
   envolver el texto — así los 4 nombres quedan siempre parejos entre sí,
   sea "Nariz de Plata" o "Nariz de Bronce". */
.dc-nivel-nombre {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1px;
	line-height: 1.3;
	text-align: center;
}

.dc-nivel-nombre-linea {
	display: block;
}

.dc-nivel-btn {
	width: 100%;
	/* Altura FIJA (no mínima): "Otra cantidad" se parte en dos líneas
	   mientras los montos ($60.000, etc.) van en una sola, y con solo un
	   mínimo el botón de Diamante terminaba más alto que sus hermanos.
	   Con una altura fija, calculada para que quepan las dos líneas más
	   largas, los 4 botones quedan exactamente parejos arriba y abajo. */
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.dc-nivel-monto {
	display: block;
}

/* En pantallas angostas, 4 columnas quedan muy apretadas — se pasa a 2x2. */
@media (max-width: 480px) {
	.dc-donacion-niveles {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 30px;
	}
}

.dc-donacion-monto-otro-wrap {
	margin-bottom: 14px;
}

.dc-donacion-monto-otro-wrap label,
.dc-rubi-monto-wrap label {
	display: block;
	font-size: 13px;
	margin-bottom: 6px;
	color: #666;
}

.dc-donacion-monto-otro-wrap input,
.dc-rubi-monto-wrap input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dc-color-borde);
	border-radius: 8px;
	font-size: 15px;
}

/* Donación anual (Nariz de Rubí) — opción única, sin grilla, centrada como
   el resto de las etiquetas de nivel (reutiliza .dc-nivel-etiqueta,
   .dc-nivel-icono-wrap y .dc-nivel-nombre ya definidas arriba). */
.dc-donacion-rubi {
	margin-bottom: 14px;
}

.dc-rubi-monto-wrap {
	max-width: 220px;
	margin: 0 auto;
	text-align: left;
}

.dc-donacion-impacto {
	background: #fdecec;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	text-align: center;
	color: #7a1f1f;
	margin: 0 0 18px;
}

.dc-donacion-mensaje {
	font-size: 13px;
	color: var(--dc-color-principal-oscuro);
	min-height: 18px;
	text-align: center;
	margin: 0 0 10px;
}

.dc-donacion-boton-donar {
	position: relative;
	width: 100%;
	padding: 14px;
	background: var(--dc-color-principal-oscuro);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: filter 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
}

.dc-donacion-boton-donar:hover {
	filter: brightness(0.92);
}

.dc-donacion-boton-donar:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}

/* Spinner de carga (respeta prefers-reduced-motion) */
.dc-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: dc-girar 0.7s linear infinite;
}

.dc-donacion-boton-donar.dc-cargando .dc-spinner {
	display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
	.dc-spinner {
		animation-duration: 1.6s;
	}
}

@keyframes dc-girar {
	to {
		transform: rotate(360deg);
	}
}

/* Microcopy de confianza bajo el botón */
.dc-donacion-confianza {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: #888;
}

.dc-donacion-confianza svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

/* Columna de medios manuales */
.dc-donacion-manual-bloque {
	text-align: center;
	padding-top: 22px;
	margin-top: 22px;
	border-top: 1px solid var(--dc-color-borde);
}

.dc-donacion-manual-bloque:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.dc-donacion-manual-bloque h4 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.dc-donacion-manual-bloque p {
	font-size: 13px;
	color: #666;
	margin: 0 0 14px;
	line-height: 1.5;
}

.dc-copiar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid var(--dc-color-borde);
	background: #fff;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--dc-color-texto);
	max-width: 100%;
}

.dc-copiar-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #999;
}

.dc-copiar-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dc-copiar-btn.dc-copiado {
	border-color: #2e7d32;
	color: #2e7d32;
}

.dc-copiar-btn.dc-copiado svg {
	color: #2e7d32;
}

.dc-donacion-manual-nota {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px dashed var(--dc-color-borde);
	font-size: 11.5px;
	color: #999;
	text-align: center;
	line-height: 1.5;
}

/* Enlace de beneficios fiscales */
.dc-donacion-fiscal {
	text-align: center;
	margin: 0 0 18px;
}

.dc-donacion-fiscal a,
.dc-donacion-fiscal span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dc-color-principal-oscuro);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.dc-donacion-fiscal a:hover {
	text-decoration: underline;
}

.dc-donacion-fiscal svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 780px) {
	.dc-donacion-wrap {
		flex-direction: column;
	}

	.dc-donacion-separador {
		display: none;
	}

	.dc-donacion-principal,
	.dc-donacion-manual {
		max-width: 100%;
	}
}

/* Aviso del modo de prueba en vivo (visible solo para administradores). */
.dc-donacion-prueba {
	background: #fff4e5;
	border: 1px solid #f0b86e;
	border-radius: 8px;
	color: #7a4a00;
	font-size: 12.5px;
	line-height: 1.4;
	margin: 0 0 14px;
	padding: 8px 12px;
	text-align: center;
}

/* 1.7.0 — Cualquier elemento con el atributo "hidden" dentro del formulario
   queda oculto aunque otra regla le asigne display (ver la nota de
   .dc-donacion-montos[hidden]). Generaliza esa corrección. */
.dc-donacion-wrap [hidden] {
	display: none !important;
}

/* Aviso para donaciones mensuales y anuales (texto configurable). */
.dc-donacion-aviso-recurrente {
	background: #f6f7f7;
	border-left: 3px solid var(--dc-color-principal, #e62e2d);
	border-radius: 4px;
	color: #3c434a;
	font-size: 13px;
	line-height: 1.45;
	margin: 0 0 14px;
	padding: 8px 12px;
}

/* Diagnóstico ?dc_debug=1 (solo administradores). */
.dc-donacion-debug {
	background: #1d2327;
	border-radius: 6px;
	color: #f0f0f1;
	font-family: Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.5;
	margin: 0 0 14px;
	overflow-x: auto;
	padding: 10px 12px;
	white-space: pre-wrap;
}