/*
Theme Name: Mileuristas
Theme URI: https://mileuristas.com/
Description: Tema propio para Mileuristas.com. Inspirado fielmente en la identidad visual del diseño histórico del blog (Regulus, 2013): dos columnas, cabecera con imagen, navegación superior, barra lateral derecha y acento naranja. Reconstruido desde cero con HTML5, CSS moderno, diseño adaptable y criterios de accesibilidad.
Author: Nora
Version: 1.0.3
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mileuristas
Tags: two-columns, right-sidebar, custom-header, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* =========================================================
   1. VARIABLES DE DISEÑO
   Paleta heredada del diseño histórico de 2013, con los
   contrastes corregidos para cumplir WCAG AA.
   ========================================================= */

:root {
	/* Colores históricos conservados */
	--mil-fondo: #eef;              /* azulado del body original */
	--mil-superficie: #fff;
	--mil-acento: #fc0;             /* naranja/ámbar del original */
	--mil-acento-oscuro: #8a6a00;   /* variante accesible del acento para texto */
	--mil-enlace: #1a4f8f;          /* derivado del #357/#68f, contraste AA */
	--mil-enlace-hover: #0d2f57;
	--mil-borde: #ccd;
	--mil-borde-suave: #dde;

	/* Texto: oscurecido respecto al original (#666) para cumplir AA */
	--mil-texto: #22242c;
	--mil-texto-suave: #55596b;

	/* Tipografía: se mantiene la familia del original */
	--mil-fuente: 'Lucida Grande', 'Lucida Sans Unicode', 'Segoe UI', Verdana, sans-serif;
	--mil-escala-base: 1.0625rem;

	/* Medidas */
	--mil-ancho: 1140px;
	--mil-espacio: 1.5rem;
	--mil-radio: 6px;
	--mil-sombra: 0 1px 3px rgba(0, 0, 32, .08);
}

/* =========================================================
   2. REINICIO Y BASES
   ========================================================= */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
	margin: 0;
	padding: 0;
}

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

/* Respetar a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	background: var(--mil-fondo);
	color: var(--mil-texto);
	font-family: var(--mil-fuente);
	font-size: var(--mil-escala-base);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--mil-enlace);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--mil-enlace-hover);
}

/* Foco visible y consistente en todo el tema (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mil-enlace);
	outline-offset: 2px;
	border-radius: 2px;
}

ul, ol {
	padding-left: 1.25rem;
}

blockquote {
	border-left: 4px solid var(--mil-acento);
	background: #fffdf3 url('assets/images/bg_blockquote.gif') no-repeat right bottom;
	padding: .75rem 1rem;
	margin: var(--mil-espacio) 0;
	font-style: italic;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9375em;
}

pre {
	overflow-x: auto;
	background: #f6f6fb;
	padding: 1rem;
	border-radius: var(--mil-radio);
}

/* Saltar al contenido: visible solo al enfocar con teclado */
.salta-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--mil-superficie);
	color: var(--mil-enlace);
	padding: .75rem 1rem;
	z-index: 100;
	font-weight: 700;
	border-radius: 0 0 var(--mil-radio) 0;
}

.salta-al-contenido:focus {
	left: 0;
}

/* Texto solo para lectores de pantalla */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	background: var(--mil-superficie);
	padding: .75rem 1rem;
	height: auto;
	width: auto;
	position: static;
	margin: 0;
}

/* =========================================================
   3. ESTRUCTURA: dos columnas como el diseño original
   ========================================================= */

.mil-contenedor {
	width: 100%;
	max-width: var(--mil-ancho);
	margin-inline: auto;
	padding-inline: var(--mil-espacio);
}

.mil-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 2.5rem;
	align-items: start;
	padding-block: 2rem;
}

/* =========================================================
   4. CABECERA Y NAVEGACIÓN
   ========================================================= */

/* Cabecera: el rótulo (logotipo + título) va SOBRE la franja azul.
   La imagen de fondo es la histórica de 2013, ya sin la moneda. */
.mil-cabecera {
	background: var(--mil-superficie);
	border-bottom: 3px solid var(--mil-acento);
}

/* Franja azul reproducida en CSS para que ocupe el 100% del ancho
   a cualquier resolución, sin repeticiones ni pérdida de calidad.

   Medido sobre la imagen histórica de 2013 (950x140):
   - degradado vertical de #6c9acb (arriba) a #5772a7 (abajo)
   - aclarado progresivo hacia la derecha
   - bandas diagonales a 65,5 grados (dx=-56, dy=123) => 156deg en CSS
   La imagen original queda como respaldo en `.mil-cabecera--con-imagen`
   solo si el navegador no soporta gradientes múltiples. */
.mil-cabecera--con-imagen {
	background-color: #6b96c6;
	background-image:
		/* 1. Bandas diagonales claras, en porcentajes para escalar al ancho */
		linear-gradient(
			156deg,
			rgba(255, 255, 255, 0) 33%,
			rgba(255, 255, 255, .055) 33%,
			rgba(255, 255, 255, .055) 37.5%,
			rgba(255, 255, 255, 0) 37.5%,
			rgba(255, 255, 255, 0) 50%,
			rgba(255, 255, 255, .085) 50%,
			rgba(255, 255, 255, .085) 55.5%,
			rgba(255, 255, 255, 0) 55.5%,
			rgba(255, 255, 255, 0) 69%,
			rgba(255, 255, 255, .075) 69%,
			rgba(255, 255, 255, .075) 72%,
			rgba(255, 255, 255, 0) 72%,
			rgba(255, 255, 255, 0) 86%,
			rgba(255, 255, 255, .07) 86%,
			rgba(255, 255, 255, .07) 89%,
			rgba(255, 255, 255, 0) 89%
		),
		/* 2. Aclarado hacia la derecha */
		linear-gradient(
			100deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .10) 55%,
			rgba(255, 255, 255, .22) 88%,
			rgba(255, 255, 255, .16) 100%
		),
		/* 3. Degradado vertical base */
		linear-gradient(180deg, #6c9acb 0%, #6185b7 50%, #5772a7 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Si el usuario sube una imagen propia en el personalizador, manda esa:
   se recorta para cubrir todo el ancho sin deformarse. */
.mil-cabecera--imagen-propia {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.mil-cabecera__rotulo {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 140px; /* alto de la franja azul original */
	padding-block: 1rem;
}

/* Logotipo: acotado en altura.
   La imagen subida es de 640x597 px; sin límite desbordaba la cabecera. */
.mil-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.mil-logo img,
.mil-logo .custom-logo {
	width: auto;
	height: auto;
	max-height: 84px;
	max-width: 200px;
	object-fit: contain;
	/* Sombra suave para que despegue del fondo azul. */
	filter: drop-shadow(0 2px 4px rgba(0, 0, 40, .35));
}

.mil-cabecera__textos {
	min-width: 0;
}

.mil-titulo {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.02em;
}

.mil-titulo a {
	color: var(--mil-texto);
	text-decoration: none;
}

.mil-titulo a:hover,
.mil-titulo a:focus {
	color: var(--mil-enlace);
}

.mil-descripcion {
	color: var(--mil-texto-suave);
	font-size: .9375rem;
}

/* Sobre la franja azul el texto va en blanco, con sombra para
   garantizar contraste sobre el degradado. */
.mil-cabecera--con-imagen .mil-titulo a {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 40, .55);
}

.mil-cabecera--con-imagen .mil-titulo a:hover,
.mil-cabecera--con-imagen .mil-titulo a:focus {
	color: var(--mil-acento);
}

.mil-cabecera--con-imagen .mil-descripcion {
	color: #f2f6ff;
	text-shadow: 0 1px 3px rgba(0, 0, 40, .55);
}

/* Foco visible sobre fondo oscuro. */
.mil-cabecera--con-imagen .mil-titulo a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Navegación */
.mil-nav {
	background: var(--mil-superficie);
	border-bottom: 1px solid var(--mil-borde);
	position: relative;
}

.mil-nav__lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}

.mil-nav__lista a {
	display: block;
	padding: .8rem 1rem;
	text-decoration: none;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--mil-texto);
	border-bottom: 3px solid transparent;
}

.mil-nav__lista a:hover,
.mil-nav__lista a:focus {
	background: #fff8e0;
	border-bottom-color: var(--mil-acento);
	color: var(--mil-enlace-hover);
}

/* Página actual: heredado del current_page_item del tema antiguo */
.mil-nav__lista .current-menu-item > a,
.mil-nav__lista .current_page_item > a,
.mil-nav__lista .current-cat > a {
	background: var(--mil-acento);
	border-bottom-color: var(--mil-acento-oscuro);
	color: #22242c;
}

/* Botón hamburguesa: solo en móvil */
.mil-nav__boton {
	display: none;
	align-items: center;
	gap: .5rem;
	background: var(--mil-superficie);
	border: 1px solid var(--mil-borde);
	border-radius: var(--mil-radio);
	padding: .6rem 1rem;
	margin-block: .6rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	color: var(--mil-texto);
}

.mil-nav__boton:hover {
	background: #fff8e0;
}

/* =========================================================
   5. ENTRADAS
   ========================================================= */

.mil-entrada {
	background: var(--mil-superficie);
	border: 1px solid var(--mil-borde-suave);
	border-radius: var(--mil-radio);
	box-shadow: var(--mil-sombra);
	padding: 1.5rem;
	margin-bottom: 1.75rem;
}

.mil-entrada__titulo {
	font-size: clamp(1.3rem, 2.5vw, 1.75rem);
	line-height: 1.25;
	margin-bottom: .5rem;
	font-weight: 700;
}

.mil-entrada__titulo a {
	text-decoration: none;
	color: var(--mil-texto);
}

.mil-entrada__titulo a:hover,
.mil-entrada__titulo a:focus {
	color: var(--mil-enlace);
	text-decoration: underline;
}

/* Metadatos: reproduce el "Clasificado en:" del original */
.mil-entrada__meta {
	font-size: .875rem;
	color: var(--mil-texto-suave);
	border-bottom: 1px solid var(--mil-borde-suave);
	padding-bottom: .75rem;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
}

.mil-entrada__meta a {
	color: var(--mil-enlace);
}

.mil-entrada__destacada {
	margin-bottom: 1rem;
	border-radius: var(--mil-radio);
	overflow: hidden;
}

.mil-entrada__contenido > * + * {
	margin-top: 1rem;
}

.mil-entrada__contenido h2,
.mil-entrada__contenido h3,
.mil-entrada__contenido h4 {
	margin-top: 1.75rem;
	line-height: 1.3;
}

.mil-entrada__contenido h2 { font-size: 1.5rem; }
.mil-entrada__contenido h3 { font-size: 1.25rem; }

/* "(more...)" del original, ahora como botón claro */
.mil-mas {
	display: inline-block;
	margin-top: 1rem;
	background: var(--mil-acento);
	color: #22242c;
	font-weight: 700;
	font-size: .9375rem;
	padding: .55rem 1.1rem;
	border-radius: var(--mil-radio);
	text-decoration: none;
	border: 1px solid var(--mil-acento-oscuro);
}

.mil-mas:hover,
.mil-mas:focus {
	background: #ffdb4d;
	color: #000;
}

/* Imágenes alineadas y pies de foto (clases estándar de WordPress) */
.alignleft {
	float: left;
	margin: .35rem 1.25rem 1rem 0;
}

.alignright {
	float: right;
	margin: .35rem 0 1rem 1.25rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption {
	font-size: .875rem;
	color: var(--mil-texto-suave);
	padding-top: .4rem;
}

.mil-entrada::after {
	content: "";
	display: table;
	clear: both;
}

.sticky .mil-entrada__titulo::before {
	content: "★ ";
	color: var(--mil-acento-oscuro);
}

/* =========================================================
   6. BARRA LATERAL
   ========================================================= */

.mil-sidebar .widget {
	background: var(--mil-superficie);
	border: 1px solid var(--mil-borde-suave);
	border-radius: var(--mil-radio);
	box-shadow: var(--mil-sombra);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: .9375rem;
}

/* Título de widget: fondo de acento, como el sidebar h2 del original */
.mil-sidebar .widget-title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--mil-acento);
	color: #22242c;
	margin: -1.1rem -1.25rem 1rem;
	padding: .6rem 1.25rem;
	border-radius: var(--mil-radio) var(--mil-radio) 0 0;
}

.mil-sidebar ul {
	list-style: none;
	padding: 0;
}

.mil-sidebar li {
	padding: .35rem 0;
	border-bottom: 1px solid #f0f0f5;
}

.mil-sidebar li:last-child {
	border-bottom: 0;
}

.mil-sidebar a {
	text-decoration: none;
}

.mil-sidebar a:hover,
.mil-sidebar a:focus {
	text-decoration: underline;
}

/* Contador de entradas por categoría */
.mil-sidebar .mil-cuenta {
	color: var(--mil-texto-suave);
	font-size: .8125rem;
}

/* =========================================================
   7. PAGINACIÓN, COMENTARIOS, BUSCADOR
   ========================================================= */

.mil-paginacion {
	margin: 2rem 0;
}

.mil-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.mil-paginacion .page-numbers {
	display: inline-block;
	padding: .5rem .85rem;
	background: var(--mil-superficie);
	border: 1px solid var(--mil-borde);
	border-radius: var(--mil-radio);
	text-decoration: none;
}

.mil-paginacion .page-numbers.current {
	background: var(--mil-acento);
	border-color: var(--mil-acento-oscuro);
	color: #22242c;
	font-weight: 700;
}

.mil-comentarios {
	background: var(--mil-superficie);
	border: 1px solid var(--mil-borde-suave);
	border-radius: var(--mil-radio);
	box-shadow: var(--mil-sombra);
	padding: 1.5rem;
	margin-top: 2rem;
}

.mil-comentarios .comment-list {
	list-style: none;
	padding: 0;
}

.mil-comentarios .comment-list ul.children {
	list-style: none;
	padding-left: 1.25rem;
}

.mil-comentarios .comment-body {
	border-bottom: 1px solid var(--mil-borde-suave);
	padding: 1rem 0;
}

.mil-comentarios .avatar {
	border-radius: 50%;
	float: left;
	margin-right: .75rem;
}

.mil-comentarios .fn {
	font-weight: 700;
	font-style: normal;
}

.mil-comentarios .comment-meta {
	font-size: .8125rem;
	color: var(--mil-texto-suave);
}

/* Formularios */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
	width: 100%;
	max-width: 100%;
	padding: .6rem .7rem;
	border: 1px solid var(--mil-borde);
	border-radius: var(--mil-radio);
	font: inherit;
	font-size: .9375rem;
	background: #fff;
	color: var(--mil-texto);
}

textarea {
	min-height: 8rem;
}

input[type="submit"],
.mil-boton {
	background: var(--mil-acento);
	color: #22242c;
	border: 1px solid var(--mil-acento-oscuro);
	border-radius: var(--mil-radio);
	padding: .6rem 1.2rem;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

input[type="submit"]:hover,
.mil-boton:hover {
	background: #ffdb4d;
}

.mil-buscador {
	display: flex;
	gap: .4rem;
}

/* =========================================================
   8. PIE
   ========================================================= */

.mil-pie {
	background: var(--mil-superficie);
	border-top: 3px solid var(--mil-acento);
	margin-top: 1rem;
	padding-block: 1.5rem;
	font-size: .875rem;
	color: var(--mil-texto-suave);
}

.mil-pie__interior {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	align-items: center;
}

/* Volver arriba: equivale al enlace "Top" del original */
.mil-arriba {
	text-decoration: none;
	font-weight: 600;
}

/* =========================================================
   9. ADAPTABLE (el diseño original era de ancho fijo)
   ========================================================= */

@media (max-width: 900px) {
	.mil-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	/* La barra lateral pasa debajo del contenido */
	.mil-sidebar {
		order: 2;
	}
}

@media (max-width: 600px) {
	:root {
		--mil-espacio: 1rem;
	}

	/* Logotipo más contenido en pantallas pequeñas. */
	.mil-logo img,
	.mil-logo .custom-logo {
		max-height: 56px;
		max-width: 132px;
	}

	/* Franja azul más baja en móvil. */
	.mil-cabecera__rotulo {
		min-height: 96px;
		gap: .75rem;
	}

	.mil-nav__boton {
		display: inline-flex;
	}

	/* Menú plegado en móvil; se despliega con el botón */
	.mil-nav__lista {
		display: none;
		flex-direction: column;
		padding-bottom: .75rem;
	}

	.mil-nav__lista.mil-abierto {
		display: flex;
	}

	.mil-nav__lista a {
		padding: .7rem .25rem;
		border-bottom: 1px solid var(--mil-borde-suave);
	}

	.mil-entrada {
		padding: 1.1rem;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 1rem;
	}
}

/* Si no hay JavaScript, el menú siempre se muestra */
.no-js .mil-nav__lista {
	display: flex !important;
}

.no-js .mil-nav__boton {
	display: none !important;
}

/* =========================================================
   10. IMPRESIÓN
   ========================================================= */

@media print {
	.mil-nav,
	.mil-sidebar,
	.mil-mas,
	.mil-arriba {
		display: none !important;
	}

	/* En papel, la cabecera sin fondo y con texto negro. */
	.mil-cabecera--con-imagen {
		background: none !important;
	}

	.mil-cabecera--con-imagen .mil-titulo a,
	.mil-cabecera--con-imagen .mil-descripcion {
		color: #000 !important;
		text-shadow: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.mil-layout {
		grid-template-columns: 1fr;
	}

	.mil-entrada {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}