/*---FONTS----*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


/*----COLORES----*/

:root{
    /*Fondos*/
    --bg-primary: #0a0e1a; /*Fondo general*/
    --bg-secondary: #111827; /*Color para secciones*/
    --bg-card: #1a2234; /*Para las tarjetas*/
    --bg-delete: #680101;

    /*Colores principales*/
    --color-primary: #22d3ee; /*Turquesa brillante*/
    --color-secondary: #0ea5e9; /*Color cielo*/
    --color-accent: #818cf8; /*Color detalles mágicos*/
    --color-delete: #8f3f3f;

    /*Textos*/
    --text-primary: #e2e8f0; /*Texto principal*/
    --text-secondary: #94a3b8; /*Texto secundario*/

    /*Bordes y detalles*/
    --border-color: #22d3ee40; /*Turquesa para los bordes*/
    --glow: 0 0 15px #22d3ee50; /*Sombreado*/

    /*Fuentes*/
    --font-title: 'Cinzel', serif;
    --font-body: 'Nunito', sans-serif;
}


/*----ESTILOS BÁSICOS----*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
}

/*---ESTILOS HEADER---*/

header{
    width: 100%;
}

.header-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.title-grimoire h1{
    font-family: var(--font-title);
    text-align: center;
}

.subtitle-grimoire{
    text-align: center;
    font-size: 1rem;
}


/*----ESTILOS FORMULARIO----*/

form.form-container{
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    gap: 10px;
}

.input-form,
.item-type,
.text-description{
    width: 100%;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 10px;
    font-family: var(--font-title);
}

.input-form::placeholder,
.text-description::placeholder{
    color: var(--text-secondary);
}

select.item-type{
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.text-description{
    resize: none;
    height: 100px;
}

.btn-add{
    width: 100%;
    font-weight: bold;
    background-color: var(--color-primary);
    padding: 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-add:hover{
    background-color: var(--color-accent);
}


/*----ESTILOS TARJETAS----*/

.grimoire-list{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding-top: 20px;
    gap: 10px;
}

li{
    max-width: 250px;
    background-color: var(--bg-card);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    text-align: center;
    box-shadow: var(--glow);
    padding: 15px;
}

li h2{
    font-family: var(--font-title);
    margin-bottom: 8px;
    color: var(--color-primary);
}

li span{
    margin: 5px 0;
    color: var(--color-accent);
}

li p{
    margin: 5px 0;
}

.emoji{
    display: block;
    font-size: 5rem;
    text-align: center;

}

.btn-delete{
    width: 100%;
    background-color: var(--bg-delete);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 5px;
}

.btn-delete:hover{
    background-color: var(--color-delete);
}