/* public/css/styles.css */
:root {
  --bg:#F2EEE7; --card:#131923; --text:#e8eef9; --muted:#8fa3bf;
  --primary:#5aa6ff; --border:#1e293b; --accent:#6ab0ff;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.hide { display:none !important; }
.muted { color: var(--muted); }
.row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.vstack { display:flex; flex-direction:column; }
.hstack { display:flex; align-items:center; }
.gap { gap:.5rem; }
.sep { width:1px; height:20px; background:var(--border); display:inline-block; margin:0 .5rem; }

body { display:flex; flex-direction:column; min-height:100vh; }

/* Buttons & inputs */
.btn { background:#182131; color:#e6f0ff; border:1px solid var(--border); padding:.45rem .7rem; border-radius:.6rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.btn:hover { background:#1b2333; }
.btn.primary { background: var(--primary); color:#081321; border-color: #5aa6ff; }
.btn.primary:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; border:1px solid var(--border); color:var(--text); }
.input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea {
  width:100%; padding:.55rem .6rem; border:1px solid var(--border); border-radius:.55rem; background:#0e1522; color:var(--text);
}

.gradient {
    width: 50vw;
    height: 310px;
    position: fixed;
    top: -20%;
    left: -20%;
    filter: blur(100px);
    background: radial-gradient(circle,#456882 0%,#1B3C53 100%);
}
main{
  position: relative;
}

/* Topbar */
.topbar {
  display:flex; align-items:center; gap:.75rem;
  padding:0 .9rem; height:var(--topbar-h);
  border-bottom:1px solid var(--border);
  background: rgba(19,25,35,.85); backdrop-filter: blur(6px);
  position:sticky; top:0; flex:0 0 var(--topbar-h);
}
.topbar .brand { font-weight:700; }
.topbar .spacer { flex:1; }

/* Hamburguesa */
.hamburger {
  background:#182131; color:#e6f0ff; border:1px solid var(--border);
  width:36px; height:36px; border-radius:.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.hamburger:hover { background:#1b2333; }

/* Drawer */
.menu-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40;
}
.menu-drawer {
  position:fixed; top:0; left:-280px; width:280px; height:100vh; z-index:41;
  background:var(--card); border-right:1px solid var(--border);
  box-shadow: 8px 0 24px rgba(0,0,0,.35);
  display:flex; flex-direction:column; transition:left .22s ease;
}
.menu-drawer.open { left:0; }
.menu-header { display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border); }
.menu-title { font-weight:700; }
.menu-list { display:flex; flex-direction:column; padding:8px; gap:4px; }
.menu-item {
  text-align:left; border:1px solid var(--border); background:#182131; color:#e6f0ff;
  padding:.55rem .7rem; border-radius:.6rem; cursor:pointer;
}
.menu-item:hover { background:#1b2333; }
.menu-item.danger { border-color:#3b1e1e; background:#271616; }
.menu-item.danger:hover { filter:brightness(1.1); }
.menu-sep { border: none; border-top:1px solid var(--border); margin:.5rem 0; }
.menu-footer { margin-top:auto; padding:10px; border-top:1px solid var(--border); }

/* Viewer */
.viewer-3col {
  flex:1; min-height:0; height:auto;
  display:grid;
  grid-template-columns: 300px minmax(0,1fr) 420px;
  gap:14px; padding:14px; align-items:stretch;
}


.left-col {
    background-color: #ffffff78;
    padding: 15px 15px 0 0;
    border-right: 1px solid #1b3c53;
}

.wrap-user {
    padding: 1rem;
    background-color: #ffffff8a;
    border-radius: 0px 10px;
    box-shadow: 2px 0px 6px #456882;
}

.wrap-user .card{
  padding: 0;
  background-color: transparent;
  border: none;
}

.wrap-user .card.lib {
    padding: 0;
    background-color: #fff;
    border: 1px solid #1b3c53;
    padding: 1rem;
    color: #1b3c53;
    font-weight: 500;
}

.wrap-user .card.lib p:nth-child(1) {
    padding: 0;
    margin: 0;
    font-size: 1.3rem;
    border-bottom: 1px solid #dedede;
    margin-bottom: 7px;
}

.wrap-user .card.lib p:nth-child(2) {
    padding: 0;
    margin: 0;
    font-size: 0.7rem;
        border-bottom: 1px solid #dedede;
}

/* Contenedor de cada libro */
.doc {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 0px;
    border-radius: 6px;
}

/* Columna izquierda: portada */
.img-libro {
  flex: 0 0 55px;              /* ancho fijo para la miniatura */
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-libro img.cover-thumb {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

/* Columna derecha: detalles + acciones */
.detalles-libro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Nombre del libro */
.detalles-libro strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 2px;
  color: #333;
}

/* Tipo de archivo (PDF en negritas) */
.detalles-libro .muted {
  font-weight: 700;            /* para que “PDF” se vea fuerte */
  color: #000;
}

/* Acciones */
.acciones {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Botones generales */
.acciones .btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  border-radius: 4px;
}

.acciones button {
background: #fff;
border: 1px solid #c02c2c;
color: #c02c2c;
text-transform: uppercase;
}


/* Si quieres que el botón de borrar se vea tipo "Quitar" outline rojo */
.acciones .btn[data-del] {
  background: #fff;
  border: 1px solid #d82727;
  color: #d82727;
}

/* Opcional: responsivo, en pantallas muy pequeñas puedes apilar */
@media (max-width: 480px) {
  .doc {
    flex-direction: row; /* si algún día lo quieres en columna, cámbialo a column */
  }
}

.left-col, .right-col {
  display:grid; gap:14px;
  grid-auto-rows: minmax(120px, auto);
  overflow:auto; min-height:0;
}
.center-col { display:flex; flex-direction:column; min-height:0; }
.card { background:var(--card); border:1px solid var(--border); border-radius:.8rem; padding:12px; min-height:0; }
.card h3 { margin:.1rem 0 .6rem; }
.toolbar {
  padding:.4rem .6rem; flex:0 0 auto;
  color: #456882  ;
}
.viewer-main {
  margin-top:10px; flex:1 1 auto; min-height:0; overflow:auto;
}




#pdfFrame  { width:100%; height:100%; border:0; display:block; background:#0c1220; }

/* Librería */
.doc { padding:.5rem; border-radius:.55rem; }
.doc strong { display:block; }
.doc .muted { font-size:12px; }

/* Chat */
.answer { white-space:pre-wrap; padding:.5rem .6rem; border-radius:.55rem; max-height:300px; overflow:auto; min-height:44px; }

/* Quiz */
.quiz-box .quiz-q { border:1px solid var(--border); border-radius:.55rem; padding:.5rem .6rem; background:#0e1522; margin-bottom:.5rem; }
.quiz-q .qtext { font-weight:600; margin-bottom:.35rem; }
.quiz-q .opt { display:block; margin:.2rem 0; }

.mt8 { margin-top:8px; }

/* Modal genérico */
.modal-bg {position:fixed;top:0;left:0;right:0;bottom:0;background: rgb(255 255 255 / 50%);display:flex;align-items:center;justify-content:center;z-index:9999}



.modal-bg.hide{display:none}
.modal label {
    display: block;
    font-weight: 500;
}

.modal {
    background: #f8f8f9;
    padding: 20px;
    border-radius: 10px;
    color: #314f63;
    width: 320px;
    box-shadow: 0 0 20px rgba(0,0,0,.4);
    border: 1px solid #456882;
}
.modal h3 {
    margin-top: 0;
    text-transform: uppercase;
    text-align: center;
    color: #1b3c53;
    font-weight: 500;
    font-size: 1.3rem;
}

.modal input, .modal select {
    width: 100%;
    padding: 6px;
    border-radius: 6px;
    border: none;
    margin-top: 4px;
    border: 1px solid #456882;
}

.modal .actions{display:flex;justify-content:space-between;margin-top:16px}
.modal button{
  background:transparent;
  border:1px solid #103953;
  color:#103953;
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer
}

#quizBox  {
    position: relative;
    max-height: 230px;
    overflow-y: scroll;
}
#coverInput{
    background-color: transparent;
    padding: 0;
    border-radius: 4px;
    color: #103953;
    border: none;
}
#coverInput::file-selector-button{
    border: none;
    border-radius: 4px;
    color: #103953;
    background-color: transparent;
    border: 1px solid #103953;
    height: 40px;
    cursor: pointer;
    transition: all .25s ease-in;
    cursor: pointer;
}
#coverInput::file-selector-button:hover{
    background-color: #fff;
    color: #565A90;
    transition: all .25s ease-in;
}

.cover-thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;margin-bottom:6px;display:block}

#priceInput {
    color: #fff;
    background-color: #456882;
    min-height: 45px;
    border: none;
}

  .btn.danger {
    background: #b33;
  }
  .btn.danger:hover {
    background: #d44;
  }



/* Responsive */
@media (max-width: 1080px) {
  .viewer-3col {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .left-col, .right-col { max-height:40vh; }
}

#epubContainer { 
  width:100%; 
  height:100%; 
  display:block; 
  background-color: #fff;
}

:root{
  --bg:#F2EEE7; --card:#131923; --text:#e8eef9; --muted:#8fa3bf;
  --primary:#5aa6ff; --border:#1e293b; --accent:#6ab0ff;
  --topbar-h:56px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;}
a{color:var(--primary);text-decoration:none;} a:hover{text-decoration:underline;}
.hide{display:none!important;}
.muted{color:var(--muted);}
.row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.vstack{display:flex;flex-direction:column;}
.hstack{display:flex;align-items:center;}
.gap{gap:.5rem;}
.sep{width:1px;height:20px;background:var(--border);display:inline-block;margin:0 .5rem;}

body{display:flex;flex-direction:column;min-height:100vh;}

.btn{background:#182131;color:#e6f0ff;border:1px solid var(--border);padding:.45rem .7rem;border-radius:.6rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;}
.btn:hover{background:#1b2333;}
.btn.primary{background:var(--primary);color:#081321;border-color:#5aa6ff;}
.btn.primary:hover{filter:brightness(1.05);}
.input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea{width:100%;padding:.55rem .6rem;border:1px solid var(--border);border-radius:.55rem;background:#0e1522;color:var(--text);}

.topbar{display:flex;align-items:center;gap:.75rem;padding:0 .9rem;height:var(--topbar-h);border-bottom:1px solid var(--border);background:rgba(19,25,35,.85);backdrop-filter:blur(6px);position:sticky;top:0;flex:0 0 var(--topbar-h);}
.topbar .brand{font-weight:700;}
.topbar .spacer{flex:1;}

.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;}
.menu-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background:#0e1522;border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .2s ease;z-index:90;display:flex;flex-direction:column;}
.menu-drawer.open{transform:translateX(0);}
.menu-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem;border-bottom:1px solid var(--border);}
.menu-body{padding:.8rem;display:flex;flex-direction:column;gap:.5rem;}

.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;min-height:0;}
.login-card{width:340px;background:var(--card);border:1px solid var(--border);border-radius:.85rem;padding:1rem;box-shadow:0 10px 24px rgba(0,0,0,.25);}
.login-card h1{margin:.2rem 0 1rem;}

.viewer-3col{    padding: 5rem 0px 0;flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr) 420px;gap:14px; align-items:stretch;}
.left-col,.right-col{display:grid;gap:14px;grid-auto-rows:minmax(120px,auto);overflow:auto;min-height:0;}
.center-col{display:flex;flex-direction:column;min-height:0;}
.card{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:12px;min-height:0;}
.card h3{margin:.1rem 0 .6rem;}
.toolbar{padding:.4rem .6rem;flex:0 0 auto;}

/* Altura explícita para el contenedor del visor (clave para EPUB) */
.viewer-main{
  position:relative;margin-top:10px;
  flex:1 1 auto;min-height:0;overflow:hidden;display:flex;
  height:calc(100vh - var(--topbar-h) - 28px); /* fuerza altura útil */
}

/* Los 3 elementos llenan el espacio cuando están visibles */

#pdfFrame{width:100%;height:100%;border:0;display:block;flex:1 1 auto;}
#epubContainer{width:100%;height:100%;display:block;flex:1 1 auto;min-height:240px;}

.doc{padding:.5rem;border-radius:.55rem;}
.doc strong{display:block;}
.doc .muted{font-size:12px;}

.answer{white-space:pre-wrap;padding:.5rem .6rem;border-radius:.55rem;max-height:245px;overflow:auto;min-height:44px;}

.quiz-box .quiz-q{border:1px solid var(--border);border-radius:.55rem;padding:.5rem .6rem;background:#0e1522;margin-bottom:.5rem;}
.quiz-q .qtext{font-weight:600;margin-bottom:.35rem;}
.quiz-q .opt{display:block;margin:.2rem 0;}
.mt8{margin-top:8px;}

@media (max-width:1080px){
  .viewer-3col{grid-template-columns:1fr;grid-auto-rows:auto;}
  .left-col,.right-col{max-height:40vh;}
  .viewer-main{height:calc(100vh - var(--topbar-h) - 28px);} /* mantiene 100% en mobile */
}

/* === Barra de progreso === */
.progress-wrap {
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translate(-50%, -50%); */
    width: 100%;
    text-align: center;
    z-index: 10;
    background-color: #131923;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.progress-bar {
  height: 8px;
  background: var(--primary);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s ease;
}
#progressLabel {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 13px;
}


#progressLabel {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 13px;
}
.viewer-main {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 80vh;
}
#pdfCanvas, #epubContainer {
  width: 100%;
  height: 100%;
  display: block;
}

#navBar {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(19,25,35,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 12px;
  z-index: 999;
}

#readProgress {
  flex: 1;
  height: 6px;
  background: #1a2433;
  border-radius: 6px;
  overflow: hidden;
  width: 160px;
}
#readBar {
  width: 0%;
  height: 100%;
  background: var(--primary);
  transition: width .25s ease;
}
#pageInfo {
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}

#viewerContainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  position: relative;
}

#pdfCanvas {
  background: #0b0f14;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  margin: 20px auto;
  display: block;
  image-rendering: optimizeQuality;
  transition: transform 0.1s ease-out;
}

#zoomPanel {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(20,25,35,0.9);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  gap: 5px;
  z-index: 100;
  border: 1px solid var(--border);
}
.textLayer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  line-height: 1;
  color: transparent;
  z-index: 10;
  user-select: text;
  mix-blend-mode: normal;
}

.textLayer span {
  position: absolute;
  white-space: pre;
  transform-origin: 0 0;
  user-select: text;
  pointer-events: auto;
  color: transparent;
}


.textLayer span::selection {
  background: rgba(0, 100, 255, 0.3);
}
.textLayer {
  color: transparent;
  user-select: text;
}

#selectionTooltip {
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}
#selectionTooltip.show {
  opacity: 1;
  transform: translateY(0);
}
#selectionTooltip.hide {
  opacity: 0;
  transform: translateY(-5px);
}

/* ───────────────────────────────
📋 Sidebar fijo lateral mejorado
─────────────────────────────────*/
.side-panel {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 260px;
  background: #111;
  color: #fff;
  padding: 20px;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.5);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 10000; /* Por encima del visor */
  overflow-y: auto;
  border-right: 1px solid #222;
}

.side-panel:not(.hide) {
  transform: translateX(0);
}

.side-panel h3 {
  margin-top: 0;
  font-size: 18px;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.side-panel .btn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 5px 0;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}

.side-panel .btn:hover {
  background: #333;
}

.side-panel hr {
  border: none;
  border-top: 1px solid #333;
  margin: 12px 0;
}

.side-panel .btn.close {
    position: relative;
    top: 0;
    right: 0;
    background: none;
    color: #aaa;
    font-size: 18px;
    padding: 0;
    border: none;
    text-align: right;
}

.side-panel .btn.close:hover {
  color: #fff;
}

.side-panel .btn.danger {
  background: #b33;
}
.side-panel .btn.danger:hover {
  background: #d44;
}
#navBar{
  display: none;
}

#menuBtn {
visibility: hidden;
}
/* ====== LAYOUT GENERAL ====== */

.app-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 360px; /* izq - centro - der */
  height: calc(100vh - 64px); /* 64px = altura de la topbar, ajusta si es otra */
}

/* ====== COLUMNA IZQUIERDA ====== */

.left-col {
  position: relative;
          /* fondo oscuro tipo sidebar */
  border-right: 1px solid rgba(148, 163, 184, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;                            /* no se sale nada del aside */
}

/* Contenido interno con scroll propio */
.left-col .wrap-user {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto; 
  height: 100%;                           /* scroll interno */
}

/* Tarjetas internas (Biblioteca / Tienda) */
.left-col .card {
  background: #1b3c53;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.5);
}

#btnGenerateQuiz, #btnUpload{

    background: #1b3c53;
    color: #fff;
  }
/* Que la lista de biblioteca / tienda no haga gigante la columna */
#library, #store {
    margin-top: 0px;
    min-height: 20vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Botón flotante para contraer la izquierda */
.col-toggle-btn.col-toggle-left {
  position: absolute;
  right: -12px;
  z-index: 10;
}

/* ====== COLUMNA CENTRAL (LECTOR) ====== */

.reader-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  overflow: hidden;
}

/* “Tarjeta” donde vive el libro (EPUB/PDF) */
.reader-shell {
  flex: 1 1 auto;
  width: 100%;
  max-width: 900px;                             /* ancho máximo del libro */
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  background: #ffffff;
  overflow: hidden;                             /* el libro no se sale */
  display: flex;
}

/* Contenedor real donde se renderiza el libro */
#epubContainer,
#pdfContainer {
  flex: 1 1 auto;
  height: 100%;                                 /* ajusta al tamaño de la tarjeta */
}

/* Barra de controles debajo del libro */
.reader-controls {
  width: 100%;
  max-width: 900px;
  margin-top: 10px;
}

/* ====== COLUMNA DERECHA ====== */

.right-col {
    border-left: 1px solid rgba(148, 163, 184, 0.5);
    background: #ffffff78;
    padding: 12px;
    overflow-y: auto;
}

#rightCol .card {
    background-color: #fff;
    box-shadow: 0px 0px 5px #456882;
    border: none;
    color: #1b3c53;
    font-weight: 500;
    height: 42vh;
}

#rightCol .card p {
text-transform: uppercase;
    margin-top: 0.5rem;
}

/* ====== RESPONSIVE ====== */

/* Medio: ocultamos derecha y le damos más aire al lector */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .right-col {
    display: none;
  }
}

/* Móvil: el lector ocupa toda la pantalla, la izquierda funciona como panel lateral */
@media (max-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .left-col {
    position: absolute;
    top: 64px;                                   /* altura del header */
    left: 0;
    width: 260px;
    height: calc(100vh - 64px);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
  }

  .left-col.is-open {
    transform: translateX(0);
  }

  .reader-column {
    padding: 8px;
  }

  .reader-shell,
  .reader-controls {
    max-width: 100%;
  }
}

/* 📚 Carrusel de tienda dentro de la card de #store */
.store-carousel {
    /* background: #0f2940; */
    /* border-radius: 16px; */
    /* padding: 10px 10px 14px; */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* gap: 8px; */
}

/* ventana del slide */
.store-carousel-viewport {
    width: 100%;
    height: 80px;
    border-radius: 0;
    overflow: hidden;
    /* background: #0b1f33; */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* track deslizante */
.store-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}

/* cada slide ocupa todo el ancho */
.store-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-slide img {
  max-height: 140px;
  max-width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* info del libro */
.store-carousel-info {
  text-align: center;
  padding: 2px 4px 0;
}

.store-carousel-title {
  font-size: 12px;
  font-weight: 600;
  color: #f9fafb;
  line-height: 1.25;
  max-height: 2.6em;        /* ~2 líneas */
  overflow: hidden;

  white-space: nowrap; /* Prevents text from wrapping to the next line */
  overflow: hidden; /* Hides any content that overflows the container */
  text-overflow: ellipsis; /* Displays an ellipsis when text is truncated */
  width: 200px; /* Or any defined width to establish the truncation point */


}

.store-carousel-meta {
  font-size: 12px;
  color: #e5e7eb;
  opacity: 0.85;
  margin-top: 2px;
}

/* dots */
.store-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 6px;
}

.store-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: #cbd5f5;
  opacity: 0.3;
  cursor: pointer;
  padding: 0;
}

.store-dot.active {
  opacity: 0.95;
  width: 18px;
}

/* botón tienda estilo "TIENDA EN LÍNEA" */
.btn.store-cta, #btnViewAllLibrary {
  width: 100%;
  justify-content: center;
  font-weight: 500;
  background: #facc15;
  color: #111827;
  border-radius: 5px;
  margin-top: 2px;
  border: none;
  text-transform: uppercase;
  font-size: 1rem !important;
}
.btn.store-cta:hover {
  background: #fbbf24;
}
.toolbar.row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Botón pegado al lado derecho */
.toolbar.row #btnUpload {
  margin-left: auto;
}

/* Nombre del libro centrado */
.toolbar.row #fileInfo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}


.topbar {
    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;
    height: 55px;
    background: #103953;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    color: #f9fafb;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-logo {
    width: 160px;
    height: 80px;
    border-radius: 0 45px 45px;
    object-fit: contain;
    background: #ffffff;
    padding: 14px 17px 13px 45px;
    left: -59px;
    position: relative;
}

.topbar-brand {
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    position: relative;
    left: -40px;
}

.icon-btn {
    width: 35px;
    height: 35px;
    border-radius: 999px;
    border: 0px solid rgba(248, 250, 252, 0.4);
    background: #446882;
    color: #ebff00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
}