/* ======= Secciones / títulos ======= */
.section-1-bg { background-color: #f4f9fc; }
.section-title-1 { text-align: center; }

h2.section-title-2 {
  font-size: 45px;
  font-weight: bold;
  position: relative;
  color: #0a66c2;
  z-index: 2;
}
h3.section-title-3 {
  font-size: 36px;
  font-weight: bold;
  position: relative;
  color: #0a66c2;
  z-index: 2;
}



#biblia-page .column-box{

  border: 1px solid #e9ecef;
  border-radius: .9rem;
  box-shadow: 0 6px 18px rgba(13,110,253,.06);
  padding: 5px 15px 5px 15px;
  border: #0a66c2 solid 1px;
}

/* Etiqueta de la ficha en azul con sombra */

#biblia-page .ficha-label{
  font-weight: 700;                
  color: #028ac9;                 
  text-shadow: 1px 1px 0 #cfe2ff;  
  display: block;
  margin-bottom: .125rem;
}

#biblia-page .section-title{
  color: #0559a2;
  text-shadow: 1px 1px 0 #cfe2ff;
  font-weight: 700;
  margin: 0;
}

/* Ficha sticky solo en escritorio */
@media (min-width: 992px){
  #biblia-page .ficha-sticky{ position: sticky; top: 1rem; }
}


@media (max-width: 575.98px){
  #biblia-page .column-box{ padding: .9rem 1rem; }
  #biblia-page .section-title{ font-size: 1.25rem; }
} */

/* ======= Imagen centrada y responsiva ======= */

#biblia-page .img-block { max-width: 480px; width: 100%; margin-left:auto; margin-right:auto; }

/* Marco con alto responsivo: mínimo 260px, 40vh en pantallas bajas, tope 400px */
#biblia-page .img-frame-400{
  height: 400px;
  display: flex;              /* o grid con place-items:center; */
  align-items: center;
  justify-content: center;
}
#biblia-page .img-frame-400 > img{
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: 7px;          /* ← el borde redondeado aquí */
  display: block;
}

/* La imagen no se deforma, se adapta al marco */
#biblia-page .img-frame-400 .figure-img{
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* ======= Tipografía / botones / listas ======= */
.biblia-titulo {
  color: #0a66c2;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.12);
  word-wrap: break-word;      /* evita desbordes */
}
.biblia-lista { padding-left: 20px; }
.biblia-lista li { margin-bottom: 8px; }

.biblia-nav { display: flex; justify-content: space-between; }
.biblia-btn {
  background: #0a66c2;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background .3s ease;
}
.biblia-btn:hover { background: #084b91; }

/* respeta \n como saltos de línea */
.versiculo { white-space: pre-line; }

.titulo-azul {
  color: #0d6efd;
  text-shadow: 1px 1px 0 #cfe2ff;
  font-weight: 500;
}

/* Quitar viñetas y añadir sangría suave */
.sin-vinetas { list-style: none; padding-left: 0; margin: 0; }
.sin-vinetas li { padding-left: .5rem; margin-bottom: .25rem; }

/* ======= Tarjetas suaves ======= */
.card-soft {
  border: 1px solid #e9ecef;
  box-shadow: 0 6px 18px rgba(13,110,253,.06);
  border-radius: .8rem;
}
.badge-soft { 
    background: #e7f1ff; 
    color: #0d6efd; }

/* ======= Grid opcional de layout (si lo usas) ======= */
.layout-contenido { display: grid; gap: 1rem; }
@media (min-width: 992px) {
  .layout-contenido { grid-template-columns: 1fr 0.8fr; }
}


/* Puedes pasar esto a tu .css si prefieres */
/* ====== Sidebar A–Z (aislado) ====== */
#fichasSidebar {
  width: 260px;
  padding: 1rem;
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
}

/* Ya controlas visibilidad con Bootstrap: d-md-block en el markup */
/* No fuerces display aquí para no pelear con .collapse */

/* Título del sidebar */
#fichasSidebar h4 {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #374151;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: .5rem;
  text-align: center;
}

/* Lista de enlaces (scoped) */
#fichasSidebar .nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
#fichasSidebar .nav-item { margin: 0; padding: 0; }
#fichasSidebar .nav-link {
  display: block;
  padding: .6rem .75rem;
  color: #374151;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb; /* borde por enlace */
  transition: all .2s ease;
}
#fichasSidebar .nav-item:last-child .nav-link { border-bottom: none; }

#fichasSidebar .nav-link:hover {
  background: #f3f4f6;
  color: #0d6efd;
  padding-left: 1rem; /* micro movimiento */
}

/* Activo SOLO en el sidebar */
#fichasSidebar .nav-link.active {
  font-weight: 700;
  color: #0d6efd;
  background: #eaf1ff;
  border-left: 4px solid #0d6efd;
  padding-left: calc(.75rem - 4px); /* compensa el borde */
}

/* ====== Utilidades de la página de fichas ====== */
.fichas-page .badge-soft {
  background: #eef2ff;
  color: #2d3a8c;
  padding: .35rem .5rem;
  border-radius: .5rem;
  font-size: .85rem;
}

.fichas-page .img-frame-400 {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
}

.fichas-page .card-soft {
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.fichas-page .ficha-label {
  font-weight: 600;
  color: #334;
  margin-right: .25rem;
}

/* ====== Tabla de vocabulario ====== */
.fichas-page .table-vocab th,
.fichas-page .table-vocab td { vertical-align: middle; }

/* RTL solo donde lo necesites */
.fichas-page .rtl { direction: rtl; }

/* Paginación compacta */
.fichas-page .pagination.pagination-sm .page-link {
  padding: .25rem .5rem;
  font-size: .875rem;
}

.fichas-page .table-vocab .btn.btn-sm {
  padding: .15rem .4rem;
  line-height: 1.2;
}
.fichas-page .rtl { direction: rtl; }

/* Que las captions se lean mejor sobre la foto en el carrusel */
.fichas-page .carousel-caption p {
  margin-bottom: 0;
}

/* ===== Línea de tiempo (scope: #gt-container) ===== */

/* Cabeceras por columna */


/* Columnas del grid */
#gt-container .tl-col{
  background: var(--tl-card, #0f1a2d);
  border-left: 1px dashed var(--tl-grid, rgba(255,255,255,.08));
  border-right: 1px dashed var(--tl-grid, rgba(255,255,255,.08));
  min-height: 100%;
  padding: .25rem .25rem 1.25rem .25rem; /* espacio para overlays */
  position: relative;
}
@media (max-width: 767.98px){
  #gt-container .tl-col{ margin-bottom: .75rem; border-radius: var(--tl-radius, 16px); }
}

/* Bloque de mes (vertical) */
#gt-container .tl-month{
  position: relative; display:flex; align-items:center; justify-content:center;
  height: var(--tl-month-h, 120px);
  margin: .25rem; border-radius: 14px;
  border: 1px solid var(--tl-border, rgba(255,255,255,.12));
  background: #0c1628;
  overflow: hidden; transition: box-shadow .2s ease, transform .2s ease;
}
#gt-container .tl-month:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transform: translateY(-2px);
}

/* Texto vertical del mes */
#gt-container .vertical-text{
  writing-mode: vertical-rl; text-orientation: upright;
  letter-spacing: .15em; font-weight: 700; font-size: 1.05rem;
  color: var(--tl-ink, #dbe7ff);
}
#gt-container .vertical-text .muted{
  color: var(--tl-ink-dim, #a8b6d1); font-weight: 500;
}

/* Guía opcional (se muestra con botón) */
#gt-container .guide{
  position:absolute; left:0; right:0; top:50%;
  height:1px; background: var(--tl-grid, rgba(255,255,255,.08));
  display:none;
}

/* Etiqueta pequeña del mes (Mes N · NOMBRE) */
#gt-container .mini-tag{
  position:absolute; top:6px; right:8px;
  font-size:.65rem; color: var(--tl-ink-dim, #a8b6d1);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--tl-border, rgba(255,255,255,.12));
  padding:.15rem .35rem; border-radius:999px; letter-spacing:.06em;
}

/* Alternar bordes desde JS */
#gt-container.with-borders .tl-month{ border-style: solid; }
#gt-container.no-borders .tl-month{ border-color: transparent; }

/* Fila horizontal con todos los meses juntitos */
#gt-container .months-row{
  display:flex; gap:.25rem; overflow-x:auto; padding:.25rem .25rem .5rem;
}
#gt-container .months-row .tl-month{ width: 84px; }           /* ancho por mes */
#gt-container.compact .months-row .tl-month{
  width: 68px; height: var(--tl-month-h-compact, 86px);
}

/* Imágenes “entre columnas” (md+) posicionadas por JS */
#gt-container .between-img{
  position:absolute; z-index:2; pointer-events:none; opacity:.95;
  max-width: clamp(140px, 18vw, 260px); height:auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
  transition: transform .2s ease;
}

/* Fallback móvil: figuras inferiores */
#gt-container .zone-img{
  background:#0c1628;
  border:1px solid var(--tl-border, rgba(255,255,255,.12));
  border-radius: var(--tl-radius, 16px);
  margin:.25rem;
}
#gt-container .zone-img img{
  width:100%; height:auto; display:block;
  border-top-left-radius: var(--tl-radius, 16px);
  border-top-right-radius: var(--tl-radius, 16px);
}
#gt-container .zone-img figcaption{
  font-size:.85rem; color: var(--tl-ink-dim, #a8b6d1);
  padding:.5rem .75rem;
}

/* Placeholders (cols 2–4) */
#gt-container .placeholder-col{
  margin:.5rem; padding:1rem;
  border:1px dashed var(--tl-border, rgba(255,255,255,.12));
  border-radius:12px; color: var(--tl-ink-dim, #a8b6d1);
  text-align:center; font-weight:600; opacity:.9;
}

/* ——— MEJOR VISIBILIDAD DE LOS MESES ——— */

/* Quita el borde gris y el fondo de la caja del mes (sin romper el layout) */
#gt-container .tl-month{
  border-color: transparent !important;   /* quita el borde gris */
  background: transparent !important;     /* quita el fondo oscuro de la caja */
  box-shadow: none !important;            /* sin sombra al pasar el mouse */
}

/* Letras de los meses: más grandes y con mejor legibilidad */
#gt-container .vertical-text{
  font-size: 14px;      /* +tamaño */
  letter-spacing: .18em;   /* un poco más de aire entre letras */
  color: #ffffff;          /* blanco limpio (ajústalo si usas otro tema) */
  text-shadow: 0 1px 2px rgba(0,0,0,.35); /* sutil realce sobre fondos oscuros */
}

/* Un poco más de espacio y ancho para que respiren mejor */
#gt-container .months-row{ gap: .5rem; }
#gt-container .months-row .tl-month{ width: 96px; } /* antes 84px */

/* La etiqueta superior (Mes 1 · ENERO), más discreta para no competir */
#gt-container .mini-tag{
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}

/* Si activas el botón “Bordes”, evita que vuelva a pintar el marco de cada mes */
#gt-container.with-borders .tl-month{ border-color: transparent !important; }

/* La etiqueta superior (Mes 1 · ENERO), más discreta para no competir */

.box-platilejo {
  background: linear-gradient(180deg, #f3f7fe 0%, #eaf1ff 100%);  
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-platilejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #a3cbff;
}
.box-azulejo {
  background: linear-gradient(180deg, #cff4fc 0%, #eaf1ff 100%);              /* azulejo suave */
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-azulejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #57e0ff;
}
.box-verdelejo {
  background: linear-gradient(180deg, #bfffe4 0%, #eaf1ff 100%);              /* azulejo suave */
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-verdelejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #45faaf;
}
.box-rosalejo {
  background: linear-gradient(180deg, #fccff2 0%, #eaf1ff 100%);               /* azulejo suave */
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-rosalejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #fd59d9;
}
.box-amarilejo {
  background: linear-gradient(180deg, #faf8c9 0%, #eaf1ff 100%);              /* azulejo suave */
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-amarilejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #fcf456;
}
.box-naranjalejo {
  background: linear-gradient(180deg, #fddfc3 0%, #eaf1ff 100%);               /* azulejo suave */
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-naranjalejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #ffa34d;
}
.box-rojolejo {
  background: linear-gradient(180deg, #ff7073 0%, #eaf1ff 100%);               /* azulejo suave */
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.box-rojolejo:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
  background: #ff0004;
}

.year-header {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 7px 7px 7px 7px;
  border-radius: .5rem;
  background: linear-gradient(180deg, #e9f1ff, #d9e7ff);
  border: 1px solid #c9dbff;
  color: #0d3b7e;
  box-shadow: 0 1px 0 rgba(13,59,126,.06) inset;
}

/* Listado compacto y limpio */
.list-compact {
  padding-left: 1.1rem;  /* sangría suave */
}
.list-compact > li {
  margin-bottom: .35rem;
}

/* ====== Variables globales ====== */
/* utilidades de alineación (Modo A) */
.brace-stack{ display:flex; align-items:center; }
.brace-stack--top{ margin-bottom:.25rem; }
.brace-stack--bottom{ margin-top:.25rem; transform:scaleY(-1); transform-origin:center; }
.brace-left{ justify-content:flex-start; }
.brace-center{ justify-content:center; }
.brace-right{ justify-content:flex-end; }

/* tamaño proporcional y estilo */
.brace-stack svg{
  width: min(var(--brace-width, 100%), var(--brace-max, 100%));
  height: auto;
  aspect-ratio: 397 / 94;
  display:block;
}
.brace-stack path{
  fill:none;
  stroke: var(--brace-color, #2f86a7);
  stroke-width: var(--brace-stroke, 3);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* TUS TRES CLASES */
/* El principal usa ancho máx 800 y alto fijo */
.brace-main { --brace-max: 1000px; --brace-h: 100px; }
.brace-main svg { width: min(100%, var(--brace-max)); height: var(--brace-h); aspect-ratio: auto; }
.brace-main svg[viewBox] { preserveAspectRatio: none; } /* asegura que respete el alto fijo */

.brace-labeled{ position:relative; display:inline-block; }
.brace-svg{ display:block; width:min(100%, 800px); height:110px; } /* ejemplo: más ancho, menos alto */
.brace-note{
  position:absolute; left:50%; top:0px;
  transform:translate(-45%, -110%); /* sube la nota sobre la punta */
  font: 600 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#2f86a7; background:#eaf7fc; padding:.15rem .4rem; border-radius:.35rem;
  white-space:nowrap; pointer-events:none;
}



.brace-main  { --brace-width:100%; --brace-max:1000px; }
.brace-sub-a { --brace-width:100%; --brace-max:250px; }
.brace-sub-b { --brace-width:100%; --brace-max:250px; }

/* (Opcional) ocultar en pantallas pequeñas */
@media (max-width: 991.98px){ .brace-stack{ display:none; } }


#timeline-gt .bg-secondary{opacity:.45}
#timeline-gt li{margin-bottom:.25rem}

.sin-viñetas{list-style:none;padding-left:0}
.sin-viñetas li{margin-bottom:.4rem}