/* =========================================================
   🧩 CUSTOM.CSS — Ajustes específicos y overrides locales
   =========================================================
   📌 Descripción:
       Esta hoja complementa main.css y permite realizar 
       personalizaciones sin alterar el diseño base.

   📂 Estructura recomendada:
       1️⃣ Variables y colores locales
       2️⃣ Overrides de layout o spacing
       3️⃣ Ajustes tipográficos
       4️⃣ Elementos específicos (header, footer, botones, etc.)
       5️⃣ Media queries y adaptaciones

   ⚠️ Buenas prácticas:
       - No repetir reglas existentes en main.css salvo que 
         sea para sobrescribirlas intencionalmente.
       - Documentar cada cambio con fecha y motivo.
       - Mantener el archivo lo más ligero posible.

   💡 Ejemplo de override:
       main.max-w-5xl {
         max-width: 62rem; /* ajuste específico SV */
       }
   ========================================================= */

.country-dropdown a img {
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
}

.country-dropdown a:hover img {
    transform: scale(1.07);
    transition: 0.1s ease-in-out;
}

/* Botón del selector de país */
#countryBtn {
    display: flex;
    align-items: center;        /* Aquieta la bandera y el texto verticalmente */
    justify-content: space-between; /* Texto a la izquierda, flecha a la derecha */
    width: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb; /* gris suave */
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Alinear y estilizar el bloque bandera+nombre */
#countryBtn .country-label {
    display: flex;
    align-items: center;       /* centra bandera + texto vertical */
    gap: 8px;                  /* espacio entre bandera y nombre */
}

/* Estilo de la bandera dentro del botón */
#countryBtn img {
    display: block;            /* elimina saltos o espacios extra */
    width: 20px;
    height: auto;
    border-radius: 2px;
}

/* Nombre del país */
#countryBtn span.country-name {
    font-size: 14px;
    font-weight: 500;
    color: #3a3a3a;
}

/* Flechita ▼ */
#countryBtn .country-arrow {
    font-size: 10px;
    color: #6b7280;            /* gris elegante */
}

/* Hover */
#countryBtn:hover {
    background: #f9fafb;       /* gris muy suave */
}

/* =========================================================
   POSICIONAMIENTO DEL MENÚ: ABRIR HACIA ARRIBA
   ========================================================= */
#countryMenu {
    position: absolute;
    bottom: 50%;                    /* ¡ABRE HACIA ARRIBA! */
    left: 0;
    margin-bottom: 8px;              /* Espacio entre menú y botón */
    width: 14rem;                    /* 224px = w-56 en Tailwind */
    max-width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 8px;
    z-index: 50;
    max-height: 16rem;               /* 64 * 0.25rem = 256px */
    overflow-y: auto;
    /* Animaciones (ya las tienes, pero las reforzamos) */
    transform-origin: bottom center;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: scaleY(0.95);
    pointer-events: none;
}

/* Estado visible */
#countryMenu.show {
    display: block !important;
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

/* Espacio entre menú y botón (opcional, pero bonito) */
#countryMenu::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 8px;
}

#countryBtn.open .country-arrow {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}