/*---FONT----*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/*---COLORES---*/

:root{
    --body-color: #f7deb2; /*Color del body*/
    --button-color: #b05470; /*Color de los botones*/
    --text-color-button: #f7f3ed; /*Color texto botones*/
    --text-color: #3a3a3a; /*Color de los textos*/
    --bg-card: #fffaf0; /*Color fondo tarjetas (articles)*/
    --box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2);
    --bg-text-area: #ebebeb; /*Color fondo textarea e inputs*/
    --bg-date: #d6e2df; /*Color fondo fecha*/
    --accent-color: #a6ccc3; /*Color hover botones*/
    --danger-color: #c0694a; /*Color boton delete*/
    --danger-color-accent: #be1600; /*Color hover borrar entrada*/

    /*Fuentes*/

    --header-font: 'Lora', serif;
    --text-font: 'Lato', sans-serif;
}


/*---ESTILOS GENERALES---*/

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

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

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

header{
    text-align: center;
    padding: 20px 0;
}

.header-container{
    max-width: 900px;
    margin: 0 auto;
}

.diary-title{
    font-family: var(--header-font);
    font-size: 2.5rem;
}


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

.form-diary{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 600px;
    margin: 20px auto;
    background-color: var(--bg-card);
    box-shadow: var(--box-shadow);
    padding: 15px;
    gap: 15px;
    border-radius: 15px;
}

.text-entries{
    min-height: 120px; /*Altura del textarea*/
    resize: none;
}

.text-entries,
.input-url{
    background-color: var(--bg-text-area);
    font-family: var(--text-font);
    border: none;
    border-radius: 15px;
    padding: 15px;
}

.text-entries:focus,
.input-url:focus{
    outline: 2px solid var(--accent-color);
}

.text-entries::placeholder,
.input-url::placeholder{
    color: var(--text-color);
}

.btn-add{
    border: none;
    background-color: var(--button-color);
    padding: 15px;
    border-radius: 15px;
    color: var(--text-color-button);
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

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


/*----ESTILOS ARTICLES---*/

.entries-container{
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: center;
    gap: 15px;
}

.entries-article{
    background-color: var(--bg-card);
    border-radius: 15px;
    box-shadow: var(--box-shadow);
    padding: 15px;
}

.entries-article img{
    width: 100%;
    height: 300px;
    border-radius: 15px 15px 0 0;
    object-fit: cover;
    margin-bottom: 15px;
}

.date-entry{
    border-radius: 18px;
    background-color: var(--bg-date);
    padding: 8px;
    font-weight: bold;
    font-size: 0.85rem;
}

.text-entry{
    padding: 0px 10px;
    margin-top: 18px;
    font-style: italic;
    background-color: #e7e7f1;
    background-image: repeating-linear-gradient(0deg, transparent, 
    transparent 19px, rgba(180, 150, 120, 0.3) 19px,rgba(180, 150, 120, 0.3) 20px);
    background-size: 100% 20px;
    letter-spacing: 0.5px;
}

.btn-edit,
.btn-delete,
.btn-confirm{
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    color: var(--text-color-button);
    font-weight: bold;
    font-size: 0.75rem;
    margin-top: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.btn-edit,
.btn-confirm{
    background-color: var(--button-color);
}

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

.btn-edit:hover,
.btn-confirm:hover{
    background-color: var(--accent-color);
    color: var(--text-color);
}

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

/*---ARTICLE CREADO DEL JS--*/

article textarea{
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    border-radius: 10px;
    border: 1px solid var(--accent-color);
    font-family: var(--text-font);
    resize: none;
    min-height: 100px;
}

article textarea:focus{
    outline: 2px solid var(--accent-color);
}