/* ====== Estilos generales ====== */
:root {
  --primary: #FFD700;     /* Oro */
  --secondary: #6A5ACD;   /* Zafiro/púrpura */
  --secondary-premium: linear-gradient(135deg, #4b2e83, #2d1b4e);
  --bg-dark: #121212;     /* Fondo oscuro */
  --bg-secondary: rgba(255, 255, 255, 0.05);
  --text-light: #F8F8FF;  /* Blanco brillante */
  --muted: #C0C0C0;       /* Plata */
  --shadow: 0 4px 12px rgba(0,0,0,0.7);
  --shadow-pr: rgba(255, 234, 112, 0.3);
  --radius: 5px;

}

/* ====== TEMA CLARO ====== */
/* Cuando el HTML tenga el atributo data-theme="light", estas variables reemplazarán a las originales */
[data-theme="light"] {
  --primary: #BFA15A;       /* Oro suavizado, menos contraste */
  --secondary: #62679A;     /* Lavanda gris suave */

  --bg-dark: #E9EDF3;       /* Cielo claro, pero no blanco */
  --bg-secondary: rgba(0, 0, 0, 0.05);

  --secondary-premium: linear-gradient(135deg, #7E84B8, #62679A);

  --text-light: #2C2F36;    /* Gris tinta neutro */
  --muted: #7A808A;

  --shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-pr: rgba(191, 161, 90, 0.2);
}


[data-theme="light"] header {
    /* Mismos colores, pero subimos la opacidad de 0.15 a 0.4 para que se noten sobre el blanco */
    background: linear-gradient(90deg, rgba(148,230,228,0.4), rgba(230,149,151,0.4));
    
    /* La sombra no hace falta tocarla porque estás usando var(--shadow), 
       la cual ya configuramos para que sea más suave en el tema claro 😎 */
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.35), transparent 60%),
    var(--bg-dark);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;1,7..72,400&display=swap');

/* Un botoncito bonito para el menú */
.btn-tema {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-tema:hover {
    transform: scale(1.1);
}

[data-theme="light"] .btn-principal {
    color: #1A1A1A; /* Fuerza la letra a ser oscura sobre el fondo dorado */
    font-weight: bold;
}

body, html {
  scroll-behavior: smooth;scroll-behavior: smooth;
  overflow-x: hidden;
  margin: 0;
  font-family: "Segoe UI", Roboto, sans-serif;
  background: var(--bg-dark);
  color: var(--text-light);
  line-height: 1.6;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;

}


/* ====== Encabezado ====== */
header {
  position: relative;
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(90deg, rgba(148,230,228,0.3), rgba(230,149,151,0.3));
  box-shadow: var(--shadow);
}

header h1 {
  margin: 0;
  font-size: 2.2rem;
  color: var(--primary);
}

header p {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--muted);
}

.zona-usuario {
        /* 1. Le quitamos las anclas absolutas */
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        
        /* 2. Lo centramos perfectamente debajo del texto */
        justify-content: center;
        margin-top: 1.5rem;
    }

.zona-usuario a {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--bg-dark);
  background: linear-gradient(135deg, var(--primary), #ffea70);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

/* Efecto hover */
.zona-usuario a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
  background: linear-gradient(135deg, var(--secondary), #7b6ee6);
  color: var(--text-light);
}

/* Efecto brillo sutil */
.zona-usuario a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: left 0.5s ease;
}

.zona-usuario a:hover::before {
  left: 100%;
}


/* --- Estilos para el Menú Desplegable (Dropdown) --- */
.dropdown {
    position: relative;
}

.dropdown-contenido {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 120%;
    right: 0;
    background-color: #1e1e1e;
    min-width: 180px;
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    z-index: 1004;
    overflow: hidden; /* Para que los bordes redondeados se apliquen a los hijos */
}

/* Clase que se añade con JS para mostrar el menú */
.dropdown-contenido.mostrar {
    display: block;
}

.dropdown-contenido a,
.dropdown-contenido .logout-button-dropdown {
    color: var(--text-light);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: "Segoe UI", Roboto, sans-serif;
}

.dropdown-contenido a:hover,
.dropdown-contenido .logout-button-dropdown:hover {
    background-color: var(--secondary);
}

/* ====== Navegación ====== */
.menu-superior {
  position: sticky;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem;
  background: var(--bg-secondary);
  box-shadow: var(--shadow);
  top: 0;
  z-index: 999;
}

.menu-superior a {
  padding: 0.5rem;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 500;
  transition: color 0.3s;
}

.menu-superior a:hover {
  color: var(--secondary);
}

.menu-enlaces {
    display: flex;
    align-items: center; /* Esto alinea el texto con el botón verticalmente */
    gap: 1rem; /* Espacio entre los items */
}

.titulo-menu {
    color: #f3c740;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(243, 199, 64, 0.2); 
    display: none; /* Se muestra en el desplegable */
}


/* ====== Navegación Lateral Flotante (Sidebar) ====== */
.sidebar-navegacion {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 9999;
    /* Ya no necesita width: auto ni resetear background porque ya no hereda de 'nav' */
    pointer-events: none; 
}

.sidebar-navegacion ul {
    pointer-events: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-end;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    position: relative;
    height: 24px;
    outline: none;
}

.nav-rombo {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid var(--secondary);
    transform: rotate(45deg);
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.nav-texto {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 15px;
    background-color: var(--bg-secondary);
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--secondary);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* Interacciones Sidebar */
.nav-link:hover .nav-texto {
    opacity: 1;
    transform: translateX(0);
}

.nav-link:hover .nav-rombo,
.nav-link.active .nav-rombo {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    transform: rotate(45deg) scale(1.2);
}

.titulo-seccion-movil {
    display: none; /* Lo mantenemos oculto en PC */
}

@media (max-width: 1100px) {
    .sidebar-navegacion {
        display: none;
    }
}

/* --- Buscador Global --- */
.buscador-global {
    display: flex;
    align-items: center;
    background-color: var(--bg-secondary);
    border-radius: 20px;
    padding: 2px 10px;
    border: 1px solid var(--muted);
}

.buscador-global input {
    background: transparent;
    border: none;
    color: var(--text-light);
    padding: 5px;
    outline: none;
    width: 200px;
    font-size: 0.9rem;
}

.buscador-global input::placeholder {
    color: var(--muted);
}

.buscador-global button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
    transition: transform 0.2s;
}

.buscador-global button:hover {
    transform: scale(1.1);
}



/* ====== Contenido principal ====== */
main {
  max-width:auto;
  padding-top: 2%;
  padding-right:5%; padding-left: 5%;
}


main a {
    color: var(--secondary);
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s;
}

main a:hover {
    color: var(--primary);
}


/* ====== Separador Ornamental ====== */
.separador-biblico {
display: flex;
align-items: center;
justify-content: center;
margin: 4% auto; /* Espacio generoso arriba y abajo */
width: 80%; /* No ocupa todo el ancho para verse más elegante */
max-width: 800px;
position: relative;
opacity: 0.9;
}

/* Las líneas a los lados */
.separador-biblico::before,
.separador-biblico::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(
90deg, 
transparent, 
var(--primary), 
transparent
); /* Efecto desvanecido en las puntas */
}

/* El ornamento central */
.separador-icono {
margin: 0 20px;
width: 12px;
height: 12px;
background-color: var(--bg-dark); /* El color de tu fondo para "cortar" la línea */
border: 2px solid var(--primary);
transform: rotate(45deg); /* Crea un rombo */
position: relative;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); /* Brillo dorado suave */
}

/* Pequeños puntos decorativos a los lados del rombo */
.separador-icono::before,
.separador-icono::after {
content: "";
position: absolute;
width: 4px;
height: 4px;
background-color: var(--secondary); /* Un toque de púrpura/zafiro */
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}

.separador-icono::before { left: -10px; }
.separador-icono::after { right: -10px; }


.separador-movil {
    width: 60%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(243, 199, 64, 0.4), transparent); /* Línea dorada sutil y difuminada */
    margin: 40px auto; /* Espaciado superior e inferior */
    display: block; 
}



.versiculo-destacado footer {
  margin-top: 0.8rem;
  text-align: right;
  font-size: 0.95rem;
  color: var(--muted);
}

/* =================================================================== */
/* ====== SECCIÓN DE BIENVENIDA PREMIUM ====== */
/* =================================================================== */

.tarjeta-bienvenida {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    background-color: var(--bg-secondary);
    padding: 3rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0rem 0 4rem 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .tarjeta-bienvenida {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.bienvenida-texto {
    flex: 1; /* Toma todo el espacio posible */
    z-index: 2;
}

.etiqueta-saludo {
    display: inline-block;
    color: var(--primary);
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    background: rgba(255, 215, 0, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 50px;
}

.titulo-bienvenida {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-light);
    margin-top: 0;
}

.resalte-dorado {
    color: var(--primary);
    font-style: italic;
}

.texto-destacado {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 1rem;
    opacity: 0.9;
}

.bienvenida-texto p:not(.texto-destacado) {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.bienvenida-texto strong {
    color: var(--text-light);
}

/* --- Botones de Acción --- */
.bienvenida-acciones {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-accion-principal, .btn-accion-secundario {
    padding: 0.8rem 1.8rem;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-accion-principal {
    background: linear-gradient(135deg, var(--primary), #ffea70);
    color: var(--bg-dark);
    box-shadow: 0 4px 15px var(--shadow-pr);
}

.btn-accion-principal:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--shadow-pr);
    filter: brightness(1.1);
}

.btn-accion-secundario {
    background-color: transparent;
    color: var(--text-light);
    border: 2px solid var(--muted);
}

.btn-accion-secundario:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    background-color: rgba(106, 90, 205, 0.1);
}

.bienvenida-visual {
    flex: 0 0 300px; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.avatar-marco {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    padding: 10px;
    background: var(--secondary-premium);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    z-index: 3;
}

.avatar-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--bg-dark);
}

/* Efectos de fondo sutiles para la imagen */
.deco-circulo {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 1;
    opacity: 0.5;
}

.c1 {
    width: 200px;
    height: 200px;
    background: var(--primary);
    top: -20px;
    right: -20px;
}

.c2 {
    width: 150px;
    height: 150px;
    background: var(--secondary);
    bottom: -10px;
    left: -10px;
}




/* =================================================================== */
/* ====== VERSÍCULO INTEGRADO EN LA BIENVENIDA ====== */
/* =================================================================== */

.verso-integrado {
    border-left: 3px solid var(--primary); /* Línea dorada a la izquierda */
    padding-left: 1.5rem;
    margin: 2rem 0;
    position: relative;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 0 10px 10px 0;
}

[data-theme="light"] .verso-integrado {
    background: linear-gradient(90deg, rgba(184, 134, 11, 0.05) 0%, transparent 100%);
}

.verso-texto {
    font-family: "Georgia", "Times New Roman", serif; /* Letra clásica */
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 0.8rem;
    font-weight: 300;
}

.verso-referencia {
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}

.verso-referencia .version {
    color: var(--muted);
    font-weight: normal;
    font-size: 0.85rem;
}

/* Ajuste sutil para celulares */
@media (max-width: 768px) {
    .verso-texto {
        font-size: 1.15rem;
        line-height: 1.6;
    }
    .verso-integrado {
        padding-left: 1rem;
    }
}

/* =================================================================== */
/* ====== TARJETAS DE ÚLTIMAS REFLEXIONES ====== */
/* =================================================================== */

.ultimas-entradas {
    margin-bottom: 5rem;
}

.seccion-header {
    text-align: center;
    margin-bottom: 3rem;
}

.seccion-header h3 {
    font-size: 2.2rem;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.seccion-header p {
    color: var(--muted);
    font-size: 1.1rem;
}

/* El contenedor Grid (Magia responsive automática) */
.grid-reflexiones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

/* La Tarjeta en sí */
.tarjeta-reflexion {
    background-color: var(--bg-secondary);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .tarjeta-reflexion {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tarjeta-reflexion:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

[data-theme="light"] .tarjeta-reflexion:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Imágenes y Placeholders */
.reflexion-imagen-link {
    display: block;
    height: 200px;
    overflow: hidden;
}

.reflexion-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tarjeta-reflexion:hover .reflexion-img {
    transform: scale(1.05); /* Efecto zoom sutil al pasar el mouse */
}

.reflexion-placeholder {
    width: 100%;
    height: 100%;
    background: var(--secondary-premium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-placeholder {
    font-size: 4rem;
    opacity: 0.5;
}

/* Contenido de la tarjeta */
.reflexion-contenido {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Hace que el contenido ocupe el espacio restante */
}

.reflexion-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.reflexion-meta .autor {
    color: var(--muted);
    font-weight: normal;
}

.reflexion-contenido h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    line-height: 1.3;
}

.reflexion-contenido h4 a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s;
}

.reflexion-contenido h4 a:hover {
    color: var(--primary);
}

.extracto {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Empuja el botón hacia el fondo */
}

/* Botón Leer Más */
.btn-leer-mas {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    margin-top: auto; /* Se pega siempre abajo sin importar cuánto texto haya */
    transition: color 0.2s;
}

.btn-leer-mas .flecha {
    margin-left: 0.5rem;
    transition: transform 0.2s;
}

.btn-leer-mas:hover .flecha {
    transform: translateX(5px); /* La flecha se mueve a la derecha */
}


/* ====== Estilos para la Sección de Cultura Bíblica ====== */


.cultura-biblica h3 {
    text-align: center;
    font-size: 2.2rem;
    color: var(--secondary);
    margin-bottom: 3rem;
}

.pregunta-biblica {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea dos columnas iguales */
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 3rem;
    text-align: justify;
}

/* Invierte el orden de las columnas para las tarjetas con la clase 'reverse' */
.pregunta-biblica.reverse .pregunta-texto {
    grid-column: 2;
    grid-row: 1;
}
.pregunta-biblica.reverse .pregunta-imagen {
    grid-column: 1;
    grid-row: 1;
}

.pregunta-texto h4 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 1rem;
}

.pregunta-texto p {
    color: var(--text-light);
    line-height: 1.7;
}

.pregunta-imagen img {
 width: 100%;
 height: auto;
 object-fit: cover;
 border-radius: var(--radius);
 box-shadow: var(--shadow);
} 



/* ====== Estilos para la Tabla de Libros de la Biblia ====== */
.division-biblia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2rem 0;
    background: var(--bg-secondary);
    border-radius: var(--radius);
}

.testamento-columna {
    padding: 0 1.5rem;
}

.testamento-columna h4 {
    text-align: center;
    font-size: 1.3rem;
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.categoria-libros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.categoria-libros a {
    flex-grow: 1;
    text-align: center;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--text-light);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.categoria-libros a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--bg-secondary);
    color: var(--text-light);
}

/* --- Colores por Categoría --- */

/* Antiguo Testamento */
.pentateuco a { background-color: #B85C38; }
.historicos a { background-color: #556B2F; }
.poeticos a { background-color: #6A5ACD; }
.profetas-mayores a { background-color: #FFD700; color: #121212; } /* Texto oscuro para el amarillo */
.profetas-menores a { background-color: #CD7F32; }

/* Nuevo Testamento */
.evangelios a { background-color: #FFD700; color: #121212; } /* Texto oscuro para el amarillo */
.epistolas a { background-color: #6A5ACD; }
.profetico a { background-color: #483D8B; }


.seccion-completa {
    grid-column: 1 / -1; /* Le dice a este div que ocupe todas las columnas del grid padre */
}




/* ====== Footer ====== */
footer {
  width: 100%;
  text-align: center;
  padding: 1rem;
  background: var(--bg-secondary);
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* =========================================================
   BOTÓN DE DONACIÓN
   ========================================================= */

.donacion-container {
    display: flex;
    justify-content: center;
    align-items: center;

}



/* =========================================================
   BOTÓN
   ========================================================= */

.btn-donar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    background:
        linear-gradient(
            135deg,
            #b8942e 0%,
            #d4af37 45%,
            #f3c740 100%
        );
    color: #151515;
    border: 1px solid rgba(255, 215, 0, 0.65);
    border-radius: 999px;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow:
        0 5px 18px rgba(212, 175, 55, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
    padding: 5px;
}


/* Brillo que recorre el botón */

.btn-donar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.btn-donar:hover {
    color: #000;
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}


.btn-donar:hover::before {
    left: 140%;
}


/* =========================================================
   CLICK
   ========================================================= */

.btn-donar:active {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(212, 175, 55, 0.25);
}


/* =========================================================
   FOCUS — ACCESIBILIDAD
   ========================================================= */

.btn-donar:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}




/* ====== Estilos para la lista de libros ====== */
.libros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem; /* Espacio entre tarjetas */
    padding: 0;
}

.libro-card {
    /* Usamos el fondo semitransparente de tu tema */
    background: var(--bg-secondary);
    border-radius: var(--radius); /* Usamos tu variable de borde */
    
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    /* El color principal del texto será tu color primario (oro) */
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 500;
    box-shadow: var(--shadow); /* Usamos tu variable de sombra */
    border: 1px solid var(--bg-secondary); /* Un borde sutil que encaja con el tema */
    transition: transform 0.2s, box-shadow 0.2s, color 0.2s;
}

.libro-card:hover {
    transform: translateY(-4px); /* Coincide con tu efecto .entrada */
    box-shadow: 0 6px 16px var(--bg-secondary); /* Sombra más pronunciada al pasar el ratón */
    /* Al pasar el ratón, el texto cambia a tu color secundario */
    color: var(--secondary);
}



/* ====== Layout para Descripción General ====== */

.layout-general {
    display: grid;
    /* ANTES: 2fr 1fr (columna ancha, luego estrecha) */
    /* AHORA: 1fr 2fr (columna estrecha, luego ancha) */
    grid-template-columns: 2fr 3fr; 
    justify-content: center;
    gap: 4rem; /* Espacio entre las columnas */
}

.columna-principal h2
{
  margin-top: 0;
}


.panel-pegajoso {
    position: -webkit-sticky; /* Para Safari */
    position: sticky;
    top: 20px; /* Se "pegará" a 20px del borde superior al hacer scroll */
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid var(--bg-secondary);
    box-shadow: var(--shadow);
}

.panel-pegajoso h3 {
    margin-top: 0;
    color: var(--secondary);
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.panel-pegajoso p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* ====== Estilos para el Panel de Imagen en la Descripción ====== */

/*.imagen-panel {

}*/

/* Y este es el estilo para la imagen en sí, la clave está aquí */
.imagen-panel img {
    display: block;        /* 1. Se comporta como un bloque */
    margin: 0 auto;        /* 2. Se centra horizontalmente */
    max-height: 400px;     /* 3. Le damos una altura máxima generosa (puedes ajustar esto) */
    max-width: 100%;       /* 4. Una red de seguridad para que nunca se desborde */
    
    /* Mantenemos los estilos visuales que ya te gustaban */
    height: auto;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.credito-imagen {
    margin-top: 0.75rem; /* Espacio entre la imagen y el crédito */
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted); /* Usa tu variable para texto atenuado */
}





/* ====== Estilos para la Vista de Lectura ====== */

/* --- CONTENEDOR DEL SELECTOR --- */
.selector-libro-container {
    position: relative;
    text-align: center;
}

.titulo-libro.desplegable-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    user-select: none; /* Evita que el texto se subraye azul al hacer doble clic */
}

.titulo-libro.desplegable-trigger:hover {
    background-color: rgba(255, 255, 255, 0.08); 
}

.icono-flecha {
    font-size: 1.2rem;
    color: var(--primary, #ffd700); /* Flecha dorada para que invite a hacer clic */
    vertical-align: middle;
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Girar la flecha cuando está abierto */
.selector-libro-container.activo .icono-flecha {
    transform: rotate(180deg);
}

/* --- EL MENÚ DESPLEGABLE REPARADO --- */
.dropdown-libros-menu {
    display: none; 
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    max-width: 850px;
    background-color: var(--bg-dark);
    border: 1px solid #333; /* Borde oscuro y sutil */
    box-shadow: 0 15px 40px rgba(0,0,0,0.9); /* Sombra pesada para separarlo del texto */
    border-radius: 12px;
    padding: 2rem;
    z-index: 9999; /* Lo ponemos por encima de TODO */
    text-align: left;
    max-height: 65vh;
    overflow-y: auto; 
}

/* Scrollbar personalizado para el menú */
.dropdown-libros-menu::-webkit-scrollbar {
    width: 8px;
}
.dropdown-libros-menu::-webkit-scrollbar-track {
    background: #1a1a1a; 
}
.dropdown-libros-menu::-webkit-scrollbar-thumb {
    background: #444; 
    border-radius: 10px;
}
.dropdown-libros-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #ffd700); 
}

/* Mostrar menú al hacer clic */
.selector-libro-container.activo .dropdown-libros-menu {
    display: block;
}

.testamento-seccion h4 {
    font-family: 'Inter', sans-serif;
    color: var(--primary, #ffd700);
    border-bottom: 2px solid #333; /* Línea separadora limpia */
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.testamento-seccion:first-child h4 { margin-top: 0; }

.grid-libros-dropdown {
    display: grid;
    /* Ajustamos el minmax a 160px para que entren los nombres largos sin verse como Excel */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
}

.enlace-libro-drop {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #ddd;
    text-decoration: none;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background-color: #252525; /* Fondo sólido gris oscuro para cada botón */
    border: 1px solid transparent; 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    transition: all 0.2s ease;
}

.enlace-libro-drop:hover {
    background-color: #333;
    border-color: #555;
    transform: translateY(-2px); /* Un pequeño salto elegante */
}

.enlace-libro-drop.actual {
    background-color: var(--primary, #ffd700); 
    color: #000;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2); /* Brillo dorado alrededor */
}
.titulo-libro {
    text-align: center;
    font-size: 3rem;
    font-family: 'Literata', serif;
    margin-bottom: 2.5rem;
    margin-top: 0%;
    color: var(--primary);
}

.capitulo {
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--bg-secondary);
    border-radius: 5px;
    box-shadow: var(--shadow);
}

.capitulo h3 {
    font-size: 2rem;
    color: var(--secondary);
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--secondary);
}

.linea-versiculo {
    /* Por defecto, los versículos se comportan como texto normal, uno tras otro */
    display: inline;
    line-height: 1.9;
}

/* --- PROSA: Texto de corrido --- */
.prosa-biblica {
    display: inline; /* Hace que el texto se pegue al versículo anterior */
    line-height: 1.8;
}

/* --- POESÍA: Texto centrado y separado --- */
.poesia-biblica {
    display: flex;             /* Convierte el contenedor en una caja flexible */
    align-items: flex-start;   /* Mantiene el número pegado arriba si el texto ocupa varias líneas */
    gap: 10px;                 /* Crea una separación limpia entre el número y el texto */
    

    text-align: left;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.poesia-biblica .texto-versiculo {
    display: block; /* Asegura que los saltos de línea (<br>) funcionen perfecto */
}

/* En libros poéticos, usamos Flexbox para el formato especial */

.numero-versiculo {
    font-size: 1.5rem;
    font-family: 'Literata', serif;
    color: var(--primary);
    font-weight: 600;
    padding-left: 0.5em;
    position: relative;
    top: -0.2em;
}

.texto-versiculo {
    display: inline; /* Asegura que el texto fluya continuamente */
    font-size: 1.55rem;
    font-family: 'Literata', serif;
    color: var(--text-light);
    line-height: 1.8;
}

.libro-poetico .texto-versiculo {
    font-family: 'Literata', serif;
    display: block; /* En poesía, el texto ocupa su propia línea */
}

.linea-versiculo:target {
    background-color: rgba(106, 90, 205, 0.25);
    border-radius: 8px;
    padding: 0.2em 0.4em;
    transition: background-color 0.5s ease-in-out;
    scroll-margin-top: 80px; 
}


/* --- Estilos para Símbolo y Modal de Referencias --- */
.ref-cruzada-simbolo {
    /* 1. Truco de magia: Hacemos el texto "*" transparente */
    color: transparent; 
    
    /* 2. Configuración del contenedor */
    position: relative; /* Necesario para posicionar el rombo dibujado */
    display: inline-block; /* Para poder darle ancho y alto */
    
    /* Ajustes de posición y tamaño para que quede al lado del número */
    width: 14px; /* Espacio reservado para el icono */
    height: 14px;
    margin-left: 0.2em;
    top: -0.3em; /* Ajuste fino de altura */
    
    cursor: pointer;
    font-size: 1em; /* Reseteamos el tamaño de fuente para controlar mejor la forma */
}

/* 3. Dibujamos el Rombo (usando ::after) */
.ref-cruzada-simbolo::after {
    content: '';
    position: absolute;
    
    /* Centrado absoluto dentro del contenedor */
    left: 50%;
    top: 50%;
    
    /* Tamaño del rombo (puedes ajustarlo si lo quieres más grande/pequeño) */
    width: 7px;
    height: 7px;
    
    /* Estilo inicial: Borde del color secundario (púrpura), fondo transparente y rotación */
    border: 1px solid var(--secondary);
    background-color: transparent; 
    transform: translate(-50%, -50%) rotate(45deg); /* Lo rotamos para que sea un rombo */
    
    transition: all 0.2s ease; /* Transición suave para el hover */
}

/* 4. Estado Hover: Cambio a color primario (dorado) */
.ref-cruzada-simbolo:hover::after {
    border-color: var(--primary);
    /* Opcional: añadimos un pequeño brillo dorado al pasar el mouse para que resalte */
    box-shadow: 0 0 5px var(--primary);
    /* Opcional: si quieres que se rellene un poco de color */
    /* background-color: rgba(243, 215, 117, 0.2); */
}

.referencia-modal {
    position: fixed;
    z-index: 10000;
    
    /* --- EL SECRETO ANTI-FANTASMAS --- */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: max-content; /* Permite el centrado vertical automático */
    /* ---------------------------------- */

    width: 90%;
    max-width: 450px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-dark);
    border: 1px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    padding: 1.5rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: top, left, transform;
}

/* Encabezado flex para alinear flecha y título */
.ref-modal-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;

    gap: 10px;
}

.ref-modal-header h4 {
    margin: 0;
    color: var(--primary);
    font-size: 1.1rem;
    flex-grow: 1;
}

.ref-modal-header h4 a {
    text-decoration: none;
    color: var(--primary);
}

.referencia-modal strong {
    color: var(--primary);
    margin-right: 0.5rem;
}

/* --- ESTILO DE LOS BOTONES (EL ARREGLO VISUAL) --- */

/* Reseteamos CUALQUIER estilo que venga de tus botones globales */
button.ref-modal-close,
button.ref-modal-back {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

/* Botón Cerrar (X) */
button.ref-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.8rem;
    color: var(--muted);
    z-index: 2;
}

button.ref-modal-close:hover {
    color: var(--text-light);
    transform: scale(1.1);
}

/* Botón Atrás (Flecha) */
button.ref-modal-back {
    font-size: 1.5rem;
    color: var(--secondary);
    width: 30px; /* Tamaño fijo para click fácil */
    height: 30px;
    
    /* Lógica de visibilidad */
    opacity: 0; 
    pointer-events: none;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

button.ref-modal-back.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

button.ref-modal-back:hover {
    color: var(--primary);
}



/* --- Estilos de la Lista de Versículos en el Modal (Diseño Elegante) --- */

.referencia-modal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Añadimos un poco de espacio arriba para separarlo del título */
    margin-top: 10px; 
}

.referencia-modal li {
    margin-bottom: 0; /* Reseteamos margen para que la línea divisoria quede bien */
    border-bottom: 1px solid var(--bg-secondary); /* Línea divisoria muy sutil */
}

/* El último elemento no necesita línea divisoria */
.referencia-modal li:last-child {
    border-bottom: none;
}

/* El enlace del versículo */
.referencia-modal li a {
    display: block; /* Ocupa todo el ancho (mejor para clic en móvil) */
    padding: 12px 10px 12px 25px; /* Espacio interno (el 25px es a la izquierda para el símbolo) */
    color: var(--text-light); /* Color blanco suave */
    text-decoration: none; /* Quitamos el subrayado */
    font-size: 0.95rem;
    position: relative; /* Necesario para posicionar la flecha */
    transition: all 0.2s ease;
}

/* El Símbolo (Flecha dorada '›') */
.referencia-modal li a::before {
    content: '›'; 
    position: absolute;
    left: 5px; /* Posición a la izquierda */
    top: 50%;
    transform: translateY(-55%); /* Centrado vertical perfecto */
    color: var(--secondary); /* Púrpura en estado normal */
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.2s ease;
}

/* --- Efectos Hover (Al pasar el mouse) --- */
.referencia-modal li a:hover {
    color: var(--primary); /* Texto se vuelve dorado */
    background-color: var(--bg-secondary); /* Fondo muy sutil */
    padding-left: 30px; /* Pequeño desplazamiento del texto a la derecha */
}

.referencia-modal li a:hover::before {
    color: var(--primary); /* La flecha se vuelve dorada */
    left: 8px; /* La flecha también se mueve un poco */
}

/* Ajuste específico para enlaces dentro del modal que NO son de la lista (por seguridad) */
.referencia-modal a:not(.enlace-versiculo-modal):not(.ref-modal-header a) {
    color: var(--secondary);
    text-decoration: underline;
}


.vista-lectura-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Columna de lectura más ancha */
    gap: 2.5rem;
    align-items: start;
}

.navegacion-capitulo {
    font-family: 'Literata', serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--secondary);
    margin-bottom: 1.5rem;
}

.navegacion-capitulo h3 {
    margin: 0;
    padding: 0.5rem 0;
    border: none;
}

.flecha-nav {
    font-size: 2rem;
    text-decoration: none;
    color: var(--secondary);
    transition: color 0.2s;
}
.flecha-nav:hover {
    color: var(--primary);
}
.flecha-nav.disabled {
    color: rgba(255, 255, 255, 0.2);
    cursor: default;
}

.columna-contexto .panel-pegajoso h4 {
    margin-top: 0;
    color: var(--primary);
    text-align: center;
}

.panel-capitulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
    gap: 1.5rem;
}

.enlace-capitulo {
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    text-decoration: none;
    background: var(--bg-secondary);
    color: var(--text-light);
    border-radius: 6px;
    transition: background-color 0.2s;
}
.enlace-capitulo:hover {
    background: var(--secondary);
}
.enlace-capitulo.activo {
    background: var(--primary);
    color: var(--bg-dark);
    font-weight: bold;
}

/* --- Ajuste para móvil --- */
@media (max-width: 900px) {
    .vista-lectura-grid {
       display: block;
    }
    .columna-contexto {
        margin-top: 2rem;
    }
}



/* --- LEYENDA DE SÍMBOLOS --- */
.leyenda-lectura {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea divisoria súper suave */
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    opacity: 0.8;
}

.item-leyenda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dibujamos los iconos de muestra para la leyenda */
.icono-muestra-rombo {
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid var(--secondary); /* Se los mostramos dorados de una vez */
    transform: rotate(45deg);
}

.icono-muestra-ojo-buey {
    display: inline-block;
    width: 5px;  /* Puntito de 1px */
    height: 5px;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    background-color: var(--secondary);
    padding: 3px; /* Hueco de 2px */
    background-clip: content-box;
    transform: translateY(-2px);
}





/* =================================================================== */
/* ====== GLOSARIO ====== */
/* =================================================================== */

.icono-glosario {
    color: transparent; /* Magia: Ocultamos el texto original (la letra o símbolo que haya puesto el JS) */
    position: relative; 
    display: inline-block; 
    /* Mismas dimensiones que el rombo para que se vean hermanos */
    width: 14px; 
    margin-left: 0.2em;
    cursor: pointer;
    font-size: 1em; 
}

/* --- 2. Dibujamos el Ojo de Buey (Puntito más pequeño) --- */
.icono-glosario::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* Achicamos el puntito central al mínimo */
    width: 5px; 
    height: 5px;
    
    /* El anillo exterior sigue igual */
    border: 1px solid var(--secondary);
    border-radius: 50%; 
    background-color: var(--secondary);
    
    /* Agrandamos el "hueco" transparente para compensar el tamaño */
    padding: 3px; 
    background-clip: content-box; 
    
    transition: all 0.2s ease; 
}

/* --- 3. Estado Hover y Activo: Cambio a color primario (dorado) --- */
.icono-glosario:hover::before,
.icono-glosario.activo::before {
    border-color: var(--primary);
    box-shadow: 0 0 5px var(--primary); /* El mismo brillo que le pusiste al rombo */
}

/* --- 4. EL CUADRO FLOTANTE (Se mantiene igual, usando ::after) --- */
.icono-glosario.activo::after {
    content: attr(data-definicion);
    position: absolute;
    bottom: 150%; 
    left: 50%;
    transform: translateX(-50%);
    background-color: #1a1a1a;
    color: #eee;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    width: max-content;
    max-width: 250px; 
    white-space: normal;
    border: 1px solid var(--primary);
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    line-height: 1.4;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}





/* ====== Estilos para la Sección de Reflexiones ====== */

/* =================================================================== */
/* ====== CABECERAS DE PÁGINAS (REFLEXIONES / APÓCRIFOS) ====== */
/* =================================================================== */

.seccion-header-pagina {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(150, 150, 150, 0.2);
}

.seccion-header-pagina h2 {
    color: var(--text-light);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    margin-top: 0px;
    display: inline-block;
}

.seccion-header-pagina p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.llamada-accion-header {
    margin-top: 1.5rem;
}

.contenedor-busqueda-seccion {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.contenedor-busqueda-seccion .buscador-global {
    width: 100%;
    max-width: 500px; /* Hace el buscador más ancho que en el menú */
    padding: 8px 15px;
}

.contenedor-busqueda-seccion .buscador-global input {
    width: 100%;
    font-size: 1rem;
}

.contenedor-busqueda {
    margin: 2rem 0;
    text-align: center;
}

.contenedor-busqueda form {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.contenedor-busqueda input {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--bg-secondary);
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--bg-secondary);
    color: var(--text-light);
}

.contenedor-busqueda button {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    border: 1px solid var(--secondary);
    background: var(--secondary);
    color: #fff;
    cursor: pointer;
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: background 0.3s;
}

.contenedor-busqueda button:hover {
    background: #5849b9; /* Un tono más claro de tu color secundario */
}


.contenedor-versiculo:target {
  background-color: rgba(106, 90, 205, 0.25); /* Un resaltado sutil con tu color secundario */
  border-radius: 8px;
  padding: 0.2em 0.4em;
  margin: -0.2em -0.4em; /* Compensación del padding para que no afecte el layout */
  
  /* Efecto de transición suave para que el resaltado aparezca y no solo 'salte' */
  transition: background-color 0.5s ease-in-out;

  /* Mejora de usabilidad: deja un pequeño margen superior para que el versículo
      no quede pegado a la barra de navegación al saltar a él. */
  scroll-margin-top: 80px; 
}

.reflexiones-lista {
    margin-top: 3rem;
}

.reflexion-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}

.card-imagen {
  display: block;     /* Asegura que la imagen se comporte como un bloque */
  width: 100%;        /* Ocupa el 100% del ancho de su columna */
  max-width: 100%;    /* ¡La clave! Evita que la imagen sea más ancha que su contenedor */
  height: 200px;      /* Mantenemos la altura fija que definimos */
  object-fit: cover;  /* Rellena el espacio disponible, recortando si es necesario */
  border-radius: var(--radius);
}

.card-contenido h4 a {
    text-decoration: none;
    color: var(--primary);
    font-size: 1.5rem;
}

.card-meta {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.card-extracto {
    color: var(--text-light);
}

.leer-mas {
    display: inline-block;
    margin-top: 1rem;
    color: var(--secondary);
    font-weight: bold;
    text-decoration: none;
}

.leer-mas:hover {
    text-decoration: underline;
}

.sin-resultados {
    text-align: center;
    padding: 3rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    color: var(--muted);
}




/* ====== Estilos para el Detalle de la Reflexión (Artículo Individual) ====== */

.entrada-individual {
    max-width: 800px; /* Un ancho cómodo para la lectura */
    margin: 2rem auto; /* Centra el artículo en la página */
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.entrada-individual h2 {
    color: var(--primary);
    font-size: 2.5rem;
    text-align: center;
    margin-top: 0;
    line-height: 1.3;
}

.entrada-individual .meta-info {
    text-align: center;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.5rem;
}

.imagen-principal {
    width: 100%;
    max-height: 400px; /* Altura máxima para la imagen principal */
    object-fit:cover;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}


.contenido-reflexion {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
}

.contenido-reflexion p {
    margin-bottom: 1.5rem;
}





/* ====== Estilos para el Modal de Versículos ====== */

.versiculo-tooltip {
    position: fixed; /* Lo mantenemos fijo para que se centre en la pantalla */
    z-index: 1001;   /* Un z-index alto para que esté por encima de todo */
    
    /* Centrado en la pantalla */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    width: 90%;      /* Ocupa el 90% del ancho en móviles */
    max-width: 500px;  /* Pero con un máximo de 500px en pantallas grandes */
    max-height: 70vh; /* Altura máxima del 70% de la ventana */
    overflow-y: auto; /* Scroll si el contenido es muy largo */

    padding: 1.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--secondary);
    border-radius: 5px;
    box-shadow: var(--shadow);
    color: var(--text-light);


    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: top, left, transform;
}



/* Clase para mostrar el modal */
.versiculo-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.tooltip-titulo {
    margin: 0; /* Quita el espacio naranja de arriba y abajo */
    padding: 0;
    line-height: 1.2; /* Opcional: ajusta la altura de línea si se ve muy separado */
}

.tooltip-titulo a { /* Ahora el título es un enlace */
    text-decoration: none;
    color: var(--primary);
    display: block;
    margin-top: 0;
    font-size: 1.1rem;
    transition: color 0.2s;
}



.tooltip-titulo a:hover {
    color: var(--text-light);
}

.tooltip-separator {
    position: relative; /* Necesario para posicionar el rombo del final */
    height: 1px;        /* Altura de la línea, más fina al no tener brillo */
    width: 100%;        /* Ocupa todo el ancho */
    border: none;
    margin: 0.8rem 0 1.2rem 0; /* Espacio vertical */
    
    /* 1. La Línea: Degradado que usa tu color primario */
    /* Empieza transparente a la izquierda y se vuelve sólido hacia la derecha */
    background-image: linear-gradient(to right, transparent, var(--primary));
}

.tooltip-separator::after {
    content: ''; /* Necesario para que aparezca el elemento */
    position: absolute;
    
    /* Posicionamiento al final a la derecha y centrado verticalmente */
    right: 0px;
    top: 50%;
    
    /* Tamaño del rombo */
    width: 8px;
    height: 8px;
    
    /* Estilo: Borde del color primario y fondo del color del modal para que parezca hueco */
    border: 1px solid var(--primary);
    background-color: var(--bg-dark); 
    
    /* Rotamos 45 grados para hacer el rombo y lo centramos verticalmente en la línea */
    transform: translateY(-50%) rotate(45deg);
    z-index: 2;
}

.tooltip-separator::before {
    content: '';
    position: absolute;
    /* Posicionamos este elemento invisible justo en el centro del rombo */
    right: 4px; 
    top: 50%;
    transform: translateY(-50%);
    
    /* Tamaño base para los puntos */
    width: 4px;
    height: 4px;
    border-radius: 50%; /* Para que sean círculos */
    
    /* DEFINICIÓN DEL COLOR PÚRPURA PLANO */
    /* He usado un hexadecimal similar al de la imagen. 
       Si tienes una variable para este color (ej: var(--accent)), úsala aquí. */
    --purple-dot: #8a6fd5; 
    
    /* EL TRUCO: Creamos 2 sombras sólidas (sin desenfoque) en diferentes posiciones */
    box-shadow: 
        -10px -10px 0 0 var(--purple-dot), /* Punto superior izquierdo */
         10px  10px 0 0 var(--purple-dot); /* Punto inferior derecho */
         
    z-index: 1;
}

.versiculo-tooltip p {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    line-height: 1.7;
    display:flex;
}

.versiculo-tooltip strong {
    color: var(--primary);
    margin-right: 0.5rem;
}

/* Estilo para el botón de cierre */
.tooltip-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s;
}
.tooltip-close:hover {
    color: var(--text-light);
}


.versiculo-resaltado {
    background-color: rgba(255, 215, 0, 0.3); /* Un fondo dorado semi-transparente */
    border-radius: 4px;
    transition: background-color 2s ease-out; /* Se desvanece suavemente en 2 segundos */
}



.aviso-proyecto {
    max-width: 800px; /* Ancho máximo para que no sea demasiado largo */
    margin: 3rem auto; /* <-- ESTA LÍNEA ES LA CLAVE para centrar el bloque */
    padding: 1.5rem;
    text-align: center;
    background: rgba(106, 90, 205, 0.15);
    border-left: 5px solid var(--secondary);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.95rem;
}

.aviso-proyecto strong {
    color: var(--primary);
    font-weight: 600;
}




/* Botón de Hamburguesa (oculto en PC) */
#menu-hamburguesa {
    display: none; /* Oculto por defecto */
    flex-direction: column;
    justify-content: space-around;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1003; /* Por encima del menú y otros contenidos */
}

#menu-hamburguesa .linea {
    width: 2rem;
    height: 0.25rem;
    background: var(--text-light);
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* Contenedor de los enlaces */
#menu-enlaces {
    display: flex;
    gap: 1.2rem;
    z-index: 999999999;
}

/* ====== Estilos para el Formulario de Contacto (Aporte) ====== */

.formulario-contenedor {
    max-width: 700px;
    margin: 3rem auto;
    padding: 2.5rem;
    
    /* Fondo oscuro sutil y borde elegante */
    background: var(--bg-secondary); 
    border: 1px solid var(--bg-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* --- MEJORA PREMIUM PARA SUBIR FOTOS --- */

/* La zona de carga de la imagen */
.formulario-contenedor input[type="file"] {
    background: rgba(255, 215, 0, 0.05); /* Fondo apenas dorado */
    border: 2px dashed var(--primary); /* Borde dorado punteado */
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    color: var(--text-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

/* El botoncito gris feo que viene por defecto dentro del input file */
.formulario-contenedor input[type="file"]::file-selector-button {
    background: var(--primary);
    color: var(--bg-dark);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 15px;
    transition: transform 0.2s ease;
}

.formulario-contenedor input[type="file"]:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* El texto de ayuda que tira Django ("Formatos: JPG, PNG...") */
.formulario-contenedor .helptext {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: -10px;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.formulario-contenedor h2 {
    text-align: center;
    color: var(--primary);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}



/* --- Estilos de Texto y Listas --- */
.formulario-contenedor p {
    text-align: left; /* Mejor lectura para el intro */
    color: var(--muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.formulario-contenedor h4 {
    color: var(--text-light);
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary); /* Pequeño acento lateral */
    padding-left: 10px;
}

.formulario-contenedor ul {
    list-style: none; /* Quitamos los puntos por defecto */
    padding-left: 15px;
    margin-bottom: 2rem;
}

.formulario-contenedor li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Bullet personalizado: Pequeño rombo dorado */
.formulario-contenedor li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem; /* Ajuste visual */
    width: 6px;
    height: 6px;
    border: 1px solid var(--primary);
    transform: rotate(45deg);
}

/* --- Estilos del Formulario (Django Forms) --- */

/* Espaciado de los campos */
.formulario-contenedor form p {
    text-align: left;
    margin-bottom: 1.5rem;
}

/* Etiquetas */
.formulario-contenedor label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: var(--primary); /* Color dorado para las etiquetas */
    font-size: 0.95rem;
}

/* Inputs y Textareas */
.formulario-contenedor input,
.formulario-contenedor textarea {
width: 100%;
padding: 12px 15px;
font-size: 1rem;

/* Fondo más oscuro para dar profundidad */
background: var(--bg-secondary); 
border: 1px solid var(--bg-secondary);
border-radius: 8px;
color: var(--text-light);

transition: all 0.3s ease;
box-sizing: border-box;
}

/* Efecto al seleccionar un campo (Focus) */
.formulario-contenedor input:focus,
.formulario-contenedor textarea:focus {
    outline: none;
    border-color: var(--primary); /* Borde dorado al escribir */
    background: var(--bg-dark);
}

/* Botón de Envío - Estilo "Ghost" (Borde) */
.formulario-contenedor button {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 2rem;
    
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Estilo inicial: Transparente con borde */
    background: transparent;
    border: 1px solid var(--secondary);
    color: var(--text-light);
    
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Hover del Botón: Se llena de color */
.formulario-contenedor button:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    transform: translateY(-2px); /* Pequeña elevación */
}

/* Estilo para los mensajes de éxito/error (si los usas) */
.mensaje-estado {
    text-align: center;
    padding: 4rem 1rem;
}
.mensaje-estado a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border 0.3s;
}
.mensaje-estado a:hover {
    border-bottom-color: var(--primary);
}


/* =================================================================== */
/* ====== PÁGINA DE RESULTADOS DE BÚSQUEDA ====== */
/* =================================================================== */


.contenedor-resultados {
    max-width: auto;
    margin: 0rem auto;
    padding: 0 1.5rem;
}

.titulo-resultados {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 2rem;
}

.titulo-resultados span {
    color: var(--primary);
    font-style: italic;
}

.seccion-titulo {
    color: var(--secondary);
    border-bottom: 2px solid var(--muted);
    padding-bottom: 0.5rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.grid-resultados, .lista-versiculos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Tarjetas interactivas para Reflexiones y Apócrifos */
.tarjeta-resultado {
    background-color: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text-light);
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.tarjeta-resultado:hover {
    transform: translateY(-5px);
    /* Sombra un poco más intensa al pasar el mouse */
    box-shadow: 0 8px 20px rgba(0,0,0,0.8); 
}

/* Ajuste de sombra hover para el tema claro */
[data-theme="light"] .tarjeta-resultado:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.tarjeta-resultado h4 {
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.tarjeta-resultado .meta {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

.tarjeta-resultado .extracto {
    line-height: 1.6;
    color: var(--text-light);
}

/* Tarjetas estáticas para Versículos */
.tarjeta-versiculo {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.tarjeta-versiculo h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.tarjeta-versiculo h4 a {
    color: var(--primary);
    text-decoration: none;
}

.tarjeta-versiculo h4 a:hover {
    text-decoration: underline;
}

.tarjeta-versiculo p {
    font-style: italic;
    margin: 0;
    line-height: 1.6;
    color: var(--text-light);
}

/* =========================================================
   RESULTADO DESTACADO — COINCIDENCIA EXACTA
   ========================================================= */

.tarjeta-resultado.destacada {
    position: relative;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background:
        linear-gradient(
            135deg,
            rgba(255, 215, 0, 0.08),
            rgba(255, 215, 0, 0.025) 55%,
            transparent
        );
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow:
        0 8px 25px rgba(255, 215, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Brillo sutil en la esquina */

.tarjeta-resultado.destacada::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 140px;
    height: 140px;
    background: rgba(255, 215, 0, 0.08);
    border-radius: 50%;
    pointer-events: none;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.destacada-encabezado {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
    z-index: 1;
}
.destacada-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    font-size: 1.05rem;
    background: rgba(255, 215, 0, 0.10);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 50%;
}


.destacada-encabezado h3 {
    margin: 0;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* =========================================================
   REFERENCIA BÍBLICA
   ========================================================= */

.destacada-referencia {
    position: relative;
    margin: 0 0 0.8rem;
    z-index: 1;
}


.destacada-referencia a {
    color: var(--text-light);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: color 0.2s ease;
}


.destacada-referencia a:hover {
    color: var(--primary);
}

/* =========================================================
   TEXTO DEL VERSÍCULO
   ========================================================= */

.destacada-versiculo {
    position: relative;
    max-width: 900px;
    margin: 0 0 1.2rem;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.7;
    font-style: italic;
    z-index: 1;
}


/* =========================================================
   ENLACE
   ========================================================= */

.destacada-enlace {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    z-index: 1;
    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.destacada-enlace:hover {
    color: var(--text-light);
    gap: 0.7rem;
}


.destacada-flecha {
    font-size: 1.25rem;
    line-height: 1;
    transition:
        transform 0.2s ease;
}


.destacada-enlace:hover .destacada-flecha {
    transform: translateX(3px);
}



.sin-resultados {
    text-align: center;
    padding: 3rem;
    background-color: var(--bg-secondary);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 1.2rem;
    box-shadow: var(--shadow);
}


/* =================================================================== */
/* ====== PAGINACIÓN PREMIUM (ROMBOS) ====== */
/* =================================================================== */

.paginacion-superior {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2rem;
}

.paginacion-inferior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(150, 150, 150, 0.2);
}

.info-resultados {
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 500;
}

.step-links-rombos {
    display: flex;
    align-items: center;
    gap: 1rem; /* Más espacio porque los rombos ocupan lugar en diagonal */
}

/* El diseño base del Rombo */
.btn-rombo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--muted);
    
    /* MAGIA: Lo rotamos 45 grados */
    transform: rotate(45deg);
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* El texto adentro del Rombo */
.btn-rombo span {
    /* MAGIA: Des-rotamos el texto para que se lea derecho */
    transform: rotate(-45deg);
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.95rem;
}

/* Efecto al pasar el mouse (Morado y Dorado) */
.btn-rombo:hover {
    background-color: var(--secondary); /* Un morado premium */
    border-color: var(--primary); /* Borde dorado (primary) */
    transform: rotate(45deg) scale(1.15); /* Crece un poquito sin perder su rotación */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.btn-rombo:hover span {
    color: #ffffff;
}

/* El Rombo de la página en la que estás (Dorado brillante y Morado profundo) */
.btn-rombo.current {
    background: var(--secondary-premium); /* Degradado morado */
    border: 1px solid var(--primary); /* Borde dorado */
    box-shadow: 0 0 10px var(--shadow-pr); /* Brillo sutil */
    pointer-events: none;
}

.btn-rombo.current span {
    color: var(--primary); /* Número dorado */
}


/* ============================================================
   SCROLL — RESPETA HEADER + MENÚ FIJO
   ============================================================ */

section[id],
div[id] {
    scroll-margin-top: 150px;
}