/*
Theme Name:  El Cuaderno (child)
Theme URI:   https://elcuadernodejosecamas.com/
Description: Tema hijo de GeneratePress para El Cuaderno de Jose Camas. Sistema de diseño
             orientado a lectura larga de contenido jurídico y administrativo.
Author:      Jose Camas
Author URI:  https://elcuadernodejosecamas.com/
Template:    generatepress
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: elcuaderno-child
*/

/* =============================================================================
   ÍNDICE
   1.  Tokens (color, tipografía, escala, espacio)
   2.  Base y ritmo vertical
   3.  Cabecera y navegación
   4.  Portada: tesis y pilares
   5.  Artículo: la señal marginal (§)
   6.  Componentes editoriales
   7.  Listados y tarjetas
   8.  Barra lateral
   9.  Pie de página
   10. Formularios y botones
   11. Accesibilidad y responsive
   ============================================================================= */


/* =============================================================================
   1. TOKENS
   -----------------------------------------------------------------------------
   Paleta deliberadamente NO institucional: se evitan los azules corporativos de
   la Seguridad Social para que el blog no pueda confundirse con un canal oficial.
   La referencia es el cuaderno de trabajo: tinta, papel y línea de margen.
   ============================================================================= */

:root {
	/* --- Color ------------------------------------------------------------ */
	--ec-tinta:        #17222e;   /* texto principal, azul-negro de tinta      */
	--ec-tinta-media:  #46525f;   /* texto secundario                          */
	--ec-tinta-suave:  #6e7a86;   /* metadatos, pies                           */
	--ec-papel:        #fcfcfa;   /* fondo                                     */
	--ec-papel-alt:    #f0f2ee;   /* bloques y secciones alternas              */
	--ec-linea:        #dee0da;   /* filetes y bordes                          */
	--ec-acento:       #0b6e5c;   /* enlaces y elementos interactivos          */
	--ec-acento-osc:   #084e42;   /* hover                                     */
	--ec-margen:       #c2453c;   /* SOLO la marca de margen. Uso restringido. */

	/* --- Tipografía ------------------------------------------------------- */
	--ec-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--ec-texto:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ec-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* --- Escala tipográfica (fluida) -------------------------------------- */
	--ec-t-xs:  0.75rem;
	--ec-t-sm:  0.875rem;
	--ec-t-b:   1.0625rem;
	--ec-t-md:  clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
	--ec-t-lg:  clamp(1.375rem, 1vw + 1.1rem,  1.75rem);
	--ec-t-xl:  clamp(1.75rem,  2vw + 1.2rem,  2.375rem);
	--ec-t-2xl: clamp(2.125rem, 3.2vw + 1.2rem, 3.25rem);

	/* --- Espacio ---------------------------------------------------------- */
	--ec-e1: 0.375rem;
	--ec-e2: 0.75rem;
	--ec-e3: 1.25rem;
	--ec-e4: 2rem;
	--ec-e5: 3rem;
	--ec-e6: 4.5rem;

	/* --- Estructura ------------------------------------------------------- */
	--ec-medida: 40rem;  /* ancho óptimo de lectura */
	--ec-rail:   3.25rem;/* anchura del margen izquierdo del artículo */
	--ec-radio:  2px;    /* casi cero: registro documental, no producto SaaS */
}


/* =============================================================================
   2. BASE Y RITMO VERTICAL
   ============================================================================= */

body {
	font-family: var(--ec-texto);
	font-size: var(--ec-t-b);
	line-height: 1.7;
	color: var(--ec-tinta);
	background-color: var(--ec-papel);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--ec-display);
	color: var(--ec-tinta);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.011em;
	text-wrap: balance;
}

h1 { font-size: var(--ec-t-2xl); }
h2 { font-size: var(--ec-t-xl); }
h3 { font-size: var(--ec-t-lg); }
h4 { font-size: var(--ec-t-md); font-family: var(--ec-texto); font-weight: 600; }

p, li { text-wrap: pretty; }

a {
	color: var(--ec-acento);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

a:hover { color: var(--ec-acento-osc); }

strong { font-weight: 600; }

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--ec-linea);
	margin-block: var(--ec-e5);
}

::selection {
	background: var(--ec-acento);
	color: #fff;
}


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

.site-header {
	background-color: var(--ec-papel);
	border-bottom: 1px solid var(--ec-linea);
}

.site-title,
.site-title a {
	font-family: var(--ec-display);
	font-weight: 600;
	font-size: var(--ec-t-lg);
	letter-spacing: -0.015em;
	color: var(--ec-tinta);
	text-decoration: none;
}

.site-description {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.04em;
	color: var(--ec-tinta-suave);
	text-transform: uppercase;
}

.main-navigation {
	background-color: var(--ec-papel);
	border-bottom: 1px solid var(--ec-linea);
}

.main-navigation .main-nav ul li a {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ec-tinta-media);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--ec-tinta);
	background-color: transparent;
	box-shadow: inset 0 -2px 0 var(--ec-margen);
}


/* =============================================================================
   4. PORTADA: TESIS Y PILARES
   -----------------------------------------------------------------------------
   Uso: bloque Grupo con clase adicional "ec-tesis" en la página de inicio.
   ============================================================================= */

.ec-tesis {
	padding-block: var(--ec-e6) var(--ec-e5);
	border-bottom: 1px solid var(--ec-linea);
}

.ec-tesis__eyebrow {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ec-margen);
	margin-bottom: var(--ec-e3);
}

.ec-tesis h1,
.ec-tesis .ec-tesis__titular {
	font-size: var(--ec-t-2xl);
	max-width: 20ch;
	margin: 0 0 var(--ec-e3);
}

.ec-tesis__entrada {
	font-size: var(--ec-t-md);
	color: var(--ec-tinta-media);
	max-width: 52ch;
	line-height: 1.6;
}

/* Pilares: no son una secuencia, son un índice. Sin numeración 01/02/03. */
.ec-pilares {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background-color: var(--ec-linea);
	border: 1px solid var(--ec-linea);
	margin-block: var(--ec-e5);
}

.ec-pilar {
	background-color: var(--ec-papel);
	padding: var(--ec-e4) var(--ec-e3);
	text-decoration: none;
	display: block;
	transition: background-color 0.18s ease;
}

.ec-pilar:hover { background-color: var(--ec-papel-alt); }

.ec-pilar__sigla {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--ec-margen);
	display: block;
	margin-bottom: var(--ec-e2);
}

.ec-pilar__nombre {
	font-family: var(--ec-display);
	font-size: var(--ec-t-lg);
	font-weight: 600;
	color: var(--ec-tinta);
	display: block;
	margin-bottom: var(--ec-e1);
}

.ec-pilar__desc {
	font-size: var(--ec-t-sm);
	color: var(--ec-tinta-media);
	line-height: 1.55;
	margin: 0;
}


/* =============================================================================
   5. ARTÍCULO: LA SEÑAL MARGINAL (§)
   -----------------------------------------------------------------------------
   El elemento distintivo del sitio. Los textos legales se articulan por
   secciones marcadas; aquí cada H2 del artículo lleva su marca en el margen,
   sobre un filete rojo que recorre el cuerpo del texto como el margen de un
   cuaderno. En móvil el rail desaparece y la marca se integra en línea.
   ============================================================================= */

.entry-header { margin-bottom: var(--ec-e4); }

.single .entry-title,
.page .entry-title {
	font-size: var(--ec-t-2xl);
	max-width: 22ch;
	margin-bottom: var(--ec-e3);
}

.entry-meta {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.03em;
	color: var(--ec-tinta-suave);
	text-transform: uppercase;
}

.entry-meta a { color: var(--ec-tinta-media); }

.entry-content {
	max-width: var(--ec-medida);
	font-size: var(--ec-t-b);
}

.entry-content > p { margin-block: 0 var(--ec-e3); }

.entry-content > h2 {
	margin-block: var(--ec-e5) var(--ec-e3);
	scroll-margin-top: var(--ec-e4);
}

.entry-content > h3 { margin-block: var(--ec-e4) var(--ec-e2); }

.entry-content ul,
.entry-content ol { margin-bottom: var(--ec-e3); padding-left: 1.25em; }

.entry-content li { margin-bottom: var(--ec-e1); }

.entry-content ul li::marker { color: var(--ec-margen); }

@media (min-width: 900px) {

	.single .entry-content,
	.page .entry-content {
		position: relative;
		padding-left: var(--ec-rail);
		border-left: 1px solid var(--ec-linea);
	}

	.single .entry-content > h2::before,
	.page .entry-content > h2::before {
		content: '§';
		position: absolute;
		left: 0;
		width: var(--ec-rail);
		font-family: var(--ec-mono);
		font-size: var(--ec-t-sm);
		font-weight: 500;
		color: var(--ec-margen);
		line-height: inherit;
		padding-top: 0.35em;
	}

	.single .entry-content > h2,
	.page .entry-content > h2 { position: relative; }
}


/* =============================================================================
   6. COMPONENTES EDITORIALES
   -----------------------------------------------------------------------------
   Registrados como estilos de bloque en functions.php: aparecen en el panel
   lateral del editor, sin necesidad de escribir HTML a mano.
   ============================================================================= */

/* --- Referencia normativa en línea --------------------------------------- */
.ec-ref {
	font-family: var(--ec-mono);
	font-size: 0.88em;
	background-color: var(--ec-papel-alt);
	border-bottom: 1px solid var(--ec-linea);
	padding: 0.1em 0.35em;
	border-radius: var(--ec-radio);
	white-space: nowrap;
	color: var(--ec-tinta);
}

/* --- "En breve": el resumen de apertura ---------------------------------- */
.is-style-ec-breve,
.ec-breve {
	background-color: var(--ec-papel-alt);
	border-left: 3px solid var(--ec-tinta);
	padding: var(--ec-e3) var(--ec-e4);
	margin-block: var(--ec-e4);
	border-radius: 0 var(--ec-radio) var(--ec-radio) 0;
}

.is-style-ec-breve > *:last-child,
.ec-breve > *:last-child { margin-bottom: 0; }

.is-style-ec-breve::before,
.ec-breve::before {
	content: 'En breve';
	display: block;
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ec-tinta-suave);
	margin-bottom: var(--ec-e2);
}

/* --- Nota normativa: la norma aplicable, destacada ------------------------ */
.is-style-ec-norma,
.ec-norma {
	border: 1px solid var(--ec-linea);
	border-top: 3px solid var(--ec-margen);
	background-color: #fff;
	padding: var(--ec-e3) var(--ec-e4);
	margin-block: var(--ec-e4);
	font-size: var(--ec-t-sm);
	border-radius: 0 0 var(--ec-radio) var(--ec-radio);
}

.is-style-ec-norma::before,
.ec-norma::before {
	content: 'Norma aplicable';
	display: block;
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ec-margen);
	margin-bottom: var(--ec-e2);
}

.is-style-ec-norma > *:last-child,
.ec-norma > *:last-child { margin-bottom: 0; }

/* --- Cita de jurisprudencia ---------------------------------------------- */
.is-style-ec-jurisprudencia,
.ec-jurisprudencia {
	border: 0;
	border-left: 1px solid var(--ec-margen);
	padding: var(--ec-e1) 0 var(--ec-e1) var(--ec-e3);
	margin-block: var(--ec-e4);
	font-family: var(--ec-display);
	font-size: var(--ec-t-md);
	font-style: normal;
	line-height: 1.45;
	color: var(--ec-tinta);
}

.is-style-ec-jurisprudencia cite,
.ec-jurisprudencia cite,
.is-style-ec-jurisprudencia .wp-block-quote__citation,
.ec-jurisprudencia .wp-block-quote__citation {
	display: block;
	margin-top: var(--ec-e2);
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	font-style: normal;
	letter-spacing: 0.02em;
	color: var(--ec-tinta-suave);
}

/* --- Trámite paso a paso -------------------------------------------------- */
/* La numeración sí procede: un trámite es una secuencia y el orden importa.  */
.is-style-ec-tramite,
.ec-tramite {
	list-style: none;
	counter-reset: paso;
	padding-left: 0;
	margin-block: var(--ec-e4);
}

.is-style-ec-tramite > li,
.ec-tramite > li {
	counter-increment: paso;
	position: relative;
	padding-left: 3rem;
	padding-bottom: var(--ec-e3);
	margin-bottom: 0;
	border-left: 1px solid var(--ec-linea);
	margin-left: 0.85rem;
}

.is-style-ec-tramite > li:last-child,
.ec-tramite > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.is-style-ec-tramite > li::before,
.ec-tramite > li::before {
	content: counter(paso);
	position: absolute;
	left: -0.85rem;
	top: 0;
	width: 1.7rem;
	height: 1.7rem;
	display: grid;
	place-items: center;
	background-color: var(--ec-tinta);
	color: var(--ec-papel);
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	font-weight: 500;
	border-radius: 50%;
}

/* --- Aviso: contenido personal, no institucional -------------------------- */
.ec-aviso {
	border: 1px dashed var(--ec-linea);
	background-color: var(--ec-papel-alt);
	padding: var(--ec-e3);
	margin-block: var(--ec-e5);
	font-size: var(--ec-t-sm);
	color: var(--ec-tinta-media);
	line-height: 1.6;
	border-radius: var(--ec-radio);
}

.ec-aviso strong { color: var(--ec-tinta); }

/* --- Tablas de datos ------------------------------------------------------ */
.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ec-t-sm);
	margin-block: var(--ec-e4);
}

.entry-content th {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	color: var(--ec-tinta-suave);
	border-bottom: 2px solid var(--ec-tinta);
	padding: var(--ec-e2) var(--ec-e2) var(--ec-e2) 0;
}

.entry-content td {
	border-bottom: 1px solid var(--ec-linea);
	padding: var(--ec-e2) var(--ec-e2) var(--ec-e2) 0;
	vertical-align: top;
}

.entry-content tbody tr:hover { background-color: var(--ec-papel-alt); }


/* =============================================================================
   7. LISTADOS Y TARJETAS
   ============================================================================= */

.blog .site-main > article,
.archive .site-main > article {
	border-bottom: 1px solid var(--ec-linea);
	padding-bottom: var(--ec-e4);
	margin-bottom: var(--ec-e4);
	background: transparent;
	box-shadow: none;
}

.blog .entry-title,
.archive .entry-title {
	font-size: var(--ec-t-lg);
	margin-bottom: var(--ec-e1);
	max-width: 32ch;
}

.blog .entry-title a,
.archive .entry-title a { text-decoration: none; }

.blog .entry-title a:hover,
.archive .entry-title a:hover { text-decoration: underline; }

.entry-summary { color: var(--ec-tinta-media); max-width: 60ch; }

/* Cabecera de archivo de categoría */
.page-header {
	border-bottom: 1px solid var(--ec-linea);
	padding-bottom: var(--ec-e3);
	margin-bottom: var(--ec-e4);
	background: transparent;
}

.page-header h1 { font-size: var(--ec-t-xl); }

.taxonomy-description {
	color: var(--ec-tinta-media);
	max-width: 60ch;
	font-size: var(--ec-t-sm);
}

.read-more,
.entry-content .read-more {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}


/* =============================================================================
   8. BARRA LATERAL
   ============================================================================= */

.widget-area .widget {
	background: transparent;
	padding: 0;
	margin-bottom: var(--ec-e5);
	font-size: var(--ec-t-sm);
}

.widget-area .widget-title,
.widget-area .widget h2 {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ec-tinta-suave);
	padding-bottom: var(--ec-e2);
	margin-bottom: var(--ec-e3);
	border-bottom: 1px solid var(--ec-linea);
}

.widget-area ul { list-style: none; padding: 0; margin: 0; }

.widget-area li {
	padding-block: var(--ec-e1);
	line-height: 1.45;
}

.widget-area a { text-decoration: none; }
.widget-area a:hover { text-decoration: underline; }

/* Caja de autor para la barra lateral */
.ec-autor {
	border: 1px solid var(--ec-linea);
	padding: var(--ec-e3);
	border-radius: var(--ec-radio);
}

.ec-autor__nombre {
	font-family: var(--ec-display);
	font-size: var(--ec-t-md);
	font-weight: 600;
	margin: 0 0 var(--ec-e1);
}

.ec-autor__texto {
	font-size: var(--ec-t-sm);
	color: var(--ec-tinta-media);
	line-height: 1.55;
	margin: 0;
}


/* =============================================================================
   9. PIE DE PÁGINA
   ============================================================================= */

.site-footer,
.site-info {
	background-color: var(--ec-papel-alt);
	border-top: 1px solid var(--ec-linea);
	color: var(--ec-tinta-media);
	font-size: var(--ec-t-sm);
}

.site-info a { color: var(--ec-tinta-media); }

.ec-footer-legal {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.03em;
}

.ec-footer-legal a { margin-right: var(--ec-e3); }


/* =============================================================================
   10. FORMULARIOS Y BOTONES
   ============================================================================= */

.button,
button,
input[type="submit"],
.wp-block-button__link {
	font-family: var(--ec-mono);
	font-size: var(--ec-t-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	background-color: var(--ec-tinta);
	color: var(--ec-papel);
	border: 1px solid var(--ec-tinta);
	border-radius: var(--ec-radio);
	padding: 0.7em 1.4em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--ec-acento);
	border-color: var(--ec-acento);
	color: #fff;
}

.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--ec-tinta);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	font-family: var(--ec-texto);
	font-size: var(--ec-t-b);
	background-color: #fff;
	border: 1px solid var(--ec-linea);
	border-radius: var(--ec-radio);
	padding: 0.65em 0.8em;
	color: var(--ec-tinta);
	width: 100%;
}

input:focus,
textarea:focus {
	border-color: var(--ec-acento);
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 110, 92, 0.15);
}

label {
	display: block;
	font-family: var(--ec-mono);
	font-size: var(--ec-t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ec-tinta-suave);
	margin-bottom: var(--ec-e1);
}


/* =============================================================================
   11. ACCESIBILIDAD Y RESPONSIVE
   ============================================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ec-acento);
	outline-offset: 2px;
	border-radius: var(--ec-radio);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 899px) {

	:root { --ec-e6: 3rem; --ec-e5: 2.25rem; }

	.ec-tesis h1,
	.ec-tesis .ec-tesis__titular { max-width: none; }

	.single .entry-title,
	.page .entry-title { max-width: none; }

	/* Tablas anchas: desplazamiento horizontal en lugar de romper la maqueta */
	.entry-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media print {
	.main-navigation,
	.widget-area,
	.site-footer,
	.ec-pilares { display: none; }

	body { font-size: 11pt; color: #000; background: #fff; }
	.entry-content { max-width: none; padding-left: 0; border-left: 0; }
	a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}