/* ============================================================
   NEO • MULTIMÍDIA — ESTILO “MEUS LIVROS” (v3.2 FINAL)
   ============================================================ */

/* Container do módulo (escopo isolado) */
#livros-root { display:block; }

/* ------------------------------------------------------------
   TOOLBAR LOCAL
------------------------------------------------------------ */
#livros-root .local-menu {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 0 0 .6rem 0;
  gap:.5rem;
  flex-wrap:wrap;
}

/* ------------------------------------------------------------
   BREADCRUMB + CONTADOR UNIFICADO
------------------------------------------------------------ */
#livros-root .breadcrumb {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  margin:0.4rem 1rem 0.6rem;
  font-size:0.9rem;
  color:dodgerblue;
  gap:0.4rem;
  text-align:right;
}

#livros-root .breadcrumb span {
  cursor:pointer;
  transition:color 0.2s ease;
}

/* Pasta atual com destaque metálico */
#livros-root .breadcrumb .current-folder {
  color:#ffcc40;
  font-weight:600;
  text-shadow:0 0 6px rgba(255,220,100,0.4);
}

/* Hover somente nas clicáveis */
#livros-root .breadcrumb span:not(.current-folder):hover {
  text-decoration:underline;
  color:#1e90ff;
}

/* Remove contador antigo */
#livros-root .counter {
  display:none !important;
}

/* ------------------------------------------------------------
   PROGRESSO DE UPLOAD
------------------------------------------------------------ */
#livros-root .progress-bar {
  width:calc(100% - 2rem);
  height:6px;
  margin: .2rem 1rem 1rem;
  background:rgba(255,255,255,0.1);
  border-radius:4px;
  overflow:hidden;
}
#livros-root .progress-fill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg, dodgerblue, royalblue);
  transition:width .2s ease;
}
.hidden { display:none !important; }

/* ------------------------------------------------------------
   GRID / LISTA
------------------------------------------------------------ */
#livros-root.mode-grid .grid--collection {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
  padding:1rem;
}
#livros-root.mode-list .grid--collection {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:stretch;
  padding:0 1rem 1rem;
}

/* ------------------------------------------------------------
   LISTA — ESTILO DE CARD
------------------------------------------------------------ */
#livros-root.mode-list .card {
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
  background:rgba(20,20,20,.85);
  border-radius:8px;
  overflow:hidden;
  transition:background .4s;
}
#livros-root.mode-list .card:hover {
  background:rgba(40,40,40,.85);
}
#livros-root.mode-list .card__media {
  width:60px;
  height:60px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(255,255,255,0.08);
}
#livros-root.mode-list .card__media i {
  font-size:1.5rem;
}
#livros-root.mode-list .card__body {
  flex:1;
  padding:.5rem 1rem;
  text-align:left;
}

/* ------------------------------------------------------------
   THUMB PDF
------------------------------------------------------------ */
.pdf-thumb {
  font-size:4rem;
  color:#e04b4b;
  display:flex;
  align-items:center;
  justify-content:center;
  height:140px;
}
.pdf-thumb i { filter: drop-shadow(0 0 5px rgba(255,255,255,.3)); }

/* ------------------------------------------------------------
   MODAL LEITOR PDF
------------------------------------------------------------ */
.pdf-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
  animation:fadeIn .3s ease;
}
.pdf-modal {
  width:90%;
  height:90%;
  background:#111;
  border-radius:10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 30px rgba(0,0,0,.7);
}
.pdf-header {
  background:#222;
  padding:.5rem 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pdf-header .pdf-title {
  font-weight:600;
  font-size:1rem;
  color:#fff;
}
.pdf-controls {
  display:flex;
  align-items:center;
  gap:.4rem;
}
.pdf-canvas {
  flex:0 0 auto;        /* o tamanho vem do width/height que o JS define */
  background:#000;
  display:block;
  margin:0 auto;        /* centraliza horizontalmente */
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ------------------------------------------------------------
   DIFERENCIAÇÃO VISUAL — PASTAS / ARQUIVOS
------------------------------------------------------------ */

/* ======== PASTAS ======== */
#livros-root .card.folder {
  background:linear-gradient(180deg, rgba(255,215,0,0.10), rgba(120,100,0,0.08));
  border:1px solid rgba(255,215,0,0.25);
  border-radius:10px;
  position:relative;
  overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
#livros-root .card.folder:hover {
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(255,215,0,0.35);
}
#livros-root .card.folder i {
  color:#ffcc40;
  font-size:3.8rem;
  filter:drop-shadow(0 0 4px rgba(255,220,100,0.5));
}
#livros-root .card.folder::after {
  content:"PASTA";
  position:absolute;
  bottom:6px;
  right:6px;
  background:rgba(255,215,0,0.15);
  color:#ffec8b;
  font-size:0.65rem;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.5px;
  font-weight:600;
}

/* ======== ARQUIVOS ======== */
#livros-root .card.file {
  background:linear-gradient(180deg, rgba(100,0,0,0.25), rgba(50,0,0,0.15));
  border:1px solid rgba(255,80,80,0.25);
  border-radius:6px;
  position:relative;
  overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
#livros-root .card.file:hover {
  transform:scale(1.03);
  box-shadow:0 0 16px rgba(255,80,80,0.35);
}
#livros-root .card.file i {
  color:#ff5555;
  font-size:3.2rem;
  filter:drop-shadow(0 0 3px rgba(255,120,120,0.4));
}
#livros-root .card.file::after {
  content:"PDF";
  position:absolute;
  bottom:6px;
  right:6px;
  background:rgba(255,80,80,0.15);
  color:#ff9b9b;
  font-size:0.65rem;
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:0.5px;
  font-weight:600;
}

/* ------------------------------------------------------------
   MODO COMPACTO AUTOMÁTICO — GRID / LISTA
------------------------------------------------------------ */

/* GRID */
#livros-root.mode-grid .grid--collection {
  gap:1rem;
  padding:0.5rem;
}
#livros-root.mode-grid .card {
  width:170px;
  border-radius:8px;
}
#livros-root.mode-grid .card__media {
  height:110px;
}
#livros-root.mode-grid .card i {
  font-size:2.6rem !important;
}

/* LISTA */
#livros-root.mode-list .grid--collection {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:0.4rem;
  padding:0.5rem 1rem 1rem;
}
#livros-root.mode-list .card {
  height:55px;
  border-radius:6px;
  background:rgba(25,25,25,0.55);
  border:1px solid rgba(255,255,255,0.05);
  transition:background 0.2s ease, transform 0.2s ease;
}
#livros-root.mode-list .card:hover {
  background:rgba(40,40,40,0.65);
  transform:translateY(-1px);
}
#livros-root.mode-list .card__media {
  width:42px;
  height:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  margin-left:6px;
}
#livros-root.mode-list .card__media i { font-size:1.1rem; }
#livros-root.mode-list .card__body {
  flex:1;
  padding:0.3rem 0.6rem;
  text-align:left;
}
#livros-root.mode-list .card__title {
  font-size:0.88rem;
  font-weight:600;
  color:#e8e8e8;
}

/* ------------------------------------------------------------
   MENU ⋮ DE AÇÃO
------------------------------------------------------------ */
#livros-root .card-menu {
  position:absolute;
  top:6px;
  right:6px;
  z-index:10;
}
#livros-root .menu-btn {
  background:transparent;
  border:none;
  font-size:16px;
  color:#eee;
  cursor:pointer;
  transition:transform 0.2s, color 0.2s;
}
#livros-root .menu-btn:hover {
  color:gold;
  transform:scale(1.2);
}
.livros-floating-menu {
  background:rgba(20,20,20,0.95);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.8);
  overflow:hidden;
}
.livros-floating-menu button {
  background:transparent;
  color:#ddd;
  border:none;
  padding:8px 12px;
  text-align:left;
  width:100%;
  cursor:pointer;
  font-size:13px;
}
.livros-floating-menu button:hover {
  background:rgba(255,255,255,0.08);
  color:#fff;
}