/**
 * BXC Base - Framework CSS propio (bxc-).
 * -----------------------------------------------------------
 * Sistema de layout, grid, flex, utilidades y tipografía.
 * Todos los selectores usan el prefijo bxc- para evitar colisiones
 * con plugins y temas hijos. Los nombres siguen BEM donde aplica.
 *
 * Estructura:
 *   1. Tokens (variables CSS :root)
 *   2. Reset moderno
 *   3. Layout helpers (flex, grid)
 *   4. Sistema de columnas (sm/md/lg)
 *   5. Espaciados (margins/paddings utilitarios)
 *   6. Tipografía
 *   7. Utilidades varias (visibility, helpers)
 *   8. Debug
 */

/* ===================================================================
 * 1. TOKENS
 * =================================================================== */
:root {
	--bxc-color-primary:   #1c1c1c;
	--bxc-color-secondary: #444;
	--bxc-color-accent:    #f00;
	--bxc-color-bg:        #ffffff;
	--bxc-color-text:      #1c1c1c;
	--bxc-color-muted:     #6c757d;
	--bxc-color-border:    #dee2e6;
	--bxc-color-success:   #28a745;
	--bxc-color-warning:   #ffc107;
	--bxc-color-danger:    #dc3545;
	--bxc-color-info:      #17a2b8;

	--bxc-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--bxc-font-serif: "Times New Roman", Georgia, serif;
	--bxc-font-mono:  "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

	--bxc-font-size-base: 16px;
	--bxc-font-size-xs:   0.75rem;
	--bxc-font-size-sm:   0.875rem;
	--bxc-font-size-md:   1rem;
	--bxc-font-size-lg:   1.25rem;
	--bxc-font-size-xl:   1.5rem;
	--bxc-font-size-2xl:  2rem;
	--bxc-font-size-3xl:  3rem;

	--bxc-spacing-unit: 8px;
	--bxc-radius-sm: 4px;
	--bxc-radius-md: 8px;
	--bxc-radius-lg: 16px;
	--bxc-radius-full: 9999px;

	--bxc-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
	--bxc-shadow-md: 0 4px 8px rgba(0,0,0,.1);
	--bxc-shadow-lg: 0 10px 20px rgba(0,0,0,.15);

	--bxc-transition-fast: 0.15s ease;
	--bxc-transition-base: 0.3s ease;
	--bxc-transition-slow: 0.6s ease;

	--bxc-breakpoint-sm: 576px;
	--bxc-breakpoint-md: 768px;
	--bxc-breakpoint-lg: 992px;
	--bxc-breakpoint-xl: 1280px;

	--bxc-container-max-width: 1200px;
	--bxc-gutter: 16px;
}

/* ===================================================================
 * 2. RESET MODERNO
 * =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
	margin: 0;
	padding: 0;
	font-family: var(--bxc-font-sans);
	font-size: var(--bxc-font-size-base);
	line-height: 1.6;
	color: var(--bxc-color-text);
	background: var(--bxc-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; transition: color var(--bxc-transition-fast); }
a:hover { color: var(--bxc-color-accent); }
ul, ol { margin: 0; padding: 0; }
code { font-family: var(--bxc-font-mono); white-space: pre-wrap; background: #f4f4f4; padding: 4px 6px; border-radius: 4px; display: inline-block; }
pre { font-family: var(--bxc-font-mono); background: #f4f4f4; padding: 12px; border-radius: var(--bxc-radius-md); overflow: auto; }
pre code { background: none; padding: 0; }

/* ===================================================================
 * 3. LAYOUT HELPERS
 * =================================================================== */
.bxc-container {
	width: 100%;
	max-width: var(--bxc-container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bxc-gutter);
	padding-right: var(--bxc-gutter);
}

.bxc-flex { display: flex; }
.bxc-inline-flex { display: inline-flex; }
.bxc-flex-column { flex-direction: column; }
.bxc-flex-row { flex-direction: row; }
.bxc-flex-wrap { flex-wrap: wrap; }
.bxc-flex-nowrap { flex-wrap: nowrap; }
.bxc-flex-1 { flex: 1 1 0%; }
.bxc-flex-grow { flex-grow: 1; }
.bxc-flex-shrink-0 { flex-shrink: 0; }
.bxc-flex-center { justify-content: center; align-items: center; }
.bxc-flex-between { justify-content: space-between; align-items: center; }
.bxc-flex-around { justify-content: space-around; align-items: center; }
.bxc-flex-start { justify-content: flex-start; align-items: center; }
.bxc-flex-end { justify-content: flex-end; align-items: center; }
.bxc-items-center { align-items: center; }
.bxc-items-start { align-items: flex-start; }
.bxc-items-end { align-items: flex-end; }
.bxc-items-stretch { align-items: stretch; }
.bxc-justify-center { justify-content: center; }
.bxc-justify-start { justify-content: flex-start; }
.bxc-justify-end { justify-content: flex-end; }
.bxc-justify-between { justify-content: space-between; }
.bxc-justify-around { justify-content: space-around; }
.bxc-gap-1 { gap: 8px; }
.bxc-gap-2 { gap: 16px; }
.bxc-gap-3 { gap: 24px; }
.bxc-gap-4 { gap: 32px; }

.bxc-grid { display: grid; gap: var(--bxc-gutter); }
.bxc-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bxc-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bxc-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.bxc-relative { position: relative; }
.bxc-absolute { position: absolute; }
.bxc-fixed { position: fixed; }
.bxc-sticky { position: sticky; top: 0; z-index: 100; }
.bxc-top-0 { top: 0; }
.bxc-left-0 { left: 0; }
.bxc-right-0 { right: 0; }
.bxc-bottom-0 { bottom: 0; }
.bxc-w-100 { width: 100%; }
.bxc-h-100 { height: 100%; }
.bxc-w-auto { width: auto; }
.bxc-h-auto { height: auto; }

/* ===================================================================
 * 4. SISTEMA DE COLUMNAS (sm/md/lg)
 * =================================================================== */
.bxc-row {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--bxc-gutter) / -2);
	margin-right: calc(var(--bxc-gutter) / -2);
}
.bxc-row > [class^="bxc-col-"] {
	padding-left: calc(var(--bxc-gutter) / 2);
	padding-right: calc(var(--bxc-gutter) / 2);
}

/* Mobile-first: por defecto sm */
.bxc-col-sm-1  { width: 8.333%; }
.bxc-col-sm-2  { width: 16.667%; }
.bxc-col-sm-3  { width: 25%; }
.bxc-col-sm-4  { width: 33.333%; }
.bxc-col-sm-5  { width: 41.667%; }
.bxc-col-sm-6  { width: 50%; }
.bxc-col-sm-7  { width: 58.333%; }
.bxc-col-sm-8  { width: 66.667%; }
.bxc-col-sm-9  { width: 75%; }
.bxc-col-sm-10 { width: 83.333%; }
.bxc-col-sm-11 { width: 91.667%; }
.bxc-col-sm-12 { width: 100%; }

.bxc-col-sm-offset-1  { margin-left: 8.333%; }
.bxc-col-sm-offset-2  { margin-left: 16.667%; }
.bxc-col-sm-offset-3  { margin-left: 25%; }
.bxc-col-sm-offset-4  { margin-left: 33.333%; }
.bxc-col-sm-offset-5  { margin-left: 41.667%; }
.bxc-col-sm-offset-6  { margin-left: 50%; }
.bxc-col-sm-offset-7  { margin-left: 58.333%; }
.bxc-col-sm-offset-8  { margin-left: 66.667%; }
.bxc-col-sm-offset-9  { margin-left: 75%; }
.bxc-col-sm-offset-10 { margin-left: 83.333%; }
.bxc-col-sm-offset-11 { margin-left: 91.667%; }
.bxc-col-sm-offset-12 { margin-left: 100%; }

.bxc-col-sm-first  { order: -9999999; }
.bxc-col-sm-last   { order: 9999999; }
.bxc-col-sm-normal { order: 0; }

.bxc-only-desktop { display: none; }
.bxc-only-mobile  { display: block; }
.bxc-only-tablet  { display: none; }

/* Tablet */
@media (min-width: 768px) {
	.bxc-col-md-1  { width: 8.333%; }
	.bxc-col-md-2  { width: 16.667%; }
	.bxc-col-md-3  { width: 25%; }
	.bxc-col-md-4  { width: 33.333%; }
	.bxc-col-md-5  { width: 41.667%; }
	.bxc-col-md-6  { width: 50%; }
	.bxc-col-md-7  { width: 58.333%; }
	.bxc-col-md-8  { width: 66.667%; }
	.bxc-col-md-9  { width: 75%; }
	.bxc-col-md-10 { width: 83.333%; }
	.bxc-col-md-11 { width: 91.667%; }
	.bxc-col-md-12 { width: 100%; }

	.bxc-col-md-offset-0  { margin-left: 0; }
	.bxc-col-md-offset-1  { margin-left: 8.333%; }
	.bxc-col-md-offset-2  { margin-left: 16.667%; }
	.bxc-col-md-offset-3  { margin-left: 25%; }
	.bxc-col-md-offset-4  { margin-left: 33.333%; }
	.bxc-col-md-offset-5  { margin-left: 41.667%; }
	.bxc-col-md-offset-6  { margin-left: 50%; }
	.bxc-col-md-offset-7  { margin-left: 58.333%; }
	.bxc-col-md-offset-8  { margin-left: 66.667%; }
	.bxc-col-md-offset-9  { margin-left: 75%; }
	.bxc-col-md-offset-10 { margin-left: 83.333%; }
	.bxc-col-md-offset-11 { margin-left: 91.667%; }
	.bxc-col-md-offset-12 { margin-left: 100%; }

	.bxc-col-md-first  { order: -9999999; }
	.bxc-col-md-last   { order: 9999999; }
	.bxc-col-md-normal { order: 0; }

	.bxc-only-desktop { display: block; }
	.bxc-only-mobile  { display: none; }
	.bxc-only-tablet  { display: block; }
}

/* Desktop */
@media (min-width: 1280px) {
	.bxc-col-lg-1  { width: 8.333%; }
	.bxc-col-lg-2  { width: 16.667%; }
	.bxc-col-lg-3  { width: 25%; }
	.bxc-col-lg-4  { width: 33.333%; }
	.bxc-col-lg-5  { width: 41.667%; }
	.bxc-col-lg-6  { width: 50%; }
	.bxc-col-lg-7  { width: 58.333%; }
	.bxc-col-lg-8  { width: 66.667%; }
	.bxc-col-lg-9  { width: 75%; }
	.bxc-col-lg-10 { width: 83.333%; }
	.bxc-col-lg-11 { width: 91.667%; }
	.bxc-col-lg-12 { width: 100%; }

	.bxc-col-lg-offset-0  { margin-left: 0; }
	.bxc-col-lg-offset-1  { margin-left: 8.333%; }
	.bxc-col-lg-offset-2  { margin-left: 16.667%; }
	.bxc-col-lg-offset-3  { margin-left: 25%; }
	.bxc-col-lg-offset-4  { margin-left: 33.333%; }
	.bxc-col-lg-offset-5  { margin-left: 41.667%; }
	.bxc-col-lg-offset-6  { margin-left: 50%; }
	.bxc-col-lg-offset-7  { margin-left: 58.333%; }
	.bxc-col-lg-offset-8  { margin-left: 66.667%; }
	.bxc-col-lg-offset-9  { margin-left: 75%; }
	.bxc-col-lg-offset-10 { margin-left: 83.333%; }
	.bxc-col-lg-offset-11 { margin-left: 91.667%; }
	.bxc-col-lg-offset-12 { margin-left: 100%; }

	.bxc-col-lg-first  { order: -9999999; }
	.bxc-col-lg-last   { order: 9999999; }
	.bxc-col-lg-normal { order: 0; }
}

/* ===================================================================
 * 5. ESPACIADOS UTILITARIOS
 * =================================================================== */
.bxc-m-0  { margin: 0; }
.bxc-m-1  { margin: calc(var(--bxc-spacing-unit) * 1); }
.bxc-m-2  { margin: calc(var(--bxc-spacing-unit) * 2); }
.bxc-m-3  { margin: calc(var(--bxc-spacing-unit) * 3); }
.bxc-m-4  { margin: calc(var(--bxc-spacing-unit) * 4); }
.bxc-m-5  { margin: calc(var(--bxc-spacing-unit) * 5); }
.bxc-m-auto { margin: auto; }
.bxc-mt-0 { margin-top: 0; } .bxc-mt-1 { margin-top: calc(var(--bxc-spacing-unit) * 1); } .bxc-mt-2 { margin-top: calc(var(--bxc-spacing-unit) * 2); } .bxc-mt-3 { margin-top: calc(var(--bxc-spacing-unit) * 3); } .bxc-mt-4 { margin-top: calc(var(--bxc-spacing-unit) * 4); } .bxc-mt-5 { margin-top: calc(var(--bxc-spacing-unit) * 5); }
.bxc-mb-0 { margin-bottom: 0; } .bxc-mb-1 { margin-bottom: calc(var(--bxc-spacing-unit) * 1); } .bxc-mb-2 { margin-bottom: calc(var(--bxc-spacing-unit) * 2); } .bxc-mb-3 { margin-bottom: calc(var(--bxc-spacing-unit) * 3); } .bxc-mb-4 { margin-bottom: calc(var(--bxc-spacing-unit) * 4); } .bxc-mb-5 { margin-bottom: calc(var(--bxc-spacing-unit) * 5); }
.bxc-ml-0 { margin-left: 0; } .bxc-ml-1 { margin-left: calc(var(--bxc-spacing-unit) * 1); } .bxc-ml-2 { margin-left: calc(var(--bxc-spacing-unit) * 2); } .bxc-ml-3 { margin-left: calc(var(--bxc-spacing-unit) * 3); } .bxc-ml-4 { margin-left: calc(var(--bxc-spacing-unit) * 4); } .bxc-ml-5 { margin-left: calc(var(--bxc-spacing-unit) * 5); }
.bxc-mr-0 { margin-right: 0; } .bxc-mr-1 { margin-right: calc(var(--bxc-spacing-unit) * 1); } .bxc-mr-2 { margin-right: calc(var(--bxc-spacing-unit) * 2); } .bxc-mr-3 { margin-right: calc(var(--bxc-spacing-unit) * 3); } .bxc-mr-4 { margin-right: calc(var(--bxc-spacing-unit) * 4); } .bxc-mr-5 { margin-right: calc(var(--bxc-spacing-unit) * 5); }

.bxc-p-0  { padding: 0; } .bxc-p-1 { padding: calc(var(--bxc-spacing-unit) * 1); } .bxc-p-2 { padding: calc(var(--bxc-spacing-unit) * 2); } .bxc-p-3 { padding: calc(var(--bxc-spacing-unit) * 3); } .bxc-p-4 { padding: calc(var(--bxc-spacing-unit) * 4); } .bxc-p-5 { padding: calc(var(--bxc-spacing-unit) * 5); }
.bxc-pt-0 { padding-top: 0; } .bxc-pt-1 { padding-top: calc(var(--bxc-spacing-unit) * 1); } .bxc-pt-2 { padding-top: calc(var(--bxc-spacing-unit) * 2); } .bxc-pt-3 { padding-top: calc(var(--bxc-spacing-unit) * 3); } .bxc-pt-4 { padding-top: calc(var(--bxc-spacing-unit) * 4); } .bxc-pt-5 { padding-top: calc(var(--bxc-spacing-unit) * 5); }
.bxc-pb-0 { padding-bottom: 0; } .bxc-pb-1 { padding-bottom: calc(var(--bxc-spacing-unit) * 1); } .bxc-pb-2 { padding-bottom: calc(var(--bxc-spacing-unit) * 2); } .bxc-pb-3 { padding-bottom: calc(var(--bxc-spacing-unit) * 3); } .bxc-pb-4 { padding-bottom: calc(var(--bxc-spacing-unit) * 4); } .bxc-pb-5 { padding-bottom: calc(var(--bxc-spacing-unit) * 5); }
.bxc-pl-0 { padding-left: 0; } .bxc-pl-1 { padding-left: calc(var(--bxc-spacing-unit) * 1); } .bxc-pl-2 { padding-left: calc(var(--bxc-spacing-unit) * 2); } .bxc-pl-3 { padding-left: calc(var(--bxc-spacing-unit) * 3); } .bxc-pl-4 { padding-left: calc(var(--bxc-spacing-unit) * 4); } .bxc-pl-5 { padding-left: calc(var(--bxc-spacing-unit) * 5); }
.bxc-pr-0 { padding-right: 0; } .bxc-pr-1 { padding-right: calc(var(--bxc-spacing-unit) * 1); } .bxc-pr-2 { padding-right: calc(var(--bxc-spacing-unit) * 2); } .bxc-pr-3 { padding-right: calc(var(--bxc-spacing-unit) * 3); } .bxc-pr-4 { padding-right: calc(var(--bxc-spacing-unit) * 4); } .bxc-pr-5 { padding-right: calc(var(--bxc-spacing-unit) * 5); }

/* ===================================================================
 * 6. TIPOGRAFÍA
 * =================================================================== */
.bxc-text-left { text-align: left; }
.bxc-text-right { text-align: right; }
.bxc-text-center { text-align: center; }
.bxc-text-justify { text-align: justify; }
.bxc-text-uppercase { text-transform: uppercase; }
.bxc-text-lowercase { text-transform: lowercase; }
.bxc-text-capitalize { text-transform: capitalize; }
.bxc-text-bold { font-weight: 700; }
.bxc-text-semibold { font-weight: 600; }
.bxc-text-light { font-weight: 300; }
.bxc-text-italic { font-style: italic; }
.bxc-text-decoration-none { text-decoration: none; }
.bxc-text-decoration-underline { text-decoration: underline; }
.bxc-text-xs { font-size: var(--bxc-font-size-xs); }
.bxc-text-sm { font-size: var(--bxc-font-size-sm); }
.bxc-text-md { font-size: var(--bxc-font-size-md); }
.bxc-text-lg { font-size: var(--bxc-font-size-lg); }
.bxc-text-xl { font-size: var(--bxc-font-size-xl); }
.bxc-text-2xl { font-size: var(--bxc-font-size-2xl); }
.bxc-text-3xl { font-size: var(--bxc-font-size-3xl); }
.bxc-text-muted { color: var(--bxc-color-muted); }
.bxc-text-primary { color: var(--bxc-color-primary); }
.bxc-text-accent { color: var(--bxc-color-accent); }

.bxc-drop-caps:first-letter {
	display: block;
	float: left;
	margin: 3px;
	color: var(--bxc-color-accent);
	font-size: 300%;
	line-height: 1;
}

/* ===================================================================
 * 7. UTILIDADES
 * =================================================================== */
.bxc-hidden { display: none !important; }
.bxc-visible { display: block !important; }
.bxc-clearfix::after { content: ""; display: table; clear: both; }
.bxc-target-top-margin { padding-top: 5vh; }
.bxc-scaling { transform-origin: 0 0; }
.bxc-rounded-sm { border-radius: var(--bxc-radius-sm); }
.bxc-rounded-md { border-radius: var(--bxc-radius-md); }
.bxc-rounded-lg { border-radius: var(--bxc-radius-lg); }
.bxc-rounded-full { border-radius: var(--bxc-radius-full); }
.bxc-shadow-sm { box-shadow: var(--bxc-shadow-sm); }
.bxc-shadow-md { box-shadow: var(--bxc-shadow-md); }
.bxc-shadow-lg { box-shadow: var(--bxc-shadow-lg); }
.bxc-bg-primary { background-color: var(--bxc-color-primary); }
.bxc-bg-white { background-color: #fff; }
.bxc-bg-light { background-color: #f8f9fa; }
.bxc-bg-dark { background-color: var(--bxc-color-primary); color: #fff; }
.bxc-bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.bxc-overflow-hidden { overflow: hidden; }
.bxc-overflow-auto { overflow: auto; }
.bxc-cursor-pointer { cursor: pointer; }
.bxc-pointer-events-none { pointer-events: none; }
.bxc-z-index-10 { z-index: 10; }
.bxc-z-index-100 { z-index: 100; }
.bxc-z-index-1000 { z-index: 1000; }

/* ===================================================================
 * 8. DEBUG
 * =================================================================== */
.bxc-debug-line {
	background: #fffae6;
	border: 1px solid #ffd700;
	padding: 8px;
	margin: 4px 0;
	border-radius: 4px;
	font-family: var(--bxc-font-mono);
	font-size: var(--bxc-font-size-sm);
}