:root {
    --bg-dark: #0B0B0B;
    --bg-box: #1A1A1A;
    /*** Alpha ***/
    --alpha-50: #f6f6f6;
    --alpha-100: #e7e7e7;
    --alpha-200: #d1d1d1;
    --alpha-300: #b0b0b0;
    --alpha-400: #888888;
    --alpha-500: #6d6d6d;
    --alpha-600: #5d5d5d;
    --alpha-700: #4f4f4f;
    --alpha-800: #454545;
    --alpha-900: #3d3d3d;
    --alpha-950: #060606;

    /*** Status background ***/

    --status-info: #0D6EFD; /* Azul original */
    --status-info-transp: rgba(13, 110, 253, 0);

    --status-on: #198754; /* Verde original */
    --status-on-30: rgba(25, 135, 84, 0.4); /* Corregido para usar rgba(R,G,B,A) */

    --status-danger: #CC1123; /* Rojo original */
    --status-danger-30: rgba(204, 17, 35, 0.4); /* Corregido para usar rgba(R,G,B,A) */

    --status-warning: #E1B848; /* Amarillo original */
    --status-warning-30: rgba(225, 184, 72, 0.4); /* Corregido para usar rgba(R,G,B,A) */

    --status-off: #6C757D; /* Gris original */
    --status-off-30: rgba(108, 117, 125, 0.4); /* Nueva variable transparente para off */

    /* status color text*/
    --color-warning-text: #E1B848;
    --color-warning-text-30: rgba(225, 184, 72, 0.4); /* Corregido para usar rgba(R,G,B,A) */

    --color-on-text: #198754;
    --color-on-text-30: rgba(25, 135, 84, 0.4);;



    /*** Layout ***/
    --layout-grid-desktop: repeat(12, 1fr);
    --layout-grid-tablet: repeat(8, 1fr);
    --layout-grid-mobile: repeat(4, 1fr);

    --layout-gap-desktop: 1.5rem;
    --layout-gap-mobile: 1rem;

    --layout-padding-h-desktop: 2rem;
    --layout-padding-h-mobile: 1rem;


    --layout-grid: var(--layout-grid-desktop);
    --layout-gap: var(--layout-gap-desktop);
    --layout-padding-h: var(--layout-padding-h-desktop);
}

/* Tablet styles */
@media (width <=768px) {
    :root {
        --layout-grid: var(--layout-grid-tablet);
        --layout-gap: var(--layout-gap-mobile);
        --layout-padding-h: var(--layout-padding-h-mobile);
    }
}

/* Mobile styles */
@media (width <=480px) {
    :root {
        --layout-grid: var(--layout-grid-mobile);
        --layout-gap: var(--layout-gap-mobile);
        --layout-padding-h: var(--layout-padding-h-mobile);
    }
}

body {
    background-color: var(--bg-dark);
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: .5rem;
}

.errorContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 0rem;
    align-items: center;
    row-gap: .5rem;
    width: 100%;
    color: var(--alpha-100)
}

.errorContainer i {
    font-size: 2.5rem;
}

.errorContainer h3 {
    font-size: 1rem;
}

.errorContainer p {
    font-size: 14px;
}