/*
 * Página de pago: toma la letra del tema y usa el color del club (Cobros › Ajustes › Apariencia).
 * Sin color configurado, usa el celeste de Mercado Pago.
 */
.csmp {
	--csmp-color: #009ee3;
	--csmp-color-fuerte: #007eb5;
	--csmp-color-hover: #006a99;
	--csmp-color-suave: #e6f5fc;
	--csmp-borde: rgba(0, 0, 0, 0.12);
	--csmp-texto-suave: rgba(0, 0, 0, 0.62);
	--csmp-radio: 10px;
	max-width: 640px;
	min-width: 0;
	margin: 0 auto 2.5em;
	/* Margen propio: muchos temas no dejan margen a los costados en el celular. */
	padding-left: max(16px, env(safe-area-inset-left));
	padding-right: max(16px, env(safe-area-inset-right));
	/* Los conceptos de la planilla vienen en mayúsculas y sin espacios ("PER.2026/09"): se cortan
	   donde haga falta antes que salirse de la pantalla. */
	overflow-wrap: anywhere;
}
.csmp * { box-sizing: border-box; }

/* Logo y título */
.csmp-marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.75em;
	text-align: center;
}
.csmp-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 110px;
	max-width: 60%;
}
.csmp .csmp-titulo {
	margin: 0;
	color: var(--csmp-color-fuerte);
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.2;
}
.csmp-intro {
	margin: 0 0 1.25em;
	color: var(--csmp-texto-suave);
	text-align: center;
}

/* Formulario de ingreso */
.csmp-ingreso {
	max-width: 380px;
	margin: 0 auto;
}
.csmp label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.csmp input[type="text"],
.csmp input[type="email"] {
	width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--csmp-borde);
	border-radius: var(--csmp-radio);
	background: #fff;
	font-size: 1rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.csmp input[type="text"]:focus,
.csmp input[type="email"]:focus {
	outline: none;
	border-color: var(--csmp-color);
	box-shadow: 0 0 0 3px var(--csmp-color-suave);
}
.csmp input[type="checkbox"] {
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--csmp-color-fuerte);
}
.csmp-ingreso .csmp-boton { width: 100%; }

/* Botones */
.csmp .csmp-boton {
	display: inline-block;
	padding: 0.85em 1.75em;
	border: 0;
	border-radius: var(--csmp-radio);
	background: var(--csmp-color-fuerte);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
}
.csmp .csmp-boton:hover,
.csmp .csmp-boton:focus-visible { background: var(--csmp-color-hover); color: #fff; }
.csmp .csmp-boton:focus-visible { outline: 3px solid var(--csmp-color-suave); outline-offset: 2px; }
.csmp .csmp-boton:active { transform: translateY(1px); }
.csmp .csmp-boton[disabled] { opacity: 0.5; cursor: not-allowed; }
.csmp-pagar .csmp-boton { width: 100%; font-size: 1.05rem; }

/* Mensajes */
.csmp-aviso {
	padding: 0.9em 1em;
	border-radius: var(--csmp-radio);
	border-left: 4px solid;
	margin: 0 0 1.25em;
}
.csmp-aviso--ok { background: var(--csmp-color-suave); border-color: var(--csmp-color-fuerte); color: inherit; }
.csmp-aviso--pendiente { background: #fff6dc; border-color: #c99700; color: #5a4400; }
.csmp-aviso--error { background: #fdeaea; border-color: #c62828; color: #6b1414; }

/* Socio */
.csmp-cabecera {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding-bottom: 0.85em;
	margin-bottom: 0.5em;
	border-bottom: 2px solid var(--csmp-color);
}
.csmp-cabecera > div { min-width: 0; }
.csmp-nombre { display: block; font-size: 1.15em; }
.csmp-numero { color: var(--csmp-texto-suave); font-size: 0.9em; }
.csmp-salir {
	flex-shrink: 0;
	font-size: 0.9em;
	color: var(--csmp-color-fuerte);
	white-space: nowrap;
	overflow-wrap: normal;
}

/* Tabla de deudas: ancho fijo al de la pantalla; el concepto se lleva el espacio que sobra. */
.csmp .csmp-tabla {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
}
.csmp-tabla .csmp-col-check { width: 2.5em; }
.csmp-tabla .csmp-col-vence { width: 8.5em; }
.csmp-fecha { white-space: nowrap; overflow-wrap: normal; }
.csmp-etiqueta--debajo { display: table; margin: 0.3em 0 0; }
.csmp-tabla .csmp-num { width: 10em; }
.csmp-tabla--historial .csmp-col-fecha { width: 6.5em; }
.csmp-tabla--historial .csmp-col-medio { width: 8em; }
.csmp-tabla th,
.csmp-tabla td {
	padding: 0.75em 0.5em;
	text-align: left;
	vertical-align: middle;
}
/* Cada deuda es una tarjeta: fondo gris claro, verde suave si está elegida. */
.csmp .csmp-tabla { border-collapse: separate; border-spacing: 0 8px; }
.csmp-tabla tbody td { background: rgba(0, 0, 0, 0.035); border: 0; }
.csmp-tabla tbody td:first-child { border-radius: var(--csmp-radio) 0 0 var(--csmp-radio); padding-left: 0.9em; }
.csmp-tabla tbody td:last-child { border-radius: 0 var(--csmp-radio) var(--csmp-radio) 0; padding-right: 0.9em; }
.csmp-tabla thead th:first-child { padding-left: 0.9em; }
.csmp-tabla thead th:last-child { padding-right: 0.9em; }
.csmp-tabla thead th {
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--csmp-texto-suave);
}
.csmp-tabla tbody tr:has(input:checked) td { background: var(--csmp-color-suave); }
.csmp-tabla--historial tbody td { background: transparent; border-bottom: 1px solid var(--csmp-borde); border-radius: 0 !important; }
.csmp-pie {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	padding: 0.75em 0.9em 1.25em;
	font-size: 1.1em;
}
.csmp-total { color: var(--csmp-color-fuerte); font-size: 1.25em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.csmp-num { text-align: right !important; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.csmp-col-check { width: 2.25em; }
.csmp-etiqueta {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.55em;
	border-radius: 999px;
	background: #fdeaea;
	color: #8a1f1f;
	font-size: 0.78em;
	font-weight: 600;
}
.csmp-vence-movil,
.csmp-importe-movil { display: none; }
.csmp-concepto { overflow-wrap: break-word; }
.csmp-ayuda { font-size: 0.9em; color: var(--csmp-texto-suave); text-align: center; margin-top: 0.75em; }

/* Varias cuentas con el mismo DNI */
.csmp-eleccion { max-width: 420px; margin: 0 auto; }
.csmp .csmp-cuenta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	padding: 0.9em 1em;
	margin-bottom: 0.6em;
	border: 1px solid var(--csmp-borde);
	border-left: 4px solid var(--csmp-color);
	border-radius: var(--csmp-radio);
	color: inherit;
	text-decoration: none;
	transition: background 0.15s;
}
.csmp .csmp-cuenta:hover,
.csmp .csmp-cuenta:focus-visible { background: var(--csmp-color-suave); }
.csmp .csmp-cuenta { flex-wrap: wrap; }
.csmp-cuenta > span:first-child { flex: 1 1 12em; min-width: 0; }
.csmp-cuenta small { display: block; color: var(--csmp-texto-suave); }
.csmp-cuenta__deuda { white-space: nowrap; overflow-wrap: normal; color: var(--csmp-color-fuerte); font-weight: 600; }

/* Historial */
.csmp-historial { margin-top: 1.75em; border-top: 1px solid var(--csmp-borde); padding-top: 1em; }
.csmp-historial summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5em; color: var(--csmp-color-fuerte); }

/* Pago de actividades */
.csmp-actividad {
	border: 1px solid var(--csmp-borde);
	border-top: 4px solid var(--csmp-color);
	border-radius: var(--csmp-radio);
	padding: 1.25em;
	margin-bottom: 1.25em;
}
.csmp-actividad__titulo { display: flex; justify-content: space-between; gap: 1em; font-size: 1.15em; margin-bottom: 0.5em; }
.csmp-actividad__titulo > strong { min-width: 0; }
.csmp-precio { font-weight: 700; white-space: nowrap; color: var(--csmp-color-fuerte); }
.csmp-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1em; }

@media (max-width: 480px) {
	.csmp-tabla thead { display: none; }
	.csmp-col-vence,
	.csmp-col-fecha,
	.csmp-col-medio { display: none; }
	.csmp-tabla td { padding: 0.8em 0.4em; }
	/* El importe (última columna) se oculta: el concepto cierra la tarjeta. */
	.csmp-tabla tbody td.csmp-concepto { border-radius: 0 var(--csmp-radio) var(--csmp-radio) 0; padding-right: 0.9em; }
	.csmp-tabla--historial tbody td.csmp-concepto { padding-left: 0; }
	.csmp-tabla .csmp-col-check { width: 2em; }
	/* En el celular el importe va debajo del concepto: el concepto usa todo el ancho. */
	.csmp-tabla .csmp-num { display: none; }
	.csmp-importe-movil { display: block; margin-top: 0.15em; font-variant-numeric: tabular-nums; }
	.csmp-pie { padding-left: 0.9em; padding-right: 0.9em; }
	.csmp-vence-movil { display: inline-block; font-size: 0.85em; color: var(--csmp-texto-suave); margin: 0.2em 0.4em 0 0; white-space: nowrap; overflow-wrap: normal; }
	.csmp-etiqueta.csmp-vence-movil { color: #8a1f1f; margin-left: 0; }
	.csmp .csmp-boton { width: 100%; }
	.csmp-logo { max-height: 90px; }
}