/* =========================================================
   RAVI HISTORY — RESPONSIVE
   Objetivo principal: funcionar dentro de un contenedor/iframe
   de foro de aproximadamente 700 x 700 px sin depender del
   tamaño total de la ventana del navegador.
   ========================================================= */

/* Pantallas bajas de escritorio */
@media (max-height:800px) and (min-width:801px){
  .archive-header{height:115px;padding:20px 5vw 16px}
  .archive-brand h1{font-size:55px}
  .archive-tabs{height:48px}
  .archive-content{height:calc(100vh - 170px);padding:18px 0}
  .portrait-frame img{height:min(55vh,480px)}
  .timeline-score-wrapper{min-height:230px}
}

/* =========================================================
   MODO FORO CUADRADO — pensado específicamente para 700x700
   También cubre contenedores entre 560 y 800 px de ancho.
   Mantiene el proyecto dentro del cuadro y usa scroll INTERNO.
   ========================================================= */
@media (min-width:560px) and (max-width:800px){
  html,body{width:100%;height:100%;overflow:hidden}
  #scene,#archive{width:100%;height:100%;min-height:0}

  /* INTRO */
  .presentation{width:100%;height:100%}
  .background img{object-position:center bottom}
  .elbaph{width:72%;left:-5%;bottom:2%}
  .zunesha-wrapper{width:47%;}
  .title{width:88%}
  .title span{font-size:8px;letter-spacing:4px}
  .title strong{font-size:clamp(30px,7vw,50px);letter-spacing:7px}
  .ravi-content{width:82%;max-width:570px}
  .ravi-small{font-size:8px;letter-spacing:5px}
  .ravi-name{font-size:clamp(68px,15vw,105px);letter-spacing:9px}
  .ravi-line{margin:20px auto}
  .ravi-info{font-size:8px;letter-spacing:4px}
  .final-buttons{margin-top:28px;gap:10px}
  .enter-profile,.replay-intro,.skip-intro{padding:11px 15px;font-size:7px;letter-spacing:2px}
  .skip-intro{right:14px;bottom:14px}

  /* ARCHIVO: todo permanece dentro de los 700px */
  #archive{overflow:hidden}
  .archive-topline{height:5px}
  .archive-header{height:94px;padding:15px 24px 13px;align-items:flex-end}
  .archive-brand h1{font-size:42px;letter-spacing:6px}
  .archive-brand p{margin-top:8px;font-size:6px;letter-spacing:2.5px}
  .archive-overline,.section-kicker{font-size:6px;letter-spacing:3px}
  .archive-back{padding:8px 10px;font-size:6px;letter-spacing:2px}

  .archive-tabs{position:relative;top:auto;height:43px;padding:0 8px;overflow-x:auto;overflow-y:hidden}
  .archive-tab{padding:0 13px;font-size:6px;letter-spacing:1.7px}

  .archive-content{width:calc(100% - 34px);height:calc(100% - 142px);margin:0 auto;padding:16px 0 20px;overflow:hidden}
  .archive-panel{height:100%;min-height:0}

  /* DATOS */
  .archive-panel[data-panel="datos"].active{grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;overflow-y:auto;padding-right:5px}
  .ravi-portrait{width:100%;max-width:220px}
  .portrait-frame{padding:5px}
  .portrait-frame img{height:390px;max-height:55vh;object-fit:cover}
  .portrait-mark{right:-15px;bottom:-25px;font-size:90px}
  .section-heading h1,.section-heading h2,.document-title,.gallery-title{font-size:27px;line-height:1.08;letter-spacing:1.5px}
  .archive-introduction{margin:11px 0 13px;font-size:11px;line-height:1.5}
  .data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .data-item{padding:8px 7px}
  .data-item span{font-size:5px;letter-spacing:1.7px}
  .data-item strong{font-size:11px}
  .archive-quote{margin-top:12px;padding:10px 13px}
  .archive-quote span{font-size:5px;letter-spacing:2px}
  .archive-quote p{font-size:10px;line-height:1.4}

  /* HISTORIA / OBJETIVOS / CURIOSIDADES */
  .text-panel.active{height:100%;overflow-y:auto;padding-right:8px}
  .document-layout{grid-template-columns:58px minmax(0,1fr);gap:16px;margin:0 auto;max-width:100%}
  .document-number{font-size:64px}
  .document-body p{margin-top:13px;font-size:11px;line-height:1.62}
  .document-rule{width:60px;margin-top:13px}
  .objective-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
  .objective,.curiosity{padding:12px}
  .objective span{font-size:5px;letter-spacing:2px}
  .objective h3{margin-top:5px;font-size:13px}
  .objective p,.curiosity p{margin-top:5px;font-size:10px;line-height:1.5}
  .curiosity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
  .curiosity span{font-size:18px}

  /* CRONOLOGÍA */
  .archive-panel[data-panel="cronologia"].active{display:flex;height:100%;overflow:hidden}
  .timeline-header{flex:0 0 auto}
  .timeline-introduction{max-width:560px;margin-top:6px;font-size:9px;line-height:1.45}
  .timeline-score-wrapper{flex:1;min-height:0;margin-top:8px}
  .timeline-scroll{padding:42px 20px 55px}
  .timeline-score{height:160px;padding:0 35px}
  .timeline-clef{flex-basis:65px;font-size:88px}
  .timeline-note::before{font-size:62px}
  .timeline-event{width:62px;height:80px}
  .timeline-date{top:calc(100% + 4px);font-size:6px;letter-spacing:1.4px}
  .timeline-help{margin-top:7px;font-size:5px;letter-spacing:1.7px}
  .timeline-modal{width:280px}
  .timeline-modal-image{height:125px}
  .timeline-modal-content{padding:13px 15px 15px}
  .timeline-modal-title{font-size:18px}
  .timeline-modal-description{font-size:10px;line-height:1.45}

  /* GALERÍA: imagen completa izquierda + registros derecha */
  .archive-panel[data-panel="galeria"].active{display:flex;height:100%;overflow:hidden}
  .gallery-header{margin-bottom:10px}
  .gallery-viewer{min-height:0;grid-template-columns:minmax(0,1fr) 205px;gap:10px}
  .gallery-stage{height:auto;min-height:0}
  .gallery-main-caption{left:14px;bottom:13px;max-width:67%}
  .gallery-main-caption span{font-size:5px;letter-spacing:2px}
  .gallery-main-caption h3{margin-top:3px;font-size:16px}
  .gallery-main-caption p{margin-top:3px;font-size:8px;line-height:1.35}
  .gallery-counter{right:12px;bottom:13px;font-size:7px;letter-spacing:2px}
  .gallery-arrow{width:30px;height:42px;font-size:21px}
  .gallery-prev{left:7px}.gallery-next{right:7px}
  .gallery-sidebar{display:block;overflow-y:auto;overflow-x:hidden;padding-right:4px;border-top:0;border-left:1px solid rgba(166,132,67,.12)}
  .gallery-slide{width:100%;grid-template-columns:60px minmax(0,1fr);gap:8px;padding:7px}
  .gallery-slide img{width:60px;height:52px}
  .gallery-slide-info span{font-size:5px;letter-spacing:1.4px}
  .gallery-slide-info h3{margin:3px 0;font-size:11px}
  .gallery-slide-info p{font-size:8px;line-height:1.3}

  .archive-coordinate{right:8px;bottom:5px;font-size:5px;letter-spacing:2px}
}

/* =========================================================
   MÓVIL ESTRECHO — aquí sí permitimos composición vertical.
   ========================================================= */
@media (max-width:559px){
  body{overflow:auto}
  .elbaph{width:78vw;left:-3%;bottom:3%}
  .zunesha-wrapper{width:52vw}
  .ravi-content{width:88%}
  .ravi-name{font-size:clamp(58px,20vw,92px)}
  .ravi-info{font-size:7px;letter-spacing:2.5px}
  .final-buttons{margin-top:25px}

  #archive{overflow-y:auto}
  .archive-header{height:auto;min-height:125px;padding:22px 18px 18px}
  .archive-brand h1{font-size:48px}
  .archive-back{font-size:6px;padding:8px}
  .archive-tabs{position:sticky;top:0;height:48px;padding:0 6px}
  .archive-tab{padding:0 12px;font-size:6px;letter-spacing:1.5px}
  .archive-content{width:calc(100% - 28px);height:auto;padding:28px 0 70px;overflow:visible}
  .archive-panel{height:auto}
  .archive-panel[data-panel="datos"].active{grid-template-columns:1fr;gap:32px}
  .portrait-frame img{height:min(70vh,520px)}
  .data-grid{grid-template-columns:1fr}
  .document-layout{grid-template-columns:1fr;gap:12px}
  .document-number{font-size:62px}
  .objective-list,.curiosity-grid{grid-template-columns:1fr}
  .text-panel.active{height:auto;overflow:visible;padding-right:0}

  .archive-panel[data-panel="cronologia"].active{display:block;height:auto;overflow:visible}
  .timeline-score-wrapper{min-height:360px;margin-top:20px}
  .timeline-scroll{padding:85px 20px 105px}
  .timeline-score{height:180px;padding:0 35px}
  .timeline-clef{flex-basis:65px;font-size:90px}
  .timeline-modal{width:min(300px,calc(100vw - 24px))}

  .archive-panel[data-panel="galeria"].active{display:block;height:auto}
  .gallery-viewer{display:flex;flex-direction:column}
  .gallery-stage{height:min(62vh,520px);flex:0 0 auto}
  .gallery-sidebar{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;border-left:0;border-top:1px solid rgba(166,132,67,.12);padding:8px 0}
  .gallery-slide{flex:0 0 235px;grid-template-columns:72px 1fr;border:1px solid rgba(169,135,71,.13)}
  .gallery-slide img{width:72px;height:62px}
  .gallery-main-caption{max-width:70%;left:14px;bottom:14px}
  .gallery-main-caption p{display:none}
}

/* Altura extremadamente pequeña: evita cortes en embeds bajos. */
@media (max-height:560px){
  .archive-header{height:78px;padding-top:10px;padding-bottom:9px}
  .archive-brand h1{font-size:34px}
  .archive-brand p{display:none}
  .archive-tabs{height:38px}
  .archive-content{height:calc(100% - 121px);padding:10px 0}
  .ravi-name{font-size:70px}
  .final-buttons{margin-top:18px}
}

/* =========================================================
   V5 — Ajuste real para iframe/foro 700x700
   ========================================================= */
@media (min-width:560px) and (max-width:800px){
  /* DATOS: nunca debe desbordar el cuadro de 700px */
  .archive-panel[data-panel="datos"].active{
    grid-template-columns:minmax(150px,34%) minmax(0,1fr);
    gap:clamp(12px,3vw,22px);
    align-items:stretch;
    overflow:hidden;
  }
  .ravi-portrait{
    width:100%;max-width:none;height:100%;min-height:0;
    display:flex;align-items:center;justify-content:center;
  }
  .portrait-frame{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
  .portrait-frame img{
    width:100%;height:100%;max-height:100%;min-height:0;
    object-fit:contain;object-position:center center;
  }
  .ravi-data{min-width:0;min-height:0;height:100%;overflow-y:auto;padding-right:5px}
  .section-heading h2{font-size:clamp(22px,4.2vw,29px)}
  .archive-introduction{font-size:clamp(9px,1.55vw,11px)}
  .data-item strong{font-size:clamp(9px,1.6vw,11px)}

  /* CRONOLOGÍA: solo la zona musical hace scroll horizontal. */
  .timeline-score-wrapper{width:100%;min-width:0;overflow:hidden}
  .timeline-scroll{width:100%;min-width:0;max-width:100%;padding:34px 12px 48px}
  .timeline-score{height:150px;padding-left:38px;padding-right:38px}
  .timeline-clef{flex:0 0 72px;font-size:84px}
  .timeline-event{width:64px;height:82px}
  .timeline-note{width:64px;height:72px}
  .timeline-note::before{font-size:58px}
  .timeline-date{width:118px;font-size:5px;letter-spacing:1.1px}
  .timeline-help{white-space:normal;text-align:center;line-height:1.45}
}

/* Cuadros todavía más estrechos, pero no móviles verticales */
@media (min-width:560px) and (max-width:650px){
  .archive-panel[data-panel="datos"].active{grid-template-columns:minmax(135px,31%) minmax(0,1fr);gap:12px}
  .data-grid{grid-template-columns:1fr 1fr}
  .data-item{padding:6px 5px}
  .archive-quote{margin-top:8px;padding:8px 10px}
}

/* V6 — SCROLL VISIBLE EN FORO / IFRAME 700x700 */
@media (min-width:560px) and (max-width:800px){
.archive-panel[data-panel="datos"].active{height:100%;min-height:0;overflow-y:scroll!important;overflow-x:hidden!important;align-items:start;padding-right:10px;padding-bottom:28px;scrollbar-width:auto;scrollbar-color:#9b7b43 #17160f}
.archive-panel[data-panel="datos"].active::-webkit-scrollbar{width:10px}.archive-panel[data-panel="datos"].active::-webkit-scrollbar-track{background:#17160f;border-left:1px solid rgba(183,151,87,.18)}.archive-panel[data-panel="datos"].active::-webkit-scrollbar-thumb{background:#9b7b43;border:2px solid #17160f;border-radius:8px}
.ravi-data{height:auto;min-height:100%;overflow:visible!important;padding-bottom:22px}.ravi-portrait{height:auto;min-height:0;align-self:start;position:sticky;top:0}.portrait-frame{height:auto;max-height:none}.portrait-frame img{height:auto;max-height:430px;object-fit:contain}
.timeline-score-wrapper{overflow:hidden!important;padding-bottom:2px}.timeline-scroll{display:block;width:100%;max-width:100%;min-width:0;overflow-x:scroll!important;overflow-y:hidden!important;padding-bottom:34px!important;scrollbar-width:auto;scrollbar-color:#9b7b43 #17160f;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.timeline-scroll::-webkit-scrollbar{height:11px}.timeline-scroll::-webkit-scrollbar-track{background:#17160f;border-top:1px solid rgba(183,151,87,.18)}.timeline-scroll::-webkit-scrollbar-thumb{background:#9b7b43;border:2px solid #17160f;border-radius:8px}.timeline-help{flex:0 0 auto;margin-top:5px;padding-bottom:2px}
}

/* =========================================================
   V7 — EMBED ADAPTATIVO UNIVERSAL
   El documento se adapta al viewport REAL que recibe del embed.
   No depende de 700x700 ni de un ancho fijo.
   ========================================================= */

html,body{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}

#scene,#archive{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}

/* El archivo siempre calcula su contenido con el espacio disponible. */
#archive{
  overflow:hidden !important;
}

.archive-header{
  height:clamp(76px,16vh,145px);
  padding:clamp(10px,3vh,28px) clamp(14px,5vw,5vw) clamp(9px,2.5vh,22px);
}

.archive-brand h1{
  font-size:clamp(32px,min(7vw,9vh),82px);
}

.archive-brand p{
  margin-top:clamp(5px,1.4vh,13px);
  font-size:clamp(5px,1vw,8px);
}

.archive-tabs{
  height:clamp(36px,7vh,55px);
  min-height:36px;
  overflow-x:auto;
  overflow-y:hidden;
}

.archive-tab{
  padding:0 clamp(10px,2.4vw,24px);
  font-size:clamp(5px,.8vw,8px);
  white-space:nowrap;
}

.archive-content{
  width:min(1500px,calc(100% - clamp(24px,8vw,80px)));
  height:calc(100% - clamp(119px,23vh,207px));
  min-height:0;
  padding:clamp(10px,3vh,42px) 0 clamp(12px,3vh,42px);
  overflow:hidden !important;
}

.archive-panel{
  min-width:0;
  min-height:0;
}

/* ---------- DATOS ----------
   Scroll vertical SIEMPRE disponible cuando haga falta. */
.archive-panel[data-panel="datos"].active{
  grid-template-columns:minmax(150px,34%) minmax(0,1fr) !important;
  gap:clamp(12px,5vw,70px) !important;
  height:100% !important;
  min-height:0 !important;
  align-items:start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px;
  padding-bottom:22px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#9b7b43 #17160f;
}

.archive-panel[data-panel="datos"].active::-webkit-scrollbar{width:9px}
.archive-panel[data-panel="datos"].active::-webkit-scrollbar-track{background:#17160f}
.archive-panel[data-panel="datos"].active::-webkit-scrollbar-thumb{background:#9b7b43;border:2px solid #17160f;border-radius:8px}

.ravi-portrait{
  width:100% !important;
  max-width:450px !important;
  height:auto !important;
  min-height:0 !important;
  align-self:start !important;
  position:sticky !important;
  top:0;
}

.portrait-frame{
  width:100%;
  height:auto !important;
  max-height:none !important;
}

.portrait-frame img{
  width:100% !important;
  height:auto !important;
  max-height:min(62vh,570px) !important;
  object-fit:contain !important;
}

.ravi-data{
  min-width:0;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  padding-bottom:24px;
}

/* ---------- PANELES DE TEXTO ---------- */
.text-panel.active{
  height:100% !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#9b7b43 #17160f;
}

/* ---------- CRONOLOGÍA ----------
   La partitura usa todo el ancho del embed y su propio scroll. */
.archive-panel[data-panel="cronologia"].active{
  display:flex !important;
  flex-direction:column;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.timeline-header{flex:0 0 auto;min-width:0}
.timeline-score-wrapper{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  min-height:120px !important;
  overflow:hidden !important;
}

.timeline-scroll{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:100%;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:clamp(20px,6vh,55px) clamp(10px,3vw,35px) 28px !important;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#9b7b43 #17160f;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

.timeline-scroll::-webkit-scrollbar{height:10px}
.timeline-scroll::-webkit-scrollbar-track{background:#17160f;border-top:1px solid rgba(183,151,87,.18)}
.timeline-scroll::-webkit-scrollbar-thumb{background:#9b7b43;border:2px solid #17160f;border-radius:8px}

.timeline-help{
  flex:0 0 auto;
  margin-top:5px;
  white-space:normal;
  line-height:1.4;
}

/* ---------- GALERÍA ---------- */
.archive-panel[data-panel="galeria"].active{
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.gallery-viewer{min-width:0;min-height:0}
.gallery-sidebar{
  min-height:0;
  overflow-y:auto !important;
  scrollbar-width:thin;
  scrollbar-color:#9b7b43 #17160f;
}

/* Cuando el embed realmente es estrecho, cambia la composición.
   El valor solo decide layout; no fija dimensiones del proyecto. */
@media (max-width:559px){
  html,body{overflow:hidden !important}
  #archive{overflow:hidden !important}
  .archive-content{
    width:calc(100% - 24px) !important;
    height:calc(100% - clamp(119px,23vh,185px)) !important;
    padding:12px 0 16px !important;
    overflow:hidden !important;
  }
  .archive-panel[data-panel="datos"].active{
    display:block !important;
    overflow-y:auto !important;
  }
  .ravi-portrait{
    position:relative !important;
    width:min(72%,300px) !important;
    margin:0 auto 22px !important;
  }
  .portrait-frame img{max-height:48vh !important}
  .gallery-viewer{height:100%;overflow-y:auto}
}

/* Embeds bajos: compacta cabecera sin cambiar el tamaño externo. */
@media (max-height:650px){
  .archive-header{height:76px;padding-top:9px;padding-bottom:8px}
  .archive-brand h1{font-size:34px}
  .archive-brand p{display:none}
  .archive-tabs{height:38px}
  .archive-content{height:calc(100% - 119px);padding:10px 0 12px}
  .timeline-introduction{margin-top:5px}
  .timeline-score-wrapper{margin-top:5px}
}

/* =========================================================
   V8 — BARRAS DE DESPLAZAMIENTO PROPIAS
   No dependen de si el navegador/foro oculta los scrollbars nativos.
   ========================================================= */
.archive-panel[data-panel="datos"].active{
  position:relative !important;
  padding-right:18px !important;
  scrollbar-width:none !important;
}
.archive-panel[data-panel="datos"].active::-webkit-scrollbar{display:none !important}
.custom-scrollbar-y{
  position:sticky;
  z-index:80;
  top:0;
  float:right;
  margin-right:-16px;
  width:8px;
  height:100%;
  border-radius:10px;
  background:rgba(155,123,67,.13);
  pointer-events:auto;
}
.custom-scrollbar-y .custom-thumb{
  position:absolute;left:1px;top:0;width:6px;min-height:28px;
  border-radius:10px;background:#9b7b43;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  cursor:grab;
}
.custom-scrollbar-y .custom-thumb:active{cursor:grabbing}

.timeline-score-wrapper{position:relative !important;padding-bottom:16px !important}
.timeline-scroll{scrollbar-width:none !important;padding-bottom:20px !important}
.timeline-scroll::-webkit-scrollbar{display:none !important}
.custom-scrollbar-x{
  position:absolute;z-index:90;left:10px;right:10px;bottom:3px;height:9px;
  border-radius:10px;background:rgba(155,123,67,.13);
  pointer-events:auto;
}
.custom-scrollbar-x .custom-thumb{
  position:absolute;left:0;top:1px;height:7px;min-width:34px;
  border-radius:10px;background:#9b7b43;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  cursor:grab;
}
.custom-scrollbar-x .custom-thumb:active{cursor:grabbing}
.custom-scrollbar-x.is-disabled,.custom-scrollbar-y.is-disabled{opacity:.22}


/* =========================================================
   V10 — FIX DATOS
   La barra personalizada NO debe participar como item del grid.
   Conserva: retrato izquierda + información derecha.
   ========================================================= */
.archive-panel[data-panel="datos"].active{
  position:relative !important;
}

/* Sacar la barra del flujo/grid por completo */
.archive-panel[data-panel="datos"] > .custom-scrollbar-y{
  position:absolute !important;
  z-index:80 !important;
  top:0 !important;
  right:2px !important;
  bottom:0 !important;
  left:auto !important;
  float:none !important;
  margin:0 !important;
  width:8px !important;
  height:auto !important;
  align-self:auto !important;
  justify-self:auto !important;
}

/* Garantiza el orden original del contenido */
.archive-panel[data-panel="datos"] > .ravi-portrait{
  grid-column:1 !important;
  grid-row:1 !important;
}

.archive-panel[data-panel="datos"] > .ravi-data{
  grid-column:2 !important;
  grid-row:1 !important;
}

/* En embeds realmente estrechos, vuelve a una sola columna */
@media (max-width:559px){
  .archive-panel[data-panel="datos"] > .ravi-portrait,
  .archive-panel[data-panel="datos"] > .ravi-data{
    grid-column:auto !important;
    grid-row:auto !important;
  }
}