/*admin_Design.helpers.optionsSitio*/
/* ==========================================================================
   ADMIN DESIGN - OPCIONES SITIO
   ========================================================================== */


/* ==========================================
   CONTENEDOR
   ========================================== */

.AdminDesign-SitioOptions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}


/* ==========================================
   OPCIÓN
   ========================================== */

.AdminDesign-SitioOption {
    width: 100%;
    min-height: 76px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #d7e3f0;
    border-radius: 12px;
    outline: 0;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}


    /* ==========================================
   HOVER OPCIÓN
   ========================================== */

    .AdminDesign-SitioOption:hover {
        background: #f8fbff;
        border-color: #b9d2ee;
        box-shadow: 0 5px 16px rgba(3, 28, 60, .07);
    }


    /* ==========================================
   ACTIVE OPCIÓN
   ========================================== */

    .AdminDesign-SitioOption:active {
        transform: scale(.995);
    }


/* ==========================================
   ICONO
   ========================================== */

.AdminDesign-SitioOptionIcon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: #edf6ff;
    color: #2563eb;
    font-size: 20px;
    box-sizing: border-box;
}


/* ==========================================
   CONTENIDO
   ========================================== */

.AdminDesign-SitioOptionContent {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* ==========================================
   TÍTULO
   ========================================== */

.AdminDesign-SitioOptionTitle {
    color: #243b53;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}


/* ==========================================
   DESCRIPCIÓN
   ========================================== */

.AdminDesign-SitioOptionDescription {
    color: #829ab1;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}


/* ==========================================
   CHEVRON
   ========================================== */

.AdminDesign-SitioOptionChevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9fb3c8;
    font-size: 14px;
    transition: color .2s ease, transform .2s ease;
}


/* ==========================================
   HOVER CHEVRON
   ========================================== */

.AdminDesign-SitioOption:hover
.AdminDesign-SitioOptionChevron {
    color: #2563eb;
    transform: translateX(2px);
}


/* ==========================================
   HOVER ICONO
   ========================================== */

.AdminDesign-SitioOption:hover
.AdminDesign-SitioOptionIcon {
    background: #e3f0ff;
}


/* ==========================================
   TEXTO INFERIOR
   ========================================== */

.WachaT-AdminDesign-SitioOptionsInfo {
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #a0aec0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
    box-sizing: border-box;
}


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

@media (max-width: 700px) {

    .AdminDesign-SitioOptions {
        gap: 8px;
    }


    .AdminDesign-SitioOption {
        min-height: 70px;
        grid-template-columns: 42px minmax(0, 1fr) 20px;
        gap: 11px;
        padding: 12px 13px;
    }


    .AdminDesign-SitioOptionIcon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }


    .AdminDesign-SitioOptionTitle {
        font-size: 14px;
    }


    .AdminDesign-SitioOptionDescription {
        font-size: 11px;
    }


    .WachaT-AdminDesign-SitioOptionsInfo {
        font-size: 11px;
        text-align: center;
    }
}
/* ==========================================================================
   SITIO COMPLETO - OPCIÓN PRINCIPAL
   ========================================================================== */

.AdminDesign-SitioOption[ data-sitio-option="sitioCompleto" ] {
    border-color: #8b5cf6;
    background: linear-gradient( 135deg, #faf8ff 0%, #f3f6ff 55%, #eef7ff 100% );
    box-shadow: 0 8px 22px rgba(124, 58, 237, .12), 0 2px 8px rgba(37, 99, 235, .08);
    animation: AdminDesignSitioCompletoFloat 2.8s ease-in-out infinite;
}


    /* ==========================================
   ICONO
   ========================================== */

    .AdminDesign-SitioOption[ data-sitio-option="sitioCompleto" ]
    .AdminDesign-SitioOptionIcon {
        background: linear-gradient( 135deg, #7c3aed, #2563eb );
        color: #ffffff;
        box-shadow: 0 6px 16px rgba(124, 58, 237, .22);
    }


    /* ==========================================
   TÍTULO
   ========================================== */

    .AdminDesign-SitioOption[ data-sitio-option="sitioCompleto" ]
    .AdminDesign-SitioOptionTitle {
        color: #4c1d95;
    }


    /* ==========================================
   CHEVRON
   ========================================== */

    .AdminDesign-SitioOption[ data-sitio-option="sitioCompleto" ]
    .AdminDesign-SitioOptionChevron {
        color: #7c3aed;
    }


    /* ==========================================
   HOVER
   ========================================== */

    .AdminDesign-SitioOption[ data-sitio-option="sitioCompleto" ]:hover {
        border-color: #7c3aed;
        background: linear-gradient( 135deg, #f7f2ff 0%, #edf3ff 55%, #e7f4ff 100% );
        box-shadow: 0 14px 30px rgba(124, 58, 237, .18), 0 6px 16px rgba(37, 99, 235, .12);
    }


        /* ==========================================
   HOVER ICONO
   ========================================== */

        .AdminDesign-SitioOption[ data-sitio-option="sitioCompleto" ]:hover
        .AdminDesign-SitioOptionIcon {
            background: linear-gradient( 135deg, #6d28d9, #1d4ed8 );
        }


/* ==========================================
   ANIMACIÓN
   FLOTACIÓN SUAVE
   ========================================== */

@keyframes AdminDesignSitioCompletoFloat {

    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 22px rgba(124, 58, 237, .12), 0 2px 8px rgba(37, 99, 235, .08);
    }


    50% {
        transform: translateY(-3px) scale(1.008);
        box-shadow: 0 13px 28px rgba(124, 58, 237, .18), 0 5px 12px rgba(37, 99, 235, .11);
    }
}