/* ===========================================================
   LOOP BY ARTIVA LATAM — libreria.css
   Estilos EXCLUSIVOS de las páginas de Librería (hub + las 5
   páginas de categoría + single-recurso.php). Se carga solo ahí
   — ver la condición en loop_theme_assets() (functions.php).
   Todo color usa las variables de style.css — nada hardcodeado.
   =========================================================== */

/* ============ lista desplegable (expresiones) ============ */
.expr-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:26px;
}

.expr-item{
  background:var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  border:1.5px solid var(--ink);
  transition:border-color .2s ease, transform .2s ease;
  opacity:0;
  transform:translateY(8px);
  animation:rise .4s ease forwards;
}
.expr-item:hover{ border-color:var(--lime); }
.expr-item:nth-child(1){ animation-delay:.02s; }
.expr-item:nth-child(2){ animation-delay:.08s; }
.expr-item:nth-child(3){ animation-delay:.14s; }
.expr-item:nth-child(4){ animation-delay:.20s; }
.expr-item:nth-child(5){ animation-delay:.26s; }

.expr-item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition:background-color .15s ease;
}
.expr-item summary::-webkit-details-marker{ display:none; }
.expr-item summary:hover{ background-color:rgba(247,244,238,0.05); }

.expr-item summary .expr-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.expr-item .badge{
  border-color:var(--paper);
  color:var(--paper);
  align-self:flex-start;
}
.expr-item h3{
  color:var(--paper);
  font-size:17px;
}
.expr-item summary p{
  color:var(--violet-soft);
  font-size:13px;
  margin:0;
}

.expr-item .chevron{
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(247,244,238,0.3);
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  transition:transform .25s ease, background-color .2s ease, color .2s ease;
}
.expr-item[open] .chevron{
  transform:rotate(180deg);
  background-color:var(--lime);
  color:var(--ink);
  border-color:var(--lime);
}

.expr-item .code-box{
  margin:0 22px 22px;
  animation:rise .25s ease;
}

.code-box{
  position:relative;
  background:var(--code-bg);
  border-radius:14px;
  padding:16px 44px 16px 16px;
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  color:var(--lime-soft);
  white-space:pre;
  overflow-x:auto;
}
/* <pre> trae por defecto margin y font-family propios del navegador —
   sin este reset, cambiar de <span> a <pre> (más robusto frente a
   minificadores de HTML que no saben que un <span> con white-space:pre
   también necesita conservar los espacios tal cual) reintroduciría
   espacio extra, justo lo contrario de lo que se buscaba. */
.code-text{ margin:0; padding:0; font:inherit; color:inherit; }

/* La card "Guía" (fondo claro) puede vivir dentro de .expr-item (fondo
   oscuro) — sin esto, hereda el h3/badge en blanco pensados para el
   texto sobre negro, y quedaría casi invisible sobre su propio fondo
   claro. */
.expr-item .note h3{ color:var(--ink); }
.expr-item .note .badge{ color:var(--ink); border-color:var(--ink); }
.expr-item .note p{ color:var(--ink-soft); font-size:13px; }

.copy-btn{
  position:absolute;
  top:10px; right:10px;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid rgba(247,244,238,0.25);
  background:rgba(247,244,238,0.06);
  color:var(--paper);
  font-size:12px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, transform .15s ease;
}
.copy-btn:hover{ background:rgba(247,244,238,0.18); transform:translateY(-1px); }
.copy-btn.copied{ background:var(--lime); color:var(--ink); border-color:var(--lime); }

/* ============ tarjeta con demo en video (plugins, scripts, presets, LUTs) ============ */
.demo-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  border:1.5px solid var(--ink);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .18s ease, border-color .18s ease;
  opacity:0;
  transform:translateY(8px);
  animation:rise .4s ease forwards;
}
.demo-card:hover{ transform:translateY(-4px); border-color:var(--violet); }
.demo-card:nth-child(1){ animation-delay:.02s; }
.demo-card:nth-child(2){ animation-delay:.08s; }
.demo-card:nth-child(3){ animation-delay:.14s; }
.demo-card:nth-child(4){ animation-delay:.20s; }
.demo-card:nth-child(5){ animation-delay:.26s; }
.demo-card:nth-child(6){ animation-delay:.32s; }

.demo-video{
  aspect-ratio:16/10;
  border-radius:14px;
  background:var(--violet-soft);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  color:var(--ink-soft);
  font-size:12px;
  overflow:hidden;
  transition:background-color .2s ease;
}
.demo-card:hover .demo-video{ background:var(--lime-soft); }
.demo-video .play{
  position:absolute;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transition:transform .2s ease;
}
.demo-card:hover .demo-video .play{ transform:scale(1.08); }

/* video real (YouTube/Vimeo vía oEmbed) — anula el wrapper propio de
   WordPress (padding-bottom hack) porque .demo-video ya define su
   propia proporción con aspect-ratio */
.demo-video .wp-embed-aspect-16-9{ padding-bottom:0 !important; height:100%; position:static; }
.demo-video iframe, .demo-video video{ width:100%; height:100%; display:block; border:0; }

@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .expr-item, .demo-card, .expr-item .code-box{ animation:none; opacity:1; transform:none; }
}