@charset "utf-8";
/** 
 * =============================================================================
 * KS-Semilla - ks-style.css
 * -----------------------------------------------------------------------------
 * @author     Guillermo Arturo Shikina Zapata
 * @since      2025
 * @copyright  KhamaleonLab 
 * @license    See LICENSE.md for details.
 * @version    1.0.0
 * update      20250626
 * -----------------------------------------------------------------------------
 * Utility-first custom stylesheet designed to simplify layout, spacing, and
 * visual styling without relying on external CSS frameworks.
 *
 * Philosophy:
 * - No dependencies (no Bootstrap, no Tailwind)
 * - Intuitive naming (margin-top → m-t-10, background-color → bgc-gray)
 * - Maximum control with zero abstraction
 * - Beginner-friendly, flexible, maintainable, scalable, production-ready
 *
 * → → → Uses REM units with base 10px (html font-size: 62.5%) ← ← ←
 *
 * This file is automatically included in all views.
 * Do NOT write page-specific styles here.
 * Use `custom-styles.css` for overrides or temporary tweaks.
 * =============================================================================*/

/* =============================================================================
 * KS-Semilla Base Styles
 * -----------------------------------------------------------------------------
 * This section includes global resets and base font/layout rules.
 * It ensures consistency across all browsers with minimal overrides.
 * ============================================================================= */

/* Reset basic tags to remove default browser styling */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, table, tr, td, th {
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    list-style: none; 
}

/* Root font size: 1rem = 10px for easier calculations */
html {
    box-sizing: border-box; 
    font-size: 62.5%; 
} 

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

/* Global rule for focus */
:focus-visible {
    outline: 0.2rem solid gray; 
    outline-offset: 0.2rem;
}

/* Default body typography */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem; /* 16px */
    line-height: 1.8;
    padding: 0;
    margin: 0;
}

/* Images never exceed their container */
img { max-width: 100%; }

strong { font-weight: bold; }
em     { font-style: italic; }

/* =============================================================================
 * Form Element Styling
 * ----------------------------------------------------------------------------- */

/* Basic styling for all interactive elements */
select, button, input, textarea {
    border-radius: 0.4rem;
    border: solid 0.1rem #CCCCCC;
    font-family: 'Calibri', 'Tahoma', sans-serif;
    font-size: 1.6rem;
}

/* Input height and internal spacing */
select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"] { 
    height: 3.2rem;
    padding: 0 0.5rem; 
}

textarea {
    min-height: 3.2rem;
    padding: 0.5rem;
}

/* Button specific rules */
button {
    height: auto;
    padding: 0.8rem 1.6rem;
    cursor: pointer;
}

/* 
 * Utility: Button Reset
 * Resets the default browser styling for a button element.
 */
.reset-btn {
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    appearance: none;
    box-shadow: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* =============================================================================
 * Typography and Print Styles
 * -----------------------------------------------------------------------------
 * Includes specific font utility classes and print-specific adjustments.
 * ============================================================================= */

/* Roboto font weight helpers */
.roboto-regular {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
.roboto-bold {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

/* Hide elements when printing (ex: buttons) */
@media print {
    .btn-noprint {
        display: none;
    }
}

/* =============================================================================
 * Dimension Utilities: Max-Width / Max-Height
 * ----------------------------------------------------------------------------- */
.max-w-full   { max-width: 100%; }
.max-h-full   { max-height: 100%; }

.max-w-200 { max-width: 20rem; } 
.max-w-240 { max-width: 24rem; } 
.max-w-280 { max-width: 28rem; } 

/* =============================================================================
 * Link Styling
 * -----------------------------------------------------------------------------
 * Neutral link color and hover effect for clarity.
 * ============================================================================= */

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* =============================================================================
 * Buttons
 * -----------------------------------------------------------------------------
 * Basic button class with color, spacing and hover effect.
 * ============================================================================= */

.btn {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 0.4rem;
    border: none;
    background-color: #007BFF;
    color: #FFFFFF;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-whatsapp {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    border: none;
    background-color: #25D366;
    color: #FFFFFF;
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-whatsapp:hover {
    background-color: #1DA851;
    text-decoration: none; 
}

/* =============================================================================
 * Button Variants (además del .btn existente)
 * ----------------------------------------------------------------------------- */

.btn-secondary {
    background-color: #6c757d; /* secondary gray */
    color: #ffffff;
    /* border: 0.1rem solid #6c757d; */
}
.btn-secondary:hover {
    background-color: #5a6268;
    /* border-color: #545b62; */
}

.btn-success {
    background-color: #28a745; /* Green success */
    color: #ffffff;
}
.btn-success:hover {
    background-color: #218838;
}

.btn-danger {
    background-color: #dc3545; /* Danger red */
    color: #ffffff;
}
.btn-danger:hover {
    background-color: #c82333;
}

.btn-warning {
    background-color: #ffc107; /* Yellow warning */
    color: #212529; 
}
.btn-warning:hover {
    background-color: #e0a800;
}

.btn-light {
    background-color: #f8f9fa; 
    color: #212529;
    border: 0.1rem solid #dae0e5; 
}
.btn-light:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-dark {
    background-color: #343a40; 
    color: #ffffff;
}
.btn-dark:hover {
    background-color: #23272b;
}

/* Link button (no background or border) */
.btn-link {
    background-color: transparent;
    border-color: transparent;
    color: #007BFF; /* Default link color of the .btn */
    text-decoration: underline;
    padding-left: 0.2rem; 
    padding-right: 0.2rem;
}
.btn-link:hover {
    color: #0056b3;
    background-color: transparent;
    border-color: transparent;
}

/* =============================================================================
 * Tables
 * -----------------------------------------------------------------------------
 * Universal table layout with padding and zebra header.
 * ============================================================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 1rem;
    text-align: left;
    border-bottom: 0.1rem solid #ddd;
}

th {
    background-color: #f4f4f4;
}

/* =============================================================================
 * Layering and Dimensions
 * -----------------------------------------------------------------------------
 * Z-index shortcuts and fixed-width classes using rem units.
 * ============================================================================= */

/* Z-index layers */
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }

/* Width utility classes */
.w-30  { width: 3rem; }
.w-40  { width: 4rem; }
.w-50  { width: 5rem; }
.w-60  { width: 6rem; }
.w-70  { width: 7rem; }
.w-80  { width: 8rem; }
.w-90  { width: 9rem; }
.w-100 { width: 10rem; }
.w-121 { width: 12.1rem; }
.w-125 { width: 12.5rem; }
.w-129 { width: 12.9rem; }
.w-183 { width: 18.3rem; }
.w-190 { width: 19rem; }
.w-220 { width: 22rem; }
.w-230 { width: 23rem; }
.w-240 { width: 24rem; }
.w-300 { width: 30rem; }
.w-310 { width: 31rem; }
.w-330 { width: 33rem; }
.w-350 { width: 35rem; }
.w-390 { width: 39rem; }
.w-400 { width: 40rem; }
.w-430 { width: 43rem; }
.w-676 { width: 67.6rem; }

/* Height utility classes */
.h-30  { height: 3rem; }
.h-40  { height: 4rem; }
.h-50  { height: 5rem; }
.h-60  { height: 6rem; }
.h-70  { height: 7rem; }
.h-80  { height: 8rem; }
.h-90  { height: 9rem; }
.h-100 { height: 10rem; }
.h-200 { height: 20rem; }
.h-240 { height: 24rem; }
.h-300 { height: 30rem; }

/* =============================================================================
 * Spacing Utilities: Margin
 * -----------------------------------------------------------------------------
 * Includes directional, axis-based, and global margin classes.
 * ============================================================================= */

.m-t-3  { margin-top: 0.3rem; }
.m-t-5  { margin-top: 0.5rem; }
.m-t-6  { margin-top: 0.6rem; }
.m-t-10 { margin-top: 1rem; }
.m-t-15 { margin-top: 1.5rem; }
.m-t-20 { margin-top: 2rem; }
.m-t-25 { margin-top: 2.5rem; }
.m-t-30 { margin-top: 3rem; }
.m-t-40 { margin-top: 4rem; }
.m-t-50 { margin-top: 5rem; }
.m-t-60 { margin-top: 6rem; }
.m-t-70 { margin-top: 7rem; }
.m-t-80 { margin-top: 8rem; }

.m-r-3  { margin-right: 0.3rem; }
.m-r-5  { margin-right: 0.5rem; }
.m-r-6  { margin-right: 0.6rem; }
.m-r-10 { margin-right: 1rem; }
.m-r-15 { margin-right: 1.5rem; }
.m-r-20 { margin-right: 2rem; }
.m-r-30 { margin-right: 3rem; }
.m-r-40 { margin-right: 4rem; }
.m-r-50 { margin-right: 5rem; }

.m-b-3  { margin-bottom: 0.3rem; }
.m-b-5  { margin-bottom: 0.5rem; }
.m-b-6  { margin-bottom: 0.6rem; }
.m-b-10 { margin-bottom: 1rem; }
.m-b-15 { margin-bottom: 1.5rem; }
.m-b-20 { margin-bottom: 2rem; }
.m-b-30 { margin-bottom: 3rem; }
.m-b-40 { margin-bottom: 4rem; }
.m-b-50 { margin-bottom: 5rem; }
.m-b-60 { margin-bottom: 6rem; }
.m-b-70 { margin-bottom: 7rem; }
.m-b-80 { margin-bottom: 8rem; }

.m-l-3  { margin-left: 0.3rem; }
.m-l-5  { margin-left: 0.5rem; }
.m-l-6  { margin-left: 0.6rem; }
.m-l-10 { margin-left: 1rem; }
.m-l-15 { margin-left: 1.5rem; }
.m-l-20 { margin-left: 2rem; }
.m-l-30 { margin-left: 3rem; }
.m-l-40 { margin-left: 4rem; }
.m-l-50 { margin-left: 5rem; }

/* Margin vertical (top/bottom) */
.m-tb-5  { margin: .5rem 0; }
.m-tb-10 { margin: 1rem 0; }
.m-tb-20 { margin: 2rem 0; }
.m-tb-30 { margin: 3rem 0; }
.m-tb-40 { margin: 4rem 0; }
.m-tb-50 { margin: 5rem 0; }

/* Margin horizontal (left/right) */
.m-lr-5  { margin: 0 0.5rem; }
.m-lr-10 { margin: 0 1rem; }
.m-lr-20 { margin: 0 2rem; }
.m-lr-30 { margin: 0 3rem; }

/* Margin all sides */
.m-3  { margin: 0.3rem; }
.m-5  { margin: 0.5rem; }
.m-10 { margin: 1rem; }
.m-20 { margin: 2rem; }
.m-30 { margin: 3rem; }
.m-40 { margin: 4rem; }

/* =============================================================================
 * Spacing Utilities: Padding
 * -----------------------------------------------------------------------------
 * Includes directional, axis-based, and global padding classes.
 * ============================================================================= */

.p-t-5   { padding-top: 0.5rem; }
.p-t-10  { padding-top: 1rem; }
.p-t-15  { padding-top: 1.5rem; }
.p-t-20  { padding-top: 2rem; }
.p-t-30  { padding-top: 3rem; }
.p-t-40  { padding-top: 4rem; }
.p-t-50  { padding-top: 5rem; }

.p-r-5   { padding-right: 0.5rem; }
.p-r-6   { padding-right: 0.6rem; }
.p-r-10  { padding-right: 1rem; }
.p-r-15  { padding-right: 1.5rem; }
.p-r-20  { padding-right: 2rem; }
.p-r-30  { padding-right: 3rem; }
.p-r-40  { padding-right: 4rem; }
.p-r-50  { padding-right: 5rem; }

.p-b-05  { padding-bottom: 0.5rem; }
.p-b-10  { padding-bottom: 1rem; }
.p-b-15  { padding-bottom: 1.5rem; }
.p-b-20  { padding-bottom: 2rem; }
.p-b-30  { padding-bottom: 3rem; }
.p-b-40  { padding-bottom: 4rem; }
.p-b-50  { padding-bottom: 5rem; }

.p-l-5   { padding-left: 0.5rem; }
.p-l-6   { padding-left: 0.6rem; }
.p-l-10  { padding-left: 1rem; }
.p-l-15  { padding-left: 1.5rem; }
.p-l-20  { padding-left: 2rem; }
.p-l-30  { padding-left: 3rem; }
.p-l-40  { padding-left: 4rem; }
.p-l-50  { padding-left: 5rem; }

/* Padding vertical */
.p-tb-5  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.p-tb-10 { padding-top: 1rem; padding-bottom: 1rem; }
.p-tb-15 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.p-tb-20 { padding-top: 2rem; padding-bottom: 2rem; }
.p-tb-30 { padding-top: 3rem; padding-bottom: 3rem; }
.p-tb-40 { padding-top: 4rem; padding-bottom: 4rem; }
.p-tb-50 { padding-top: 5rem; padding-bottom: 5rem; }

/* Padding horizontal */
.p-lr-5  { padding-left: 0.5rem; padding-right: 0.5rem; }
.p-lr-10 { padding-left: 1rem; padding-right: 1rem; }
.p-lr-15 { padding-left: 1.5rem; padding-right: 1.5rem; }
.p-lr-20 { padding-left: 2rem; padding-right: 2rem; }
.p-lr-30 { padding-left: 3rem; padding-right: 3rem; }
.p-lr-40 { padding-left: 4rem; padding-right: 4rem; }
.p-lr-50 { padding-left: 5rem; padding-right: 5rem; }

/* Padding all sides */
.p-5  { padding: 0.5rem; }
.p-8  { padding: 0.8rem; }
.p-10 { padding: 1rem; }
.p-20 { padding: 2rem; }
.p-40 { padding: 4rem; }
.p-50 { padding: 5rem; }

/* =============================================================================
 * Typography Utilities
 * ============================================================================= */

/* Font sizes */
.fs-8   { font-size: 0.8rem; }
.fs-9   { font-size: 0.9rem; }
.fs-10  { font-size: 1rem; }
.fs-11  { font-size: 1.1rem; }
.fs-12  { font-size: 1.2rem; }
.fs-14  { font-size: 1.4rem; }
.fs-16  { font-size: 1.6rem; }
.fs-18  { font-size: 1.8rem; }
.fs-20  { font-size: 2rem; }
.fs-21  { font-size: 2.1rem; }
.fs-24  { font-size: 2.4rem; }
.fs-28  { font-size: 2.8rem; }
.fs-30  { font-size: 3rem; }
.fs-32  { font-size: 3.2rem; }
.fs-36  { font-size: 3.6rem; }
.fs-48  { font-size: 4.8rem; }
.fs-50  { font-size: 5rem; }
.fs-60  { font-size: 6rem; }
.fs-64  { font-size: 6.4rem; }
.fs-72  { font-size: 7.2rem; }

/* Font weight */
.fw-l   { font-weight: 300; }
.fw-300 { font-weight: 300; } /* light */
.fw-n   { font-weight: 400; } /* normal */
.fw-400 { font-weight: 400; }
.fw     { font-weight: bold; }
.fw-b   { font-weight: bold; }
.fw-700 { font-weight: bold; }
.fw-800 { font-weight: 800; } /* Extra Bold */
.fw-900 { font-weight: 900; } /* Black */

/* Line height utilities */
.lh-10 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-14 { line-height: 1.4; }
.lh-16 { line-height: 1.6; }
.lh-18 { line-height: 1.8; }
.lh-20 { line-height: 2; }
.lh-30 { line-height: 3; }

/* =============================================================================
 * Color Utilities
 * -----------------------------------------------------------------------------
 * Text color, background color, and opacity helpers.
 * Organized by tone and use case (alerts, accents, readability).
 * ============================================================================= */

/* Text Colors */
.c-amber-light       { color: #FED189; }
.c-amber-alert       { color: #FFC72C; }
.c-blue-alice        { color: #F0F8FF; }
.c-blue-aqua         { color: #56d4d7; } 
.c-blue-ice          { color: #82C8F9; }
.c-blue-indigo       { color: #2A52BE; }
.c-blue-link         { color: #0A7EF5; }
.c-blue-link2        { color: #00BFFF; }
.c-blue-link3        { color: #0066CC; }
.c-blue-midnight     { color: #0073BB; }
.c-blue-sky          { color: #7ADFF1; }
.c-blue-sky-2        { color: #00D4FF; }
.c-blue-ocean        { color: #155bdf; } 
.c-chocolate         { color: #904B0C; } 
.c-magenta           { color: #E71FE9; }
.c-golden-yellow     { color: #FEBE10; }
.c-gray              { color: #AAAAAA; }
.c-gray-off          { color: #E0DEDE; }
.c-green             { color: #008000; }
.c-green-brazil      { color: #009739; }
.c-green-brazil-2    { color: #21AC18; }
.c-green-lime        { color: #66d756; } 
.c-green-alert       { color: #1CAC78; }
.c-magenta           { color: #E51EFA; }
.c-mint              { color: #82F9E5; }
.c-orange-coral      { color: #FF7F50; }
.c-orange-gold       { color: #ECBE0B; }
.c-orange            { color: #FF9933; }
.c-pink-light        { color: #FFCCCC; }
.c-pink-pastel       { color: #FA92A6; }
.c-purple-royal      { color: #5668D7; } 
.c-red               { color: #FF0000; }
.c-red-coral         { color: #D76756; } 
.c-red-alert         { color: #E32636; }
.c-white             { color: #FFFFFF; }

.c-blue-link-b       { color: #0A7EF5; font-weight: bold; }
.c-blue-link2-b      { color: #00BFFF; font-weight: bold; }
.c-blue-link3-b      { color: #0066CC; font-weight: bold; }
.c-blue-midnight-b   { color: #0073BB; font-weight: bold; }
.c-blue-sky-b        { color: #7ADFF1; font-weight: bold; }
.c-chocolate-b       { color: #904B0C; font-weight: bold; }
.c-green-brazil-b    { color: #009739; font-weight: bold; }
.c-green-alert-b     { color: #1CAC78; font-weight: bold; }
.c-gray-b            { color: #AAAAAA; font-weight: bold; }
.c-magenta-b         { color: #E51EFA; font-weight: bold; }
.c-orange-coral-b    { color: #FF7F50; font-weight: bold; }
.c-orange-b          { color: #FF9933; font-weight: bold; }
.c-pink-light-b      { color: #FFCCCC; font-weight: bold; }
.c-red-b             { color: #FF0000; font-weight: bold; }
.c-red-alert-b       { color: #E32636; font-weight: bold; }
.c-violet-b          { color: #800080; font-weight: bold; }

/* Background Colors */
.bgc-blue-royal         { background-color: #3366FF; }
.bgc-gray               { background-color: #CCCCCC; }
.bgc-gray-light         { background-color: #F5F5F5; }
.bgc-gray-light-2       { background-color: #E8E8E8; }
.bgc-green-forest       { background-color: #339966; }
.bgc-green-mint         { background-color: #ADF7D2; }
.bgc-orange-bright      { background-color: #FF6600; }
.bgc-orange-peach       { background-color: #FAD5B0; }
.bgc-orange             { background-color: #FF9933; }
.bgc-orange-sun         { background-color: #FFA500; }
.bgc-red-alert          { background-color: #E32636; }
.bgc-violet             { background-color: #800080; }
.bgc-white              { background-color: #FFFFFF; }
.bgc-black              { background-color: #000000; }

/* Opacity */
.o-10 { opacity: 1; }
.o-9  { opacity: 0.9; }
.o-8  { opacity: 0.8; }
.o-7  { opacity: 0.7; }
.o-6  { opacity: 0.6; }
.o-5  { opacity: 0.5; }
.o-4  { opacity: 0.4; }
.o-3  { opacity: 0.3; }
.o-2  { opacity: 0.2; }
.o-1  { opacity: 0.1; }

/* Transparent Backgrounds (RGBA) */
.bg-transp-red-3 { background-color: rgba(255, 0, 0, 0.3); }
.bg-transp-red-5 { background-color: rgba(255, 0, 0, 0.5); }


/* =============================================================================
 * Text alignment and pointer styles
 * ============================================================================= */

.ta-l { text-align: left; }
.ta-r { text-align: right; }
.ta-c { text-align: center; }

/* Vertical alignment */
.va-t { vertical-align: top; }
.va-m { vertical-align: middle; }
.va-b { vertical-align: bottom; }

.pointer       { cursor: pointer; }

.underline          { text-decoration: underline; }
.no-underline       { text-decoration:none; }
.no-underline:hover { text-decoration: none; }

/* Text links with color (no underline) */
.dec-none-blue-link-3   { text-decoration: none; color: #0066CC; }
.dec-none-green-alert   { text-decoration: none; color: #1CAC78; }
.dec-none-red-alert     { text-decoration: none; color: #E32636; }
.dec-none-lock          { text-decoration: none; color: #E32636; }
.dec-none-unlock        { text-decoration: none; color: #EBB511; }
.dec-none-amber-light   { text-decoration: none; color: #FED189; }

/* Alert-style links with bold and color */
.alert-dec-none-red-alert-bold   { text-decoration: none; color: #E32636; font-weight: bold; }
.alert-dec-none-orange-sun-bold  { text-decoration: none; color: #FFA500; font-weight: bold; }
.alert-dec-none-green-bold       { text-decoration: none; color: #008000; font-weight: bold; }

/* =============================================================================
 * Overflow Utilities
 * ----------------------------------------------------------------------------- */
.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; } 

.overflow-x-auto   { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }

.overflow-y-auto   { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* =============================================================================
 * Borders: Solid and Dashed (with or without radius)
 * ============================================================================= */

/* Solid border - all sides */
.bs-blue-link-3  { border: solid 0.1rem #0066CC; }
.bs-blue-indigo  { border: solid 0.1rem #2A52BE; }
.bs-gray         { border: solid 0.1rem #AAAAAA; }
.bs-green-alert  { border: solid 0.1rem #1CAC78; }
.bs-orange-sun   { border: solid 0.1rem #FFA500; }
.bs-red          { border: solid 0.1rem #FF0000; }
.bs-red-alert    { border: solid 0.1rem #E32636; }

/* Solid border - top and bottom only */
.bs-tb-gray {
    border-top: solid 0.1rem #AAAAAA;
    border-bottom: solid 0.1rem #AAAAAA;
}

/* Solid border - individual sides */
.bs-t-gray { border-top:    solid 0.1rem #AAAAAA; }
.bs-r-gray { border-right:  solid 0.1rem #AAAAAA; }
.bs-b-gray { border-bottom: solid 0.1rem #AAAAAA; }
.bs-l-gray { border-left:   solid 0.1rem #AAAAAA; }

/* Dashed border - all sides */
.bd-gray { border: dashed 0.1rem #AAAAAA; }

/* Dashed border - top and bottom */
.bd-tb-gray {
    border-top: dashed 0.1rem #AAAAAA;
    border-bottom: dashed 0.1rem #AAAAAA;
}

/* Dashed border - individual sides */
.bd-t-gray { border-top:    dashed 0.1rem #AAAAAA; }
.bd-r-gray { border-right:  dashed 0.1rem #AAAAAA; }
.bd-b-gray { border-bottom: dashed 0.1rem #AAAAAA; }
.bd-l-gray { border-left:   dashed 0.1rem #AAAAAA; }

/* Border and box styling */
.b-none { border: none; }

/* Border radius */ 
.br-0 { border-radius: 0; }
.br-4 { border-radius: 0.4rem; }
.br-8 { border-radius: 0.8rem; }

/* Border top with radius */
.bsr-top-gray-light {
    border-top: solid 0.1rem #F5F5F5;
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
}

/* Border bottom with radius */
.bsr-bottom-gray-light {
    border-bottom: solid 0.1rem #F5F5F5;
    border-bottom-left-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

/* Border + radius + centered text + custom padding (1px) */
.bsr-blue-midnight-ta-c-p-lr-10 {
    border: solid 0.1rem #0073BB;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0 1rem;
}
.bsr-blue-midnight-ta-c-p-tb-5-lr-10 {
    border: solid 0.1rem #0073BB;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1rem;
}
.bsr-blue-midnight-ta-c-p-tb-5-lr-15 {
    border: solid 0.1rem #0073BB;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bsr-gray-ta-c-p-tb-5-lr-15 {
    border: solid 0.1rem #AAAAAA;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bsr-green-alert-ta-c-p-tb-5-lr-15 {
    border: solid 0.1rem #1CAC78;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bsr-red-ta-c-p-tb-5-lr-15 {
    border: solid 0.1rem #FF0000;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}

/* Border width 2px + radius + centered text + padding */
.bs2r8-blue-midnight-ta-c-p-tb-5-lr-15 {
    border: solid 0.2rem #0073BB;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bs2r8-gray-ta-c-p-tb-5-lr-15 {
    border: solid 0.2rem #AAAAAA;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bs2r8-green-alert-ta-c-p-tb-5-lr-15 {
    border: solid 0.2rem #1CAC78;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bs2r8-orange-ta-c-p-tb-5-lr-15 {
    border: solid 0.2rem #FF9933;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}
.bs2r8-red-ta-c-p-tb-5-lr-15 {
    border: solid 0.2rem #FF0000;
    border-radius: 0.8rem;
    text-align: center;
    padding: 0.5rem 1.5rem;
}

/* =============================================================================
 * Element Positioning (relative offset)
 * ----------------------------------------------------------------------------- 
 * Adjusts vertical position of elements using relative positioning.
 * Useful for small layout tweaks (e.g. align icons, nudge labels).
 * ============================================================================= */
.pos-static   { position: static; }
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }
.pos-fixed    { position: fixed; }
.pos-sticky   { position: sticky; } 

/* Edge Offsets (for positioned elements) */
.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }

/* Inset (shorthand for top, right, bottom, left) */
.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; } 
.inset-y-0 { top: 0; bottom: 0; } 

.pos-t-m20 { position: relative; top: -2rem; }
.pos-t-m10 { position: relative; top: -1rem; }
.pos-t-m9  { position: relative; top: -0.9rem; }
.pos-t-m8  { position: relative; top: -0.8rem; }
.pos-t-m7  { position: relative; top: -0.7rem; }
.pos-t-m6  { position: relative; top: -0.6rem; }
.pos-t-m5  { position: relative; top: -0.5rem; }
.pos-t-m4  { position: relative; top: -0.4rem; }
.pos-t-m3  { position: relative; top: -0.3rem; }
.pos-t-m2  { position: relative; top: -0.2rem; }
.pos-t-m1  { position: relative; top: -0.1rem; }
.pos-t-1   { position: relative; top:  0.1rem; }
.pos-t-2   { position: relative; top:  0.2rem; }
.pos-t-3   { position: relative; top:  0.3rem; }
.pos-t-4   { position: relative; top:  0.4rem; }
.pos-t-5   { position: relative; top:  0.5rem; }
.pos-t-6   { position: relative; top:  0.6rem; }
.pos-t-7   { position: relative; top:  0.7rem; }
.pos-t-8   { position: relative; top:  0.8rem; }
.pos-t-9   { position: relative; top:  0.9rem; }
.pos-t-10  { position: relative; top:  1rem; }
.pos-t-20  { position: relative; top:  2rem; }


/* =============================================================================
 * Display utilities
 * ============================================================================= */

.elem-show      { display: block; }
.elem-hide      { display: none; }
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-none         { display: none; }

/* =============================================================================
 * Flexbox layout helpers
 * ============================================================================= */

.flex-col       { display: flex; flex-direction: column; }
.flex-row       { display: flex; flex-direction: row; }
.flex-wrap      { display: flex; flex-wrap: wrap; }

/* Flexbox alignment helpers */
.align-start    { align-items: flex-start;}
.align-center   { align-items: center ;}
.align-end      { align-items: flex-end ;}
.justify-center { justify-content: center ;}
.justify-end    { justify-content: flex-end ;}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-h-align-c {
    display: flex;
    align-items: center;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
}

.flex-space-around {
    display: flex;
    justify-content: space-around;
}

/* Flexbox Item Utilities */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; } 

.flex-shrink-0 { flex-shrink: 0; } 
.flex-shrink-1 { flex-shrink: 1; } 

/* =============================================================================
 * CSS Grid helpers
 * ============================================================================= */

.grid { display: grid; }

.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
.grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
.grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { grid-template-columns: repeat(10, 1fr); }

/* =============================================================================
 * Spacing Utilities: Gap (for Flexbox and Grid)
 * ----------------------------------------------------------------------------- */
.g-5   { gap: 0.5rem; }
.g-10  { gap: 1rem; }
.g-15  { gap: 1.5rem; }
.g-20  { gap: 2rem; }
.g-30  { gap: 3rem; }

/* Gap per axis */
.gx-5  { column-gap: 0.5rem; }
.gx-10 { column-gap: 1rem; }

.gy-5  { row-gap: 0.5rem; }
.gy-10 { row-gap: 1rem; }

/* =============================================================================
 * Animation: Blinking (for alerts or emphasis)
 * ============================================================================= */

@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

.blinking-1 { animation: blink 1s infinite; }
.blinking-2 { animation: blink 2s infinite; }

/* =============================================================================
 * Utility Extras 
 * ============================================================================= */

/* -------------------------------
   Shadow helpers
-------------------------------- */
.shadow-light    { box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.1); }
.shadow-medium   { box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.2); }

/* -------------------------------
   Transition helpers
-------------------------------- */
.transition-fast    { transition: all 0.2s ease-in-out; }
.transition-smooth  { transition: all 0.4s ease; }

/* -------------------------------
   Text overflow handling
-------------------------------- */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
 * KS-Semilla - Container Systems (Flexible & Controlled)
 * -----------------------------------------------------------------------------
 * Ofrece ambas opciones:
 * Container fluido con límite superior.
 * Container escalonado por breakpoints clásicos.
 * El programador puede usar según la necesidad del proyecto.
 * ============================================================================= */

/* Fluid Container (default recommended for most cases) */
.container-fluid {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 132rem; /* Adjust according to the project */
}

/* Controlled Container (classic responsive control) */
.container-controlled {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Breakpoints for controlled version */
@media (min-width: 57.6rem) {
    .container-controlled { max-width: 54rem; }
}
@media (min-width: 76.8rem) {
    .container-controlled { max-width: 72rem; }
}
@media (min-width: 99.2rem) {
    .container-controlled { max-width: 96rem; }
}
@media (min-width: 120rem) {
    .container-controlled { max-width: 114rem; }
}
@media (min-width: 140rem) {
    .container-controlled { max-width: 132rem; }
}