/* ==========================================================================
   Mi credencial — consulta pública de socios
   Identidad visual institucional Redes Mutual de Servicios
   ========================================================================== */

.mb-credencial {
	--mbc-azul: #2b2464;
	--mbc-azul-suave: rgba(43, 36, 100, 0.06);
	--mbc-verde: #33aa54;
	--mbc-verde-oscuro: #2a8b45;
	--mbc-azul-oscuro: #100624;
	--mbc-fondo: #f1f0f5;
	--mbc-superficie: #ffffff;
	--mbc-borde: #e1dfea;
	--mbc-texto: #100624;
	--mbc-texto-secundario: #5b5770;
	--mbc-alerta: #c0392b;
	--mbc-activo-suave: #e5f6ea;
	--mbc-alerta-suave: #fbe9e7;

	--mbc-radio: 16px;
	--mbc-radio-chico: 10px;
	--mbc-sombra: 0 2px 10px rgba(16, 6, 36, 0.07);
	--mbc-transicion: 200ms cubic-bezier(0.22, 1, 0.36, 1);

	box-sizing: border-box;
	/* El encuadre y el centrado los aporta .mb-login-pantalla--inline; acá solo
	   queda la tipografía y el color base que heredan la tarjeta y el resultado. */
	font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--mbc-texto);
}

.mb-credencial *,
.mb-credencial *::before,
.mb-credencial *::after {
	box-sizing: border-box;
}

/* ---- Marca ---- */

.mb-credencial-marca {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
}

.mb-credencial-logo {
	height: 38px;
	width: auto;
	display: block;
}

/* Isotipo (símbolo) en la esquina de la tarjeta de credencial. */
.mb-credencial-isotipo {
	flex: none;
	width: 36px;
	height: 36px;
	display: block;
}

/* ---- Paneles ---- */

.mb-credencial-panel {
	background-color: var(--mbc-superficie);
	border-radius: var(--mbc-radio);
	box-shadow: var(--mbc-sombra);
	padding: 32px 24px;
}

.mb-credencial-titulo {
	margin: 0 0 8px;
	font-size: 1.9rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--mbc-azul-oscuro);
	text-wrap: balance;
}

.mb-credencial-subtitulo {
	margin: 0 0 28px;
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--mbc-texto-secundario);
	line-height: 1.5;
}

/* ---- Formulario ---- */

.mb-credencial-formulario label {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--mbc-texto);
}

#mb-credencial-dni {
	width: 100%;
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 16px 18px;
	border: 2px solid var(--mbc-borde);
	border-radius: var(--mbc-radio-chico);
	background-color: var(--mbc-fondo);
	color: var(--mbc-texto);
	text-align: center;
	transition: border-color var(--mbc-transicion), background-color var(--mbc-transicion);
}

#mb-credencial-dni::placeholder {
	font-weight: 400;
	color: var(--mbc-texto-secundario);
}

#mb-credencial-dni:focus {
	outline: none;
	border-color: var(--mbc-azul);
	background-color: var(--mbc-superficie);
}

/* ---- Botones ---- */

.mb-credencial-boton {
	display: block;
	width: 100%;
	margin-top: 20px;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 700;
	padding: 16px;
	border-radius: var(--mbc-radio-chico);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--mbc-transicion), border-color var(--mbc-transicion), transform var(--mbc-transicion);
}

.mb-credencial-boton:active {
	transform: scale(0.98);
}

.mb-credencial-boton-primario {
	background-color: var(--mbc-verde-oscuro);
	color: #ffffff;
}

.mb-credencial-boton-primario:hover,
.mb-credencial-boton-primario:focus-visible {
	background-color: #21702e;
}

.mb-credencial-boton-secundario {
	background-color: transparent;
	border-color: var(--mbc-azul);
	color: var(--mbc-azul);
}

.mb-credencial-boton-secundario:hover,
.mb-credencial-boton-secundario:focus-visible {
	background-color: var(--mbc-azul-suave);
}

.mb-credencial-boton:focus-visible {
	outline: 3px solid var(--mbc-azul);
	outline-offset: 2px;
}

/* ---- Resultado: estado no activo ---- */

#mb-credencial-resultado {
	text-align: center;
}

.mb-credencial-icono {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background-color: var(--mbc-alerta);
}

.mb-credencial-icono svg {
	width: 36px;
	height: 36px;
}

#mb-credencial-contenido h2 {
	margin: 0 0 6px;
	font-size: 1.7rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--mbc-azul-oscuro);
	text-wrap: balance;
}

#mb-credencial-contenido > p {
	margin: 0 0 6px;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--mbc-texto-secundario);
}

/* ---- Tarjeta de socio activo ("carnet") ---- */

.mb-credencial-tarjeta {
	text-align: left;
	border-radius: var(--mbc-radio-chico);
	padding: 24px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--mbc-azul) 0%, var(--mbc-azul-oscuro) 100%);
	color: #ffffff;
}

.mb-credencial-tarjeta-encabezado {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.mb-credencial-estado-badge {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: var(--mbc-verde);
	color: #ffffff;
}

.mb-credencial-tarjeta .mb-credencial-isotipo {
	width: 40px;
	height: 40px;
}

.mb-credencial-tarjeta h2 {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: balance;
}

.mb-credencial-numero {
	margin: 0 0 4px;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85);
}

.mb-credencial-detalle {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

.mb-credencial-vencimiento {
	margin: 12px 0 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 12px;
}

/* ---- Beneficios disponibles ---- */

.mb-credencial-beneficios {
	text-align: left;
}

.mb-credencial-beneficios h3 {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mbc-azul);
}

.mb-credencial-beneficios ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-credencial-beneficios li {
	padding: 14px 0;
	border-bottom: 1px solid var(--mbc-borde);
}

.mb-credencial-beneficios li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.mb-credencial-beneficio-encabezado {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 1.05rem;
}

.mb-credencial-beneficio-titulo {
	font-weight: 700;
	color: var(--mbc-texto);
}

.mb-credencial-beneficio-valor {
	flex: none;
	font-weight: 700;
	color: var(--mbc-verde-oscuro);
	white-space: nowrap;
}

.mb-credencial-beneficio-comercios {
	margin: 4px 0 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--mbc-texto-secundario);
}

/* ---- Pantallas pequeñas / accesibilidad ---- */

@media (min-width: 480px) {
	.mb-credencial-titulo {
		font-size: 2.1rem;
	}

	.mb-credencial-panel {
		padding: 40px 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mb-credencial *,
	.mb-credencial *::before,
	.mb-credencial *::after {
		transition-duration: 0.01ms !important;
	}
}