/* ================================
   DIARIO DE ORACIÓN
   Sigue la paleta de estilos.css
================================ */

/* CONTENEDOR PRINCIPAL */
.contenedor-diario {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* CABECERA */
.diario-cabecera {
    text-align: center;
    margin-bottom: 1.8rem;
}

.diario-cabecera h2 {
    font-family: 'EB Garamond', serif;
    font-size: 2rem;
    color: var(--body-texto);
    margin: 0 0 0.3rem;
}

.saludo-diario {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--body-texto-suave);
    margin: 0;
}

/* ─── NAVEGACIÓN DE FECHA ─── */
.nav-fecha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.btn-nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--body-borde);
    background: none;
    color: var(--body-texto);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.btn-nav:hover:not(:disabled) {
    background: var(--body-borde);
}

.btn-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.fecha-centro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
}

.display-fecha {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    font-style: italic;
    color: var(--body-texto);
    text-transform: capitalize;
    text-align: center;
}

.input-fecha-oculto {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.btn-cambiar-fecha {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s;
    padding: 0;
    line-height: 1;
}

.btn-cambiar-fecha:hover { opacity: 1; }

/* ─── ESTADOS DE ÁNIMO ─── */
.estados-animo {
    margin-bottom: 1.2rem;
    text-align: center;
}

.label-estados {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--body-texto-suave);
    margin: 0 0 0.7rem;
    font-size: 1rem;
}

.botones-estados {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    border: 1px solid var(--body-borde);
    background: var(--body-fondo);
    color: var(--body-texto);
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-estado:hover {
    border-color: var(--color-acento);
    background: #faf6ed;
}

.btn-estado.activo {
    background: var(--color-acento);
    color: var(--color-primario);
    border-color: var(--color-acento);
    font-weight: 700;
}

/* ─── INPUTS ─── */
.input-titulo {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.9rem;
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    border: 1px solid var(--body-borde);
    border-radius: 8px;
    background: var(--body-fondo);
    color: var(--body-texto);
    margin-bottom: 0.8rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.textarea-diario {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.9rem;
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.7;
    border: 1px solid var(--body-borde);
    border-radius: 8px;
    background: var(--body-fondo);
    color: var(--body-texto);
    resize: vertical;
    min-height: 180px;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-titulo:focus,
.textarea-diario:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.25);
}

/* ─── ACCIONES ─── */
.acciones-diario {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-guardar-diario {
    background: var(--color-primario);
    color: var(--blanco-puro);
}

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

.btn-borrar-diario {
    background: transparent !important;
    color: #b22222 !important;
    border: 1px solid #b22222 !important;
}

.btn-borrar-diario:hover {
    background: #b22222 !important;
    color: white !important;
}

/* ─── MENSAJE FEEDBACK ─── */
.mensaje-diario {
    margin-top: 0.8rem;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
}

.mensaje-diario.success { background: #e8f5e9; color: #2e7d32; }
.mensaje-diario.error   { background: #fce4ec; color: #b71c1c; }
.mensaje-diario.info    { background: #e3f2fd; color: #1565c0; }

/* ─── HISTORIAL ─── */
.historial-diario h3 {
    font-family: 'EB Garamond', serif;
    font-size: 1.4rem;
    margin: 0 0 1rem;
    color: var(--body-texto);
}

.lista-entradas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entrada-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.75rem 0.8rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--body-borde);
}

.entrada-item:last-child { border-bottom: none; }

.entrada-item:hover { background: #faf3e0; }

.entrada-item.entrada-hoy {
    background: #fff9ed;
    border-left: 3px solid var(--color-acento);
    padding-left: 0.6rem;
}

.entrada-icono {
    font-size: 1.35rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.entrada-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entrada-fecha {
    font-size: 0.82rem;
    color: var(--body-texto-suave);
    font-family: 'Nunito', sans-serif;
    text-transform: capitalize;
}

.entrada-fecha em {
    color: var(--color-acento);
    font-style: normal;
    font-weight: 700;
}

.entrada-titulo {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--body-texto);
}

.entrada-preview {
    font-size: 0.88rem;
    color: var(--body-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 520px;
}

/* ─── PREVIEW EN PORTADA ─── */
.diario-preview-index {
    background: rgba(201, 168, 76, 0.08);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin: 0.7rem 0 1rem;
    border-left: 3px solid var(--color-acento);
    text-align: left;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    color: var(--body-texto-suave);
    font-size: 1rem;
    line-height: 1.5;
}

.diario-preview-index strong {
    display: block;
    font-style: normal;
    color: var(--body-texto);
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

/* ─── BLOQUE ÍNTIMO EN PORTADA ─── */
.bloque-intimo {
    background: linear-gradient(135deg, #fdfaf3 0%, #f8f0dc 100%);
    border: 1px solid var(--color-acento);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
    .btn-estado span { display: none; }
    .btn-estado { font-size: 1.3rem; padding: 0.4rem 0.6rem; }
    .acciones-diario { flex-direction: column; align-items: center; }
    .display-fecha { font-size: 0.95rem; }
}