/* ==========================================================
   PALETA CORPORATIVA DINÁMICA
========================================================== */

:root {

    /* El fondo configurado se usa también en el panel. */
    --admin-bg: var(--app-bg);

    /* La identidad visual del panel. */
    --sidebar-bg: var(--secondary);
    --sidebar-hover: var(--primary);
    --sidebar-active: var(--accent);

}


/* ==========================================================
   ENCABEZADOS
========================================================== */

.card-header,
.card-header.bg-dark {

    background: var(--secondary) !important;
    color: var(--white);

}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {

    background: var(--sidebar-bg);
    min-height: calc(100vh - var(--navbar-height));
    border-right: 1px solid var(--gris-800);
    padding: 18px 0;

}

.sidebar nav {

    display: block;

}

.sidebar a {

    display: flex !important;
    align-items: center;
    gap: 12px;

    color: var(--sidebar-color, var(--gris-400)) !important;
    text-decoration: none !important;

    padding: 13px 22px;
    border-left: 4px solid transparent;

    transition: var(--transition);

}

.sidebar a:hover {

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            transparent
        );

    color: var(--white) !important;
    border-left-color: var(--primary);

}

.sidebar a.active {

    background:
        color-mix(
            in srgb,
            var(--accent) 18%,
            transparent
        );

    color: var(--white) !important;
    border-left-color: var(--accent);

    font-weight: 600;

}

.sidebar i {

    width: 20px;
    text-align: center;
    font-size: .95rem;

}


/* ==========================================================
   CONTROLES ACTIVOS
========================================================== */

.nav-tabs .nav-link.active {

    color: var(--accent);

}

.btn-check:checked + .btn {

    background: var(--accent);
    border-color: var(--accent);

}

.pagination .page-item.active .page-link {

    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            var(--primary) 30%,
            transparent
        );

}


/* ==========================================================
   FORMULARIOS Y TABLAS
========================================================== */

.form-control:focus,
.form-select:focus {

    box-shadow:
        0 0 0 .18rem
        color-mix(
            in srgb,
            var(--primary) 18%,
            transparent
        );

}

.form-check-input:focus,
.btn-check:focus + .btn {

    box-shadow:
        0 0 0 .18rem
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );

}

.table tbody tr:hover {

    background:
        color-mix(
            in srgb,
            var(--primary) 8%,
            transparent
        );

}


/* ==========================================================
   LOGIN
========================================================== */

.login-brand {

    background: var(--navbar-bg);

    align-items: center;
    justify-content: center;
    padding: 3rem;

}

.admin-pagination {

    width: 100%;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gris-200);
    border-bottom: 1px solid var(--gris-200);
    background: color-mix(in srgb, var(--app-bg) 55%, var(--white));

}

.admin-pagination .pagination {

    gap: .35rem;

}

.admin-pagination .page-link {

    min-width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--gris-300));
    border-radius: .55rem !important;
    background: var(--white);
    color: var(--primary);
    text-decoration: none;

}

.admin-pagination .page-link:hover,
.admin-pagination .page-link:focus {

    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
    box-shadow: none;

}

.admin-pagination .page-item.disabled .page-link {

    background: var(--gris-100);
    border-color: var(--gris-200);
    color: var(--gris-500);
    opacity: .7;

}

.admin-pagination .form-select {

    border-color: color-mix(in srgb, var(--primary) 35%, var(--gris-300));

}

@media (max-width: 767.98px) {

    .admin-pagination,
    .admin-pagination > div,
    .admin-pagination nav {

        width: 100%;

    }

    .admin-pagination > div {

        justify-content: center;
        text-align: center;

    }

    .admin-pagination .pagination {

        justify-content: center;
        flex-wrap: wrap;

    }

}

.login-brand-content {

    width: 100%;
    max-width: 440px;
    text-align: center;

}

.login-logo {

    display: block;
    width: auto;
    max-width: min(100%, 240px);
    max-height: 110px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;

}

.login-brand-content h1 {

    font-size: 1.75rem;
    line-height: 1.2;
    text-align: center;

}

.login-brand-content p {

    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;

}

.login-card {

    width: min(100% - 2rem, 520px);

}

@media (max-width: 1199.98px) {

    .login-brand {

        padding: 2rem;

    }

    .login-logo {

        max-width: min(100%, 210px);
        max-height: 95px;

    }

}

body {

    background: var(--admin-bg);

}

/* ==========================================================
   CASILLEROS DE LLAVES
========================================================== */

.casillero-llave.llave-libre,
.llave-leyenda.llave-libre {

    background: transparent;
    border: 2px solid var(--secondary);
    color: var(--secondary);

}

.casillero-llave.llave-libre:hover,
.casillero-llave.llave-libre:focus {

    background: color-mix(in srgb, var(--secondary) 12%, var(--white));
    border-color: var(--secondary);
    color: var(--secondary);

}

.casillero-llave.llave-ocupada,
.llave-leyenda.llave-ocupada {

    background: var(--secondary);
    border: 2px solid var(--secondary);
    color: var(--white);

}

.casillero-llave.llave-actual,
.llave-leyenda.llave-actual {

    background: var(--primary);
    border: 2px solid var(--primary);
    color: var(--white);

}

.casillero-llave.llave-actual {

    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
    font-weight: 700;

}

.llave-leyenda {

    padding: .45rem .65rem;

}

/* ==========================================================
   ESTADOS
========================================================== */

.badge-estado-activo {

    background: var(--accent);
    color: var(--white);

}

.badge-estado-inactivo {

    background: var(--secondary);
    color: var(--white);

}

/* ==========================================================
   SEPARACIÓN DEL CONTENIDO PRINCIPAL
========================================================== */

.main-content {

    padding-top: 16px !important;

}

/* ==========================================================
   CORRECCIONES DE FICHAS Y ENCABEZADOS
========================================================== */

/* Los títulos de las cards heredan el color blanco. */

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {

    color: var(--white) !important;

}


/* Íconos junto a texto, por ejemplo en tablas de datos. */

.iconos svg {

    display: inline-block;
    vertical-align: middle;

}


/* Íconos de características y amenities dentro de cards. */

.border.iconos > svg {

    display: block;
    margin-left: auto;
    margin-right: auto;

}


/* Íconos de superficies. */

.superficie-valor {

    text-align: center;

}

.superficie-valor > svg {

    display: block;
    margin-left: auto;
    margin-right: auto;

}

/* ==========================================================
   NAVBAR ADMINISTRATIVO RESPONSIVE
========================================================== */

.admin-navbar .navbar-brand {

    width: auto !important;

}

@media (max-width: 991px) {

    .admin-navbar .navbar-collapse {

        width: 100%;

    }

    .admin-navbar .admin-brand {

        font-size: .95rem;

    }

}

/* ==========================================================
   LOGO Y NAVBAR RESPONSIVE
========================================================== */

.admin-navbar .navbar-brand {

    width: auto !important;
    min-width: 0;

}

.admin-navbar .admin-logo {

    display: block !important;
    width: auto !important;
    height: 66px !important;
    max-width: 160px;
    flex-shrink: 0;

}


/* ==========================================================
   SIDEBAR RESPONSIVE
========================================================== */

@media (max-width: 991px) {

    .admin-navbar {

        height: auto;
        min-height: var(--navbar-height);

    }

    .admin-navbar .navbar-collapse {

        width: 100%;
        padding: .75rem 0;

    }

    .sidebar {

        display: none !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-height: auto;

    }

    .sidebar.sidebar-mobile-open {

        display: block !important;

    }

    .main-content {

        flex: 0 0 100% !important;
        max-width: 100% !important;

    }

}