/*
Theme Name: MiaCat Theme
Author: Mia
Description: No bloat. Just code.
Version: 1.1 (Refactorizado con Variables)
*/

/* =========================================
    1. FUENTES
   ========================================= */
@font-face {
    font-family: 'Cedarville Cursive';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/CedarvilleCursive-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'FellGreatPrimer';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/IMFellGreatPrimer-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Indie Flower';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/IndieFlower-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Meow Script';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/MeowScript-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/SourceCodePro-VariableFont_wght.ttf') format('truetype');
}


/* =========================================
    2. VARIABLES (:root) - TU PALETA DE COLORES
   ========================================= */
:root {
    /* --- Colores --- */
    --color-principal-hover: #56663d;
    --color-principal: #728555;       /* ¡TU NUEVO VERDE! */ /* Verde más oscuro para hover */
    --color-principal-claro: #A4B687;
    --color-principal-clarito:      #BCCAA5;
    --color-borde-clarito: #d4dfc2;
    --color-verde-clarito: #f0f4e8;
    --color-verde-sutil: #f1f4ec;
    --color-fondo-suave: #f4f4f4;     /* Gris claro para fondos */
    --color-blanco: #ffffff;
    --color-texto: #333333;           /* Gris oscuro principal */
    --color-texto-suave: #666666;     /* Texto secundario */
    --color-texto-claro: #999999;     /* Texto terciario */
    --color-borde: #e1e1e1;

    /* Definición de colores de generos */
    --color-masculino: #6173AE; /* Azul */
    --color-femenino:  #C15B8E; /* Rosa */
    --color-ambos:     #AC8FC2; /* Violeta */

    --alerta: #D6C5E3;
    --color-ai: #943e68;
    --color-ai-darker: #753454;
    --color-error-suave: rgba(240, 238, 123, 0.6);

    --radio-borde: 15px;
    --sombra-suave: 0 4px 6px rgba(0,0,0,0.05);

    /* --- Fuentes (Asignadas a variables para cambiar fácil) --- */
    --font-titulos: "Meow Script", cursive;
    --font-header: "Cedarville Cursive", cursive;
    --font-cuerpo: "Indie Flower", cursive;
    --font-menu: "Cedarville Cursive", cursive;
    --font-pretty-cursive: "Cedarville Cursive", cursive;
    --font-mono: "Source Code Pro", "Indie Flower", cursive;
    --font-default: "FellGreatPrimer", "Indie Flower", cursive;
    --font-readable: "Quicksand", sans-serif;

    /* --- PALETA DE COLORES MIACAT --- */

    /* Verde */
    --color-verde:       #A4B687;
    --color-verde-claro: #f0f4e8;

    /* Morado */
    --color-morado:       #AC8FC2;
    --color-morado-claro: #f5eff7;

    /* Verde Azul */
    --color-verde-azul:       #7FB5B5;
    --color-verde-azul-claro: #eef6f6;

    /* Azul */
    --color-azul:       #6FA0D4;  /* Antes era #8FBCC2 */
    --color-azul-claro: #ebf3fa;  /* Fondo azulito muy suave */
    --color-azul-oscuro: #5D8BC0;
    --color-azul-mas-oscuro: #4B79A1;

    /* Amarillo */
    --color-amarillo:       #D9C675;
    --color-amarillo-claro: #fbf9e6;
    --color-amarillo-oscuro: #C2AE5E;

    /* Rosa */
    --color-rosa:       #C28F9E;
    --color-rosa-claro: #f8eff1;

    /* Marrón */
    --color-marron:       #B69E87;
    --color-marron-claro: #f5efe8;

    /* Teal */
    --color-teal:       #5E8C8C;
    --color-teal-claro: #eff5f5;
    --color-teal-oscuro: #3d6060;

    /* Menta */
    --color-menta:       #76A8A0;
    --color-menta-claro: #f0f7f6;

    /* Limón */
    --color-limon:       #DBC56E;
    --color-limon-claro: #fbfbe8;

    /* Miel */
    --color-miel:       #E6B86A;
    --color-miel-claro: #fdf8ee;

    /* Coral */
    --color-coral:       #E09F7D;
    --color-coral-claro: #fdf6f2;
    --color-coral-fuerte: #dd6b20;

    /* Frambuesa */
    --color-frambuesa:       #C98696;
    --color-frambuesa-claro: #f9eff1;

    --color-menta-medio: #bce3de;

    /* Un lila cremoso (Alternativa para tema) */
    --color-morado-medio: #dcd0e8;

    /* Un melocotón suave (Alternativa cálida) */
    --color-coral-medio: #f2cfbd;

    /* Un verde té matcha (Muy MiaCat) */
    --color-verde-medio: #d4e0c3;

    /* Un azul cielo nublado (Calmante) */
    --color-azul-medio: #cde2f5;

    --color-rosa-palida: #fcf6f9;
    --color-morado-oscuro: #5e4174;
    --michi-verde-menta: #A4B687;    /* Color Principal */
    --michi-verde-oscuro: #5C7058;   /* Texto / Acentos oscuros */
}

/* Asignamos las variables globales a las variables locales de la tarjeta */
.tarjeta-verde      { --color-borde: var(--color-verde);      --color-fondo: var(--color-verde-claro); }
.tarjeta-morado     { --color-borde: var(--color-morado);     --color-fondo: var(--color-morado-claro); }
.tarjeta-verde-azul { --color-borde: var(--color-verde-azul); --color-fondo: var(--color-verde-azul-claro); }
.tarjeta-azul       { --color-borde: var(--color-azul);       --color-fondo: var(--color-azul-claro); }
.tarjeta-amarillo   { --color-borde: var(--color-amarillo);   --color-fondo: var(--color-amarillo-claro); }
.tarjeta-rosa       { --color-borde: var(--color-rosa);       --color-fondo: var(--color-rosa-claro); }
.tarjeta-marron     { --color-borde: var(--color-marron);     --color-fondo: var(--color-marron-claro); }
.tarjeta-teal       { --color-borde: var(--color-teal);       --color-fondo: var(--color-teal-claro); }
.tarjeta-menta      { --color-borde: var(--color-menta);      --color-fondo: var(--color-menta-claro); }
.tarjeta-limon      { --color-borde: var(--color-limon);      --color-fondo: var(--color-limon-claro); }
.tarjeta-miel       { --color-borde: var(--color-miel);       --color-fondo: var(--color-miel-claro); }
.tarjeta-coral      { --color-borde: var(--color-coral);      --color-fondo: var(--color-coral-claro); }
.tarjeta-frambuesa  { --color-borde: var(--color-frambuesa);  --color-fondo: var(--color-frambuesa-claro); }

#juegosTitulo {
    color: var(--color-principal-hover);
}

/* =========================================
3. ESTILOS GENERALES
========================================= */
body {
    font-family: var(--font-cuerpo);
    font-weight: 400;
    font-style: normal;
    color: var(--color-texto);
    margin: 0; /* Reseteo básico */
}

/* Cuando el body tenga esta clase, las variables cambian */
body.fuentes-legibles {
    --font-titulos: var(--font-readable), "Meow Script", cursive;
    --font-header: var(--font-readable), "FellGreatPrimer", "Cedarville Cursive", cursive;
    --font-cuerpo: var(--font-readable), "FellGreatPrimer", "Indie Flower", cursive;
    --font-menu: var(--font-readable), "FellGreatPrimer", "Cedarville Cursive", cursive;
    --font-pretty-cursive: var(--font-readable), "FellGreatPrimer", "Cedarville Cursive", cursive;
}

body.fuentes-legibles .branding-group p {
    margin-top: -5px;
}

h1 {
    text-align: center;
}

.centered-text {
    text-align: center;
}

/* Enlaces Globales */
a {
    color: var(--color-principal);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-principal-hover);
    text-decoration: underline;
}

button:active, button:focus {
    outline: none;
}

.miacat-featured-image img {
    max-width: 300px;
    height: auto;
}

.ficha-vocabulario {
    padding: 20px;
    overflow: auto;
    max-width: 800px;
    margin: 0px auto;
}

.page-header {
    margin-bottom: 40px;
    text-align: center;
}

button.boton-miacat {
    background-color: var(--color-verde-clarito);
    border: none;
    padding: 5px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    text-transform: lowercase;
    font-family: var(--font-cuerpo);
    box-shadow: 4px 3px 0px var(--color-principal-clarito);
}

button.boton-miacat:hover {
    transform: scale(1.04);
}

.italicized-text {
    font-style: italic;
}

.enlace-emocionado {
    font-weight: bold;
}

.enlace-emocionado:hover {
    font-style: italic;
}

.paginacion {
    text-align: center;
}

/* página de juegos */
.contenedor-juegos {
    margin-bottom: 40px;
}

.juego-palabra {
    font-weight: bold;
    text-decoration: underline;
    size: 4em;
}

.btn-option, #config-modo, #config-modo option,
#config-tema, #config-tema option, #btn-iniciar-juego {
    font-family: var(--font-cuerpo);
}

button {
    font-family: var(--font-cuerpo);
}

.add-space-above {
    padding-top: 20px;
}

.fa-mars {
    color: var(--color-masculino);
}
.fa-venus {
    color: var(--color-femenino);
}


/* FRONTPAGE */

/* 3. Títulos de sección: Les damos un poco de aire (margin) */
.front-page {
    #frontPageHeader {
        margin-bottom: 5px;
    }
    .front-page-subheader {
        letter-spacing: 1px;
        font-size: 1.4rem;
        margin-bottom: 25px;
    }
    .fa-cat-walk-left {
        color: var(--color-principal);
    }
    .fa-paw {
        color: var(--color-principal-clarito);
    }
    .left-cat {
        transform: scaleX(-1);
    }
    .left-paw {
        transform: rotate(340deg);
    }
    .right-paw {
        transform: rotate(20deg);
    }
    #introText {
        text-align: center;
    }

    #pruebaEsto {
        border: 2px solid var(--color-principal-clarito);
        padding: 10px;
        width: fit-content;
        border-radius: 25px;
        text-align: center;
        margin: auto;
    }

    #username {
        font-weight: bold;
    }
}

/* front-page unused because we deleted the ul */
.palabras-vista-menu {
    ul {
        list-style-type: circle var(--color-principal-hover);
        padding: 0;
    }

    li {
        margin-left: 40px;
        font-size: 1.2rem;
        position: relative;
    }

    li::marker {
        color: var(--color-principal);
    }

    a:hover {
        font-style: italic;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1); /* Original size at the start and end */
    }
    50% {
        transform: scale(1.1); /* Scales up to 110% halfway through */
    }
    100% {
        transform: scale(1); /* Returns to original size */
    }
}