/**
 * Componentes de Accesibilidad - WCAG 2.1 AA
 * Área Pública (Frontend/Shortcodes)
 *
 * @package    GotoSend_Tasas_Cuba
 * @subpackage GotoSend_Tasas_Cuba/public/css
 * @version    1.0.0
 * 
 * Cumplimiento WCAG 2.1 Nivel AA:
 * - 1.4.3 Contraste (Mínimo) - AA
 * - 2.1.1 Teclado - A
 * - 2.4.7 Foco Visible - AA
 * - 2.5.5 Tamaño del Objetivo - AAA (44x44px)
 * - 4.1.3 Mensajes de Estado - AA
 */

/* ==========================================================================
   SKIP LINKS - WCAG 2.4.1 (A)
   Permite a usuarios de teclado saltar contenido repetitivo
   ========================================================================== */
.gtc-skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: var(--gtc-z-notification, 1080);
	padding: var(--gtc-space-3, 0.75rem) var(--gtc-space-4, 1rem);
	background-color: var(--gtc-primary, #074b78);
	color: var(--gtc-white, #ffffff);
	font-size: var(--gtc-text-base, 1rem);
	font-weight: var(--gtc-font-bold, 700);
	text-decoration: none;
	border-radius: var(--gtc-radius-base, 0.5rem);
	box-shadow: var(--gtc-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
	transition: top var(--gtc-transition-fast, 150ms) var(--gtc-ease-out, ease-out);
}

.gtc-skip-link:focus {
	top: 10px;
	outline: 3px solid var(--gtc-accent, #00ff88);
	outline-offset: 2px;
}

.gtc-skip-link:hover {
	background-color: var(--gtc-primary-dark, #053a5a);
	text-decoration: underline;
}

/* ==========================================================================
   FOCUS VISIBLE - WCAG 2.4.7 (AA)
   Indicadores de foco mejorados para navegación por teclado
   ========================================================================== */

/* Focus principal para todos los elementos interactivos en shortcodes */
.gtc-widget button:focus-visible,
.gtc-mini-card button:focus-visible,
.gtc-widget select:focus-visible,
.gtc-widget input:focus-visible,
.gtc-widget a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gtc-primary, #074b78) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 3px rgba(7, 75, 120, 0.25);
	transition: outline var(--gtc-transition-fast, 150ms) var(--gtc-ease-out, ease-out);
}

/* Focus para botones primarios en widgets */
.gtc-widget .gtc-btn-primary:focus-visible,
.gtc-btn-primary:focus-visible {
	outline-color: var(--gtc-accent, #00ff88) !important;
	box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.25);
}

/* Focus para enlaces */
.gtc-widget a:focus-visible {
	outline: 2px solid var(--gtc-primary, #074b78) !important;
	outline-offset: 2px;
	border-radius: var(--gtc-radius-sm, 0.25rem);
}

/* ==========================================================================
   SCREEN READER ONLY - WCAG 4.1.2 (A)
   Contenido visible solo para lectores de pantalla
   ========================================================================== */
.gtc-sr-only,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Variante focusable (útil para skip links) */
.gtc-sr-only-focusable:focus,
.sr-only-focusable:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: inherit !important;
	margin: inherit !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
}

/* ==========================================================================
   TOUCH TARGETS - WCAG 2.5.5 (AAA) - 44x44px mínimo
   Especialmente importante en móviles para shortcodes
   ========================================================================== */

/* Botones con tamaño mínimo táctil */
.gtc-widget button,
.gtc-widget .gtc-btn,
.gtc-mini-card button,
button.gtc-btn {
	min-height: 44px;
	min-width: 44px;
	padding: var(--gtc-space-2, 0.5rem) var(--gtc-space-4, 1rem);
}

/* Botones solo icono (theme toggle, refresh, etc) */
.gtc-btn-icon,
.gtc-theme-toggle {
	width: 44px;
	height: 44px;
	padding: var(--gtc-space-2, 0.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--gtc-radius-full, 9999px);
}

/* Select y inputs con altura mínima */
.gtc-widget select,
.gtc-widget input {
	min-height: 44px;
	padding: var(--gtc-space-2, 0.5rem) var(--gtc-space-3, 0.75rem);
}

/* Enlaces con área táctil mínima */
.gtc-widget a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: var(--gtc-space-1, 0.25rem) var(--gtc-space-2, 0.5rem);
}

/* ==========================================================================
   MENSAJES DE ERROR Y ESTADO - WCAG 4.1.3 (AA)
   Para estados de carga y errores en widgets
   ========================================================================== */

/* Mensajes de error con role="alert" */
[role="alert"],
.gtc-alert {
	padding: var(--gtc-space-4, 1rem);
	border-radius: var(--gtc-radius-base, 0.5rem);
	border-left: 4px solid;
	margin-bottom: var(--gtc-space-4, 1rem);
	display: flex;
	align-items: flex-start;
	gap: var(--gtc-space-3, 0.75rem);
	font-size: var(--gtc-text-sm, 0.875rem);
}

[role="alert"].gtc-alert-error,
.gtc-alert-error {
	background-color: var(--gtc-error-light, #ffe0e0);
	border-color: var(--gtc-error, #ff3838);
	color: var(--gtc-error-dark, #d32f2f);
}

[role="alert"].gtc-alert-warning,
.gtc-alert-warning {
	background-color: var(--gtc-warning-light, #fff3cd);
	border-color: var(--gtc-warning, #ffb300);
	color: var(--gtc-warning-dark, #ff8f00);
}

[role="alert"].gtc-alert-success,
.gtc-alert-success {
	background-color: var(--gtc-success-light, #d4f1d4);
	border-color: var(--gtc-success, #00c851);
	color: var(--gtc-success-dark, #00a041);
}

[role="alert"].gtc-alert-info,
.gtc-alert-info {
	background-color: var(--gtc-info-light, #e3f2fd);
	border-color: var(--gtc-info, #2196f3);
	color: var(--gtc-info-dark, #1976d2);
}

/* Mensajes de estado con role="status" */
[role="status"],
.gtc-status {
	padding: var(--gtc-space-2, 0.5rem) var(--gtc-space-3, 0.75rem);
	border-radius: var(--gtc-radius-base, 0.5rem);
	font-size: var(--gtc-text-sm, 0.875rem);
	font-weight: var(--gtc-font-medium, 500);
}

/* ==========================================================================
   LOADING STATES - WCAG 4.1.3 (AA)
   Estados de carga para gráficos y widgets
   ========================================================================== */

/* Contenedor en estado de carga */
[aria-busy="true"],
.gtc-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

/* Spinner de carga */
[aria-busy="true"]::after,
.gtc-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 4px solid var(--gtc-border, #e5e7eb);
	border-top-color: var(--gtc-primary, #074b78);
	border-radius: 50%;
	animation: gtc-spin 0.8s linear infinite;
	z-index: 10;
}

@keyframes gtc-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Texto de loading para lectores de pantalla */
[aria-busy="true"] .gtc-sr-only::after {
	content: 'Cargando datos...';
}

/* ==========================================================================
   SKELETON LOADERS - Estados de carga visual
   Para gráficos, tarjetas y datos
   ========================================================================== */

/* Base skeleton */
.gtc-skeleton {
	background: linear-gradient(
		90deg,
		var(--gtc-gray-100, #f3f4f6) 0%,
		var(--gtc-gray-200, #e5e7eb) 50%,
		var(--gtc-gray-100, #f3f4f6) 100%
	);
	background-size: 200% 100%;
	animation: gtc-skeleton-loading 1.5s ease-in-out infinite;
	border-radius: var(--gtc-radius-base, 0.5rem);
}

/* Skeleton para gráfico Chart.js */
.gtc-skeleton-chart {
	height: 400px;
	width: 100%;
}

/* Skeleton para tarjetas mini */
.gtc-skeleton-card {
	height: 120px;
	width: 100%;
}

/* Skeleton para texto */
.gtc-skeleton-text {
	height: 1rem;
	width: 100%;
	margin-bottom: var(--gtc-space-2, 0.5rem);
}

@keyframes gtc-skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   CONTRASTE DE TEXTO - WCAG 1.4.3 (AA)
   Garantiza ratio mínimo 4.5:1 para texto normal
   ========================================================================== */

/* Texto sobre fondos de color */
.gtc-bg-primary {
	background-color: var(--gtc-primary, #074b78);
	color: var(--gtc-white, #ffffff);
}

.gtc-bg-secondary {
	background-color: var(--gtc-secondary, #00a8ff);
	color: var(--gtc-white, #ffffff);
}

.gtc-bg-accent {
	background-color: var(--gtc-accent-dark, #00c851);
	color: var(--gtc-white, #ffffff);
}

/* ==========================================================================
   TOOLTIPS ACCESIBLES - Para acrónimos de monedas
   Integración con Tippy.js
   ========================================================================== */

/* Elemento con tooltip debe ser focusable */
[data-tippy-content] {
	cursor: help;
	border-bottom: 1px dotted var(--gtc-text-muted, #9ca3af);
}

[data-tippy-content]:focus-visible {
	outline: 2px solid var(--gtc-primary, #074b78);
	outline-offset: 2px;
	border-radius: var(--gtc-radius-sm, 0.25rem);
}

/* ==========================================================================
   MODO OSCURO - Ajustes de Accesibilidad
   ========================================================================== */
html[data-theme="dark"],
[data-theme="dark"] {
	/* Ajustar contrastes para modo oscuro */
	--gtc-focus-color: var(--gtc-accent, #66ffb3);
}

html[data-theme="dark"] .gtc-widget button:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] [tabindex]:focus-visible {
	outline-color: var(--gtc-accent, #66ffb3) !important;
	box-shadow: 0 0 0 3px rgba(102, 255, 179, 0.25);
}

/* Skeleton en dark mode */
html[data-theme="dark"] .gtc-skeleton {
	background: linear-gradient(
		90deg,
		var(--gtc-gray-100, #1f2937) 0%,
		var(--gtc-gray-200, #374151) 50%,
		var(--gtc-gray-100, #1f2937) 100%
	);
}

/* ==========================================================================
   REDUCED MOTION - WCAG 2.3.3 (AAA)
   Respeta preferencias de movimiento reducido del usuario
   ========================================================================== */
@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;
	}
	
	.gtc-skip-link {
		transition: none;
	}
	
	.gtc-skeleton {
		animation: none;
		background: var(--gtc-gray-200, #e5e7eb);
	}
}

/* ==========================================================================
   HIGH CONTRAST MODE - Windows High Contrast
   ========================================================================== */
@media (prefers-contrast: high) {
	.gtc-widget button,
	.gtc-widget select,
	.gtc-widget input {
		border: 2px solid currentColor;
	}
	
	.gtc-widget button:focus-visible,
	.gtc-widget select:focus-visible,
	.gtc-widget input:focus-visible {
		outline: 4px solid currentColor !important;
		outline-offset: 4px !important;
	}
	
	.gtc-skeleton {
		background: Canvas;
		border: 2px solid CanvasText;
	}
}

/* ==========================================================================
   RESPONSIVE - Ajustes de accesibilidad móvil
   ========================================================================== */
@media screen and (max-width: 640px) {
	/* Aumentar áreas táctiles en móvil */
	.gtc-widget button,
	.gtc-widget select,
	.gtc-widget input {
		min-height: 48px; /* Aumentar de 44px a 48px en móvil */
	}
	
	/* Tooltips más grandes en móvil */
	[data-tippy-content] {
		border-bottom-width: 2px;
	}
}