/* selectGroup.css v1.0 2025-09-02 */

:root{
    --sg-primary-color:#2563eb;
    --sg-primary-hover:#1d4ed8;
    --sg-border-color:#d1d5db;
    --sg-border-focus:#2563eb;
    --sg-background:#ffffff;
    --sg-text-color:#374151;
    --sg-label-color:#6b7280;
    --sg-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --sg-shadow-focus:0 0 0 3px rgba(37, 99, 235, 0.1);
    --sg-border-radius:8px;
    --sg-font-size:16px;
    --sg-transition:all 0.3s ease;
    --sg-icon-color:#6b7280;
    --sg-dropdown-bg:#2563eb;
    --sg-hover-bg:#1d4ed8;
    --sg-dropdown-text:#ffffff;
    
    /* Variables para tema dark/light */
    --sg-select-bg-dark:#1e40af;
    --sg-select-bg-light:#dbeafe;
    --sg-select-text-dark:#f8fafc;
    --sg-select-text-light:#1e293b;
    --sg-select-icon-dark:#dbeafe;
    --sg-select-icon-light:#1e40af;
    --sg-select-back-arrow-dark:#dbeafe;
    --sg-select-back-arrow-light:#1e40af;
    --sg-select-placeholder-dark:#e2e8f0;
    --sg-select-placeholder-light:#64748b;
    
    /* Variables para etiqueta flotante */
    --sg-label-float-bg:#ffffff;
    --sg-label-float-border-color:transparent;/*#2563eb;*/
    --sg-label-float-border-bottom-color:#2563eb;
    --sg-label-float-border-width:2px;
    --sg-label-float-border-radius:6px;
    --sg-label-float-text-color:#2563eb;
    --sg-label-float-shadow:0 2px 4px rgba(37, 99, 235, 0.5);
    --sg-label-float-padding-x:8px;
    --sg-label-float-padding-y:2px;

    /* Variables para placeholder dependiente */
    --sg-placeholder-font-size-level2-pc: 10px;
    --sg-placeholder-font-size-level2-mobile: 8px;
}

*{
    box-sizing:border-box;
}

body{
    font-family:"TikTok sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    /*min-height:100vh;*/
    display:flex;
    /*align-items:center;*/
    justify-content:center;
    padding:0px;
    margin:0;
}

.sg-container{
    width:100%;
    max-width:400px;
    position:relative;
}

/* Estilos para tooltips */
.sg-tooltip{
    position:fixed;
    background:beige;/*rgba(0, 0, 0, 0.85);*/
    color:orangered;
    padding:8px 12px;
    border:1px dotted silver;
    border-radius:8px;
    font-size:12px;
    z-index:10000;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s ease;
    max-width:250px;
    word-wrap:break-word;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
    line-height:1.4;
}

.sg-tooltip.sg-visible{
    opacity:1;
}

.sg-select-wrapper{
    position:relative;
    margin-bottom:10px;
}

.sg-select{
    width:100%;
    padding:16px 50px 16px 60px;
    border:1px solid var(--sg-border-color);
    border-radius:var(--sg-border-radius);
    background:var(--sg-select-bg-dark); /* Azul oscuro de fondo */
    font-size:var(--sg-font-size);
    color:var(--sg-select-text-dark); /* Texto claro */
    transition:var(--sg-transition);
    cursor:pointer;
    appearance:none;
    outline:none;
    height:56px; /* Asegurar altura consistente */
}

.sg-select:hover{
    border-color:var(--sg-primary-hover);
    box-shadow:var(--sg-shadow);
}

.sg-select:focus{
    border-color:var(--sg-border-focus);
    box-shadow:var(--sg-shadow-focus);
}

.sg-select:disabled, .sg-select[disabled]{
    cursor: not-allowed;
    background-color: #e5e7eb;
    color: #9ca3af;
}

/* Padding aumentado cuando la flecha de regreso está visible */
.sg-select.sg-select-with-back-arrow {
    padding-left: 85px;
    transition: padding-left 0.3s ease; /* Para una transición suave */
}

.sg-select:focus + .sg-label,
.sg-select:not(:placeholder-shown) + .sg-label,
.sg-select.sg-has-value + .sg-label{
    transform:translateY(-32px) scale(0.85);
    color:var(--sg-label-float-text-color);
    background:var(--sg-label-float-bg);
    padding:var(--sg-label-float-padding-y) var(--sg-label-float-padding-x);
    border:var(--sg-label-float-border-width) solid var(--sg-label-float-border-color);
    border-radius:var(--sg-label-float-border-radius) var(--sg-label-float-border-radius) 0 0;
    border-bottom:var(--sg-label-float-border-width) solid var(--sg-label-float-border-buttom-color);
    border-bottom-left-radius:var(--sg-label-float-border-radius);
    border-bottom-right-radius:var(--sg-label-float-border-radius);
    box-shadow:var(--sg-label-float-shadow);
    z-index:10;
    font-weight:500;
    letter-spacing:0.5px;
}

/* Estilo para cuando el select tiene el placeholder */
.sg-select:not(:focus):not(.sg-has-value){
    color:var(--sg-select-placeholder-dark); /* Placeholder claro */
    font-size:14px; /* Tamaño más pequeño para el placeholder */
}

/* Estilo específico para el placeholder del segundo nivel */
.sg-select.sg-select-group-options:not(:focus):not(.sg-has-value){
    color: var(--sg-select-placeholder-dark); /* Placeholder claro para segundo nivel */
    font-size:var(--sg-placeholder-font-size-level2-pc); /* Tamaño más pequeño para el placeholder del segundo nivel */
}

.sg-label{
    position:absolute;
    left:60px;
    top:30%;
    transform:translateY(-50%);
    color:var(--sg-label-color);
    font-size:var(--sg-font-size);
    pointer-events:none;
    transition:var(--sg-transition);
    transform-origin:left center;
    background:transparent;
    white-space:nowrap;
    display:flex;
    align-items:center;
}

.sg-asterisk-required{
    color:red;
    margin-left:4px;
    font-weight:bold;
}

.sg-icon{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:var(--sg-select-icon-dark); /* Icono claro */
    font-size:18px;
    transition:var(--sg-transition);
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sg-select:focus ~ .sg-icon{
    color:var(--sg-select-icon-dark);
}

.sg-back-arrow{
    position:absolute;
    left:45px;
    top:50%;
    transform:translateY(-50%);
    color:var(--sg-select-back-arrow-dark); /* Flecha atrás clara */
    font-size:18px;
    cursor:pointer;
    transition:var(--sg-transition);
    opacity:0;
    visibility:hidden;
    z-index:6;
    padding-left:5px;
    padding-right:8px; /* Aumentado para más separación */
    display:flex;
    align-items:center;
    justify-content:center;
}

.sg-back-arrow.sg-active{
    opacity:1;
    visibility:visible;
}

.sg-back-arrow:hover{
    color: green;
    transform:translateY(-50%) scale(1.1);
    filter: brightness(1.1); /* Efecto de brillo para mejorar visibilidad */
}

/* Tooltip para back-arrow */
.sg-back-arrow-tooltip{
    position:fixed;
    background:darkgreen;/*rgba(0, 0, 0, 0.85);*/
    color:white;
    padding:6px 10px;
    border:1px dotted silver;
    border-radius:8px;
    font-size:12px;
    z-index:100000;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s ease;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
}

.sg-back-arrow-tooltip.sg-visible{
    opacity:1;
}

.sg-arrow{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%) rotate(45deg);
    width:12px;
    height:12px;
    border-right:2px solid var(--sg-label-color);
    border-bottom:2px solid var(--sg-label-color);
    transition:var(--sg-transition);
    pointer-events:none;
}

.sg-select:focus ~ .sg-arrow{
    transform:translateY(-50%) rotate(225deg);
    border-color:var(--sg-select-icon-dark);
}

/* Dropdown de resultados */
.sg-dropdown{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background-color:var(--sg-dropdown-bg) !important;
    background:var(--sg-dropdown-bg);
    border:2px solid var(--sg-border-focus);
    border-top:none;
    border-radius:0 0 var(--sg-border-radius) var(--sg-border-radius);
    box-shadow:var(--sg-shadow);
    z-index:20;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:var(--sg-transition);
    max-height:180px;
    overflow-y:auto;
    color:var(--sg-dropdown-text);
}

.sg-dropdown.sg-active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.sg-dropdown-item{
    padding:10px 16px;
    color:var(--sg-dropdown-text);
    cursor:pointer;
    transition:var(--sg-transition);
    border-bottom:1px solid rgba(255, 255, 255, 0.1);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
}

.sg-dropdown-item:last-child{
    border-bottom:none;
}

.sg-dropdown-item:hover{
    background:var(--sg-hover-bg);
    color:var(--sg-dropdown-text);
}

.sg-dropdown-item i{
    font-size:14px;
    width:16px;
    text-align:center;
    color:var(--sg-dropdown-text);
}

.sg-dropdown-result{
    background:rgba(255, 255, 255, 0.7);
    color:var(--sg-primary-color);
    font-weight:500;
}

.sg-dropdown-result:hover{
    background:rgba(255, 255, 255, 0.9);
    color:var(--sg-primary-hover);
}

/* Estilo para cada opcion del select nativo */
.sg-select option {
    /* Nota: El navegador puede ignorar otros estilos como la familia de fuentes. */
    font-size: 14px;
    background-color: var(--sg-select-bg-dark) !important;
    color: var(--sg-select-text-dark);
    cursor:pointer;
    font-weight:300;
    letter-spacing:0.5px;
}

/* Estados de carga */
.sg-loading{
    position:relative;
}

.sg-loading::after{
    content:"";
    position:absolute;
    right:45px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    border:2px solid var(--sg-select-placeholder-dark);
    border-top:2px solid var(--sg-select-icon-dark);
    border-radius:50%;
    animation:sgSpin 1s linear infinite;
}

@keyframes sgSpin{
    0%{ transform:translateY(-50%) rotate(0deg); }
    100%{ transform:translateY(-50%) rotate(360deg); }
}

/* Responsive */
@media (max-width:480px){
    .sg-container{
        max-width:100%;
    }
    
    .sg-select{
        font-size:14px;
        padding:14px 45px 14px 55px;
        height:50px; /* Ajustar altura en móviles */
    }
    
    .sg-select:not(:focus):not(.sg-has-value){
        color:var(--sg-select-placeholder-dark); /* Placeholder claro en móviles */
        font-size:12px; /* Tamaño aún más pequeño para el placeholder en móviles */
    }
    
    /* Estilo específico para el placeholder del segundo nivel en móviles */
    .sg-select.sg-select-group-options:not(:focus):not(.sg-has-value){
        color: var(--sg-select-placeholder-dark); /* Placeholder claro para segundo nivel en móviles */
        font-size:var(--sg-placeholder-font-size-level2-mobile); /* Tamaño aún más pequeño para el placeholder del segundo nivel en móviles */
    }
    
    .sg-label{
        font-size:14px;
        left:55px;
    }

    .sg-icon{
        left:18px;
        font-size:16px;
    }

    .sg-back-arrow{
        left:40px;
        font-size:12px;
    }
    
    .sg-dropdown{
        max-height:160px;
        color:var(--sg-dropdown-text);
    }
    
    .sg-dropdown-item{
        padding:8px 14px;
        font-size:13px;
        gap:8px;
    }
}

/* Animaciones mejoradas */
.sg-fade-in{
    animation:sgFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sg-slide-in{
    animation:sgSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sgFadeIn{
    from{
        opacity:0;
        transform:translateY(-5px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes sgSlideIn{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Efecto de hover en la etiqueta flotante */
.sg-select:hover + .sg-label{
    color:var(--sg-primary-hover);
}

.sg-select:focus + .sg-label:hover,
.sg-select.sg-has-value + .sg-label:hover{
    border-color:var(--sg-primary-hover);
    color:var(--sg-primary-hover);
    box-shadow:0 4px 8px rgba(37, 99, 235, 0.15);
    transform:translateY(-32px) scale(0.87);
}

/* Animación especial para la etiqueta flotante */
.sg-label-animate{
    animation:sgLabelFloat 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sgLabelFloat{
    0%{
        transform:translateY(-50%) scale(1);
        opacity:0.7;
    }
    50%{
        transform:translateY(-40px) scale(0.9);
        opacity:0.9;
    }
    100%{
        transform:translateY(-32px) scale(0.85);
        opacity:1;
    }
}

/* selectGroup.css fin */