/*!
Theme Name: Base Starter
Theme URI: https://underscores.me/
Author: vanev
Author URI:
Description: Theme clásico y ligero para construir contenido con Elementor. Incluye cabecera, pie de página y menús predeterminados y personalizables: varios layouts, columnas de widgets, panel móvil y soporte del Theme Builder de Elementor Pro.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 7.1
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: base-starter
Tags: elementor, custom-logo, custom-menu, footer-widgets, right-sidebar, full-width-template, translation-ready, threaded-comments, wide-blocks
*/

/* ==========================================================================
   0. Variables de reserva: el PHP las inyecta en línea y las sobrescribe.
   ========================================================================== */
:root {
	--bs-accent: #1f6feb;
	--bs-header-bg: #ffffff;
	--bs-header-color: #1a1a1a;
	--bs-footer-bg: #111827;
	--bs-footer-color: #e5e7eb;
	--bs-wide-width: 1200px;
	--bs-breakpoint: 1024px;
}

/* ==========================================================================
   1. Reinicio y caja
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video, iframe { max-width: 100%; height: auto; }
figure { margin: 0 0 1.5rem; }
figcaption { font-size: .875rem; color: #4b5563; }
hr { border: 0; border-block-start: 1px solid rgba(0, 0, 0, .12); margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.5rem; }
th, td { padding: .6em .75em; border: 1px solid rgba(0, 0, 0, .12); text-align: start; }

/* ==========================================================================
   2. Tipografía (solo pila de fuentes del sistema, sin webfonts)
   ========================================================================== */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: #1f2937;
	background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	line-height: 1.25;
	color: #111827;
	font-weight: 700;
	overflow-wrap: break-word;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.15rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); }
h4 { font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
p, ul, ol, dl, blockquote { margin: 0 0 1.5rem; }
ul, ol { padding-inline-start: 1.4rem; }
blockquote { padding-inline-start: 1.25rem; border-inline-start: 4px solid var(--bs-accent); font-style: italic; color: #374151; }
pre, code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { overflow: auto; padding: 1rem 1.25rem; border-radius: 8px; background-color: #f3f4f6; }
code, kbd { padding: .15em .4em; border-radius: 4px; background-color: #f3f4f6; }
small { font-size: .875rem; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
mark { background-color: #fde68a; color: inherit; }

/* ==========================================================================
   3. Enlaces y foco
   ========================================================================== */
a { color: var(--bs-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: color-mix(in srgb, var(--bs-accent) 80%, #000); }
:focus-visible { outline: 2px solid var(--bs-accent); outline-offset: 2px; }

/* ==========================================================================
   4. Formularios y botones
   ========================================================================== */
input,
select,
textarea {
	width: 100%;
	padding: .6em .8em;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 8px;
	background-color: #fff;
	font: inherit;
	color: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
label { display: inline-block; margin-block-end: .35rem; font-weight: 600; }
input[type="submit"], button { width: auto; padding: .7em 1.35em; border: 0; border-radius: 8px; background-color: var(--bs-accent); color: #fff; font: inherit; cursor: pointer; }
.bs-button { display: inline-block; padding: .7em 1.35em; border-radius: 8px; background-color: var(--bs-accent); color: #fff; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
/* Reserva plana antes de color-mix(), para navegadores sin soporte. */
.bs-button:hover, .bs-button:focus-visible, input[type="submit"]:hover, button:hover {
	background-color: #1b5fd0;
	background-color: color-mix(in srgb, var(--bs-accent) 88%, #000);
	color: #fff;
}
.search-form { display: flex; flex-flow: row wrap; gap: .5rem; align-items: stretch; }
.search-form input[type="search"] { flex: 1 1 auto; min-inline-size: 0; }
.search-form input[type="submit"] { flex: 0 0 auto; }
.comment-form p { margin: 0 0 1rem; }

/* ==========================================================================
   5. Accesibilidad
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}
.screen-reader-text:focus {
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	clip-path: none;
	color: var(--bs-accent);
	display: block;
	font-size: .875rem;
	font-weight: 700;
	height: auto;
	inset-inline-start: .5rem;
	top: .5rem;
	line-height: normal;
	padding: .75rem 1rem;
	text-decoration: none;
	width: auto;
	z-index: 100000;
}
.skip-link { position: absolute; inset-inline-start: -9999px; top: -9999px; }
.skip-link:focus { position: fixed; inset-inline-start: .5rem; top: .5rem; z-index: 100000; background-color: #fff; padding: .75rem 1rem; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); text-decoration: none; }

/* ==========================================================================
   6. Alineaciones y bloques
   ========================================================================== */
.alignleft { float: left; margin-inline: 0 1.5rem; margin-block-end: 1rem; }
.alignright { float: right; margin-inline: 1.5rem 0; margin-block-end: 1rem; }
.aligncenter { display: block; margin-inline: auto; margin-block-end: 1.5rem; }
.alignwide { margin-inline: clamp(-1rem, -4vw, -2.5rem); max-inline-size: none; }
.alignfull { margin-inline: calc(50% - 50vw); max-inline-size: 100vw; width: 100vw; }
/* En pantallas estrechas las imágenes flotantes se apilan y centran. */
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin-inline: 0; }
}
.wp-caption { max-width: 100%; margin-block-end: 1.5rem; }
.wp-caption-text { font-size: .875rem; color: #4b5563; text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-block-end: 1.5rem; }
.gallery-item { margin: 0; }
.gallery-caption { font-size: .8125rem; color: #4b5563; }
.sticky { border-inline-start: 3px solid var(--bs-accent); padding-inline-start: 1rem; }
.bypostauthor { font-style: normal; }
.wp-smiley { border: 0; margin: 0; padding: 0; }
.wp-block-image figcaption { margin-block-start: .5rem; font-size: .8125rem; color: #4b5563; text-align: center; }

/* ==========================================================================
   7. Estructura de entrada
   ========================================================================== */
.entry-header { margin-block-end: 1rem; }
.entry-title { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.entry-meta { font-size: .875rem; color: #4b5563; }
.entry-content > *:last-child, .entry-summary > *:last-child { margin-block-end: 0; }
.entry-summary { margin-block-end: 1rem; }
.entry-footer { margin-block-start: 1.5rem; font-size: .875rem; color: #4b5563; }
.posted-on, .byline, .cat-links, .tags-links { display: inline-block; margin-inline-end: .75rem; }
.edit-link { display: inline-block; font-weight: 600; }
.post-thumbnail { display: block; margin-block-end: 1rem; overflow: hidden; border-radius: 12px; }
.page-links { clear: both; margin-block-start: 1.5rem; font-weight: 600; }
.page-header { margin-block-end: 2rem; }
.page-title { margin: 0; }
.page-content { margin-block-end: 1.5rem; }
.archive-description { margin-block-end: 2rem; color: #4b5563; }
.nav-subtitle { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.nav-title { font-weight: 700; }

/* ==========================================================================
   8. Listados y tarjetas
   ========================================================================== */
.bs-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2rem; margin-block-end: 2rem; }
.bs-card { border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; overflow: hidden; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.bs-card__body { padding: 1.5rem; }
.bs-card .entry-title { font-size: 1.25rem; }
.bs-card .post-thumbnail { margin: 0; border-radius: 0; }
.bs-card .post-thumbnail img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; }
.bs-card .entry-footer { margin-block-start: 1rem; font-size: .8125rem; color: #6b7280; }

/* ==========================================================================
   9. Contenedores y maquetación
   ========================================================================== */
.bs-content { width: 100%; }
.bs-main { width: 100%; min-inline-size: 0; }
.bs-main--full, .bs-main--blank { max-inline-size: none; }
.bs-container { width: 100%; margin-inline: auto; max-inline-size: var(--bs-wide-width); padding-inline: clamp(1rem, 4vw, 2.5rem); }
.bs-container--full { max-inline-size: none; padding-inline: 0; }
/* Sin modificador es un bloque simple: las columnas las fija el PHP por breakpoint. */
.bs-layout { display: block; width: 100%; }
.bs-layout--sidebar { display: grid; gap: 2.5rem; align-items: start; }

/* ==========================================================================
   10. Barra lateral y widgets
   ========================================================================== */
.bs-sidebar, .widget-area { min-inline-size: 0; }
.widget { margin-block-end: 2.5rem; }
.widget:last-child { margin-block-end: 0; }
.widget-title { margin: 0 0 1rem; font-size: 1.125rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul ul { padding-inline-start: 1rem; margin-block-start: .35rem; }
.widget a { text-decoration: none; }
.widget a:hover, .widget a:focus { text-decoration: underline; }
.widget_tag_cloud, .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.widget_tag_cloud a, .wp-block-tag-cloud a { display: inline-block; padding: .3em .7em; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px; font-size: .8125rem; text-decoration: none; }

/* ==========================================================================
   11. Comentarios
   ========================================================================== */
.bs-comments, .comments-area { margin-block-start: 2.5rem; }
.comments-title { margin-block-end: 1.5rem; font-size: 1.25rem; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list ul { list-style: none; padding-inline-start: 1.5rem; }
.comment-body { border-block-start: 1px solid rgba(0, 0, 0, .1); padding-block: 1.5rem; }
.comment-author .avatar { border-radius: 50%; margin-inline-end: .5rem; vertical-align: middle; }
.comment-metadata { font-size: .8125rem; color: #6b7280; }
.reply { margin-block-start: .5rem; font-size: .875rem; }
.comment-reply-title { margin-block-end: 1rem; font-size: 1.125rem; }
.comment-form { display: grid; gap: 1rem; }
.comment-form p { margin: 0; }
.comment-form input[type="submit"] { width: 100%; }
.no-comments, .pingback { font-size: .875rem; color: #6b7280; }

/* ==========================================================================
   12. Paginación y navegación entre entradas
   ========================================================================== */
.navigation.pagination { margin-block: 2rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5em;
	min-height: 2.5em;
	padding: .25em .6em;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.page-numbers.current, .page-numbers:hover, .page-numbers:focus { background-color: var(--bs-accent); border-color: var(--bs-accent); color: #fff; }
.nav-previous, .nav-next { margin-block: 1.5rem; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
/* Dos columnas solo cuando hay espacio; en móvil se apila en una. */
@media (min-width: 768px) {
	.post-navigation .nav-links { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   13. Estados vacíos y plantilla a ancho completo
   ========================================================================== */
.error-404, .no-results, .not-found { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); padding-inline: 1rem; }
.bs-fullwidth, .bs-fullwidth .entry-content { max-inline-size: none; padding-inline: 0; margin-inline: 0; }

/* ==========================================================================
   14. Impresión: se ocultan cabecera, pie, navegación y barra lateral
   ========================================================================== */
@media print {
	header, footer, nav, .bs-sidebar { display: none; }
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   15. Movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bs-button, .page-numbers { transition: none; }
}