/* ==========================================================================
   Accesibilidad — WCAG 2.1 nivel AAA
   ==========================================================================

   Capa de correcciones sobre el tema comprado (modern.css). Se carga AL FINAL,
   así que gana por orden salvo donde el tema usa !important — ahí se repite.

   Por qué existe este archivo en lugar de editar modern.css: modern.css es un
   tema de terceros de ~586 KB que se reemplaza al actualizarlo. Todo lo que se
   corrija ahí se pierde en la siguiente versión; aquí sobrevive y además queda
   en un solo lugar auditable.

   Los valores NO son estéticos, son medidos. Cada color lleva su razón de
   contraste calculada contra el fondo real sobre el que se pinta:
   blanco (#fff, las tarjetas) y el fondo de página (#f4f7fc).

   Lo que traía el tema y estaba mal:

     .text-muted   #6c757d s/blanco  4.69:1  → AA, reprueba AAA (pide 7:1)
     a, .btn-primary #3b7ddd s/blanco 4.07:1 → reprueba AAA
     .alert-success blanco s/#28a745  3.13:1 → REPRUEBA HASTA AA
     .alert-warning blanco s/#fd7e14  2.57:1 → REPRUEBA HASTA AA
     .alert-danger  blanco s/#dc3545  4.53:1 → reprueba AAA
     small, .small  80% de 15px = 12px       → el motivo original del reporte

   Criterios que atiende: 1.4.3, 1.4.6, 1.4.8, 1.4.11, 1.4.12, 2.4.1, 2.4.7,
   2.5.5, 2.3.3.
   ========================================================================== */

:root {
	/* Texto secundario. #6c757d daba 4.69:1; este da 7.78:1 sobre blanco y
	   7.24:1 sobre el fondo de página, así que cumple AAA en ambos. */
	--a11y-muted: #4d535a;

	/* Azul de marca oscurecido. El #3b7ddd original daba 4.07:1 — suficiente
	   para texto grande y nada más. Este da 8.33:1 sobre blanco. */
	--a11y-primary: #0f4c9a;
	--a11y-primary-hover: #0b3a76;

	--a11y-secondary: #54307f; /* blanco encima: 9.97:1 */
	--a11y-success: #0f5132; /* blanco encima: 9.36:1 */
	--a11y-danger: #8a1220; /* blanco encima: 9.60:1 */
	--a11y-warning-text: #6b4000; /* 8.90:1 sobre blanco */

	/* Alertas. El tema las pintaba en color sólido con texto blanco, que es de
	   donde salían los dos reprobados de AA. Se pasan a fondo tenue con texto
	   oscuro: el patrón estándar, y todos quedan por arriba de 9:1. */
	--a11y-alert-danger-bg: #fdecee;
	--a11y-alert-danger-fg: #6e0f1a; /* 10.54:1 */
	--a11y-alert-warning-bg: #fff4e3;
	--a11y-alert-warning-fg: #5c3600; /* 9.73:1 */
	--a11y-alert-success-bg: #e7f5ec;
	--a11y-alert-success-fg: #0c4128; /* 10.36:1 */
	--a11y-alert-info-bg: #e9f1fb;
	--a11y-alert-info-fg: #0d3a75; /* 9.81:1 */
	--a11y-alert-secondary-bg: #f0eafa;
	--a11y-alert-secondary-fg: #3a2360; /* 11.23:1 */

	/* 2.5.5 Target Size (Enhanced): 44×44 CSS px. El tema deja los botones en
	   ~36px y los campos en ~38px. */
	--a11y-target: 44px;
}

/* --------------------------------------------------------------------------
   2.4.1 Bypass Blocks — saltar al contenido
   El enlace existe siempre; solo es invisible hasta que recibe el foco, que es
   como un usuario de teclado lo encuentra.
   -------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 0.75rem 1.25rem;
	background: #ffffff;
	color: var(--a11y-primary);
	font-size: 1rem;
	font-weight: 600;
	border: 2px solid var(--a11y-primary);
	border-radius: 0 0 0.3rem 0;
}

.skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   2.4.7 Focus Visible + 1.4.11 Non-text Contrast
   El tema apaga el outline y lo sustituye por un box-shadow muy tenue, que
   sobre fondo claro es prácticamente invisible. Un anillo sólido de 3px con
   8.33:1 contra el blanco se ve sin ambigüedad.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.list-group-item-action:focus-visible,
.dropdown-item:focus-visible,
.close:focus-visible {
	outline: 3px solid var(--a11y-primary) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Los navegadores que aún no soportan :focus-visible no se quedan sin anillo. */
.no-focus-visible-support a:focus,
.no-focus-visible-support button:focus {
	outline: 3px solid var(--a11y-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   1.4.6 Contrast (Enhanced) — global
   Aplica también al dashboard, no solo a las pantallas públicas: son colores,
   no medidas, así que no mueven ninguna caja.
   -------------------------------------------------------------------------- */

/* El tema declara .text-muted con !important, así que hay que repetirlo. */
.text-muted {
	color: var(--a11y-muted) !important;
}

/* El pie del dashboard va sobre .wrapper, que es negro. Ahí un gris oscuro es
   peor, no mejor: al bajar .text-muted de #6c757d a #4d535a para cumplir AAA
   sobre blanco (4.69 → 7.78) el pie pasó de 4.48:1 a 2.70:1. Un mismo token no
   puede servir para fondo claro y fondo oscuro, así que el pie lleva el suyo:
   #9aa1a9 da 8.04:1 sobre negro. */
.footer .text-muted,
.footer a.text-muted {
	color: #9aa1a9 !important;
}

a {
	color: var(--a11y-primary);
}

a:hover,
a:focus {
	color: var(--a11y-primary-hover);
}

/* 1.4.1 Use of Color. Un enlace dentro de un párrafo no puede distinguirse solo
   por el color: quien no percibe la diferencia de tono no ve que hay un enlace.
   Subrayarlo es la única señal que no depende de la vista del color.

   Acotado a texto corrido: los enlaces que ya se ven como botones, las pestañas
   del menú y los elementos de lista tienen forma propia y no lo necesitan. */
.public-page p a,
.public-page li a,
.public-page small a,
.public-page label a,
.public-page .form-text a,
.public-page .text-center > a:not(.btn),
.alert a {
	text-decoration: underline;
}

.public-page .btn,
.public-page .nav-link,
.public-page .list-group-item-action {
	text-decoration: none;
}

.text-primary {
	color: var(--a11y-primary) !important;
}

.text-success {
	color: var(--a11y-success) !important;
}

.text-danger {
	color: var(--a11y-danger) !important;
}

.text-warning {
	color: var(--a11y-warning-text) !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--a11y-primary);
	border-color: var(--a11y-primary);
	color: #ffffff;
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover {
	background-color: var(--a11y-primary-hover);
	border-color: var(--a11y-primary-hover);
	color: #ffffff;
}

.btn-secondary,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-secondary:hover {
	background-color: var(--a11y-secondary);
	border-color: var(--a11y-secondary);
	color: #ffffff;
}

.btn-outline-primary {
	color: var(--a11y-primary);
	border-color: var(--a11y-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background-color: var(--a11y-primary);
	border-color: var(--a11y-primary);
	color: #ffffff;
}

.btn-link {
	color: var(--a11y-primary);
}

/* .card-actions a (0,1,1) pisa el color de .btn-primary (0,1,0): dejaba el
   texto del boton en 1.08:1. Red de seguridad para los <a class="btn">. */
.card-actions a.btn-primary,
.card-actions a.btn-secondary,
.card-actions a.btn-success,
.card-actions a.btn-danger,
.card-actions a.btn-dark {
	color: #ffffff;
}

.card-actions a.btn-warning,
.card-actions a.btn-info,
.card-actions a.btn-light,
.card-actions a.btn-tertiary {
	color: #000000;
}

.card-actions a.btn-outline-primary {
	color: var(--a11y-primary);
}

/* .btn-link.text-muted en el pie del modal de suscripción: el texto gris sobre
   blanco necesitaba el mismo 7:1 que el resto. */
.btn-link.text-muted {
	color: var(--a11y-muted) !important;
}

/* Acciones de fila: icono sin fondo, como en Pagos/Presupuestos/Insumos.
   Hace falta la clase porque JS necesita <button> en algunos sitios y un
   <button> sin estilo arrastra fondo y borde del navegador. */
.action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 2.5.5 Target Size: en una tabla es donde más falta hace, porque los
	   iconos quedan pegados unos a otros. */
	min-width: var(--a11y-target);
	min-height: var(--a11y-target);
	padding: 0;
	background: none;
	border: 0;
	line-height: 1;
	text-decoration: none;
}


.action-icon:hover,
.action-icon:focus-visible {
	background-color: rgba(0, 0, 0, 0.07);
	border-radius: 0.25rem;
	text-decoration: none;
}

/* Colores de los iconos de acción. 1.4.11 pide 3:1 para elementos no
   textuales; el verde del tema (#28a745) daba 3.13:1, al filo. Estos son los
   mismos tokens que el resto del archivo. */
.green-item,
i.align-middle.fa-fw.fa-trash-alt.green-item {
	color: var(--a11y-success) !important;
}

.red-item,
.delete-item,
i.align-middle.fa-fw.fa-trash-alt.delete-item,
i.align-middle.fas.fa-fw.fa-trash.delete-item {
	color: var(--a11y-danger) !important;
}

/* Insignias. El pill del plan en la barra superior es de los elementos más
   pequeños de la app; 80% de 15px = 12px en mayúsculas se lee mal. */
.badge {
	font-size: 0.8125rem;
	padding: 0.35em 0.6em;
}

.badge-primary {
	background-color: var(--a11y-primary);
	color: #ffffff;
}

.badge-secondary {
	background-color: var(--a11y-secondary);
	color: #ffffff;
}

.badge-success {
	background-color: var(--a11y-success);
	color: #ffffff;
}

.badge-danger {
	background-color: var(--a11y-danger);
	color: #ffffff;
}

/* El tema declara `.badge { color: #fff }` (modern.css:11843) DESPUÉS de las
   variantes, así que ese blanco pisa el `color: #212529` que .badge-warning y
   .badge-light traen escrito. Es exactamente el mismo error que `.alert
   { color: #fff }` unas líneas más arriba en el mismo archivo.

   Sobre un fondo claro el blanco no tiene ninguna posibilidad:

     .badge-warning    blanco s/#fd7e14 = 2.57:1   (101 nodos en el dashboard)
     .badge-info       blanco s/#20c997 = 2.13:1
     .badge-tertiary   blanco s/#669ae5 = 2.87:1
     .badge-light      blanco s/#e9ecef = 1.19:1

   Se devuelve el texto oscuro conservando el color de fondo, que es lo que
   distingue una insignia de otra. Negro y no un gris oscuro porque el caso más
   ajustado (.badge-tertiary) da 7.32:1 con negro y ya no llega a 7:1 con
   #0d0d0d — y en un texto tan pequeño y en mayúsculas, el contraste extra se
   agradece.

     negro s/#fd7e14 = 8.17:1   negro s/#20c997 = 9.86:1
     negro s/#669ae5 = 7.32:1   negro s/#e9ecef = 17.71:1 */
.badge-warning,
.badge-info,
.badge-tertiary,
.badge-light,
a.badge-warning:focus,
a.badge-warning:hover,
a.badge-info:focus,
a.badge-info:hover {
	color: #000000;
}

/* Rellenos de barra de progreso (modal de suscripción). 1.4.11 pide 3:1 contra
   el riel #e9ecef; estos quedan por arriba de 7:1. */
.bg-primary {
	background-color: var(--a11y-primary) !important;
}

.bg-success {
	background-color: var(--a11y-success) !important;
}

.bg-danger {
	background-color: var(--a11y-danger) !important;
}

/* --------------------------------------------------------------------------
   Alertas — reconstruidas
   El tema las dejaba en color sólido con texto blanco (.alert { color:#fff })
   y de ahí salían los dos reprobados de AA. Fondo tenue + texto oscuro + barra
   lateral: el color deja de ser el único portador del mensaje (1.4.1).
   -------------------------------------------------------------------------- */
.alert {
	color: inherit;
	border: 0 solid transparent;
	border-left-width: 4px;
	border-left-style: solid;
}

.alert .alert-message {
	padding: 0.95rem;
}

/* Sin .alert-message el tema no da padding; estas pantallas usan alertas
   simples con el texto directo, así que se lo damos aquí. */
.alert:not(:has(.alert-message)) {
	padding: 0.95rem;
}

.alert-danger {
	background-color: var(--a11y-alert-danger-bg);
	color: var(--a11y-alert-danger-fg);
	border-left-color: var(--a11y-alert-danger-fg);
}

.alert-warning {
	background-color: var(--a11y-alert-warning-bg);
	color: var(--a11y-alert-warning-fg);
	border-left-color: var(--a11y-alert-warning-fg);
}

.alert-success {
	background-color: var(--a11y-alert-success-bg);
	color: var(--a11y-alert-success-fg);
	border-left-color: var(--a11y-alert-success-fg);
}

.alert-info,
.alert-primary {
	background-color: var(--a11y-alert-info-bg);
	color: var(--a11y-alert-info-fg);
	border-left-color: var(--a11y-alert-info-fg);
}

.alert-secondary {
	background-color: var(--a11y-alert-secondary-bg);
	color: var(--a11y-alert-secondary-fg);
	border-left-color: var(--a11y-alert-secondary-fg);
}

.alert a,
.alert .alert-link {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

.alert .close {
	color: inherit;
	text-shadow: none;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Escala tipográfica de las pantallas públicas
   Acotado a .public-page a propósito. El dashboard es una interfaz densa de
   tablas y subir su base a 16px reacomodaría pantallas que nadie pidió tocar;
   las pantallas públicas son texto que se lee una vez y con calma, y son las
   que se reportaron ilegibles.
   -------------------------------------------------------------------------- */
.public-page {
	/* El tema deja el body en 0.9375rem (15px). */
	font-size: 1rem;
	line-height: 1.5;
}

/* 12px era el reporte original. Ningún texto baja de 14px. */
.public-page small,
.public-page .small,
.public-page .form-text {
	font-size: 0.875rem;
	line-height: 1.5;
}

.public-page .lead {
	font-size: 1.25rem;
	line-height: 1.5;
}

.public-page .badge {
	font-size: 0.875rem;
}

/* 1.4.8 Visual Presentation: ancho máximo ~80 caracteres y sin justificar.
   Solo al texto corrido; las tarjetas y rejillas conservan su ancho. */
.public-page p,
.public-page li {
	max-width: 80ch;
	text-align: left;
}

/* 1.4.8 pide separación entre párrafos de al menos 1.5× el interlineado.
   Interlineado 1.5em → 2.25em. Se aplica solo entre párrafos consecutivos
   para no abrir huecos donde hay un único párrafo. */
.public-page p + p {
	margin-top: 2.25em;
}

.public-page .text-center p,
.public-page .text-center li {
	margin-left: auto;
	margin-right: auto;
}

/* Los encabezados del tema (h5/h6 = 0.9375rem) quedan por debajo del texto
   normal, que los vuelve indistinguibles de un párrafo. */
.public-page h1,
.public-page .h1 {
	font-size: 2rem;
	line-height: 1.3;
}

.public-page h2,
.public-page .h2 {
	font-size: 1.625rem;
	line-height: 1.3;
}

.public-page h3,
.public-page .h3 {
	font-size: 1.375rem;
	line-height: 1.35;
}

.public-page h4,
.public-page .h4 {
	font-size: 1.1875rem;
	line-height: 1.4;
}

.public-page h5,
.public-page .h5,
.public-page h6,
.public-page .h6 {
	font-size: 1.0625rem;
	line-height: 1.4;
}

/* 1.4.12 Text Spacing: el contenido tiene que aguantar que el usuario fuerce
   su propio espaciado sin que se corte nada. */
.public-page,
.public-page * {
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Título de pantalla del dashboard (.header-title)
   El tema lo deja en 1.64063rem; a 2rem el h1 de cada pantalla queda claramente
   por encima del resto de la jerarquía. Va fuera de .public-page a propósito:
   la clase solo se usa en las plantillas del dashboard.
   -------------------------------------------------------------------------- */
.header-title {
	font-size: 2rem;
	line-height: 1.3;
}

/* 2.5.5 Target Size: el tema deja los botones en ~33px. .btn-link queda fuera
   porque va dentro de texto corrido y estirarlo abre huecos en el párrafo. */
.btn:not(.btn-link) {
	min-height: var(--a11y-target);
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-sm:not(.btn-link) {
	font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   2.5.5 Target Size (Enhanced) — 44×44 CSS px
   -------------------------------------------------------------------------- */
.public-page .btn,
.public-page .btn-lg {
	min-height: var(--a11y-target);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 1.0625rem;
}

.public-page .btn-link {
	/* Un botón-enlace dentro de un párrafo no debe forzar 44px de alto de caja,
	   pero sí necesita área de toque. */
	min-height: var(--a11y-target);
	display: inline-flex;
	align-items: center;
}

.public-page .form-control,
.public-page .form-control-lg {
	min-height: var(--a11y-target);
	height: auto;
	font-size: 1.0625rem;
	padding: 0.5rem 0.75rem;
}

.public-page textarea.form-control {
	min-height: calc(var(--a11y-target) * 2);
}

/* El sufijo del dominio en el registro. El gris del tema (#495057) sobre el
   fondo del addon (#e9ecef) da 6.89:1 — a una centésima de AAA, que en la
   práctica es reprobado. */
.public-page .input-group-text {
	font-size: 1rem;
	padding: 0.5rem 0.75rem;
	color: #3f444a;
	border-color: #6b7280;
}

.public-page .list-group-item-action {
	min-height: var(--a11y-target);
	padding: 0.85rem 1.25rem;
}

/* La casilla "Recordar mi sesión": el cuadro del tema mide ~16px, muy por
   debajo del objetivo. Se agranda el área sensible sin deformar el dibujo. */
.public-page .custom-control {
	min-height: var(--a11y-target);
	display: flex;
	align-items: center;
}

.public-page .custom-control-label {
	font-size: 1rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* Borde de campo con 4.83:1 contra el blanco (1.4.11 pide 3:1). El gris del
   tema se pierde sobre la tarjeta blanca. */
.public-page .form-control {
	border-color: #6b7280;
}

/* El placeholder NUNCA sustituye a la etiqueta, pero cuando existe tiene que
   leerse. */
.public-page .form-control::placeholder {
	color: var(--a11y-muted);
	opacity: 1;
}

/* Campo en error: 3.3.1 pide identificarlo, y no solo con color. */
.public-page .form-control[aria-invalid='true'] {
	border-color: var(--a11y-danger);
	border-width: 2px;
}

/* --------------------------------------------------------------------------
   2.3.3 Animation from Interactions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Utilidad: visible solo para lectores de pantalla.
   El tema trae .sr-only de Bootstrap 4; esta es la variante que se revela al
   recibir foco, para el enlace de salto.
   -------------------------------------------------------------------------- */
.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}