/* ==========================================================================
   Catálogo · Livriz
   Design System Livriz v1.1 — MD3 recoloreado · #0047bb · Poppins
   (tokens tomados de sell-calculadora/styles.css)
   ========================================================================== */

:root{
  /* Marca */
  --brand-accent:#0047bb;
  --brand-accent-hover:#1638CC;
  --brand-accent-pressed:#102BA3;
  --brand-accent-soft:#E8EDFE;
  --brand-accent-on:#FFFFFF;

  /* Neutrales */
  --neutral-0:#FFFFFF;  --neutral-50:#FAFAFA; --neutral-100:#F4F4F4;
  --neutral-200:#E8E8E8;--neutral-300:#D6D6D6;--neutral-400:#B8B8B8;
  --neutral-500:#909090;--neutral-600:#6B6B6B;--neutral-700:#4A4A4A;
  --neutral-800:#2A2A2A;--neutral-900:#141414;--neutral-1000:#000000;

  /* Semánticos */
  --fg-1:#000000; --fg-2:#4A4A4A; --fg-3:#909090; --fg-disabled:#B8B8B8;
  --fg-accent:#0047bb; --fg-inverse:#FFFFFF;
  --bg-1:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F4F4F4; --bg-4:#E8E8E8;
  --border-1:#E8E8E8; --border-2:#D6D6D6; --border-strong:#000000;

  /* Estados */
  --status-danger:#C8200C;  --status-danger-soft:#FBE9E6;
  --status-warning:#B7791F; --status-warning-soft:#FBF1DE;
  --status-success:#1F8A5B; --status-success-soft:#E4F4EB;
  --status-info:#0047bb;    --status-info-soft:#E8EDFE;

  /* Tipografía */
  --font-sans:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Espaciado */
  --space-1:4px; --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px;--space-6:24px; --space-8:32px; --space-10:40px;

  /* Radios */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px;
  --radius-lg:16px; --radius-xl:28px; --radius-full:9999px;

  /* Elevación */
  --elev-1:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --elev-2:0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elev-3:0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);

  --ease:cubic-bezier(.2,0,0,1);
  --dur-s:150ms; --dur-m:250ms;
  --focus-ring:0 0 0 2px var(--bg-1), 0 0 0 4px var(--brand-accent);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-accent:#6E95F5; --brand-accent-hover:#86A8F7; --brand-accent-pressed:#5B84EE;
    --brand-accent-soft:rgba(110,149,245,.20); --brand-accent-on:#0A1330;
    --fg-1:#F4F4F4; --fg-2:#C4C4C4; --fg-3:#8A8A8A; --fg-disabled:#5A5A5A;
    --fg-accent:#6E95F5; --fg-inverse:#121212;
    --bg-1:#121212; --bg-2:#181818; --bg-3:#202020; --bg-4:#282828;
    --border-1:#2A2A2A; --border-2:#3A3A3A; --border-strong:#FFFFFF;
    --status-danger:#F08A7A; --status-danger-soft:rgba(200,32,12,.18);
    --status-warning:#E0AE5E;--status-warning-soft:rgba(183,121,31,.18);
    --status-success:#5FC694;--status-success-soft:rgba(31,138,91,.18);
    --status-info:#6E95F5;   --status-info-soft:rgba(110,149,245,.18);
    --elev-1:0 1px 2px rgba(0,0,0,.5); --elev-2:0 2px 6px rgba(0,0,0,.55);
    --elev-3:0 6px 16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --brand-accent:#6E95F5; --brand-accent-hover:#86A8F7; --brand-accent-pressed:#5B84EE;
  --brand-accent-soft:rgba(110,149,245,.20); --brand-accent-on:#0A1330;
  --fg-1:#F4F4F4; --fg-2:#C4C4C4; --fg-3:#8A8A8A; --fg-disabled:#5A5A5A;
  --fg-accent:#6E95F5; --fg-inverse:#121212;
  --bg-1:#121212; --bg-2:#181818; --bg-3:#202020; --bg-4:#282828;
  --border-1:#2A2A2A; --border-2:#3A3A3A; --border-strong:#FFFFFF;
  --status-danger:#F08A7A; --status-danger-soft:rgba(200,32,12,.18);
  --status-warning:#E0AE5E;--status-warning-soft:rgba(183,121,31,.18);
  --status-success:#5FC694;--status-success-soft:rgba(31,138,91,.18);
  --status-info:#6E95F5;   --status-info-soft:rgba(110,149,245,.18);
  --elev-1:0 1px 2px rgba(0,0,0,.5); --elev-2:0 2px 6px rgba(0,0,0,.55);
  --elev-3:0 6px 16px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* El display de los overlays (flex) pisaría el atributo hidden del UA stylesheet
   y quedarían siempre visibles tapando la app — hidden SIEMPRE gana. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-2); color:var(--fg-1);
  font-family:var(--font-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(env(safe-area-inset-bottom) + 72px);
}
h1,h2,h3,p,figure,fieldset,legend{margin:0}
button{font:inherit}
.mono{font-family:var(--font-mono); font-size:.85em}
.wrap{max-width:1200px; margin:0 auto; padding:0 var(--space-5)}
.hint{color:var(--fg-3); font-size:13px}
.vacio{padding:var(--space-10); text-align:center; color:var(--fg-3)}

/* ---------- Topbar ---------- */
.topbar{background:var(--bg-1); border-bottom:1px solid var(--border-1); position:sticky; top:0; z-index:30}
.topbar__in{display:flex; align-items:center; gap:var(--space-6); height:60px}
.brand{display:flex; align-items:center; gap:var(--space-2)}
.brand__mark{width:28px; height:28px; color:var(--brand-accent)}
.brand__name{font-weight:500}
.brand__name b{font-weight:700}
.tabs-top{display:flex; gap:var(--space-1)}
.topbar-acciones{margin-left:auto; display:flex; align-items:center; gap:var(--space-2)}
.icon-btn{border:0; background:none; color:var(--fg-2); padding:8px; border-radius:var(--radius-full); cursor:pointer}
.icon-btn:hover{background:var(--bg-3)}

/* ---------- Tabs / chips ---------- */
.tab{border:0; background:none; color:var(--fg-2); padding:8px 14px; border-radius:var(--radius-full); cursor:pointer; transition:background var(--dur-s) var(--ease)}
.tab:hover{background:var(--bg-3)}
.tab--activo{background:var(--brand-accent-soft); color:var(--fg-accent); font-weight:600}
.chips-filtro{display:flex; gap:var(--space-2); flex-wrap:wrap}
.chip{border:1px solid var(--border-2); background:var(--bg-1); color:var(--fg-2); font-size:13px; padding:5px 12px; border-radius:var(--radius-full); cursor:pointer}
.chip--activo{background:var(--brand-accent); border-color:var(--brand-accent); color:var(--brand-accent-on)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; font-weight:600;
  padding:10px 18px; border-radius:var(--radius-full); transition:background var(--dur-s) var(--ease)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn--primary{background:var(--brand-accent); color:var(--brand-accent-on)}
.btn--primary:hover:not(:disabled){background:var(--brand-accent-hover)}
.btn--outline{background:none; border:1px solid var(--border-2); color:var(--fg-1)}
.btn--outline:hover:not(:disabled){background:var(--bg-3)}
.btn--texto{background:none; color:var(--fg-2); padding:6px 10px}
.btn--texto:hover{background:var(--bg-3)}
.btn--chico{padding:5px 12px; font-size:13px}
.btn:not(.btn--primary):not(.btn--outline):not(.btn--texto){background:var(--brand-accent-soft); color:var(--fg-accent)}

/* ---------- Campos ---------- */
.field{display:flex; flex-direction:column; gap:4px}
.field small{color:var(--fg-3); font-size:11.5px; font-weight:500}
.field-input{
  border:1px solid var(--border-2); border-radius:var(--radius-sm); background:var(--bg-1);
  color:var(--fg-1); padding:8px 10px; font:inherit; font-size:14px; width:100%;
}
.field-input:focus{outline:none; box-shadow:var(--focus-ring)}
.buscar{width:220px}

/* ---------- Barra catálogo ---------- */
.barra-catalogo{display:flex; align-items:center; gap:var(--space-4); margin:var(--space-5) 0; flex-wrap:wrap}
.barra-derecha{margin-left:auto; display:flex; align-items:center; gap:var(--space-2)}
.toggle-vista{display:flex; border:1px solid var(--border-2); border-radius:var(--radius-full); overflow:hidden}
.toggle-vista .tab{border-radius:0; padding:6px 12px}

/* ---------- Pills / badges ---------- */
.pill{display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--radius-full); white-space:nowrap}
.pill--ok{background:var(--status-success-soft); color:var(--status-success)}
.pill--warn{background:var(--status-warning-soft); color:var(--status-warning)}
.pill--no{background:var(--status-danger-soft); color:var(--status-danger)}
.pill--info{background:var(--status-info-soft); color:var(--status-info)}

/* ---------- Tabla ---------- */
.tablewrap{overflow-x:auto; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg)}
.tbl{border-collapse:collapse; width:100%; font-size:13.5px}
.tbl th{font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--fg-3); text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-1); white-space:nowrap}
.tbl td{padding:8px 12px; border-bottom:1px solid var(--border-1); vertical-align:middle}
.tbl tbody tr:hover{background:var(--bg-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.c-titulo{max-width:220px}
.c-estado{max-width:200px}
.c-acciones{white-space:nowrap; text-align:right}
.mini-thumb{width:32px; height:44px; object-fit:cover; border-radius:3px; border:1px solid var(--border-1); background:var(--bg-3); display:block}

/* ---------- Grilla ---------- */
.grilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--space-4)}
.card-libro{position:relative; background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--elev-1)}
.card-sel{position:absolute; top:8px; left:8px; z-index:2; background:var(--bg-1); border-radius:var(--radius-xs); padding:2px 4px; box-shadow:var(--elev-1)}
.card-thumb{aspect-ratio:2/1.35; background:var(--bg-3); display:flex; align-items:center; justify-content:center; overflow:hidden}
.card-thumb img{width:100%; height:100%; object-fit:cover}
.card-thumb-ph{font-size:40px; opacity:.4}
.card-cuerpo{padding:var(--space-3); display:flex; flex-direction:column; gap:6px}
.card-titulo{font-size:14px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.card-isbn{color:var(--fg-3); font-size:11px}
.card-badges{display:flex; gap:4px; flex-wrap:wrap}
.card-acciones{display:flex; gap:6px; margin-top:4px}

/* ---------- Cards genéricos (ingesta) ---------- */
.card{background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:var(--space-5); margin:var(--space-5) 0}
.card__title{font-size:16px; font-weight:600; margin-bottom:var(--space-3)}
.cola-fila{display:flex; align-items:center; gap:var(--space-3); padding:8px 0; border-bottom:1px solid var(--border-1)}
.cola-fila:last-child{border-bottom:0}
.cola-nombre{flex:1; font-size:13.5px; overflow-wrap:anywhere}
.cola-nombre small{color:var(--fg-3)}
.cola-fase{display:flex; align-items:center; gap:8px}
.cola--subiendo .pill--info::after, .cola--analizando .pill--info::after{content:''; display:inline-block; width:9px; height:9px; margin-left:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:girar .8s linear infinite; vertical-align:-1px}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Barra export ---------- */
.barra-export{position:fixed; left:0; right:0; bottom:0; z-index:25; background:var(--bg-1); border-top:1px solid var(--border-1); box-shadow:var(--elev-3);
  display:flex; align-items:center; justify-content:center; gap:var(--space-5); padding:12px var(--space-5); padding-bottom:calc(12px + env(safe-area-inset-bottom))}
#exportInfo{font-size:14px; color:var(--fg-2)}

/* ---------- Ficha (drawer) ---------- */
.ficha-overlay,.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40; display:flex; justify-content:flex-end}
.modal-overlay{align-items:center; justify-content:center}
.ficha-panel{width:min(560px,100%); height:100%; overflow-y:auto; background:var(--bg-1); box-shadow:var(--elev-3); padding:var(--space-6)}
.ficha-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4)}
.ficha-head h2{font-size:18px}
.ficha-badges{display:flex; gap:4px; flex-wrap:wrap; margin-top:6px}
.ficha-sec{border-top:1px solid var(--border-1); padding:var(--space-4) 0}
.ficha-sec h3{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--fg-3); margin-bottom:var(--space-3)}
.candado{font-size:12px}
.ficha-archivos{display:flex; gap:var(--space-4)}
.ficha-arch{display:flex; flex-direction:column; gap:4px; align-items:center}
.ficha-arch img{width:110px; border-radius:var(--radius-sm); border:1px solid var(--border-1)}
.arch-ph{width:110px; height:150px; display:flex; align-items:center; justify-content:center; background:var(--bg-3); border-radius:var(--radius-sm); color:var(--fg-3); font-size:12px}
.ficha-ro{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-3)}
.ficha-ro small{display:block; color:var(--fg-3); font-size:11px}
.ficha-grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-3)}
.ficha-precio{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-bottom:var(--space-3)}
.ficha-precio small{display:block; color:var(--fg-3); font-size:11px}
.ficha-campos{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3)}
.ficha-campos .field:has(textarea){grid-column:1 / -1}
#fichaMas{margin-top:var(--space-3)}
#fichaMas summary{cursor:pointer; color:var(--fg-accent); font-size:13px; margin-bottom:var(--space-3)}
.val{border-radius:var(--radius-sm); padding:10px 12px; font-size:13.5px; margin:var(--space-2) 0}
.val small{color:var(--fg-2)}
.val--ok{background:var(--status-success-soft); color:var(--status-success)}
.val--warn{background:var(--status-warning-soft); color:var(--status-warning)}
.val--no{background:var(--status-danger-soft); color:var(--status-danger)}

/* ---------- Modal asociar ---------- */
.modal-caja{width:min(480px,92vw); max-height:86vh; overflow-y:auto; background:var(--bg-1); border-radius:var(--radius-lg); box-shadow:var(--elev-3); padding:var(--space-5)}
.asociar-tapa{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:var(--space-4)}
.asociar-tapa img{max-width:180px; border-radius:var(--radius-sm); border:1px solid var(--border-1)}
.asociar-lista{display:flex; flex-direction:column; gap:var(--space-2)}
.asociar-item{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius-md); padding:10px 14px; cursor:pointer}
.asociar-item:hover{border-color:var(--brand-accent); background:var(--brand-accent-soft)}

/* ---------- Drop overlay + toasts ---------- */
/* Sin backdrop-filter: durante un drag NATIVO (Wayland + Chrome flatpak) el blur
   a pantalla completa puede tumbar el proceso GPU y cerrar todo el navegador. */
.drop-overlay{position:fixed; inset:0; z-index:50; background:rgba(0,71,187,.14);
  display:flex; align-items:center; justify-content:center; pointer-events:none}
.drop-overlay__caja{background:var(--bg-1); border:2px dashed var(--brand-accent); border-radius:var(--radius-xl);
  padding:var(--space-10); text-align:center; color:var(--fg-accent); box-shadow:var(--elev-3)}
.drop-overlay__caja small{color:var(--fg-3)}
#toasts{position:fixed; bottom:84px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{background:var(--neutral-900); color:#fff; font-size:13.5px; padding:10px 18px; border-radius:var(--radius-full); box-shadow:var(--elev-3); max-width:min(520px,90vw)}
:root[data-theme="dark"] .toast{background:var(--neutral-100); color:#141414}
.toast--ok{background:var(--status-success); color:#fff}
.toast--no{background:var(--status-danger); color:#fff}
.toast--warn{background:var(--status-warning); color:#fff}

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .topbar__in{flex-wrap:wrap; height:auto; padding:8px 0; gap:var(--space-3)}
  .buscar{width:140px}
  .ficha-campos,.ficha-grid2,.ficha-ro{grid-template-columns:1fr}
  .ficha-panel{width:100%}
}