#journaling-app {
    max-width: 600px;
    margin: 0 auto;
}

#journaling-app textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    margin-bottom: 10px;
}

#journaling-app button {
    padding: 10px 20px;
    margin-bottom: 20px;
}

#jp-mensajes {
    margin-bottom: 20px;
    font-weight: bold;
}

#jp-mensajes.exito {
    color: #008000; /* green */
}

#jp-mensajes.error {
    color: #FF0000; /* red */
}

#jp-lista-reflexiones {
    list-style: none;
    padding: 0;
}

#jp-lista-reflexiones li {
    border-bottom: 1px solid #CCCCCC; /* #ccc */
    padding: 10px 0;
    position: relative;
}

#jp-lista-reflexiones li p {
    margin: 5px 0;
}

.jp-resumen {
    /* Estilos para el resumen */
}

.jp-contenido-completo {
    margin-top: 10px;
    display: none;
}

.jp-contenido-completo p {
    margin-bottom: 1em;
}

.jp-botones-collapsed,
.jp-botones-expanded {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.jp-botones-collapsed button,
.jp-botones-expanded button {
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    font-size: 1em;
}

.jp-botones-collapsed .jp-leer,
.jp-botones-expanded .jp-cerrar {
    background-color: #FFFFFF; /* white */
    color: #000000; /* black */
    border: 1px solid #CCCCCC; /* #ccc */
}

.jp-botones-collapsed .jp-eliminar,
.jp-botones-expanded .jp-eliminar {
    background-color: #CF2E2E;
    color: #FFFFFF; /* white */
}

.jp-botones-collapsed .jp-leer:hover,
.jp-botones-expanded .jp-cerrar:hover {
    background-color: #F0F0F0; /* #f0f0f0 */
}

.jp-botones-collapsed .jp-eliminar:hover,
.jp-botones-expanded .jp-eliminar:hover {
    background-color: #FF6A6A;
}