/**
 * Categorías Acceso Directo - Estilos
 *
 * Estilos para el componente de búsqueda temática de noticias.
 * Diseño minimalista basado en la guía de estilos de la Fiscalía.
 *
 * @package Fiscalia
 * @since 3.1.0
 */

/* ========================================
   Contenedor Principal
   ======================================== */

.fiscalia-categorias-acceso-directo {
	width: 100%;
	margin: 2.5rem 0;
	padding: 0;
}

.categorias-acceso-directo-container {
	background: #ffffff;
	border: none;
	border-radius: 0;
	padding: 1.5rem 2rem;
	box-shadow: none;
	max-width: 800px;
	margin: 0 auto;
}

/* ========================================
   Título de la Sección
   ======================================== */

.categorias-acceso-directo-titulo {
	margin: 0 0 1rem 0;
	padding: 0;
	font-family: 'Nunito Sans', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #000000;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

/* ========================================
   Decorador (líneas onduladas)
   ======================================== */

.categorias-acceso-directo-decorador {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 1.75rem 0;
	padding: 0;
	color: #333333;
}

.categorias-acceso-directo-decorador svg {
	width: 50px;
	height: 8px;
	display: block;
}

/* ========================================
   Lista de Categorías
   ======================================== */

.categorias-acceso-directo-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: none;
}

.categoria-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #dddddd;
	transition: none;
}

.categoria-item:first-child {
	border-top: 1px solid #dddddd;
}

.categoria-item:hover {
	background-color: #fafafa;
}

.categoria-link {
	display: block;
	padding: 1rem 0.5rem;
	font-family: 'Nunito Sans', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 0.9375rem;
	font-weight: 400;
	color: #333333;
	text-decoration: none;
	line-height: 1.5;
	transition: color 0.2s ease;
	position: relative;
}

.categoria-link::before {
	display: none;
}

.categoria-link:hover,
.categoria-link:focus {
	color: #8B0000;
	text-decoration: none;
	padding-left: 0.5rem;
	font-weight: 400;
}

.categoria-link:focus {
	outline: 2px solid #8B0000;
	outline-offset: 2px;
}

/* ========================================
   Estados Especiales
   ======================================== */

/* Item activo (cuando se está en esa categoría) */
.categoria-item.active .categoria-link {
	color: #8B0000;
	font-weight: 600;
}

/* Estado vacío (sin categorías) */
.categorias-acceso-directo-lista:empty::after {
	content: 'No hay categorías disponibles.';
	display: block;
	padding: 2rem 0;
	text-align: center;
	color: #999999;
	font-style: italic;
	font-size: 0.875rem;
}

/* ========================================
   Responsive Design
   ======================================== */

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
	.categorias-acceso-directo-container {
		padding: 1.25rem 1.5rem;
	}

	.categorias-acceso-directo-titulo {
		font-size: 1rem;
	}

	.categoria-link {
		font-size: 0.875rem;
		padding: 0.875rem 0.5rem;
	}
}

/* Móviles (< 768px) */
@media (max-width: 767px) {
	.fiscalia-categorias-acceso-directo {
		margin: 1.5rem 0;
	}

	.categorias-acceso-directo-container {
		padding: 1rem 1.25rem;
	}

	.categorias-acceso-directo-titulo {
		font-size: 0.9375rem;
		line-height: 1.3;
	}

	.categorias-acceso-directo-decorador {
		margin-bottom: 1.5rem;
	}

	.categorias-acceso-directo-decorador svg {
		width: 40px;
		height: 6px;
	}

	.categoria-link {
		font-size: 0.8125rem;
		padding: 0.75rem 0.5rem;
	}
}

/* Móviles pequeños (< 480px) */
@media (max-width: 479px) {
	.categorias-acceso-directo-container {
		padding: 0.875rem 1rem;
	}

	.categorias-acceso-directo-titulo {
		font-size: 0.875rem;
	}

	.categoria-link {
		font-size: 0.75rem;
		padding: 0.625rem 0.5rem;
	}
}

/* ========================================
   Modo de Alto Contraste
   ======================================== */

@media (prefers-contrast: high) {
	.categoria-item {
		border-bottom: 2px solid #000;
	}

	.categoria-link {
		color: #000;
	}

	.categoria-link:hover,
	.categoria-link:focus {
		color: #000;
		text-decoration: underline;
	}
}

/* ========================================
   Animaciones (Desactivadas por defecto)
   ======================================== */

/* Sin animaciones para mantener el diseño minimalista */

/* Desactivar animaciones si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.categoria-link {
		transition: none;
	}
}

/* ========================================
   Compatibilidad con Editor de Bloques
   ======================================== */

/* En el editor de WordPress (Gutenberg) */
.editor-styles-wrapper .fiscalia-categorias-acceso-directo {
	margin: 1.5rem 0;
}

.editor-styles-wrapper .categorias-acceso-directo-container {
	max-width: 100%;
}

/* ========================================
   Utilidades de Accesibilidad
   ======================================== */

/* Skip link para lectores de pantalla */
.categorias-acceso-directo-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.categorias-acceso-directo-skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: #8B0000;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

/* Mejorar indicadores de foco */
.categoria-link:focus-visible {
	outline: 2px solid #8B0000;
	outline-offset: 2px;
}