/* ==========================================================================
   Oficina Virtual - estilos propios

   Sólo lo que Bootstrap 5.3 no resuelve por sí solo: el armado de la pantalla
   (barra superior fija + menú lateral + contenido + pie) y la apariencia del
   menú.

   Los colores NO se escriben acá: main.html define --ov-color-primario y
   --ov-color-primario-texto a partir de coop.marca.*, de modo que cambiar los
   colores de una cooperativa es cambiar dos líneas del archivo de
   propiedades.
   ========================================================================== */

:root {
	--ov-sidebar-ancho: 270px;
	--ov-navbar-alto: 66px;
	--ov-footer-alto: 42px;

	/* Valores de respaldo por si la plantilla no los inyectó */
	--ov-color-primario: #083562;
	--ov-color-primario-texto: #f5f5f5;
}

body {
	font-family: 'Roboto', sans-serif;
	padding-top: var(--ov-navbar-alto);
	padding-bottom: var(--ov-footer-alto);
}

/* Marca de agua de la portada, detrás de todo el contenido */
body::before {
	content: "";
	position: fixed;
	top: var(--ov-navbar-alto);
	right: 0;
	bottom: var(--ov-footer-alto);
	width: 60%;
	background-image: var(--ov-portada);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.08;
	pointer-events: none;
	z-index: -1;
}

/*
 * En pantallas chicas la marca de agua va centrada y ocupa todo el ancho.
 *
 * El apoyo a la derecha tiene sentido mientras el menú lateral ocupa la
 * izquierda; abajo de lg el menú es un panel que aparece y desaparece, así que
 * el contenido usa todo el ancho y la imagen pegada a un costado queda
 * descolgada.
 *
 * El ancho completo además es lo que hace que se reconozca el dibujo: con
 * background-size: cover, una imagen casi cuadrada metida en una caja angosta
 * y alta se escala hasta llenar el alto y queda recortada de costado, así que
 * cuanto más angosta la caja, menos se ve. (contain no sirve: entra completa
 * pero queda enteramente detrás de la tarjeta de contenido.)
 */
@media (max-width: 991.98px) {
	body::before {
		left: 0;
		right: 0;
		width: auto;
	}
}

/* ==========================================================================
   Barra superior
   ========================================================================== */

.ov-logo {
	height: 52px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

/*
 * Desplegable del socio activo.
 *
 * Bootstrap deja los .dropdown-menu de una .navbar en position: static
 * mientras la barra está "colapsada", y esta barra no usa navbar-expand-*,
 * así que la considera colapsada siempre. Con position: static el menú no
 * flota: se mete en el flujo y empuja el resto de la barra al abrirse.
 */
.navbar .navbar-nav .dropdown-menu {
	position: absolute;
}

/* Nombre del socio conectado, en la barra superior */
.ov-socio-nombre {
	font-size: 1.1rem;
}

/*
 * Recorte del nombre y del mail cuando son largos.
 *
 * La clase text-truncate de Bootstrap es overflow:hidden + text-overflow +
 * white-space:nowrap, y para que recorte algo necesita dos condiciones que acá
 * no se daban solas, por eso ponerla en la plantilla no tenía efecto:
 *
 *  1) El elemento tiene que ser de bloque. En un <span> normal (inline) las
 *     propiedades de desbordamiento no se aplican; de ahí el d-block.
 *
 *  2) Algo tiene que limitarle el ancho. El bloque cuelga de una cadena de
 *     contenedores flex (ul.nav > li.nav-item > a.d-flex), y todo elemento
 *     flex arranca con min-width: auto, que le impide achicarse por debajo de
 *     su contenido. Resultado: el bloque crecía lo que hiciera falta y nunca
 *     había nada que recortar.
 *
 * Así que se le pone un tope al bloque y se deja que toda la cadena pueda
 * encogerse. Los 18rem son el ancho máximo en la barra superior; en pantallas
 * angostas el min-width: 0 permite que baje de eso y se ajuste solo.
 */
.ov-socio-item,
.ov-socio-item > .nav-link,
.ov-socio-datos {
	min-width: 0;
}

/*
 * El tope de ancho es sólo para la barra superior, donde el bloque compite con
 * el logo y hay que frenarlo. En la tarjeta de pantallas chicas el bloque es lo
 * único que hay en la fila: ahí no se le pone tope y se deja que use todo lo
 * que le da la tarjeta, que para eso el min-width: 0 lo deja encogerse.
 */
@media (min-width: 992px) {
	.ov-socio-datos {
		max-width: 18rem;
	}
}

/*
 * En la tarjeta de pantallas chicas, el enlace del socio no necesita el
 * padding lateral que Bootstrap le da a todo .nav-link: no tiene nada al
 * costado y ese 1rem de cada lado es ancho que le falta al nombre (32px, que
 * en un celular es bastante). En la barra superior no se toca.
 *
 * Se hace con la variable y no con padding-left/right porque es la que usa la
 * propia regla de Bootstrap 5.3: las variables se heredan, así que alcanza con
 * declararla en el <li> y no hay que pelear especificidad con el .nav-link.
 */
.card .ov-socio-item {
	--bs-nav-link-padding-x: 0;
}

/* Quita la flechita del dropdown del socio activo */
.ov-sin-flecha::after {
	display: none;
}

/* ==========================================================================
   Menú lateral

   En pantallas chicas es un offcanvas de Bootstrap y se posiciona solo.
   A partir de lg queda fijo a la izquierda y el contenido se corre.
   ========================================================================== */

/*
 * El !important es necesario: a partir de lg, Bootstrap declara
 * ".offcanvas-lg { background-color: transparent !important; }" para que el
 * panel deje de comportarse como offcanvas. Sin esto el menú lateral pierde
 * el azul en pantallas grandes y se ve sobre el fondo blanco.
 */
.ov-sidebar {
	background-color: var(--ov-color-primario) !important;
	/* Degradé suave hacia abajo. Va como imagen sobre el color de fondo, así
	   funciona con el color de cualquier cooperativa sin calcular un segundo
	   tono. */
	background-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
	color: var(--ov-color-primario-texto);
}

/*
 * Lo mismo para el cuerpo del offcanvas, que Bootstrap también transparenta.
 * Es flex y crece para que el menú ocupe todo el alto y el pie (Salir y el
 * crédito) quede abajo de todo.
 */
.ov-sidebar .offcanvas-body {
	background-color: transparent;
	color: inherit;
	display: flex;
	flex-grow: 1;
}

@media (min-width: 992px) {
	.ov-sidebar {
		position: fixed;
		top: var(--ov-navbar-alto);
		left: 0;
		bottom: var(--ov-footer-alto);
		width: var(--ov-sidebar-ancho);
		overflow-y: auto;
		padding: 1rem 0.75rem;
		display: flex;
		flex-direction: column;
	}

	.ov-content {
		margin-left: var(--ov-sidebar-ancho);
	}
}

.ov-content {
	padding: 1.25rem 1rem 2rem 1rem;
	min-height: 60vh;
}

/* ==========================================================================
   Ancho y alineación del contenido

   El contenido no ocupa toda la columna: se mete dentro de .ov-content-caja,
   que lo limita a --ov-content-ancho (coop.marca.ancho-contenido, 60rem por
   omisión; poner 100% para usar todo el ancho disponible).

   Esa caja se centra o se pega a la izquierda según la clase que main.html
   pone en el <body> a partir de coop.marca.contenido-alineado:

     centro      ov-contenido-centrado    (predeterminado, como siempre fue)
     izquierda   ov-contenido-izquierda   pegado al menú lateral

   Sólo se nota en pantallas más anchas que la caja.
   ========================================================================== */

.ov-content-caja {
	max-width: var(--ov-content-ancho);
}

.ov-contenido-centrado .ov-content-caja {
	margin-left: auto;
	margin-right: auto;
}

.ov-contenido-izquierda .ov-content-caja {
	margin-left: auto;
	margin-right: auto;
}

/*
 * Un respiro entre el menú lateral y el contenido, para que no quede pegado.
 * Sólo a partir de lg: en pantallas chicas el menú no está al costado y esos
 * 3rem serían ancho perdido, además de dejar el contenido descentrado (más
 * margen a la izquierda que a la derecha).
 */
@media (min-width: 992px) {
	.ov-contenido-izquierda .ov-content-caja {
		margin-left: 3rem;
	}
}

/*
 * Las grillas que las pantallas centran con justify-content-center se alinean
 * también a la izquierda. Lleva !important porque justify-content-center es
 * una utilidad de Bootstrap, que ya viene marcada con !important.
 */
.ov-contenido-izquierda .ov-content-caja > .row.justify-content-center {
	justify-content: flex-start !important;
}

/*
 * Pantallas que necesitan todo el ancho, como la grilla de envíos de facturas
 * (enviofacturas/ef_list.html): la caja deja de limitarse a
 * --ov-content-ancho y usa toda la columna al lado del menú. Se detecta con
 * :has(), así que alcanza con poner la clase ov-ancho-completo en el elemento
 * raíz del fragmento.
 */
.ov-content-caja:has(> .ov-ancho-completo) {
	max-width: none;
}


/* --- Elementos del menú --- */

/*
 * Los tonos de fondo (hover, grupo abierto, recuadro de los íconos) se sacan
 * de currentColor, que es --ov-color-primario-texto. Así sirven igual con
 * texto claro sobre un color oscuro que con texto oscuro sobre uno claro.
 *
 * menu_invitado.html también usa .ov-menu (sin .nav): las reglas propias del
 * menú del socio van con .ov-menu.nav para no tocarlo.
 */
.ov-menu {
	line-height: 2;
}

.ov-menu.nav {
	flex: 1 0 auto;
	flex-wrap: nowrap;
	gap: 2px;
	line-height: 1.5;
	font-size: 0.95rem;
}

/* Títulos de sección: "Mi cuenta", "Administración" */
.ov-menu-seccion {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
	padding: 0.85rem 0.75rem 0.3rem;
}

/* Opción de primer nivel: enlace directo o cabecera de un grupo */
.ov-menu .ov-menu-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	padding: 0.45rem 0.75rem;
	border: 0;
	border-radius: 0.65rem;
	background: none;
	color: var(--ov-color-primario-texto);
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease-in-out;
}

.ov-menu-icono {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 0.5rem;
	background: color-mix(in srgb, currentColor 10%, transparent);
	font-size: 1rem;
}

/* Flecha del grupo, a la derecha; gira cuando el grupo está abierto */
.ov-menu-flecha {
	margin-left: auto;
	font-size: 0.75rem;
	opacity: 0.6;
	transition: transform 0.2s ease-in-out;
}

.ov-menu-grupo[aria-expanded="true"] .ov-menu-flecha {
	transform: rotate(180deg);
}

.ov-menu-grupo[aria-expanded="true"] {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Opciones de cada grupo, con una línea guía a la izquierda */
.ov-menu-items {
	margin: 0.25rem 0 0.5rem 1.65rem;
	padding-left: 0.85rem;
	border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	flex-wrap: nowrap;
	gap: 3px;
}

.ov-menu-items .nav-link {
	position: relative;
	padding: 0.42rem 0.7rem;
	border-radius: 0.5rem;
	color: var(--ov-color-primario-texto);
	opacity: 0.82;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

/* Hover y foco */
.ov-menu .ov-menu-item:hover,
.ov-menu .ov-menu-item:focus-visible,
.ov-menu-items .nav-link:hover,
.ov-menu-items .nav-link:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: var(--ov-color-primario-texto);
	opacity: 1;
}

/*
 * Pantalla que se está viendo (la marca main.js): pastilla con los colores
 * invertidos, el color del texto de fondo y el color de la cooperativa como
 * letra.
 */
.ov-menu .nav-link.active,
.ov-menu .nav-link.active:hover {
	background: var(--ov-color-primario-texto);
	color: var(--ov-color-primario);
	font-weight: 600;
	opacity: 1;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
}

.ov-menu .ov-menu-item.active .ov-menu-icono {
	background: color-mix(in srgb, var(--ov-color-primario) 12%, transparent);
}

/* Marquita sobre la línea guía, a la altura de la opción activa */
.ov-menu-items .nav-link.active::before {
	content: "";
	position: absolute;
	left: calc(-0.85rem - 2px);
	top: 25%;
	bottom: 25%;
	width: 3px;
	border-radius: 3px;
	background: var(--ov-color-primario-texto);
}

.ov-menu-separador {
	border-color: currentColor;
	opacity: 0.35;
}

/* Pie del menú: Salir y crédito, empujados al fondo cuando sobra lugar */
.ov-menu-pie {
	margin-top: auto;
	padding-top: 0.5rem;
}

.ov-menu-pie .ov-menu-separador {
	margin: 0 0.5rem 0.5rem;
	opacity: 0.2;
}

/*
 * Pantallas táctiles: celulares (el menú como panel deslizable, debajo de lg)
 * y cualquier dispositivo cuyo puntero principal sea el dedo, como una tablet
 * apaisada que ya muestra el menú fijo. Cada opción llega a 44px de alto, el
 * mínimo recomendado para tocar sin errarle, y se separan más entre sí.
 */
@media (max-width: 991.98px), (pointer: coarse) {
	.ov-menu.nav {
		gap: 4px;
		font-size: 1rem;
	}

	.ov-menu .ov-menu-item {
		min-height: 48px;
		padding: 0.5rem 0.75rem;
	}

	.ov-menu-items {
		gap: 6px;
		margin: 0.35rem 0 0.6rem 1.65rem;
	}

	.ov-menu-items .nav-link {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem 0.85rem;
		font-size: 0.95rem;
	}
}

/* Crédito (coop.marca.credito-menu), chiquito y tenue */
.ov-menu-credito {
	padding-top: 0.6rem;
	font-size: 0.68rem;
	letter-spacing: 0.02em;
	text-align: center;
	opacity: 0.45;
}

/* ==========================================================================
   Pie de página
   ========================================================================== */

.ov-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: var(--ov-footer-alto);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background-color: #333;
	color: #cfcdcd;
	padding: 0.25rem 0.75rem;
	text-align: center;
	font-size: 0.8rem;
	z-index: 1030;
}

/* ==========================================================================
   Gráfico de consumos
   ========================================================================== */

/*
 * El <canvas> es un elemento reemplazado, como una <img>: su tamaño sale de
 * los atributos width y height, y la plantilla sólo fija height. Sin el
 * atributo width el navegador usa el valor por omisión de la especificación,
 * 300px, y en una pantalla angosta eso es más ancho que la tarjeta: la página
 * se puede arrastrar de costado hasta que el gráfico entra en pantalla y
 * Chart.js lo redimensiona solo (se dibuja recién ahí, por el
 * IntersectionObserver de suministros.html).
 *
 * max-width sí gana sobre el tamaño intrínseco de un elemento reemplazado, así
 * que esto lo limita desde el primer pintado. Después, cuando Chart.js le pone
 * su propio style.width, la regla deja de hacer efecto y no deforma nada.
 */
.ov-grafico-consumos {
	max-width: 100%;
}

/* ==========================================================================
   Grilla de envíos de facturas (enviofacturas/ef_list.html)
   ========================================================================== */

.ef-grilla {
	font-size: 0.9rem;
}

.ef-grilla .ef-nombre {
	min-width: 12rem;
}

/* enf_error guarda un error por línea: se respetan los saltos */
.ef-grilla .ef-resultado {
	white-space: pre-line;
	min-width: 12rem;
	max-width: 26rem;
}

.ef-grilla .ef-destinatarios .bi {
	margin-right: 0.15rem;
}

/* ==========================================================================
   Indicador de carga
   ========================================================================== */

.ov-loader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2000;
}

/* ==========================================================================
   Impresión
   ========================================================================== */

@media print {
	body {
		padding: 0;
	}
	body::before {
		display: none;
	}
	.ov-content {
		margin-left: 0;
		padding: 0;
	}
}

/* El sello de reCAPTCHA choca con el pie de página */
.grecaptcha-badge {
	bottom: 60px !important;
}

/* ==========================================================================
   Inicio de sesión (login.html)
   ========================================================================== */

/*
 * En esta pantalla se ocultan el menú lateral de visitantes (sólo tenía un
 * botón "Ingresar" que llevaba acá mismo), el botón que lo abre en el
 * celular, los atajos a la pantalla de inicio de la barra superior (también
 * llevaban acá mismo) y la marca de agua. El contenido usa todo el ancho y la tarjeta
 * queda centrada en la ventana.
 */
body:has(.ov-login-moderno) .ov-sidebar,
body:has(.ov-login-moderno) .navbar-toggler,
body:has(.ov-login-moderno) .ov-atajo-inicio {
	display: none !important;
}

body:has(.ov-login-moderno) .ov-content {
	margin-left: 0;
}

body:has(.ov-login-moderno)::before {
	display: none;
}

body:has(.ov-login-moderno) {
	background:
		radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--ov-color-primario) 12%, transparent) 0, transparent 45%),
		radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--ov-color-primario) 10%, transparent) 0, transparent 40%),
		var(--bs-tertiary-bg);
	background-attachment: fixed;
}

/* Centrada en los dos modos de alineación (coop.marca.contenido-alineado) */
body:has(.ov-login-moderno) .ov-content-caja {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/*
 * La tarjeta se centra verticalmente en el espacio que queda entre la barra
 * superior y el pie. Se usa dvh (alto visible real) y no vh: en el celular
 * 100vh incluye la barra de direcciones del navegador, así que el espacio
 * calculado era más alto que lo visible y la tarjeta quedaba corrida hacia
 * abajo. vh queda como respaldo para navegadores viejos.
 */
.ov-login-moderno {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--ov-navbar-alto) - var(--ov-footer-alto) - 3.5rem);
	min-height: calc(100dvh - var(--ov-navbar-alto) - var(--ov-footer-alto) - 3.5rem);
}

/*
 * En pantallas chicas no se centra: la tarjeta va arriba, pegada a la barra
 * superior. En el celular el pie ocupa dos renglones (más que
 * --ov-footer-alto) y al abrirse el teclado cambia el alto visible; centrar
 * ahí hacía que el formulario bailara o quedara bajo.
 */
@media (max-width: 767.98px) {
	.ov-login-moderno {
		align-items: flex-start;
		min-height: 0;
		padding-top: 0.5rem;
	}
}

.ov-login-card {
	width: 100%;
	max-width: 58rem;
	border-radius: 1.25rem;
}

/* --- Columna de la marca --- */

.ov-login-marca {
	position: relative;
	color: var(--ov-color-primario-texto);
	background: linear-gradient(150deg,
		var(--ov-color-primario) 0%,
		color-mix(in srgb, var(--ov-color-primario) 70%, #000) 100%);
	overflow: hidden;
}

/* Dos círculos decorativos, apenas visibles */
.ov-login-marca::before,
.ov-login-marca::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.06;
	pointer-events: none;
}

.ov-login-marca::before {
	width: 22rem;
	height: 22rem;
	right: -9rem;
	top: -7rem;
}

.ov-login-marca::after {
	width: 14rem;
	height: 14rem;
	left: -6rem;
	bottom: -5rem;
}

.ov-login-marca > * {
	position: relative;
}

/* El logo puede ser oscuro: va sobre una placa blanca */
.ov-login-logo {
	display: inline-flex;
	align-self: flex-start;
	background: #fff;
	border-radius: 0.75rem;
	padding: 0.5rem 0.9rem;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.ov-login-logo img {
	height: 44px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.ov-login-beneficios li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.ov-login-icono {
	flex: 0 0 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.6rem;
	background: rgba(255, 255, 255, 0.14);
	font-size: 1.1rem;
}

/* --- Formulario --- */

/* Lugar para el botón del ojito dentro del campo de contraseña */
.ov-login-clave {
	padding-right: 3rem;
}

.ov-login-ver-clave {
	position: absolute;
	top: 0;
	right: 0;
	height: calc(3.5rem + 2px);   /* alto de un .form-floating */
	width: 3rem;
	border: 0;
	color: var(--bs-secondary-color);
	z-index: 5;
}

.ov-login-ver-clave:hover,
.ov-login-ver-clave:focus-visible {
	color: var(--bs-body-color);
}

/* Con la validación de Bootstrap aparece un ícono a la derecha: se corre
   para no quedar debajo del ojito */
.was-validated .ov-login-clave:invalid,
.was-validated .ov-login-clave:valid {
	background-position: right 3rem center;
	padding-right: 5rem;
}

.ov-login-boton {
	color: var(--ov-color-primario-texto);
	background-color: var(--ov-color-primario);
	border-color: var(--ov-color-primario);
	border-radius: 0.75rem;
	font-weight: 500;
}

.ov-login-boton:hover,
.ov-login-boton:focus-visible,
.ov-login-boton:disabled {
	color: var(--ov-color-primario-texto);
	background-color: color-mix(in srgb, var(--ov-color-primario) 85%, #000);
	border-color: color-mix(in srgb, var(--ov-color-primario) 85%, #000);
}

.ov-login-moderno .form-control {
	border-radius: 0.75rem;
}

.ov-login-moderno .form-control:focus {
	border-color: var(--ov-color-primario);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ov-color-primario) 20%, transparent);
}

.ov-login-moderno .form-check-input:checked {
	background-color: var(--ov-color-primario);
	border-color: var(--ov-color-primario);
}

/* Línea con texto en el medio: ———— ¿Es nuevo? ———— */
.ov-login-separador {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--bs-secondary-color);
	font-size: 0.875rem;
}

.ov-login-separador::before,
.ov-login-separador::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--bs-border-color);
}

/* ==========================================================================
   Pantalla de inicio (inicio.html y los inicios personalizados de cada
   cooperativa, <coop.contenido.dir>/inicio/inicio.html)
   ========================================================================== */

/* Bloque de saludo con el color de la cooperativa */
.ov-inicio-hero {
	position: relative;
	overflow: hidden;
	padding: 1.75rem;
	border-radius: 1.25rem;
	color: var(--ov-color-primario-texto);
	background: linear-gradient(135deg,
		var(--ov-color-primario) 0%,
		color-mix(in srgb, var(--ov-color-primario) 70%, #000) 100%);
	box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--ov-color-primario) 25%, transparent);
}

/* Círculos decorativos, como en el login */
.ov-inicio-hero::before,
.ov-inicio-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.06;
	pointer-events: none;
}

.ov-inicio-hero::before {
	width: 18rem;
	height: 18rem;
	right: -6rem;
	top: -8rem;
}

.ov-inicio-hero::after {
	width: 10rem;
	height: 10rem;
	left: 35%;
	bottom: -6rem;
}

.ov-inicio-hero > * {
	position: relative;
}

.ov-inicio-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.75rem;
	border-radius: 2rem;
	background: rgba(255, 255, 255, 0.15);
	font-size: 0.875rem;
}

/* Tarjeta blanca del saldo, dentro del bloque de color */
.ov-inicio-saldo {
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	border-radius: 1rem;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.ov-inicio-importe {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ov-color-primario);
	font-variant-numeric: tabular-nums;
	/* El "$" y los decimales nunca se separan en dos renglones */
	white-space: nowrap;
}

/*
 * Entre 992 y 1199 px el menú lateral ocupa 270 px y la tarjeta del saldo
 * queda angosta: un importe grande ("$ 12.345.678,90") se salía y el bloque
 * de color, que tiene overflow: hidden, le cortaba los decimales. En ese
 * rango inicio.html le da media fila a cada columna (col-lg-6) y acá
 * se achica un poco la letra por las dudas.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.ov-inicio-importe {
		font-size: 2rem;
	}
}

.ov-inicio-boton {
	color: var(--ov-color-primario-texto);
	background-color: var(--ov-color-primario);
	border-color: var(--ov-color-primario);
	border-radius: 0.75rem;
	font-weight: 500;
	text-align: left; 
}

.ov-inicio-boton:hover,
.ov-inicio-boton:focus-visible {
	color: var(--ov-color-primario-texto);
	background-color: color-mix(in srgb, var(--ov-color-primario) 85%, #000);
	border-color: color-mix(in srgb, var(--ov-color-primario) 85%, #000);
}

/*
 * Botón deshabilitado (importe en cero). Bootstrap le pondría fondo
 * transparente y el texto claro quedaría invisible sobre la tarjeta blanca:
 * se muestra en gris.
 */
.ov-inicio-boton.disabled,
.ov-inicio-boton[aria-disabled="true"] {
	color: var(--bs-secondary-color);
	background-color: var(--bs-secondary-bg);
	border-color: var(--bs-border-color);
	opacity: 1;
}

/* Cortes por mantenimiento (y, con ov-inicio-avisos-deuda, por falta de pago) */
.ov-inicio-avisos {
	border-radius: 1rem;
	border-left: 0.35rem solid var(--bs-warning) !important;
}

.ov-inicio-aviso {
	display: flex;
	gap: 0.6rem;
	padding: 0.4rem 0;
	border-top: 1px solid var(--bs-border-color-translucent);
}

.ov-inicio-aviso:first-child {
	border-top: 0;
}

.ov-inicio-aviso .bi {
	color: var(--bs-warning-text-emphasis);
	flex-shrink: 0;
}

/* Cortes por falta de pago: el mismo bloque, en rojo */
.ov-inicio-avisos-deuda {
	border-left-color: var(--bs-danger) !important;
}

.ov-inicio-avisos-deuda .ov-inicio-aviso {
	border-top-color: var(--bs-danger-border-subtle);
}

.ov-inicio-avisos-deuda .ov-inicio-aviso > span:first-child .bi {
	color: var(--bs-danger-text-emphasis);
}

.ov-inicio-aviso-deuda {
	align-items: flex-start;
	padding: 0.6rem 0;
}

.ov-inicio-aviso-deuda .min-w-0 {
	min-width: 0;
}

/* Accesos directos */
.ov-inicio-acceso {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.1rem 1.1rem 1rem;
	border-radius: 1rem;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-decoration: none;
	border: 1px solid var(--bs-border-color-translucent);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ov-inicio-acceso:hover,
.ov-inicio-acceso:focus-visible {
	color: var(--bs-body-color);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--ov-color-primario) 35%, transparent);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--ov-color-primario) 15%, transparent);
}

.ov-inicio-acceso-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.75rem;
	border-radius: 0.8rem;
	font-size: 1.35rem;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 10%, transparent);
}

.ov-inicio-acceso-titulo {
	font-weight: 600;
	line-height: 1.25;
}

.ov-inicio-acceso-dato {
	margin-top: 0.2rem;
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
}

@media (prefers-reduced-motion: reduce) {
	.ov-inicio-acceso {
		transition: none;
	}
	.ov-inicio-acceso:hover,
	.ov-inicio-acceso:focus-visible {
		transform: none;
	}
}

@media (max-width: 575.98px) {
	.ov-inicio-hero {
		padding: 1.25rem;
	}
	.ov-inicio-importe {
		font-size: 1.9rem;
	}
	.ov-inicio-acceso {
		padding: 0.9rem;
	}
}


/* ==========================================================================
   Próximos cortes por mantenimiento (cortesprogramados/cp_publico.html)
   ========================================================================== */

.ov-cp {
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
	border-left: 0.35rem solid var(--bs-warning);
	border-radius: 1rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.ov-cp-cuerpo {
	display: flex;
	gap: 1.25rem;
	padding: 1.1rem 1.25rem;
}

/* Hoja de calendario con la fecha del corte */
.ov-cp-fecha {
	flex: 0 0 5.25rem;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0.8rem;
	overflow: hidden;
	border: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
	text-align: center;
	line-height: 1.1;
}

.ov-cp-fecha-mes {
	width: 100%;
	padding: 0.2rem 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ov-color-primario-texto);
	background: var(--ov-color-primario);
}

.ov-cp-fecha-dia {
	padding-top: 0.35rem;
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--ov-color-primario);
}

.ov-cp-fecha-semana {
	padding-bottom: 0.45rem;
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	text-transform: capitalize;
}

.ov-cp-detalle {
	flex: 1;
	min-width: 0;
}

.ov-cp-titulo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ov-cp-servicio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2rem;
	height: 2rem;
	border-radius: 0.6rem;
	font-size: 1rem;
	color: var(--bs-warning-text-emphasis);
	background: var(--bs-warning-bg-subtle);
}

.ov-cp-datos li {
	display: flex;
	gap: 0.5rem;
	padding: 0.15rem 0;
}

.ov-cp-datos .bi {
	color: var(--bs-secondary-color);
	flex-shrink: 0;
}

.ov-cp-descripcion {
	padding: 0.6rem 0.8rem;
	border-radius: 0.6rem;
	background: var(--bs-tertiary-bg);
	white-space: pre-line;
}

/* Imágenes y archivos adjuntos */
.ov-cp-archivos {
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--bs-border-color-translucent);
	background: var(--bs-tertiary-bg);
}

/*
 * Miniaturas de las imágenes (cp_publico y cp_list). En pantallas medianas
 * en adelante son cuadrados fijos de 80px; en el celular pasan a una
 * grilla de tres columnas que usa todo el ancho (ver más abajo).
 */
.ov-cp-galeria {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ov-cp-miniatura {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: cover;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a[data-ov-visor] {
	cursor: zoom-in;
}

a[data-ov-visor]:hover .ov-cp-miniatura,
a[data-ov-visor]:focus-visible .ov-cp-miniatura {
	transform: scale(1.04);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.ov-cp-adjunto {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.75rem;
	border-radius: 0.6rem;
	border: 1px solid var(--bs-border-color-translucent);
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-decoration: none;
	min-width: 0;
}

.ov-cp-adjunto + .ov-cp-adjunto,
li + li > .ov-cp-adjunto {
	margin-top: 0.4rem;
}

.ov-cp-adjunto:hover,
.ov-cp-adjunto:focus-visible {
	color: var(--bs-body-color);
	border-color: color-mix(in srgb, var(--ov-color-primario) 35%, transparent);
}

/* Corte cancelado: atenuado y con el título tachado */
.ov-cp-cancelado {
	border-left-color: var(--bs-danger);
}

.ov-cp-cancelado .ov-cp-cuerpo,
.ov-cp-cancelado .ov-cp-archivos {
	opacity: 0.6;
}

.ov-cp-cancelado .ov-cp-titulo > span:last-child {
	text-decoration: line-through;
}

/*
 * En el celular la hoja de calendario pasa arriba, como una fila
 * (MES · día · día de la semana), y el detalle usa todo el ancho.
 */
@media (max-width: 575.98px) {
	.ov-cp-cuerpo {
		flex-direction: column;
		gap: 0.75rem;
		padding: 0.9rem;
	}
	.ov-cp-fecha {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: stretch;
	}
	.ov-cp-fecha-mes {
		width: auto;
		display: flex;
		align-items: center;
		padding: 0 0.6rem;
	}
	.ov-cp-fecha-dia {
		padding: 0.2rem 0.5rem;
		font-size: 1.25rem;
	}
	.ov-cp-fecha-semana {
		display: flex;
		align-items: center;
		padding: 0 0.6rem 0 0;
		font-size: 0.85rem;
	}
	.ov-cp-archivos {
		padding: 0.75rem 0.9rem;
	}

	/* Miniaturas más grandes: tres por fila, cuadradas, a todo el ancho */
	.ov-cp-galeria {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ov-cp-miniatura {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.ov-cp-galeria-archivo {
		grid-column: 1 / -1;
		text-align: start;
	}
}


/* ==========================================================================
   Visor de imágenes (main.js, enlaces con data-ov-visor)

   Modal de Bootstrap con un carrusel: la imagen entra entera en la pantalla
   (object-fit: contain), con flechas y deslizamiento para pasar a la
   siguiente. En el celular ocupa toda la pantalla.
   ========================================================================== */

.ov-visor .modal-content {
	background: #111;
	color: #f5f5f5;
	border: 0;
}

.ov-visor .modal-header {
	border-bottom: 0;
	padding: 0.6rem 1rem;
}

.ov-visor .modal-body {
	padding: 0;
}

.ov-visor-imagen {
	display: block;
	width: 100%;
	height: 80vh;
	height: 80dvh;
	object-fit: contain;
	user-select: none;
}

.ov-visor .carousel-control-prev,
.ov-visor .carousel-control-next {
	width: 12%;
}

.ov-visor-contador {
	font-size: 0.9rem;
	opacity: 0.8;
}

@media (max-width: 575.98px) {
	.ov-visor-imagen {
		height: calc(100vh - 3.5rem);
		height: calc(100dvh - 3.5rem);
	}
}

/* ==========================================================================
   Medios de pago (medios_pago.html + contenido propio de la cooperativa)

   El marco (título y aviso de pago online) está en templates/medios_pago.html.
   El resto es HTML estático de cada cooperativa, en
   <coop.contenido.dir>/medios-pago/medios-pago.html (ver ContenidoCoopService).

   Las clases mp-* son el CONTRATO con ese HTML, "formato 1": se pueden
   agregar clases nuevas, pero no renombrar ni quitar las existentes sin subir
   el número de formato (MediosPagoController.FORMATO_CONTENIDO) y avisar a
   las cooperativas.
   ========================================================================== */

.mp-encabezado {
	margin-bottom: 1.5rem;
}

.mp-encabezado p {
	margin: 0;
	color: var(--bs-secondary-color);
}

/* Aviso de pago online (sólo con coop.modulos.pagos-online) */
.mp-online {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
	border-radius: 1rem;
	color: var(--ov-color-primario-texto);
	background: linear-gradient(135deg,
		var(--ov-color-primario) 0%,
		color-mix(in srgb, var(--ov-color-primario) 70%, #000) 100%);
}

.mp-online > .bi {
	font-size: 1.6rem;
}

.mp-online .btn {
	margin-left: auto;
	border-radius: 0.7rem;
	font-weight: 600;
	color: var(--ov-color-primario);
	background: var(--ov-color-primario-texto);
}

/* --- Secciones y grillas --- */

.mp-seccion {
	margin-bottom: 2rem;
}

.mp-titulo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

.mp-titulo .bi {
	font-size: 1rem;
	color: var(--ov-color-primario);
}

.mp-grilla {
	display: grid;
	gap: 0.75rem;
	align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}

.mp-grilla-compacta {
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

.mp-nota {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
}

/* --- Tarjeta de un medio ---
   Tres variantes con la misma clase:
     <details class="mp-medio">  se despliega con la explicación
     <a class="mp-medio">        lleva a un sitio externo
     <div class="mp-medio">      sólo informa */

.mp-medio {
	display: block;
	border: 1px solid var(--bs-border-color-translucent);
	border-radius: 1rem;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-decoration: none;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s, box-shadow 0.15s;
}

a.mp-medio,
div.mp-medio {
	padding: 1rem;
	text-align: center;
}

a.mp-medio:hover,
a.mp-medio:focus-visible,
details.mp-medio:hover,
details.mp-medio[open] {
	color: var(--bs-body-color);
	border-color: color-mix(in srgb, var(--ov-color-primario) 35%, transparent);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--ov-color-primario) 12%, transparent);
}

.mp-medio > summary {
	position: relative;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	column-gap: 0.9rem;
	align-items: center;
	min-height: 4.75rem;
	padding: 1rem 2.25rem 1rem 1rem;
	list-style: none;
	cursor: pointer;
}

.mp-medio > summary::-webkit-details-marker {
	display: none;
}

/* Flechita (bi-chevron-down) que gira al abrir */
.mp-medio > summary::after {
	content: "\F282";
	font-family: bootstrap-icons;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8rem;
	opacity: 0.5;
	transition: transform 0.2s;
}

.mp-medio[open] > summary::after {
	transform: translateY(-50%) rotate(180deg);
}

.mp-medio > summary .mp-logo {
	grid-row: span 2;
}

.mp-logo {
	display: block;
	width: 100%;
	height: 3rem;
	object-fit: contain;
}

a.mp-medio .mp-logo,
div.mp-medio .mp-logo {
	margin: 0 auto 0.6rem;
}

/* Para medios sin logo: un ícono de Bootstrap en un recuadro */
.mp-logo-icono {
	display: grid;
	place-items: center;
	border-radius: 0.6rem;
	font-size: 1.5rem;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 8%, transparent);
}

a.mp-medio .mp-logo-icono,
div.mp-medio .mp-logo-icono {
	width: 2.8rem;
}

.mp-nombre {
	display: block;
	font-weight: 600;
	line-height: 1.25;
}

.mp-bajada {
	display: block;
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
}

/* Explicación que aparece al desplegar */
.mp-como {
	margin: 0 1rem;
	padding: 0.85rem 0 1rem;
	border-top: 1px dashed var(--bs-border-color);
	font-size: 0.9rem;
}

.mp-como p {
	margin-bottom: 0.6rem;
}

.mp-datos {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	margin-bottom: 0.75rem;
}

.mp-datos dt {
	font-weight: 500;
	color: var(--bs-secondary-color);
}

.mp-datos dd {
	margin: 0;
}

.mp-pasos {
	padding-left: 1.2rem;
	margin-bottom: 0.75rem;
}

.mp-pasos li {
	margin-bottom: 0.35rem;
}

/* Adjunto: PDF, video o enlace externo (también sirve como <button>) */
.mp-adjunto {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	padding: 0.55rem 0.75rem;
	border: 0;
	border-radius: 0.6rem;
	font-size: 0.88rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 7%, transparent);
}

.mp-adjunto:hover,
.mp-adjunto:focus-visible {
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 13%, transparent);
}

.mp-adjunto small {
	margin-left: auto;
	font-weight: 400;
	white-space: nowrap;
	color: var(--bs-secondary-color);
}

.mp-adjunto .bi-filetype-pdf,
.mp-adjunto .bi-play-btn {
	color: #c62828;
}

/* --- Depósito o transferencia --- */

.mp-titular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2rem;
	padding: 0.85rem 1rem;
	margin-bottom: 0.75rem;
	border-radius: 1rem;
	background: var(--bs-tertiary-bg);
}

.mp-titular small {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

.mp-titular .mp-adjunto {
	margin: 0 0 0 auto;
}

.mp-cuentas {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.mp-cuentas {
		grid-template-columns: 1fr 1fr;
	}
}

.mp-cuenta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 1rem;
	border: 1px solid var(--bs-border-color-translucent);
	border-radius: 1rem;
	background: var(--bs-body-bg);
}

.mp-cuenta > span {
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
}

/* CBU y alias */
.mp-claves {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0.2rem 0.75rem;
	margin: 0.5rem 0 0;
}

.mp-claves dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

.mp-claves dd {
	margin: 0;
}

.mp-claves code {
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	color: var(--bs-body-color);
	font-variant-numeric: tabular-nums;
	word-break: break-all;
}

.mp-copiar-grupo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

/* Botón de copiar (lo maneja main.js con data-copiar) */
.mp-copiar {
	padding: 0.3rem 0.65rem;
	border: 0;
	border-radius: 0.5rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 7%, transparent);
}

.mp-copiar:hover {
	background: color-mix(in srgb, var(--ov-color-primario) 13%, transparent);
}

.mp-copiar.copiado {
	color: var(--bs-success-text-emphasis);
	background: var(--bs-success-bg-subtle);
}

/* Aviso de enviar el comprobante */
.mp-aviso {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.9rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--bs-warning-border-subtle);
	border-radius: 1rem;
	font-size: 0.9rem;
	color: var(--bs-warning-text-emphasis);
	background: var(--bs-warning-bg-subtle);
}

.mp-aviso > .bi {
	font-size: 1.3rem;
}

.mp-aviso-canales {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

.mp-aviso-canales a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--bs-warning-border-subtle);
	border-radius: 0.6rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--bs-body-color);
	background: var(--bs-body-bg);
}

.mp-aviso-canales .bi-whatsapp {
	color: #25d366;
}

.mp-aviso-canales .bi-envelope {
	color: var(--ov-color-primario);
}

/* Aviso que se ve cuando se está mostrando el contenido de ejemplo */
.mp-ejemplo {
	margin-bottom: 1.5rem;
}

/* Pantallas táctiles: todo lo que se toca llega a 44px de alto */
@media (max-width: 575.98px), (pointer: coarse) {
	.mp-medio > summary {
		min-height: 4.5rem;
	}

	.mp-adjunto,
	.mp-copiar,
	.mp-aviso-canales a {
		min-height: 44px;
	}

	.mp-titular .mp-adjunto {
		width: 100%;
		margin-left: 0;
	}
}

/* ==========================================================================
   Imprimir una sola sección de la página

   Un botón con data-imprimir (main.js) marca la sección a imprimir
   ([data-imprimible] más cercano) y a sus contenedores, y llama a
   window.print(). Todo lo demás se oculta sólo en la impresión.
   ========================================================================== */
@media print {
	body.ov-imprimiendo {
		padding: 0 !important;
	}

	body.ov-imprimiendo::before {
		display: none;
	}

	body.ov-imprimiendo *:not(.ov-imprimir-ruta):not(.ov-imprimir-esto):not(.ov-imprimir-esto *) {
		display: none !important;
	}

	body.ov-imprimiendo .ov-imprimir-ruta {
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		max-width: none !important;
		box-shadow: none !important;
		visibility: visible !important;
	}

	.ov-imprimir-esto .mp-copiar-grupo,
	.ov-imprimir-esto [data-imprimir] {
		display: none !important;
	}

	.ov-imprimir-esto .mp-cuenta,
	.ov-imprimir-esto .mp-aviso {
		break-inside: avoid;
	}
}


/* ==========================================================================
   Historial de reclamos (reclamos/reclamos_historial.html)
   ========================================================================== */

.ov-reclamos-encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.ov-reclamos-lista {
	display: grid;
	gap: 0.75rem;
}

/* --- Tarjeta --- */

.ov-reclamo {
	--ov-reclamo-color: var(--bs-warning);
	--ov-reclamo-fondo: var(--bs-warning-bg-subtle);
	--ov-reclamo-texto: var(--bs-warning-text-emphasis);

	display: flex;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
	border-left: 0.35rem solid var(--ov-reclamo-color);
	border-radius: 1rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
}

.ov-reclamo-paso2 {
	--ov-reclamo-color: var(--bs-primary);
	--ov-reclamo-fondo: var(--bs-primary-bg-subtle);
	--ov-reclamo-texto: var(--bs-primary-text-emphasis);
}

.ov-reclamo-paso3 {
	--ov-reclamo-color: var(--bs-success);
	--ov-reclamo-fondo: var(--bs-success-bg-subtle);
	--ov-reclamo-texto: var(--bs-success-text-emphasis);
}

.ov-reclamo-icono {
	flex: 0 0 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 0.8rem;
	font-size: 1.3rem;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 10%, transparent);
}

.ov-reclamo-cuerpo {
	flex: 1;
	min-width: 0;
}

.ov-reclamo-cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.ov-reclamo-titulo {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.ov-reclamo-estado {
	flex-shrink: 0;
	padding: 0.2rem 0.65rem;
	border-radius: 2rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--ov-reclamo-texto);
	background: var(--ov-reclamo-fondo);
}

.ov-reclamo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
}

.ov-reclamo-meta > span:not(:last-child)::after {
	content: "·";
	margin: 0 0.45rem;
}

.ov-reclamo-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
}

.ov-reclamo-tipo,
.ov-reclamo-lugar {
	padding: 0.1rem 0.55rem;
	border-radius: 0.4rem;
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	background: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color-translucent);
}

/* Descripción: dos renglones y "Ver más" */
.ov-reclamo-mensaje {
	margin: 0.6rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: pre-line;
}

.ov-reclamo.abierto .ov-reclamo-mensaje {
	display: block;
}

.ov-reclamo-vermas {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.85rem;
	color: var(--ov-color-primario);
	text-decoration: underline;
}

/* --- Avance: Recibido / En proceso / Resuelto --- */

.ov-reclamo-avance {
	display: flex;
	gap: 0.35rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.72rem;
	color: var(--bs-secondary-color);
}

.ov-reclamo-avance li {
	flex: 1;
	padding-top: 0.35rem;
	border-top: 0.25rem solid var(--bs-border-color);
}

.ov-reclamo-avance li.hecho {
	border-top-color: var(--ov-reclamo-color);
	color: var(--bs-body-color);
	font-weight: 500;
}

/* --- Sin reclamos --- */

.ov-reclamos-vacio {
	padding: 3rem 1rem;
	text-align: center;
	background: var(--bs-body-bg);
	border: 1px dashed var(--bs-border-color);
	border-radius: 1rem;
}

.ov-reclamos-vacio > .bi {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 2.5rem;
	color: var(--ov-color-primario);
}

/* --- Botón flotante en el celular, arriba del pie de página --- */

.ov-reclamos-fab {
	position: fixed;
	right: 1.25rem;
	bottom: calc(var(--ov-footer-alto) + 1.25rem + env(safe-area-inset-bottom));
	z-index: 1030;
	width: 3.5rem;
	height: 3.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 1.5rem;
	color: var(--ov-color-primario-texto);
	background: var(--ov-color-primario);
	box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--ov-color-primario) 40%, transparent);
}

.ov-reclamos-fab:hover {
	color: var(--ov-color-primario-texto);
}

@media (max-width: 575.98px) {
	.ov-reclamo {
		gap: 0.75rem;
		padding: 0.9rem 1rem;
	}

	.ov-reclamo-icono {
		flex-basis: 2.25rem;
		height: 2.25rem;
		font-size: 1.1rem;
	}

	/* Deja lugar al botón flotante al final del listado */
	.ov-reclamos {
		padding-bottom: 4.5rem;
	}
}


/* ==========================================================================
   Declaración jurada de sepelio (ddjjsepelio.html)
   ========================================================================== */

.ov-ddjj-encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* --- Resumen, con el color de la cooperativa --- */

.ov-ddjj-resumen {
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
	border-radius: 1rem;
	color: var(--ov-color-primario-texto);
	background: linear-gradient(135deg,
		var(--ov-color-primario) 0%,
		color-mix(in srgb, var(--ov-color-primario) 70%, #000) 100%);
	box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--ov-color-primario) 20%, transparent);
}

.ov-ddjj-resumen-titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1.1rem;
	font-size: 0.9rem;
}

.ov-ddjj-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.75rem;
	border-radius: 2rem;
	background: rgba(255, 255, 255, 0.15);
}

.ov-ddjj-resumen-datos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 2.5rem;
}

.ov-ddjj-rotulo {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.7;
}

.ov-ddjj-valor {
	font-size: 1.05rem;
	font-weight: 500;
}

.ov-ddjj-enlace {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}

.ov-ddjj-enlace:hover {
	color: inherit;
	border-bottom-style: solid;
}

.ov-ddjj-total {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.ov-ddjj-total-numero {
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
}

/* --- Grupo familiar --- */

.ov-ddjj-seccion {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

.ov-ddjj-seccion .bi {
	font-size: 1rem;
	color: var(--ov-color-primario);
}

.ov-ddjj-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: 0.75rem;
}

.ov-ddjj-persona {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.9rem 1rem;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
	border-radius: 1rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
}

.ov-ddjj-iniciales {
	flex: 0 0 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 10%, transparent);
}

.ov-ddjj-nombre {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ov-ddjj-doc {
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
}

.ov-ddjj-parentesco {
	flex-shrink: 0;
	align-self: flex-start;
	padding: 0.15rem 0.6rem;
	border-radius: 2rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 10%, transparent);
}

/* --- Aviso y estado vacío --- */

.ov-ddjj-aviso {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
	padding: 0.9rem 1.1rem;
	border-radius: 0.8rem;
	font-size: 0.9rem;
	background: var(--bs-info-bg-subtle);
	color: var(--bs-info-text-emphasis);
}

.ov-ddjj-aviso > .bi {
	font-size: 1.2rem;
}

.ov-ddjj-vacio {
	padding: 3rem 1rem;
	text-align: center;
	background: var(--bs-body-bg);
	border: 1px dashed var(--bs-border-color);
	border-radius: 1rem;
}

.ov-ddjj-vacio > .bi {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 2.5rem;
	color: var(--ov-color-primario);
}

@media (max-width: 575.98px) {
	.ov-ddjj-resumen {
		padding: 1.1rem 1.15rem;
	}

	.ov-ddjj-total {
		margin-left: 0;
		width: 100%;
		padding-top: 0.85rem;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
}

/* Al imprimir, el resumen sale en blanco y negro para ahorrar tinta */
@media print {
	.ov-ddjj-resumen {
		color: #000;
		background: none;
		border: 1px solid #999;
		box-shadow: none;
	}

	.ov-ddjj-chip {
		background: none;
		padding-left: 0;
	}

	.ov-ddjj-enlace {
		border: 0;
	}

	.ov-ddjj-persona {
		box-shadow: none;
		break-inside: avoid;
	}
}


/* ==========================================================================
   Historial de facturación (historial.html)
   ========================================================================== */

.ov-hist-encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

/* --- Listado --- */

.ov-hist-lista {
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
	border-radius: 1rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.ov-hist-mes {
	margin: 0;
	padding: 0.55rem 1.25rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
	background: var(--bs-tertiary-bg);
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

.ov-hist-item + .ov-hist-mes {
	border-top: 1px solid var(--bs-border-color-translucent);
}

/*
 * Renglón: ícono | comprobante | importe | estado | acciones.
 * En el celular pasa a dos líneas (ver más abajo).
 */
.ov-hist-item {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) 8.5rem 11rem 6.5rem;
	grid-template-areas: "icono comprob importe estado acciones";
	align-items: center;
	gap: 0.25rem 1rem;
	padding: 0.8rem 1.25rem;
}

.ov-hist-item + .ov-hist-item {
	border-top: 1px solid var(--bs-border-color-translucent);
}

.ov-hist-item:hover {
	background: color-mix(in srgb, var(--ov-color-primario) 4%, transparent);
}

.ov-hist-icono {
	grid-area: icono;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 0.7rem;
	font-size: 1.15rem;
	color: var(--ov-color-primario);
	background: color-mix(in srgb, var(--ov-color-primario) 10%, transparent);
}

.ov-hist-comprob {
	grid-area: comprob;
	min-width: 0;
}

.ov-hist-nro {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ov-hist-meta {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--bs-secondary-color);
}

.ov-hist-meta > span:not(:last-child)::after {
	content: "·";
	margin: 0 0.4rem;
}

.ov-hist-importe {
	grid-area: importe;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ov-hist-estado {
	grid-area: estado;
}

.ov-hist-acciones {
	grid-area: acciones;
	display: flex;
	justify-content: flex-end;
	gap: 0.35rem;
}

/* --- Estado --- */

.ov-hist-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: 2rem;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.ov-hist-pagada .ov-hist-pill {
	color: var(--bs-success-text-emphasis);
	background: var(--bs-success-bg-subtle);
}

.ov-hist-vencida .ov-hist-pill {
	color: var(--bs-danger-text-emphasis);
	background: var(--bs-danger-bg-subtle);
}

.ov-hist-apagar .ov-hist-pill {
	color: var(--bs-warning-text-emphasis);
	background: var(--bs-warning-bg-subtle);
}

.ov-hist-vencida .ov-hist-importe {
	color: var(--bs-danger-text-emphasis);
}

/* --- Vacío y nota --- */

.ov-hist-vacio {
	padding: 3rem 1rem;
	text-align: center;
	background: var(--bs-body-bg);
	border: 1px dashed var(--bs-border-color);
	border-radius: 1rem;
}

.ov-hist-vacio > .bi {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 2.5rem;
	color: var(--ov-color-primario);
}

.ov-hist-nota {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
}

/* --- Pantallas medianas: el estado baja debajo del comprobante --- */
@media (max-width: 1199.98px) {
	.ov-hist-item {
		grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
		grid-template-areas:
			"icono comprob importe acciones"
			"icono estado  importe acciones";
	}

	.ov-hist-estado {
		margin-top: 0.15rem;
	}
}

/* --- Celular: dos líneas, importe arriba a la derecha --- */
@media (max-width: 575.98px) {
	.ov-hist-item {
		grid-template-columns: 2.25rem minmax(0, 1fr) auto;
		grid-template-areas:
			"icono comprob importe"
			"icono estado  acciones";
		padding: 0.8rem 1rem;
		column-gap: 0.75rem;
	}

	.ov-hist-icono {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 1rem;
		align-self: start;
	}

	.ov-hist-importe {
		align-self: start;
	}

	.ov-hist-mes {
		padding: 0.5rem 1rem;
	}

	/* El rótulo del mes ya dice cuándo se emitió: en el celular se ahorra el renglón */
	.ov-hist-emitida {
		display: none;
	}
}

/* ==========================================================================
   Noticias
   - Aviso azul "Novedades" de la pantalla de inicio (inicio.html),
     siempre debajo de los cortes.
   - Tarjetas de noticias/nt_publico.html: las mismas de los cortes (.ov-cp),
     con el borde y la hoja de calendario en azul.
   ========================================================================== */

/* Inicio: el mismo bloque de avisos, en azul */
.ov-inicio-avisos-noticias {
	border-left-color: var(--bs-primary) !important;
}

.ov-inicio-avisos-noticias .ov-inicio-aviso {
	align-items: flex-start;
	padding: 0.6rem 0;
	border-top-color: var(--bs-primary-border-subtle);
}

.ov-inicio-avisos-noticias .ov-inicio-aviso > .bi {
	color: var(--bs-primary);
	margin-top: 0.1rem;
}

.ov-inicio-avisos-noticias .min-w-0 {
	min-width: 0;
}

/* Bajada de la noticia en el inicio: dos renglones como máximo */
.ov-nt-bajada {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Tarjeta de noticia (Novedades y gestión): la del corte, con borde azul */
.ov-cp.ov-nt {
	border-left-color: var(--bs-primary);
}

.ov-nt .ov-cp-fecha-mes {
	background: var(--bs-primary);
	color: #fff;
}

.ov-nt .ov-cp-fecha-dia {
	color: var(--bs-primary-text-emphasis);
}

.ov-nt .ov-cp-servicio {
	color: var(--bs-primary);
	background: var(--bs-primary-bg-subtle);
}

.ov-nt-texto {
	white-space: pre-line;
}


/* ==========================================================================
   Pagos pendientes (inicio personalizado de Clyfer, en la carpeta de la
   cooperativa: inicio/inicio.html)

   Quedan acá, y no en el archivo de la cooperativa, para que cualquier
   inicio personalizado pueda usarlos sin escribir CSS.

   Segundo bloque de color, debajo del saludo: una tarjeta blanca por
   concepto (facturas y, si está habilitado, fondo de obras), cada una con su
   rótulo, su importe y su botón. Toma el fondo, los círculos y el color de
   .ov-inicio-hero; acá sólo va lo propio.

   La disposición de cada tarjeta depende de SU ancho, no del de la pantalla
   (container queries): con el menú lateral, una pantalla de 1100 px deja
   tarjetas angostas.
     - 420 px o más: en una fila, rótulo e importe a la izquierda y el botón
       compacto a la derecha.
     - menos: el botón abajo, a todo el ancho de la tarjeta.
     - menos de 240 px (celular, dos tarjetas lado a lado): importe más chico
       y "Ver comprobantes" pasa a "Ver detalle".
   ========================================================================== */

.ov-inicio-saldos {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Rótulo del bloque: chico y sin negrita, como "Oficina Virtual" del saludo */
.ov-inicio-saldos-encabezado {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.85;
}

/* Cada columna es el contenedor que miden las container queries */
.ov-inicio-saldos-col {
	container-type: inline-size;
}

.ov-inicio-saldos-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border-radius: 1rem;
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

.ov-inicio-saldos-dato {
	min-width: 0;
}

.ov-inicio-saldos-titulo {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	color: var(--bs-secondary-color);
}

.ov-inicio-saldos-importe {
	margin-top: 0.15rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ov-color-primario);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Botón: abajo y a todo el ancho mientras la tarjeta es angosta */
.ov-inicio-saldos-card .ov-inicio-boton {
	margin-top: auto;
	width: 100%;
	text-align: center;
	font-weight: 400;
}

/* Texto corto del botón ("Ver detalle"): sólo en tarjetas muy angostas */
.ov-inicio-saldos-corto {
	display: none;
}

@container (min-width: 420px) {
	.ov-inicio-saldos-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.ov-inicio-saldos-card .ov-inicio-boton {
		width: auto;
		margin-top: 0;
		padding-left: 1.1rem;
		padding-right: 1.1rem;
		white-space: nowrap;
		flex-shrink: 0;
	}
}

@container (max-width: 239.98px) {
	.ov-inicio-saldos-card {
		padding: 0.9rem 1rem;
		gap: 0.75rem;
	}

	.ov-inicio-saldos-importe {
		font-size: 1.3rem;
	}

	.ov-inicio-saldos-card .ov-inicio-boton {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		white-space: nowrap;
	}

	.ov-inicio-saldos-largo {
		display: none;
	}

	.ov-inicio-saldos-corto {
		display: inline;
	}
}

@media (max-width: 575.98px) {
	.ov-inicio-saldos {
		padding: 1rem 1rem 1.25rem;
	}
}


/*
 * Importes largos del inicio ("$ 100.000,00" en adelante, clase
 * ov-importe-largo que pone la plantilla): la letra se ajusta al ancho de la
 * tarjeta (cqi = 1 % del ancho del contenedor) entre un mínimo y el tamaño de
 * siempre, así "$ 10.000.000,00" entra también en el celular con dos
 * tarjetas lado a lado. Los importes cortos no cambian.
 */
.ov-inicio-saldo {
	container-type: inline-size;
}

.ov-inicio-importe.ov-importe-largo {
	font-size: clamp(1.4rem, 12cqi, 2.25rem);
}

.ov-inicio-saldos-importe.ov-importe-largo {
	/*
	font-size: clamp(0.9rem, 9cqi, 1.75rem);
	*/
	font-size: clamp(1.1rem, 10cqi, 2rem);
}