/* =========================================
    fuentes switch
    ========================================= */

   /* El contenedor del switch */
.contenedor-switch {
    align-items: right;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

/* Escondemos el checkbox original */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* El slider (la parte de atrás) */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Color cuando está activo (Verde Miacat) */
input:checked + .slider {
    background-color: #d4dfc2;
}

input:checked + .slider:before {
    transform: translateX(26px);
}


/* =========================================
    ESTILOS DEL BUSCADOR (Versión Pequeña)
    ========================================= */

/* 1. Contenedor: Reducimos el ancho máximo */
#searchform {
    max-width: 350px; /* Antes era 500px. Ahora es mucho más compacto */
    margin: 20px auto; /* Un poco menos de margen vertical */
}

/* 2. La "Pastilla": Bordes más finos y menos relleno */
#searchform div {
    display: flex;
    border: 2px solid var(--color-principal); /* Bajamos de 3px a 2px para que sea más fino */
    border-radius: 50px;
    background-color: var(--color-blanco);
    padding: 3px; /* Menos espacio entre el borde y el contenido */
    box-shadow: 2px 2px 0px rgba(114, 133, 85, 0.2); /* Sombra más sutil */
}

/* 3. El campo de texto (Input) */
#s {
    flex-grow: 1;
    border: none;
    background: transparent;

    /* Reducimos el padding interno */
    padding: 5px 15px;

    /* Letra más pequeña */
    font-family: var(--font-cuerpo);
    font-size: 1rem; /* Antes 1.2rem. Ahora tamaño normal */
    color: var(--color-texto);

    outline: none;
}

/* 4. El botón de búsqueda */
#searchsubmit {
    border: none;
    background-color: var(--color-principal);
    color: var(--color-blanco);

    /* Botón más pequeño */
    padding: 5px 20px; /* Antes era 10px 30px */
    border-radius: 40px;

    font-family: var(--font-cuerpo);
    font-weight: bold;
    font-size: 0.9rem; /* Letra del botón un poco más chica */
    text-transform: lowercase;

    cursor: pointer;
    transition: all 0.3s ease;
}

#searchsubmit:hover {
    background-color: var(--color-principal-hover);
    transform: scale(1.05);
}

/* Ocultar etiqueta screen-reader */
#searchform .screen-reader-text {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Contenedor que alinea Texto + Barra */
.search-wrapper {
    display: flex;
    /* justify-content: center; Los centra en la pantalla */
    /* align-items: center;     Los alinea verticalmente (para que el texto no quede arriba) */
    gap: 15px;               /* Espacio entre el texto y la barra */
    /* margin-top: 30px; */
    flex-wrap: wrap;         /* IMPORTANTE: Si la pantalla es chica (celular), baja la barra */
}

/* Estilo del texto "Estás buscando algo..." */
.search-label {
    font-family: var(--font-cuerpo);
    font-size: 1.3rem;
    color: var(--color-texto);
}

/* PEQUEÑO AJUSTE AL BUSCADOR EXISTENTE */
/* Como ahora vive dentro de un flex, hay que quitarle el margen automático que le pusimos antes */
.search-wrapper #searchform {
    margin: 0; /* Ya no necesita margin: auto porque el wrapper lo centra */
}

/* =========================================
   PÁGINA DE RESULTADOS DE BÚSQUEDA
   ========================================= */

/* 1. El Título principal */
.search-header {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 20px;
}

.search-header h1 span {
    color: var(--color-principal); /* Destaca la palabra buscada en verde */
    text-decoration: underline;
    text-decoration-style: wavy; /* Subrayado ondulado (muy 'cute') */
}

.search-count {
    color: var(--color-texto-suave);
    font-family: var(--font-cuerpo);
    font-size: 1.1rem;
}

/* 2. El contenedor de tarjetas */
.search-results-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. La Tarjeta de Resultado (Card) */
.search-result-card {
    background: var(--color-blanco);
    border: 2px solid var(--color-borde); /* Borde gris suave */
    border-radius: 15px; /* Bordes redondeados */
    padding: 25px;
    margin-bottom: 25px;
    position: relative;
    transition: transform 0.2s ease;
}

.search-result-card:hover {
    border-color: var(--color-principal); /* Se pone verde al pasar el mouse */
    transform: translateY(-3px); /* Se levanta un poquito */
}

/* 4. Etiqueta de tipo (ej. "Vocabulario") */
.result-type {
    display: inline-block;
    background-color: var(--color-fondo-suave);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    margin-bottom: 10px;
    font-family: sans-serif; /* Fuente simple para leer fácil */
    letter-spacing: 1px;
}

/* 5. Título de la tarjeta */
.search-result-card .entry-title {
    margin: 0 0 15px 0;
    font-family: var(--font-titulos);
}

.search-result-card .entry-title a {
    text-decoration: none;
    color: var(--color-texto);
}

/* 6. Enlace "Ver más" */
.read-more-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--color-principal);
    font-weight: bold;
    text-decoration: none;
    font-family: var(--font-cuerpo);
}

.read-more-link:hover {
    text-decoration: underline;
}

.enlace-boton {
    background-color: var(--color-principal-claro);
    color: white !important;
    padding: 10px;
    border-radius: 25px;
    width: fit-content;
    transition: 0.2s;
}

.enlace-boton:hover {
    transform: scale(1.1);
    text-decoration: none;
    color: white !important;
}


/* 1. EL CONTENEDOR (El ancla) */
.michi-tooltip {
    position: relative; /* Necesario para que el mensaje flote respecto a esto */
    cursor: help;       /* Cambia el cursor a signo de interrogación */
}

/* 2. EL MENSAJE (La burbuja) */
.michi-tooltip::before {
    content: attr(data-tooltip); /* Magia: Lee el texto del HTML */

    /* Posición: Arriba y Centrado */
    position: absolute;
    bottom: 140%; /* Un poco más arriba del ícono */
    left: -70px;
    transform: translateX(-50%) translateY(10px); /* Empieza un poco abajo para animar */

    /* Diseño de la caja */
    width: 200px; /* Ancho máximo para que no sea eterno */
    padding: 10px 15px;
    background-color: var(--color-verde-clarito); /* Gris muy oscuro */
    border: 2px solid var(--color-principal-clarito);
    color: var(--color-texto);
    text-align: center;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1.4;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

    /* Estado inicial: Invisible */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Para que no estorbe al click */

    /* Animación suave */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Efecto rebote sutil */
    z-index: 100000;
}

/* 3. LA FLECHITA (El triangulito abajo) */
.michi-tooltip::after {
    content: '';
    position: absolute;
    bottom: 130%; /* Pegado a la base de la burbuja */
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    /* Dibujamos un triángulo con bordes transparentes */
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-texto-suave) transparent transparent transparent;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 100000;
}

/* 4. ESTADO HOVER (Cuando pasas el mouse) */
.michi-tooltip:hover::before,
.michi-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Sube a su posición final */
}

/* --- 1. LA RECETA DE LA ANIMACIÓN (Keyframes) --- */
/* Esto define CÓMO se mueve. Es un "wiggle" (meneíto) rápido y tierno */
@keyframes michi-wiggle-pop {
    0% { transform: scale(1); }             /* Estado normal */
    20% { transform: scale(1.2) rotate(-12deg); } /* Crece y se inclina a la izquierda */
    40% { transform: scale(1.4) rotate(12deg); }  /* Se inclina a la derecha */
    60% { transform: scale(1.4) rotate(-6deg); } /* Izquierda un poquito */
    80% { transform: scale(1.2) rotate(6deg); }  /* Derecha un poquito */
    100% { transform: scale(1) rotate(0deg); } /* Se queda grande y derecho */
}

.meta-diaria-contenedor {
    #cat i,
    .trophy i,
    #porcentageTexto {
        /* 'inline-block' es OBLIGATORIO para que las rotaciones funcionen bien en íconos */
        display: inline-block;
        transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote al volver */
    }

    #cat:hover i,
    .trophy:hover i,
    #porcentageTexto:hover {
        animation: michi-wiggle-pop 0.9s ease-out forwards;
    }

    /* 4. (OPCIONAL) ARREGLO PARA EL TOOLTIP */
    /* Si usaste el tooltip anterior, esto asegura que la animación no lo rompa */
    .michi-tooltip:hover::before,
    .michi-tooltip:hover::after {
        /* Aseguramos que el tooltip no se vea afectado por la escala del ícono */
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
}