:root{
  color-scheme:light only;
  --bg:#f7f7fa;
  --surface:#ffffff;
  --surface-2:#f0f0f5;
  --ink:#17171b;
  --ink-soft:#8b8b96;
  --purple:#6c5ce7;
  --purple-soft:#eee9fd;
  --pink:#ef476f;
  --pink-soft:#fce6ea;
  --green:#2fae6b;
  --green-soft:#e5f6ee;
  --line:#ececf1;
  --danger:#e0483f;
  --radius:20px;
  --radius-sm:13px;
  --shadow:0 8px 24px rgba(23,23,27,.06);
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.book-title,.section-title{
  font-family:'Inter', system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.01em;
}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}

img{max-width:100%;display:block;}

/* ---------- Login ---------- */
.view-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--bg);
}
.login-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border-radius:24px;
  padding:36px 28px;
  box-shadow:var(--shadow);
  text-align:center;
}
.brand{font-size:2rem;font-weight:800;margin:0 0 6px;}
.login-sub{color:var(--ink-soft);margin:0 0 24px;font-size:.95rem;font-weight:500;}
#login-form{display:flex;flex-direction:column;gap:14px;text-align:left;}
#login-form label{font-size:.85rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px;font-weight:600;}
#login-form input{
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:1rem;background:var(--surface-2);color:var(--ink);
}
#login-form input:focus{outline:2px solid var(--purple);outline-offset:1px;}
.login-server-toggle{
  display:flex;flex-direction:column;gap:6px;margin-top:18px;text-align:left;
  font-size:.75rem;color:var(--ink-soft);font-weight:600;
}
.login-server-toggle input{
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.85rem;background:var(--surface-2);color:var(--ink-soft);
}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--ink);color:#fff;border:none;border-radius:999px;
  padding:14px 22px;font-size:1rem;font-weight:700;cursor:pointer;
}
.btn-primary:active{opacity:.85;}
.btn-secondary{
  background:var(--surface-2);color:var(--ink);border:1px solid transparent;
  border-radius:999px;padding:13px 19px;font-size:.95rem;font-weight:700;cursor:pointer;
}
.btn-danger{
  background:var(--pink-soft);color:var(--danger);border:1px solid transparent;
  border-radius:999px;padding:13px 19px;font-size:.95rem;font-weight:700;cursor:pointer;
}
.form-error{color:var(--danger);font-size:.85rem;margin:4px 0 0;font-weight:600;}

/* ---------- App shell ---------- */
.app-shell{min-height:100vh;}
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px 10px;
  position:sticky;top:0;background:var(--bg);z-index:10;
}
.topbar-avatar{
  width:48px;height:48px;border-radius:50%;background:var(--purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;
  flex:0 0 auto;
}
.topbar-title{flex:1;font-size:2rem;margin:0;font-weight:800;}
.icon-btn{
  background:var(--surface-2);border:none;color:var(--ink);cursor:pointer;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  flex:0 0 auto;
}
.icon-btn:active{background:var(--line);}
.topbar-add{width:48px;height:48px;}

/* ---------- Library / shelf ---------- */
.view-library{padding:0 16px;}
.pane-list{display:block;}
.pane-detail{display:none;}

.search-bar{
  display:flex;gap:8px;align-items:center;margin:2px 0 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:4px 6px 4px 16px;box-shadow:var(--shadow);
}
.search-bar-icon{color:var(--ink-soft);flex:0 0 auto;}
.search-bar input{
  flex:1;padding:10px 4px;border:none;background:transparent;
  font-size:1rem;color:var(--ink);
}
.search-bar input:focus{outline:none;}

.filters-row{
  display:grid;grid-template-columns:repeat(4, 1fr);gap:6px;padding:4px 0 16px;
}
.chip{
  padding:9px 4px;border-radius:999px;border:none;
  background:var(--surface-2);color:var(--ink-soft);font-size:.78rem;font-weight:700;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.chip-active{background:var(--ink);color:#fff;}

.shelf-section{margin-bottom:28px;}
.shelf-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.shelf-header h3{margin:0;font-size:1.25rem;font-weight:800;}

.book-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px 14px;
}
.book-card{cursor:pointer;text-align:left;background:none;border:none;padding:0;}
.book-cover{
  width:100%;aspect-ratio:2/3;border-radius:8px;overflow:hidden;
  background:var(--surface-2);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.book-cover img{width:100%;height:100%;object-fit:cover;}
.book-cover .placeholder-title{
  font-family:'Inter',sans-serif;font-weight:700;font-size:.8rem;text-align:center;padding:10px;color:var(--ink-soft);
}
.book-location-dot{
  position:absolute;top:8px;right:8px;width:11px;height:11px;border-radius:50%;
  border:2px solid #fff;
}
.dot-fuera{background:var(--pink);}
.book-card h4{
  margin:10px 0 2px;font-size:.88rem;font-weight:700;line-height:1.3;
  font-family:'Inter',sans-serif;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:2.6em;
}
.book-card p{margin:0;font-size:.78rem;line-height:1.3;color:var(--ink-soft);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.empty-msg{color:var(--ink-soft);font-size:.95rem;padding:20px 0;font-weight:500;}

/* ---------- Detail view ---------- */
.view-detail{padding:0 20px 40px;}

.detail-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:6px 0 22px;}
.detail-cover{
  position:relative;
  width:200px;aspect-ratio:2/3;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  margin-bottom:20px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.detail-cover img{width:100%;height:100%;object-fit:cover;}
.detail-cover .placeholder-title{font-family:'Inter',sans-serif;font-weight:700;padding:14px;color:var(--ink-soft);text-align:center;}

.cover-badges{
  position:absolute;top:10px;left:10px;right:48px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.cover-badge{
  background:rgba(23,23,27,.55);backdrop-filter:blur(2px);color:#fff;
  font-size:.68rem;font-weight:700;padding:5px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.03em;
}
.cover-badge-rating{background:rgba(108,92,231,.85);}

.cover-edit-btn{
  position:absolute;top:10px;right:10px;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.cover-edit-btn:active{background:#fff;}

.detail-title{font-size:1.7rem;font-weight:800;margin:0 0 4px;}
.detail-author{color:var(--ink-soft);font-size:1rem;margin:0 0 10px;font-weight:600;}
.detail-stars{color:var(--purple);font-size:1.1rem;letter-spacing:2px;margin-bottom:6px;}
.detail-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;}
.badge{
  font-size:.75rem;font-weight:700;padding:6px 14px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-soft);
}
.badge-casa{background:var(--purple-soft);color:var(--purple);}
.badge-fuera{background:var(--pink-soft);color:var(--pink);}

.detail-section{margin-top:28px;}
.detail-section h3{font-size:1.05rem;font-weight:800;margin:0 0 8px;}
.detail-section p{color:var(--ink-soft);line-height:1.55;margin:0;font-size:.95rem;font-weight:500;}

.detail-synopsis-card{
  background:var(--surface);border-left:3px solid var(--purple);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 18px;box-shadow:var(--shadow);
}
.detail-synopsis-card p{margin-top:6px;}
.overline{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);
}
.detail-meta-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;font-size:.88rem;
}
.detail-meta-grid div{font-weight:600;}
.detail-meta-grid div span{display:block;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:2px;}

.similar-tabs{display:flex;gap:8px;margin-bottom:14px;}
.similar-tab{
  padding:8px 15px;border-radius:999px;border:none;background:var(--surface-2);
  font-size:.8rem;font-weight:700;color:var(--ink-soft);cursor:pointer;
}
.similar-tab.active{background:var(--ink);color:#fff;}
.similar-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;}
.similar-row .book-card{flex:0 0 110px;}
.similar-empty{color:var(--ink-soft);font-size:.85rem;font-weight:500;}

/* ---------- Combo (buscar / crear: autor, editorial, genero, etiquetas, ubicacion) ---------- */
.combo{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
}
.combo-label{font-size:.82rem;color:var(--ink-soft);font-weight:700;}
.combo-selected{display:flex;flex-wrap:wrap;gap:6px;}
.combo-selected:empty{display:none;}
.combo-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--purple-soft);color:var(--purple);
  border-radius:999px;padding:6px 6px 6px 13px;font-size:.82rem;font-weight:700;
}
.combo-chip button{
  background:var(--purple);color:#fff;border:none;border-radius:50%;
  width:18px;height:18px;line-height:1;font-size:.7rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.combo-input{
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:1rem;background:var(--surface);color:var(--ink);
}
.combo-input:focus{outline:2px solid var(--purple);outline-offset:1px;}
.combo-suggestions{
  position:absolute;top:100%;left:0;right:0;margin-top:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);max-height:220px;overflow-y:auto;z-index:30;
}
.combo-suggestion{
  padding:11px 14px;font-size:.9rem;cursor:pointer;color:var(--ink);font-weight:500;
}
.combo-suggestion:hover, .combo-suggestion.combo-suggestion-active{background:var(--surface-2);}
.combo-suggestion-create{color:var(--purple);font-weight:700;}
.combo-suggestion-empty{padding:11px 14px;font-size:.85rem;color:var(--ink-soft);font-weight:500;}

.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag-chip{
  background:var(--surface-2);color:var(--ink-soft);border-radius:999px;
  padding:7px 14px;font-size:.8rem;font-weight:700;
}

.isbn-row{display:flex;gap:8px;}

/* ---------- Form ---------- */
.view-form{padding:12px 18px 40px;}
#book-form{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;}
#book-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--ink-soft);font-weight:700;}
#book-form input,#book-form select,#book-form textarea{
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:1rem;background:var(--surface);color:var(--ink);font-weight:500;
}
#book-form input:focus,#book-form select:focus,#book-form textarea:focus{outline:2px solid var(--purple);outline-offset:1px;}
#book-form textarea{resize:vertical;}
.autofill-status{font-size:.82rem;color:var(--ink-soft);margin:-6px 0 0;font-weight:600;}
.form-cover-preview{display:flex;justify-content:center;}
.form-cover-preview img{width:110px;border-radius:16px;box-shadow:var(--shadow);}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px;}

.topbar-add{
  background:var(--ink);color:#fff;font-size:1.4rem;font-weight:400;line-height:1;
}
.topbar-add:active{background:var(--purple);}

/* ---------- Utility ---------- */
[hidden]{display:none !important;}

/* ---------- Desktop layout ---------- */
@media (min-width:900px){
  .topbar{padding:24px 32px 12px;}
  .view-library{
    padding:0 32px 40px;
    display:grid;
    grid-template-columns:minmax(320px,420px) 1fr;
    gap:32px;
    align-items:start;
  }
  .pane-list{max-height:calc(100vh - 100px);overflow-y:auto;padding-right:6px;}
  .book-grid{grid-template-columns:repeat(auto-fill, minmax(115px,1fr));}
  .pane-detail{
    display:block;position:sticky;top:100px;
    background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:36px;min-height:400px;
  }
  .pane-detail:empty::before{
    content:"Selecciona un libro para ver sus detalles";
    color:var(--ink-soft);font-size:.95rem;font-weight:600;
  }
  .view-detail{max-width:640px;margin:0 auto;}
  .view-form{padding:20px 32px 40px;}
}