:root {
    --color-Principal: #105A3B;
    --color-Secundario: #0A122A;
    --color-Color_De_Fuente: #192120;
    --color-Negativo: #E31837;
}

/* Contenedor del SearchBar */
.corcasanet-group {
    position: relative;
    margin-right: 1rem;
}

/* Estilo del input */
.corcasanet-search-bar {
    width: 200px; /* Ancho fijo */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    padding: 0.5rem;
    border: 1px solid #D1D5DB; /* Gris estándar */
    border-radius: 0.5rem; /* Bordes redondeados */
    font-size: 0.875rem; /* Tamaño de fuente (14px) */
}

    .corcasanet-search-bar:focus {
        outline: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
        border-color: var(--color-Principal) !important;
        --tw-ring-color: var(--color-Principal) !important;
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    }


/* Hover del grupo */
.corcasanet-group:hover .corcasanet-search-bar {
    background-color: #F3F4F6; /* Gris claro */
}

/* Estilo del ícono (SVG) */
svg {
    transition: color 0.2s ease-in-out; /* Suaviza el cambio de color */
}

.corcasanet-group:hover svg {
    color: var(--color-Principal) !important;
}