/**
 * Bersoft Theme — Estilos base y utilidades del Design System (theme.css)
 *
 * Implementación de reglas tipográficas, botones, formularios, contenedores,
 * radios y espaciados basados estrictamente en tokens CSS (--bs-*).
 *
 * @package Bersoft_Theme
 * @since   0.2.0
 */

/* ==========================================================================
   1. Tipografía Global
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--bs-font-heading, system-ui, sans-serif);
	color: var(--bs-color-heading, #172126);
	margin-top: 0;
	margin-bottom: 0.5em;
	font-weight: 700;
	text-rendering: optimizeLegibility;
}

h1, .h1 {
	font-size: var(--bs-h1-size, 48px);
	line-height: var(--bs-h1-line-height, 1.15);
	font-weight: var(--bs-h1-font-weight, 700);
}

h2, .h2 {
	font-size: var(--bs-h2-size, 36px);
	line-height: var(--bs-h2-line-height, 1.2);
	font-weight: var(--bs-h2-font-weight, 700);
}

h3, .h3 {
	font-size: var(--bs-h3-size, 26px);
	line-height: var(--bs-h3-line-height, 1.3);
	font-weight: var(--bs-h3-font-weight, 600);
}

h4, .h4 {
	font-size: var(--bs-h4-size, 20px);
	line-height: var(--bs-h4-line-height, 1.35);
	font-weight: var(--bs-h4-font-weight, 600);
}

p {
	margin-top: 0;
	margin-bottom: 1.25em;
}

.text-small {
	font-size: var(--bs-small-size, 14px);
	line-height: var(--bs-small-line-height, 1.5);
}

.text-caption {
	font-size: var(--bs-caption-size, 12px);
	line-height: var(--bs-caption-line-height, 1.4);
	color: var(--bs-color-text-secondary, #6B7280);
}

a {
	color: var(--bs-color-primary, #0F4C5C);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover, a:focus {
	color: var(--bs-color-primary-dark, #0A3540);
}

/* ==========================================================================
   2. Contenedor y Layout
   ========================================================================== */

.bersoft-container {
	width: 100%;
	max-width: var(--bs-container-max, 1280px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bs-container-padding, 32px);
	padding-right: var(--bs-container-padding, 32px);
}

.site-header {
	width: 100%;
	background-color: var(--bs-color-background, #ffffff);
	border-bottom: 1px solid var(--bs-color-border, #dde4e6);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.site-title {
	font-family: var(--bs-font-heading, system-ui, sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--bs-color-heading, #172126);
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
}

.main-navigation a {
	text-decoration: none;
	color: var(--bs-color-heading, #172126);
	font-weight: 500;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--bs-color-primary, #0f4c5c);
}

.site-footer {
	margin-top: var(--bs-spacing-normal, 80px);
	background-color: var(--bs-color-surface, #f5f7f8);
	border-top: 1px solid var(--bs-color-border, #dde4e6);
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	font-size: var(--bs-small-size, 14px);
	color: var(--bs-color-text-secondary, #6b7280);
}

.site-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* ==========================================================================
   3. Botones Globales
   ========================================================================== */

.bs-btn,
button:not([class*="bs-opt-"]):not([class*="bs-header-"]):not(.bs-search-btn):not(.bs-menu-toggle):not(.bs-hamburger-btn),
input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bs-font-body, system-ui, sans-serif);
	font-size: var(--bs-btn-font-size, 15px);
	font-weight: var(--bs-btn-font-weight, 600);
	text-transform: var(--bs-btn-transform, none);
	line-height: 1.2;
	padding: var(--bs-btn-padding-y, 12px) var(--bs-btn-padding-x, 24px);
	border-radius: var(--bs-btn-radius, 8px);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	user-select: none;
}

/* Botón Primario */
.bs-btn-primary,
button:not(.bs-btn-secondary):not(.bs-btn-outline):not(.bs-btn-link):not([class*="bs-opt-"]):not([class*="bs-header-"]):not(.bs-search-btn):not(.bs-menu-toggle):not(.bs-hamburger-btn),
input[type="submit"] {
	background-color: var(--bs-color-primary, #0F4C5C);
	color: #FFFFFF;
	border-color: var(--bs-color-primary, #0F4C5C);
}

.bs-btn-primary:hover,
button:not(.bs-btn-secondary):not(.bs-btn-outline):not(.bs-btn-link):not([class*="bs-opt-"]):not([class*="bs-header-"]):not(.bs-search-btn):not(.bs-menu-toggle):not(.bs-hamburger-btn):hover,
input[type="submit"]:hover {
	background-color: var(--bs-color-primary-dark, #0A3540);
	border-color: var(--bs-color-primary-dark, #0A3540);
	color: #FFFFFF;
}

/* Botón Secundario */
.bs-btn-secondary {
	background-color: var(--bs-color-surface, #F5F7F8);
	color: var(--bs-color-heading, #172126);
	border-color: var(--bs-color-border, #DDE4E6);
}

.bs-btn-secondary:hover {
	background-color: var(--bs-color-border, #DDE4E6);
	color: var(--bs-color-heading, #172126);
}

/* Botón Outline */
.bs-btn-outline {
	background-color: transparent;
	color: var(--bs-color-primary, #0F4C5C);
	border-color: var(--bs-color-primary, #0F4C5C);
}

.bs-btn-outline:hover {
	background-color: var(--bs-color-primary, #0F4C5C);
	color: #FFFFFF;
}

/* Botón Link */
.bs-btn-link {
	background-color: transparent;
	color: var(--bs-color-primary, #0F4C5C);
	border-color: transparent;
	padding: 0;
	text-decoration: underline;
}

.bs-btn-link:hover {
	color: var(--bs-color-primary-dark, #0A3540);
}

/* ==========================================================================
   4. Formularios y Campos
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
	width: 100%;
	min-height: var(--bs-form-height, 46px);
	padding: 8px var(--bs-form-padding-x, 14px);
	font-family: var(--bs-font-body, system-ui, sans-serif);
	font-size: var(--bs-form-font-size, 15px);
	color: var(--bs-color-text, #4B5563);
	background-color: var(--bs-color-background, #FFFFFF);
	border: var(--bs-form-border-width, 1px) solid var(--bs-color-border, #DDE4E6);
	border-radius: var(--bs-form-radius, 6px);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
	min-height: 120px;
	padding-top: 10px;
	padding-bottom: 10px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--bs-color-primary, #0F4C5C);
	box-shadow: 0 0 0 3px var(--bs-color-primary-light, #DCECEF);
}

input.has-error,
select.has-error,
textarea.has-error {
	border-color: var(--bs-color-error, #EF4444);
}

label {
	display: inline-block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--bs-color-heading, #172126);
	font-size: var(--bs-small-size, 14px);
}

/* ==========================================================================
   5. Espaciado y Radios Utilitarios
   ========================================================================== */

.bs-section-compact {
	padding-top: var(--bs-spacing-compact, 48px);
	padding-bottom: var(--bs-spacing-compact, 48px);
}

.bs-section-normal {
	padding-top: var(--bs-spacing-normal, 80px);
	padding-bottom: var(--bs-spacing-normal, 80px);
}

.bs-section-spacious {
	padding-top: var(--bs-spacing-spacious, 120px);
	padding-bottom: var(--bs-spacing-spacious, 120px);
}

.bs-rounded-sm   { border-radius: var(--bs-radius-sm, 6px); }
.bs-rounded-md   { border-radius: var(--bs-radius-md, 12px); }
.bs-rounded-lg   { border-radius: var(--bs-radius-lg, 20px); }
.bs-rounded-pill { border-radius: var(--bs-radius-pill, 9999px); }

/* ==========================================================================
   6. Accesibilidad (Reduced Motion)
   ========================================================================== */

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