/* Estilos para las banderas de países */
.country-flags {
    display: flex;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    gap: 10px; /* Reducido el espacio entre banderas */
  }
  
  .flag-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px; /* Reducido el radio del borde */
    padding: 6px; /* Reducido el padding */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .flag-container:hover {
    transform: translateY(-2px); /* Reducido el efecto hover */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }
  
  .flag-icon {
    width: 30px; /* Reducido de 40px a 30px */
    height: 22px; /* Reducido de 30px a 22px */
    border-radius: 3px; /* Reducido el radio del borde */
    overflow: hidden;
    margin-bottom: 4px; /* Reducido el margen inferior */
  }
  
  .flag-container span {
    font-family: 'Arial', sans-serif;
    font-size: 10px; /* Reducido de 12px a 10px */
    font-weight: 600;
    color: #333;
  }
  
  /* Estilos responsivos */
  @media (max-width: 768px) {
    .country-flags {
      top: 8px;
      right: 8px;
    }
    
    .flag-container {
      padding: 4px;
    }
    
    .flag-icon {
      width: 24px; /* Reducido aún más para móviles */
      height: 18px;
    }
    
    .flag-container span {
      font-size: 9px;
    }
  }