/* Portal de socios COPERAM. Todo va dentro de .coperam-portal para no afectar al resto del sitio. */

.coperam-portal {
	max-width: 720px;
	margin: 0 auto;
	padding: 1rem 0 2rem;
	line-height: 1.5;
}

.coperam-portal h2 {
	margin: 0 0 .5rem;
}

.coperam-links {
	margin-top: 1.5rem;
	font-size: .95em;
}

/* Avisos: info (por defecto), error y ok */
.coperam-aviso {
	padding: .75rem 1rem;
	margin: 1rem 0;
	border-left: 4px solid #2271b1;
	background: #f0f6fc;
	border-radius: 4px;
}

.coperam-aviso--error {
	border-color: #d63638;
	background: #fcf0f1;
}

.coperam-aviso--ok {
	border-color: #00a32a;
	background: #edfaef;
}

.coperam-aviso ul {
	margin: 0;
	padding-left: 1.2rem;
}


/* Formularios */
.coperam-form {
	margin-top: 1rem;
}

.coperam-campo {
	margin: 0 0 1rem;
}

.coperam-campo label {
	display: block;
	font-weight: 600;
	margin-bottom: .25rem;
}

.coperam-campo input {
	width: 100%;
	max-width: 420px;
	padding: .5rem .6rem;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 1rem;
	box-sizing: border-box;
}

.coperam-campo small {
	display: block;
	color: #50575e;
	margin-top: .25rem;
}

.coperam-boton {
	padding: .6rem 1.4rem;
	border: 0;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

.coperam-boton:hover,
.coperam-boton:focus {
	background: #135e96;
}

.coperam-check label {
	font-weight: normal;
	cursor: pointer;
}


/* Formulario de datos */
.coperam-socio {
	color: #50575e;
	margin-bottom: 1rem;
}

.coperam-form fieldset {
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: .75rem 1rem .25rem;
	margin: 0 0 1rem;
}

.coperam-form legend {
	font-weight: 700;
	padding: 0 .4rem;
}

.coperam-opcional {
	font-weight: normal;
	color: #646970;
	font-size: .9em;
}

/* Domicilio en dos columnas en pantallas anchas, una en el celular */
.coperam-grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

@media (min-width: 600px) {
	.coperam-grilla {
		grid-template-columns: 1fr 1fr;
	}
}

.coperam-cancelar {
	margin-left: 1rem;
}


/* Débitos: resumen de la cuenta */
.coperam-resumen {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: .75rem;
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.coperam-resumen dt {
	font-size: .85em;
	color: #646970;
}

.coperam-resumen dd {
	margin: 0;
	font-weight: 600;
}

.coperam-resumen__total dd {
	font-size: 1.25em;
}

/* Débitos: tabla (en el celular se desplaza de costado en vez de romperse) */
.coperam-tabla-scroll {
	overflow-x: auto;
}

.coperam-tabla {
	width: 100%;
	border-collapse: collapse;
}

.coperam-tabla th,
.coperam-tabla td {
	padding: .5rem .6rem;
	border-bottom: 1px solid #dcdcde;
	text-align: left;
	vertical-align: top;
}

.coperam-tabla td small {
	display: block;
	color: #646970;
}

.coperam-tabla tfoot th,
.coperam-tabla tfoot td {
	font-weight: 700;
	border-bottom: 0;
	border-top: 2px solid #50575e;
}

.coperam-num {
	text-align: right !important;
	white-space: nowrap;
}

.coperam-sin-cuotas {
	color: #646970;
}