/*
Theme Name: AFUB
Theme URI: https://example.org
Author: AFUB
Description: Tema liviano y responsive para AFUB (Asociación Funcionarios Baluma). Paleta rojo/negro/blanco. Muestra comunicados, documentos descargables y un formulario de consultas. Funciona junto al plugin "Sindicato Core".
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sindicato
*/

/* ==========================================================================
   Variables y base
   Paleta AFUB: rojo, negro y blanco.
   ========================================================================== */
:root {
	--sind-rojo: #e2231a;        /* rojo del logo */
	--sind-rojo-osc: #b01c15;    /* rojo más oscuro para hover */
	--sind-negro: #1a1a1a;       /* negro principal (header, footer, títulos) */
	--sind-negro-osc: #000000;
	--sind-gris: #6b7280;
	--sind-gris-claro: #f6f6f6;
	--sind-borde: #e3e3e3;
	--sind-texto: #1a1a1a;
	--sind-ancho: 1100px;

	/* Tipografía de marca AFUB: titulares condensados + cuerpo geométrico. */
	--sind-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
	--sind-fuente: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Compatibilidad: el "color de acción" (botones, enlaces, descargas) es el rojo. */
	--sind-azul: var(--sind-rojo);
	--sind-azul-osc: var(--sind-rojo-osc);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--sind-fuente);
	color: var(--sind-texto);
	line-height: 1.6;
	background: #fff;
}

a {
	color: var(--sind-azul);
}

img {
	max-width: 100%;
	height: auto;
}

.sind-contenedor {
	max-width: var(--sind-ancho);
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.sind-header {
	background: var(--sind-negro);
	color: #fff;
	border-bottom: 4px solid var(--sind-rojo);
}
.sind-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 20px;
	max-width: var(--sind-ancho);
	margin: 0 auto;
}
.sind-brand,
.sind-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #fff;
	text-decoration: none;
	min-width: 0;
	margin: 0;
}
.sind-brand__logos {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	background: #fff;
	border-left: 4px solid var(--sind-rojo);
	border-radius: 8px;
	padding: 6px 9px;
	box-shadow: 0 8px 18px rgba( 0, 0, 0, 0.18 );
}
.sind-brand__logo {
	display: block;
	object-fit: contain;
}
.sind-brand__logo--afub {
	width: 58px;
	height: 58px;
	border-radius: 50%;
}
.sind-brand__logo--pitcnt {
	width: 72px;
	height: 46px;
}
.sind-brand__logo--uruguay {
	width: 69px;
	height: 46px;
	border: 1px solid #dedede;
	border-radius: 2px;
}
.sind-brand__separator {
	width: 1px;
	height: 44px;
	background: #dedede;
}
.sind-brand__fallback {
	font-family: var(--sind-display);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--sind-negro);
	letter-spacing: 1px;
}
.sind-brand__texto,
.sind-logo__texto {
	display: block;
	font-family: var(--sind-display);
	font-size: 1.65rem;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.1;
	white-space: nowrap;
}
.sind-brand__desc,
.sind-logo__desc {
	display: block;
	font-family: var(--sind-fuente);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.82;
}

/* Backward compatibility for older logo markup. */
.sind-logo img,
.sind-logo .custom-logo,
.sind-logo .custom-logo-link {
	max-height: 64px;
	width: auto;
	display: block;
	border-radius: 6px;
}
.sind-logo--img {
	flex: 0 0 auto;
}

/* Navegación */
.sind-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sind-nav a {
	display: block;
	padding: 8px 14px;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
}
.sind-nav a:hover,
.sind-nav .current-menu-item > a {
	background: rgba( 255, 255, 255, 0.15 );
}

/* Botón hamburguesa (móvil) */
.sind-nav-toggle {
	display: none;
	background: none;
	border: 2px solid rgba( 255, 255, 255, 0.6 );
	color: #fff;
	font-size: 1rem;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
}

/* ==========================================================================
   Hero (portada)
   ========================================================================== */
.sind-hero {
	position: relative;
	overflow: hidden;
	background: var(--sind-negro);
	color: #fff;
	padding: 72px 20px;
	text-align: left;
}
/* Franja roja inclinada: firma gráfica de AFUB (reemplaza el degradado). */
.sind-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: -80px;
	width: 260px;
	height: 100%;
	background: var(--sind-rojo);
	transform: skewX( -12deg );
	z-index: 0;
}
/* Variante con imagen de fondo (se activa al subir una foto en el Personalizador).
   La imagen va en el background del <section> (inline); acá agregamos el scrim
   oscuro en degradado para que el texto blanco se lea, y volvemos la banda roja
   semitransparente para que se vea la foto a través del rojo. */
.sind-hero--imagen {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.sind-hero--imagen::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba( 26, 26, 26, var( --ov-l, 0.8 ) ) 0%,
		rgba( 26, 26, 26, var( --ov-m, 0.6 ) ) 60%,
		rgba( 26, 26, 26, var( --ov-r, 0.3 ) ) 100%
	);
}
.sind-hero--imagen::after {
	background: rgba( 226, 35, 26, 0.55 ); /* var(--sind-rojo) semitransparente */
}
.sind-hero .sind-contenedor {
	position: relative;
	z-index: 1;
}
.sind-hero h1 {
	font-family: var(--sind-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 0.95;
	font-size: clamp( 2.4rem, 6vw, 4.2rem );
	margin: 0 0 14px;
}
.sind-hero h1 .rojo {
	color: var(--sind-rojo);
}
.sind-hero p {
	font-size: 1.15rem;
	font-weight: 500;
	opacity: 0.92;
	max-width: 640px;
	margin: 0;
}

/* ==========================================================================
   Layout general / contenido
   ========================================================================== */
.sind-main {
	padding: 40px 0;
}
.sind-seccion {
	margin-bottom: 50px;
}
.sind-seccion__titulo {
	font-family: var(--sind-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 1.9rem;
	color: var(--sind-negro);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 14px;
}
/* Palabra acentuada en rojo dentro de un título bicolor (estilo "AFUB INFORMA"). */
.sind-seccion__titulo .rojo {
	color: var(--sind-rojo);
}
.sind-seccion__titulo::after {
	content: "";
	flex: 1;
	height: 3px;
	background: var(--sind-rojo);
	border-radius: 3px;
}
.sind-seccion__sub {
	color: var(--sind-gris);
	margin: 0 0 20px;
}

.sind-grid-2 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Tarjeta genérica */
.sind-card {
	background: #fff;
	border: 1px solid var(--sind-borde);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}
.sind-card--destacada {
	background: var(--sind-gris-claro);
}

/* Entrada/Comunicado individual */
.sind-entrada__meta {
	color: var(--sind-gris);
	font-size: 0.9rem;
	margin-bottom: 16px;
}
.sind-entrada h1 {
	font-family: var(--sind-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.05;
	font-size: 2.1rem;
	color: var(--sind-negro);
	margin-top: 0;
}
.sind-entrada__contenido {
	font-size: 1.05rem;
}
.sind-entrada__contenido img {
	border-radius: 8px;
}

/* Caja de descarga del PDF dentro del comunicado */
.sind-descarga-pdf {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fdecea;
	border: 1px solid #f3c0bb;
	border-radius: 10px;
	padding: 16px 20px;
	margin: 24px 0;
}
.sind-descarga-pdf .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: var(--sind-rojo);
}

/* Paginación */
.sind-paginacion {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 30px;
}
.sind-paginacion .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--sind-borde);
	border-radius: 6px;
	text-decoration: none;
}
.sind-paginacion .current {
	background: var(--sind-azul);
	color: #fff;
	border-color: var(--sind-azul);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.sind-footer {
	background: var(--sind-negro);
	color: #cfcfcf;
	padding: 40px 0 24px;
	margin-top: 40px;
	border-top: 4px solid var(--sind-rojo);
}
.sind-footer a {
	color: #fff;
}
.sind-footer__cols {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 30px;
}
.sind-footer h3 {
	font-family: var(--sind-display);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 400;
	color: #fff;
	font-size: 1.2rem;
	margin: 0 0 12px;
}
.sind-footer__redes a {
	display: inline-block;
	margin-right: 10px;
	font-weight: 600;
}
.sind-footer__mapa {
	margin-top: 24px;
}
.sind-footer__mapa h3 {
	font-size: 1rem;
}
.sind-footer__mapa-marco {
	max-width: 360px;
	border: 2px solid var(--sind-rojo);
	border-radius: 8px;
	overflow: hidden;
	line-height: 0; /* elimina el hueco bajo el iframe */
}
.sind-footer__mapa-marco iframe {
	display: block;
	width: 100%;
	height: 200px;
	border: 0;
}
.sind-footer__copy {
	text-align: center;
	margin-top: 30px;
	padding-top: 16px;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	font-size: 0.85rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media ( max-width: 860px ) {
	.sind-grid-2 {
		grid-template-columns: 1fr;
	}
	/* Con el hero alineado a la izquierda, achicamos la franja roja
	   para que no pise el texto en pantallas angostas. */
	.sind-hero::after,
	.afub-banda::after {
		right: -110px;
		width: 190px;
	}
	.sind-nav-toggle {
		display: block;
	}
	.sind-nav {
		display: none;
		width: 100%;
	}
	.sind-nav.is-open {
		display: block;
	}
	.sind-nav ul {
		flex-direction: column;
	}
	.sind-header__inner {
		flex-wrap: wrap;
	}
	.sind-brand {
		max-width: calc( 100% - 108px );
	}
	.sind-brand__logos {
		gap: 7px;
		padding: 5px 8px;
	}
	.sind-brand__logo--afub {
		width: 50px;
		height: 50px;
	}
	.sind-brand__logo--pitcnt {
		width: 66px;
		height: 42px;
	}
	.sind-brand__logo--uruguay {
		width: 63px;
		height: 42px;
	}
	.sind-brand__separator {
		height: 38px;
	}
	.sind-brand__texto {
		font-size: 1.4rem;
	}
	.sind-brand__desc {
		font-size: 0.62rem;
	}
	.sind-hero h1 {
		font-size: 1.7rem;
	}
}

@media ( max-width: 600px ) {
	.sind-header__inner {
		gap: 12px;
		padding: 12px 16px;
	}
	.sind-brand {
		gap: 10px;
		max-width: calc( 100% - 92px );
	}
	.sind-brand__texto {
		display: none;
	}
}

@media ( max-width: 380px ) {
	.sind-brand__logos {
		gap: 6px;
		padding: 5px 7px;
	}
	.sind-brand__logo--afub {
		width: 44px;
		height: 44px;
	}
	.sind-brand__logo--pitcnt {
		width: 58px;
		height: 38px;
	}
	.sind-brand__logo--uruguay {
		width: 57px;
		height: 38px;
	}
	.sind-brand__separator {
		height: 34px;
	}
}

/* ==========================================================================
   Estética AFUB: componentes "firma" traídos de la cartelería y los posts.
   ========================================================================== */

/* Banner rojo inclinado (paralelogramo) con texto blanco. Destacado o CTA.
   Es la firma visual de AFUB en redes. */
.afub-banner {
	display: inline-block;
	background: var(--sind-rojo);
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 1.05rem;
	line-height: 1.2;
	padding: 14px 30px;
	margin: 8px 0;
	text-decoration: none;
	clip-path: polygon( 5% 0, 100% 0, 95% 100%, 0 100% );
	transition: background 0.15s ease;
}
a.afub-banner:hover {
	background: var(--sind-rojo-osc);
	color: #fff;
}
.afub-banner--negro {
	background: var(--sind-negro);
}
.afub-banner--lg {
	font-size: 1.35rem;
	padding: 18px 42px;
}

/* Etiqueta/píldora roja para fechas, estados o categorías. */
.afub-tag {
	display: inline-block;
	background: var(--sind-rojo);
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 1px;
	padding: 6px 14px;
	border-radius: 999px;
}
.afub-tag--cuadrada {
	border-radius: 4px;
}

/* Recuadro blanco con esquinas rojas en L (estilo plantillas de cartelería). */
.afub-marco {
	position: relative;
	background: #fff;
	padding: 30px;
	border: 1px solid var(--sind-borde);
}
.afub-marco::before,
.afub-marco::after {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
}
.afub-marco::before {
	top: 10px;
	left: 10px;
	border-top: 5px solid var(--sind-rojo);
	border-left: 5px solid var(--sind-rojo);
}
.afub-marco::after {
	bottom: 10px;
	right: 10px;
	border-bottom: 5px solid var(--sind-rojo);
	border-right: 5px solid var(--sind-rojo);
}

/* Fecha de comunicado como píldora roja. La regla doble-clase gana en
   especificidad a .sindicato-comunicado__fecha del plugin (que la pinta
   gris y en bloque) sin importar el orden de carga de las hojas. */
.sindicato-comunicado__fecha.afub-tag {
	display: inline-block;
	color: #fff;
	margin-bottom: 4px;
}

/* Profundidad: sombra sutil en reposo y leve elevación al pasar el mouse
   sobre comunicados y documentos. */
.sindicato-comunicado,
.sindicato-documento {
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sindicato-comunicado:hover,
.sindicato-documento:hover {
	box-shadow: 0 8px 20px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -2px );
}
@media ( prefers-reduced-motion: reduce ) {
	.sindicato-comunicado,
	.sindicato-documento {
		transition: none;
	}
	.sindicato-comunicado:hover,
	.sindicato-documento:hover {
		transform: none;
	}
}

/* Banda negra de ancho completo (suscripción al final de la portada).
   Repite la franja roja inclinada del hero para cerrar con el mismo ritmo. */
.afub-banda {
	position: relative;
	overflow: hidden;
	background: var(--sind-negro);
	color: #fff;
	padding: 48px 20px;
}
.afub-banda::after {
	content: "";
	position: absolute;
	top: 0;
	right: -80px;
	width: 220px;
	height: 100%;
	background: var(--sind-rojo);
	transform: skewX( -12deg );
	z-index: 0;
}
.afub-banda .sind-contenedor {
	position: relative;
	z-index: 1;
}
.afub-banda .sind-seccion__titulo {
	color: #fff;
}
.afub-banda .sind-seccion__sub {
	color: rgba( 255, 255, 255, 0.75 );
}
/* El formulario angosto se lee mejor que estirado a todo el ancho. */
.afub-banda .sindicato-susc-form {
	max-width: 560px;
}
/* Sobre fondo negro: etiquetas y notas del formulario en claro
   (el plugin las pinta en rojo oscuro/gris, ilegibles acá). */
.afub-banda .sindicato-susc-form label,
.afub-banda .sindicato-susc-form .sindicato-form__consent label {
	color: #fff;
}
.afub-banda .sindicato-form__nota {
	color: rgba( 255, 255, 255, 0.65 );
}
.afub-banda a {
	color: #fff;
}
/* En pantallas chicas el formulario ocupa todo el ancho y la franja
   inclinada le quedaría encima: banda negra plana. */
@media ( max-width: 600px ) {
	.afub-banda::after {
		display: none;
	}
}