/* common.css */

/*
.g-jc-* → justify-content
.g-ai-* → align-items
.g-ac-* → align-content
*/

/* Flexbox utility classes for horizontal alignment (main axis) */
.g-jc-start       { justify-content: flex-start !important; }
.g-jc-end         { justify-content: flex-end !important; }
.g-jc-center      { justify-content: center !important; }
.g-jc-between     { justify-content: space-between !important; }
.g-jc-around      { justify-content: space-around !important; }
.g-jc-evenly      { justify-content: space-evenly !important; }

/* Flexbox utility classes for vertical alignment (cross axis) */
.g-ai-start       { align-items: flex-start !important; }
.g-ai-end         { align-items: flex-end !important; }
.g-ai-center      { align-items: center !important; }
.g-ai-stretch     { align-items: stretch !important; }
.g-ai-baseline    { align-items: baseline !important; }

/* Flexbox utility classes for multi-line row alignment (using wrap) */
.g-ac-start       { align-content: flex-start !important; }
.g-ac-end         { align-content: flex-end !important; }
.g-ac-center      { align-content: center !important; }
.g-ac-between     { align-content: space-between !important; }
.g-ac-around      { align-content: space-around !important; }
.g-ac-stretch     { align-content: stretch !important; }

/* Max-width utility classes for layout and width overrides */
.g-maxw-none { max-width: none !important; }
.g-maxw-100  { max-width: 100% !important; }
.g-maxw-100vw { max-width: 100vw !important; }
.g-maxw-auto { max-width: auto !important; }
.g-maxw-inherit { max-width: inherit !important; }
.g-maxw-initial { max-width: initial !important; }
.g-maxw-unset { max-width: unset !important; }

/* Posicionamiento base */
.g-fixed {
  position: fixed !important;
}

/* Posiciones verticales */
.g-top-0    { top: 0 !important; }
.g-top-10   { top: 10px !important; }
.g-top-20   { top: 20px !important; }
.g-top-50   { top: 50px !important; }

.g-bottom-0  { bottom: 0 !important; }
.g-bottom-10 { bottom: 10px !important; }
.g-bottom-20 { bottom: 20px !important; }
.g-bottom-50 { bottom: 50px !important; }

/* Posiciones horizontales */
.g-left-0   { left: 0 !important; }
.g-left-10  { left: 10px !important; }
.g-left-20  { left: 20px !important; }
.g-left-50  { left: 50px !important; }

.g-right-0   { right: 0 !important; }
.g-right-10  { right: 10px !important; }
.g-right-20  { right: 20px !important; }
.g-right-50  { right: 50px !important; }
.g-right-63  { right: 63px !important; }

.g-fixed-tr {
    position: fixed;
    top: 0px;
}

.g-fixed-br {
    position: fixed;
    bottom: 0px;
}

/* g-center-vh-offset: flex center with viewport height minus offset */
.g-center-vh-offset {
    --vh-offset: 128px;
    height: calc(100vh - var(--vh-offset));
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

/* Horizontal centering for block elements (e.g. buttons, fixed-width divs) */
.g-mx-auto {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centered text inside a container */
.g-text-center {
    text-align: center !important;
}

/* Grid-based full centering (both axes) */
.g-gc-center {
    display: grid !important;
    place-items: center !important; /* aligns items both vertically and horizontally */
}

/* Absolute centering inside a relatively positioned parent */
.g-pos-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
}

.g-divider {
    border: none;
    height: 1em;
    border-bottom: 1px dashed;  
}