/* Sindicato de Empresa N°2 Trabajadores Colbún S.A.
   Hoja de estilos única del sitio. Los colores se cambian en :root. */

:root {
	--primario: #0d4f8b;
	--primario-oscuro: #08365f;
	--primario-claro: #e6eef7;
	--acento: #e8a317;
	--texto: #1e2a36;
	--texto-suave: #4a5866;
	--fondo: #f4f6f9;
	--superficie: #ffffff;
	--borde: #d9e0e8;
	--radio: 10px;
	--sombra: 0 1px 3px rgba(16, 38, 64, .08), 0 4px 12px rgba(16, 38, 64, .06);
	--ancho-max: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto);
	background: var(--fondo);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

a { color: var(--primario); }
a:hover { color: var(--primario-oscuro); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.25; color: var(--primario-oscuro); }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .75rem; }
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin: 0 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; }

.saltar {
	position: absolute; left: -9999px; top: 0;
	background: var(--acento); color: #000; padding: .5rem 1rem; z-index: 100;
}
.saltar:focus { left: 1rem; }

/* ---------- Cabecera ---------- */
.cabecera {
	/* Degradado: oscuro arriba, más claro hacia el centro de la página */
	background: linear-gradient(to bottom, var(--primario-oscuro) 0%, var(--primario) 55%, #2f78bd 100%);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.cabecera-interior {
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: .5rem 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.marca {
	display: flex; align-items: center; gap: .75rem;
	color: #fff; text-decoration: none; margin-right: auto;
}
.marca:hover { color: #fff; }
.marca img {
	width: 56px; height: 56px; border-radius: 50%;
	background: #fff; padding: 2px;
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-texto strong { font-size: 1.05rem; }
.marca-texto span { font-size: .8rem; opacity: .85; }

.boton-menu {
	display: none;
	background: transparent; border: 2px solid rgba(255, 255, 255, .6);
	color: #fff; border-radius: 6px; padding: .4rem .7rem;
	font: inherit; font-size: .95rem; cursor: pointer;
}
.boton-menu .barras { display: inline-block; width: 18px; vertical-align: middle; margin-right: .35rem; }
.boton-menu .barras i { display: block; height: 2px; background: #fff; margin: 3px 0; }

/* ---------- Menú ---------- */
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; gap: .15rem; }
.menu li { position: relative; }
.menu a, .menu button.sub {
	display: block;
	color: #fff; text-decoration: none;
	padding: .6rem .8rem; border-radius: 6px;
	font: inherit; font-size: .95rem;
	background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.menu a:hover, .menu button.sub:hover, .menu a[aria-current="page"] {
	background: var(--primario-oscuro); color: #fff;
}
.menu button.sub::after { content: " \25BE"; font-size: .8em; }
.menu .submenu {
	display: none;
	position: absolute; top: 100%; left: 0; min-width: 240px;
	background: var(--superficie); border-radius: var(--radio);
	box-shadow: var(--sombra); padding: .4rem;
}
.menu .submenu a { color: var(--texto); white-space: normal; }
.menu .submenu a:hover, .menu .submenu a[aria-current="page"] { background: var(--primario-claro); color: var(--primario-oscuro); }
.menu li.abierto > .submenu { display: block; }
@media (hover: hover) and (min-width: 961px) {
	.menu li:hover > .submenu { display: block; }
}

/* ---------- Contenido ---------- */
main {
	flex: 1;
	width: 100%;
	max-width: var(--ancho-max);
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}
.encabezado-pagina { margin-bottom: 1.5rem; }
.encabezado-pagina p { color: var(--texto-suave); margin: 0; }

.tarjeta {
	background: var(--superficie);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.tarjeta > :last-child { margin-bottom: 0; }

.rejilla {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rejilla .tarjeta { margin-bottom: 0; }

.texto p { margin: 0 0 1rem; }

/* Accesos directos del inicio */
.accesos { margin-top: 2rem; }
.acceso {
	display: flex; flex-direction: column; gap: .35rem;
	text-decoration: none; color: var(--texto);
	border-top: 4px solid var(--primario);
	transition: transform .15s ease, box-shadow .15s ease;
}
.acceso:hover { transform: translateY(-2px); color: var(--texto); box-shadow: 0 6px 18px rgba(16, 38, 64, .12); }
.acceso strong { color: var(--primario-oscuro); font-size: 1.1rem; }
.acceso span { color: var(--texto-suave); font-size: .95rem; }
/* Tarjeta con dos enlaces: toda la tarjeta abre Documentos importantes y
   la carta de incorporación tiene su propio enlace destacado */
.acceso-doble { position: relative; }
.acceso-enlace { text-decoration: none; }
.acceso-enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.acceso .destacado {
	position: relative; z-index: 1;
	display: table; margin: .1rem 0 .4rem;
	padding: .1rem .5rem; border-radius: 4px;
	background: var(--primario-claro); color: var(--primario-oscuro);
	font-weight: 700; text-decoration: none;
	border-left: 3px solid var(--primario);
}
.acceso .destacado:hover, .acceso .destacado:focus-visible { background: #d3e1f0; text-decoration: underline; }

/* Carrusel */
.carrusel {
	position: relative; overflow: hidden;
	border-radius: var(--radio); box-shadow: var(--sombra);
	background: #000; aspect-ratio: 700 / 327;
}
.carrusel img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0; transition: opacity .8s ease;
}
.carrusel img.activa { opacity: 1; }
.carrusel-controles {
	position: absolute; bottom: .6rem; right: .6rem; display: flex; gap: .4rem;
}
.carrusel-controles button {
	background: rgba(0, 0, 0, .55); color: #fff; border: 0; border-radius: 6px;
	padding: .35rem .7rem; font: inherit; font-size: .9rem; cursor: pointer;
}
.carrusel-controles button:hover { background: rgba(0, 0, 0, .8); }

/* Listas de documentos */
.documentos { list-style: none; margin: 0; padding: 0; }
.documentos li { border-top: 1px solid var(--borde); }
.documentos li:first-child { border-top: 0; }
.documentos a {
	display: flex; align-items: center; gap: .75rem;
	padding: .75rem .25rem; text-decoration: none; color: var(--texto);
}
.documentos a:hover { background: var(--primario-claro); color: var(--primario-oscuro); }
.documentos .icono {
	flex: none; width: 38px; height: 38px; border-radius: 8px;
	display: grid; place-items: center;
	background: var(--primario-claro); color: var(--primario);
	font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.documentos .icono.word { background: #e3ecfb; color: #2b5797; }
.documentos .icono.zip { background: #fbf1dc; color: #8a5a00; }
.documentos .nombre { flex: 1; }
.documentos .peso { color: var(--texto-suave); font-size: .85rem; white-space: nowrap; }

/* Actas por año */
details.anio {
	background: var(--superficie); border-radius: var(--radio);
	box-shadow: var(--sombra); margin-bottom: .75rem; overflow: hidden;
}
details.anio summary {
	cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; font-size: 1.1rem;
	color: var(--primario-oscuro); list-style: none;
	display: flex; justify-content: space-between; align-items: center;
}
details.anio summary::-webkit-details-marker { display: none; }
details.anio summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--primario); }
details.anio[open] summary::after { content: "\2212"; }
details.anio[open] summary { border-bottom: 1px solid var(--borde); }
details.anio .documentos { padding: .25rem 1rem .75rem; }
.etiqueta {
	display: inline-block; font-size: .75rem; font-weight: 600;
	padding: .1rem .5rem; border-radius: 999px;
	background: #fbf1dc; color: #7a4f00; margin-left: .35rem; vertical-align: middle;
}

/* Noticias */
.noticia .fecha { color: var(--texto-suave); font-size: .9rem; margin: 0 0 .5rem; }

/* Convenios */
.convenio img.logo-convenio { max-height: 90px; width: auto; display: block; margin-bottom: 1rem; }
.convenio dl { margin: 0 0 1rem; }
.convenio dt { font-size: .85rem; color: var(--texto-suave); }
.convenio dd { margin: 0 0 .5rem; font-weight: 600; }
.convenio .tarjeta-ejecutivo { margin-top: 1rem; border-radius: 8px; border: 1px solid var(--borde); }

.botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.boton {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .55rem 1rem; border-radius: 8px; border: 2px solid var(--primario);
	background: var(--primario); color: #fff; text-decoration: none;
	font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
}
.boton:hover { background: var(--primario-oscuro); border-color: var(--primario-oscuro); color: #fff; }
.boton.secundario { background: transparent; color: var(--primario); }
.boton.secundario:hover { background: var(--primario-claro); color: var(--primario-oscuro); }

/* Contacto */
.contactos { list-style: none; padding: 0; margin: 0 0 1rem; }
.contactos li { padding: .6rem 0; border-top: 1px solid var(--borde); }
.contactos li:first-child { border-top: 0; }
.contactos .cargo { display: block; font-size: .85rem; color: var(--texto-suave); }

.formulario label { display: block; font-weight: 600; margin-bottom: .25rem; }
.formulario .campo { margin-bottom: 1rem; }
.formulario input, .formulario textarea {
	width: 100%; padding: .6rem .75rem; font: inherit;
	border: 1px solid #b8c3cf; border-radius: 8px; background: #fff; color: var(--texto);
}
.formulario input:focus, .formulario textarea:focus {
	outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px rgba(13, 79, 139, .2);
}
.formulario .nota { font-size: .85rem; color: var(--texto-suave); }
.formulario .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso {
	padding: .9rem 1rem; border-radius: 8px; margin-bottom: 1rem;
	background: #e5f4ea; color: #1d5b32; border: 1px solid #b6dfc3;
}
.aviso[hidden] { display: none; }

/* ---------- Pie ---------- */
.pie {
	/* Degradado: oscuro abajo, más claro hacia el centro de la página */
	background: linear-gradient(to top, var(--primario-oscuro) 0%, var(--primario) 55%, #2f78bd 100%);
	color: #dbe6f1; font-size: .9rem;
}
.pie-interior {
	max-width: var(--ancho-max); margin: 0 auto; padding: 1.5rem 1rem;
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
}
.pie a { color: #fff; }
.pie p { margin: 0 0 .25rem; }

@media (max-width: 1200px) and (min-width: 961px) {
	.marca-texto span { display: none; }
}

/* ---------- Tablet y celular ---------- */
@media (max-width: 960px) {
	.boton-menu { display: inline-block; }
	.cabecera-interior { flex-wrap: wrap; }
	.menu { display: none; width: 100%; padding-bottom: .5rem; }
	.menu.abierto { display: block; }
	.menu > ul { flex-direction: column; }
	.menu a, .menu button.sub { width: 100%; text-align: left; padding: .8rem .75rem; }
	.menu .submenu {
		position: static; box-shadow: none; background: rgba(0, 0, 0, .15);
		border-radius: 6px; padding: .25rem 0 .25rem .75rem; min-width: 0;
	}
	.menu .submenu a { color: #fff; }
	.menu .submenu a:hover, .menu .submenu a[aria-current="page"] { background: var(--primario-oscuro); color: #fff; }
}

@media (max-width: 600px) {
	main { padding: 1.25rem 1rem 2rem; }
	.tarjeta { padding: 1.1rem; }
	.marca img { width: 46px; height: 46px; }
	.marca-texto strong { font-size: .95rem; }
	.marca-texto span { display: none; }
	.documentos .peso { display: none; }
	.botones .boton { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
	.cabecera, .pie, .carrusel { display: none; }
	body { background: #fff; }
	.tarjeta { box-shadow: none; border: 1px solid #ccc; }
}