/* App chrome around the book: top bar, index, editor. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #2b221a; color: #f3e9d2; font: 15px/1.4 "Alegreya Sans", system-ui, sans-serif; }
button, select, input, textarea { font: inherit; }

.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #1b140e; border-bottom: 2px solid #b08432;
}
.barra .marca { display: flex; align-items: center; gap: 10px; margin-right: auto; color: #f3e9d2; text-decoration: none; }
.barra .marca img { height: 30px; }
.barra .marca b { font: 700 18px "Cinzel", serif; letter-spacing: .03em; }
.barra .marca small { color: #d9b86a; font: 500 13px "Alegreya Sans SC", sans-serif; letter-spacing: .08em; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid #6e5431; background: #3a2b1d; color: #f3e9d2; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #4b3825; border-color: #b08432; }
.btn.primario { background: #7a2414; border-color: #b08432; }
.btn.primario:hover { background: #922b18; }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------- viewer */
.visor { display: flex; }
.indice {
  position: sticky; top: 50px; height: calc(100vh - 50px); overflow: auto; width: 270px; flex: none;
  padding: 14px 10px 30px 16px; background: #221a13; border-right: 1px solid #4a3822;
}
.indice h4 { margin: 4px 0 10px; font: 700 13px "Alegreya Sans SC", sans-serif; letter-spacing: .1em; color: #d9b86a; }
.indice a { display: block; color: #f3e9d2; text-decoration: none; padding: 3px 6px; border-radius: 4px; }
.indice a:hover { background: #3a2b1d; }
.indice a.cap { font: 700 15px "Cinzel", serif; margin-top: 8px; }
.indice a.sec { font-size: 14px; padding-left: 18px; color: #d8c9a8; }
.libro-marco { flex: 1; overflow: auto; }
.escala { margin: 0 auto; }
.libro { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 22px 0; padding: 26px 0 60px; box-sizing: border-box; }
.libro.doble section.pagina:not(.par) { margin-left: 22px; }
.libro section.pagina { box-shadow: 0 6px 26px rgba(0,0,0,.55); }
.libro.doble { gap: 26px 0; }
.cargando { padding: 60px; text-align: center; color: #d9b86a; font-family: "Cinzel", serif; }

/* overflow warning (editor preview + viewer) */
section.pagina.desborda { outline: 3px solid #d33; }
section.pagina.desborda::after {
  content: "⚠ El texto no cabe en esta página: añade un salto de página (\\pagina) antes o recorta";
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: #d33; color: #fff;
  font: 700 12px "Alegreya Sans", sans-serif; z-index: 5; height: auto;
}

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; place-items: center;
  background: #1b130b url("/media/sistema/login.jpg") center / cover no-repeat; }
.login form {
  width: min(380px, 92vw); padding: 26px 28px; background: rgba(27,20,14,.92); border: 2px solid #b08432;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.6); text-align: center;
}
.login h1 { margin: 6px 0 2px; font: 900 26px "Cinzel", serif; }
.login p { margin: 0 0 18px; color: #d9b86a; font-family: "Alegreya Sans SC", sans-serif; letter-spacing: .08em; }
.login input { width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 6px; border: 1px solid #6e5431; background: #f6eedb; color: #22170e; }
.login button { width: 100%; margin-top: 10px; padding: 10px; }
.login .error { color: #ff8a70; min-height: 1.4em; margin: 8px 0 0; font-family: inherit; letter-spacing: 0; }

/* ---------------------------------------------------------------- editor */
body.pagina-editor { overflow: hidden; }
.editor { display: grid; grid-template-columns: 230px minmax(360px, 1fr) minmax(300px, 1fr); height: calc(100vh - 50px); }
.capitulos { overflow: auto; background: #221a13; border-right: 1px solid #4a3822; padding: 10px; }
.capitulos .item { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.capitulos .item:hover { background: #3a2b1d; }
.capitulos .item.activo { background: #5a2215; }
.capitulos .item span { flex: 1; }
.capitulos .item small { color: #b9a47c; }
.capitulos .item .mov { visibility: hidden; background: none; border: 0; color: #d9b86a; cursor: pointer; padding: 0 2px; }
.capitulos .item:hover .mov { visibility: visible; }
.capitulos .nuevo { margin-top: 10px; width: 100%; justify-content: center; }
.capitulos .sucio::after { content: " ●"; color: #e3a33a; }

.editor > * { min-height: 0; }
.centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid #4a3822; }
.meta { display: flex; gap: 6px; padding: 8px; background: #2b221a; align-items: center; flex-wrap: wrap; }
.meta input.titulo { flex: 1; min-width: 160px; padding: 6px 10px; border-radius: 6px; border: 1px solid #6e5431; background: #f6eedb; color: #22170e; font: 700 16px "Cinzel", serif; }
.meta .estado { color: #b9a47c; font-size: 13px; }
.herramientas { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; background: #231b14; border-top: 1px solid #4a3822; border-bottom: 1px solid #4a3822; }
.herramientas .btn { padding: 4px 8px; font-size: 13.5px; }
.herramientas .sep { width: 1px; background: #4a3822; margin: 0 4px; }
.cm-host { flex: 1; min-height: 0; overflow: hidden; background: #fbf6ea; }
.cm-host .cm-editor { height: 100%; font-size: 14.5px; }
.cm-host .cm-scroller { overflow: auto; }
.cm-host .cm-scroller { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; line-height: 1.55; }
.cm-host .cm-content { color: #22170e; }
.cm-host .cm-gutters { background: #efe2c3; border-right: 1px solid #d8c59a; color: #9a8255; }

.vista { overflow: auto; background: #3a2e22; position: relative; }
.vista .libro { padding: 18px 0 40px; gap: 18px 0; }
.vista .aviso-desborda { position: sticky; top: 0; z-index: 3; padding: 6px 10px; background: #d33; color: #fff; font-weight: 700; display: none; cursor: pointer; }

/* ---------------------------------------------------------------- dialogs */
dialog { border: 2px solid #b08432; border-radius: 10px; background: #221a13; color: #f3e9d2; padding: 0; max-width: 92vw; }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #1b140e; border-bottom: 1px solid #4a3822; }
dialog header h3 { margin: 0; flex: 1; font: 700 17px "Cinzel", serif; }
dialog .cuerpo { padding: 14px; max-height: 72vh; overflow: auto; }
dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #4a3822; }
dialog .ayuda { color: #b9a47c; font-size: 13.5px; margin: 0 0 10px; }

/* table editor */
.rejilla { border-collapse: collapse; }
.rejilla td { border: 1px solid #6e5431; padding: 0; }
.rejilla td input { width: 140px; padding: 5px 7px; border: 0; background: #f6eedb; color: #22170e; }
.rejilla tr:first-child td input { background: #e3cf9f; font-weight: 700; }
.rejilla .ctl { border: 0; background: none; }
.rejilla .ctl button { background: none; border: 0; color: #d9b86a; cursor: pointer; font-size: 15px; padding: 2px 6px; }

/* gallery */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; min-width: min(760px, 88vw); }
.galeria figure { margin: 0; cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 4px; background: #2e241a; }
.galeria figure:hover { border-color: #b08432; }
.galeria img { width: 100%; height: 110px; object-fit: contain; background: repeating-conic-gradient(#3a2e22 0 25%, #2e241a 0 50%) 0 0 / 14px 14px; }
.galeria figcaption { font-size: 11.5px; color: #b9a47c; word-break: break-all; }
.opciones-img { display: flex; gap: 10px; align-items: center; margin: 10px 0 0; flex-wrap: wrap; }

/* history */
.historial { min-width: min(640px, 88vw); }
.historial .v { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #3a2b1d; }
.historial .v span { flex: 1; }
.historial .v small { color: #b9a47c; }

/* help cheat-sheet */
.chuleta { min-width: min(720px, 88vw); }
.chuleta pre { background: #f6eedb; color: #22170e; padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; margin: 4px 0 12px; }

/* ---------------------------------------------------------------- v2: icon toolbar & dialogs */
.btn svg { flex: none; }
.btn.icono { padding: 6px 7px; }
.btn.activo { background: #6a4f22; border-color: #d9b86a; }
.btn.peligro:hover { background: #7a2414; }
.btn.interna { background: #5b4a12; border-color: #b8960f; }
.btn.interna:hover { background: #6d5a17; }
.herramientas { gap: 6px; align-items: center; }
.herramientas .grupo { display: flex; gap: 3px; padding-right: 7px; border-right: 1px solid #4a3822; }
.herramientas .grupo:last-child { border-right: 0; }
.herramientas .btn { padding: 4px 8px; font-size: 13.5px; }
.herramientas .btn.icono { padding: 4px 6px; }
.herramientas .glifos svg.glifo { height: 13px; width: auto; color: #f3e9d2; }
.meta input.nota { flex: 1; padding: 6px 10px; border-radius: 6px; border: 1px solid #6e5431; background: #f6eedb; color: #22170e; }
.indice a { display: flex; justify-content: space-between; gap: 8px; }
.indice a small { color: #9c8662; font: 12px "Alegreya Sans", sans-serif; }
.cargando { width: 100%; }

.pdf { min-width: min(560px, 90vw); }
.pdf .preset { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.pdf .preset select { flex: 1; padding: 6px; }
.pdf .opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 12px; }
.pdf h4 { margin: 8px 0 6px; font: 700 13px "Alegreya Sans SC", sans-serif; letter-spacing: .08em; color: #d9b86a; }
.capitulos-pdf { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-bottom: 10px; }
label { cursor: pointer; }

/* ---------------------------------------------------------------- media manager */
.medios { display: grid; grid-template-columns: 220px 1fr; height: calc(100vh - 50px); }
.medios aside { background: #221a13; border-right: 1px solid #4a3822; padding: 12px; overflow: auto; }
.medios aside button { display: flex; justify-content: space-between; width: 100%; margin: 2px 0; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: #f3e9d2; cursor: pointer; text-align: left; }
.medios aside button:hover { background: #3a2b1d; }
.medios aside button.activo { background: #5a2215; }
.medios aside button small { color: #b9a47c; }
.medios main { overflow: auto; padding: 14px 18px; }
.medios .cabecera { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.medios .cabecera input[type=search] { flex: 1; min-width: 180px; padding: 7px 10px; border-radius: 6px; border: 1px solid #6e5431; background: #f6eedb; color: #22170e; }
.medios .rejilla-medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.medios .item { background: #2e241a; border: 1px solid #4a3822; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.medios .item .img { height: 150px; display: grid; place-items: center; background: repeating-conic-gradient(#3a2e22 0 25%, #2e241a 0 50%) 0 0 / 16px 16px; }
.medios .item img { max-width: 100%; max-height: 150px; object-fit: contain; }
.medios .item .datos { padding: 7px 9px; font-size: 13px; }
.medios .item .datos b { display: block; word-break: break-all; font-weight: 600; }
.medios .item .datos small { color: #b9a47c; }
.medios .item .usos { color: #d9b86a; font-size: 12px; margin-top: 3px; }
.medios .item .acciones { display: flex; gap: 4px; padding: 0 8px 8px; }
.medios .item .acciones .btn { padding: 4px 7px; font-size: 12.5px; }
.medios .soltar { border: 2px dashed #6e5431; border-radius: 8px; padding: 14px; text-align: center; color: #b9a47c; margin-bottom: 14px; }
.medios .soltar.encima { border-color: #d9b86a; background: #3a2b1d; }

/* narrow screens: index becomes a drawer */
.btn.menu { display: none; }
@media (max-width: 900px) {
  .btn.menu { display: inline-flex; }
  .barra .marca small, .barra .btn .txt { display: none; }
  .indice { position: fixed; left: 0; top: 50px; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: 4px 0 20px rgba(0,0,0,.5); }
  .indice.abierto { transform: none; }
}

/* ---------------------------------------------------------------- v3: fixed header, zoom, tooltips */
body.pantalla-libro { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.pantalla-libro .barra { position: relative; flex: none; }
body.pantalla-libro .visor { flex: 1; min-height: 0; }
body.pantalla-libro .indice { position: relative; top: 0; height: auto; }
body.pantalla-libro .libro-marco { height: 100%; overflow: auto; }
.zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #4a3822; border-radius: 8px; background: #241a12; }
.zoom .btn { border-color: transparent; background: none; }
.zoom .btn:hover { background: #3a2b1d; }
.zoom .valor { min-width: 74px; justify-content: center; font-variant-numeric: tabular-nums; font-size: 13.5px; }

.tooltip {
  position: fixed; z-index: 1000; max-width: 280px; padding: 5px 9px; border-radius: 6px; pointer-events: none;
  background: #f6eedb; color: #22170e; font: 13px/1.3 "Alegreya Sans", sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.45);
  border: 1px solid #b08432; opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s;
}
.tooltip.visible { opacity: 1; transform: none; }
@media print {
  body.pantalla-libro, body.pantalla-libro .visor, body.pantalla-libro .libro-marco {
    height: auto !important; overflow: visible !important; display: block !important;
  }
  .tooltip { display: none !important; }
}

/* two-page view: an invisible left half so page 1 (the cover) sits alone on the right */
.espaciador { display: none; }
.libro.doble > .espaciador { display: block; flex: none; width: 210mm; height: 1px; visibility: hidden; }
@media print { .espaciador { display: none !important; } }