/* =========================================
   ENGRANE DE CONFIGURACION
========================================== */
/* Estilos generales de la barra */
.barra-principal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #1a1a1a; /* Fondo oscuro */
}

/* El botón transparente que contiene el icono */
.btn-icono {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #a0a0a0; /* Color grisáceo para el icono en reposo */
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

/* El icono en sí */
.icono-nav {
  width: 20px;
  height: 20px;
  fill: currentColor; /* El truco de siempre */
  transition: transform 0.4s ease, color 0.3s ease;
}

/* LA MAGIA: Efecto Hover (Al pasar el ratón) */
.btn-icono:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Ligero fondo al botón */
}

.btn-icono:hover .icono-nav {
  color: #9B59B6; /* Cambia a azul */
  transform: rotate(90deg); /* ¡Hace que el engranaje gire! */
}

/* =========================================
   LUPA DE BUSQUEDA
========================================== */

/* 1. Nos aseguramos de que tu caja actual use Flexbox para alinear el input y el botón */
.caja-busqueda {
    display: flex;
    align-items: center;
    /* (Aquí mantienes el background, border-radius o padding que ya tenías) */
}

/* 2. El botón que reemplaza a tu antigua etiqueta <i> */
.btn-buscar {
    position: relative; /* Fundamental para montar las capas */
    background: transparent;
    border: none;
    width: 18px;  /* Tamaño similar al que solía tener FontAwesome */
    height: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 10px; /* Separación entre tu texto y la lupa */
    display: flex;     /* Centra el contenido interior */
}

/* 3. Las dos lupas superpuestas */
.icono-lupa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* 4. La lupa gris que siempre ves */
.capa-base {
    color: #fff; /* Ajusta este gris al estilo de tu tema */
}

/* 5. La lupa que se llena desde abajo */
.capa-relleno {
    color: #00a8ff; /* El color de tu marca (Ej. azul) */
    
    /* Inicia cortada (vacía) al 100% abajo */
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 0.3s ease-out;
}

/* 6. EL EFECTO: Se llena cuando el usuario pasa el mouse por TODA la caja de búsqueda */
.caja-busqueda:hover .capa-relleno {
    /* La "cortina" sube al 0% (techo), mostrando toda la lupa azul */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


/* 1. Estilo para la insignia (Si no lo tenías, esto la hace ver muy bien) */
.badge-trofeo {
    display: inline-flex; /* Flexbox para alinear el trofeo y el texto "#1" */
    align-items: center;  /* Centra verticalmente */
    gap: 6px;             /* Separación entre el trofeo y el "#1" */
    background-color: #6138A8; /* Fondo dorado para el trofeo */
    color: #fff;          /* Color oscuro para el texto */
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
}

/* 2. El tamaño específico para tu trofeo dentro del badge */
.icono-trofeo-badge {
    width: 16px;   /* Un tamaño pequeño para que no abrume al texto */
    height: 16px;
    fill: currentColor; /* Tomará el color #333 del texto, o puedes forzar un color aquí */
    
    /* Esta línea es útil porque el trofeo tiene un viewBox gigante (2591x2978) */
    shape-rendering: geometricPrecision; 
}

/* Si prefieres que el trofeo sea dorado pero el fondo oscuro: */
/*
.badge-trofeo {
    background-color: #222;
    color: white;
}
.icono-trofeo-badge {
    color: #ffd700; 
}
*/