@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#1F2A44; --paper:#EFEAD8; --paper-dark:#E4DDC7;
  --green:#1E4D3A; --gold:#B8892B; --rust:#A54B34; --teal:#2C6E6B;
  --line:#C9BFA0; --blue:#5B7DB1;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
}
h1,h2,h3,.serif{ font-family:'Fraunces',serif; font-weight:600; }
.mono{ font-family:'IBM Plex Mono',monospace; }
a{ color:inherit; }

.auth-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.auth-card{ background:#fff; border:1px solid var(--line); padding:32px; width:340px; border-radius:4px; }
.auth-kicker{ text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:var(--gold); margin-bottom:6px; }
.auth-card h1{ margin:0 0 6px; font-size:26px; }
.auth-sub{ font-size:13px; opacity:.6; margin-bottom:16px; }
.auth-card form{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.auth-card label{ font-size:12px; opacity:.6; margin-top:8px; }
.auth-card input, .auth-card select{
  border:1px solid var(--line); padding:9px 10px; border-radius:3px; font-size:14px; font-family:inherit;
}
.auth-card button{
  margin-top:16px; background:var(--green); color:#fff; border:none; padding:11px; border-radius:3px;
  font-size:14px; cursor:pointer; font-weight:600; width:100%;
}
.auth-foot{ text-align:center; font-size:12px; margin-top:16px; opacity:.7; }
.auth-foot a{ color:var(--teal); font-weight:600; text-decoration:none; }
.alerta{ background:#F1DAD3; color:var(--rust); padding:8px 10px; font-size:13px; border-radius:3px; margin-top:10px; }
.ok{ background:#DCE9DE; color:var(--green); padding:8px 10px; font-size:13px; border-radius:3px; margin-bottom:6px; }

.topbar{ max-width:1100px; margin:0 auto; padding:24px 20px 0; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; }
.kicker{ text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:var(--gold); margin-bottom:4px; }
.topbar h1{ margin:0; font-size:30px; }
.userbox{ font-size:12px; opacity:.8; text-align:right; }
.userbox a{ color:var(--rust); text-decoration:none; }

.libros{ max-width:1100px; margin:16px auto 0; padding:0 20px; display:flex; gap:6px; }
.libros a{ text-decoration:none; font-size:13px; padding:6px 12px; border:1px solid var(--ink); border-radius:3px; color:var(--ink); }
.libros a.active{ background:var(--ink); color:var(--paper); font-weight:600; }

.tabs{ max-width:1100px; margin:14px auto 0; padding:0 20px; display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); }
.tabs a{ text-decoration:none; font-size:14px; padding:8px 14px; color:var(--ink); opacity:.55; white-space:nowrap; border-bottom:2px solid transparent; }
.tabs a.active{ opacity:1; font-weight:600; border-bottom-color:var(--tab-color, var(--green)); }

.main{ max-width:1100px; margin:0 auto; padding:20px; }

.card{ background:#fff; border:1px solid var(--line); border-radius:3px; padding:18px; margin-bottom:12px; }
.card.dark{ background:var(--paper-dark); }
.grid{ display:grid; gap:14px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:800px){ .grid.cols-4,.grid.cols-5{ grid-template-columns:repeat(2,1fr); } }

.label{ text-transform:uppercase; font-size:11px; letter-spacing:.08em; opacity:.55; margin-bottom:4px; }
.figure{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:26px; }
.figure.sm{ font-size:16px; }

.badge{ font-size:10px; padding:2px 7px; border-radius:3px; text-transform:uppercase; font-weight:600; display:inline-block; }
.badge.green{ background:#DCE9DE; color:var(--green); }
.badge.gold{ background:#F3E6C9; color:var(--gold); }
.badge.rust{ background:#F1DAD3; color:var(--rust); }
.badge.neutral{ background:var(--paper-dark); color:var(--ink); text-transform:none; font-weight:600; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid input, .form-grid select{
  border:1px solid var(--line); padding:9px 10px; border-radius:3px; font-size:14px; font-family:inherit; width:100%;
}
.btn{ display:inline-block; border:none; padding:9px 16px; border-radius:3px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-green{ background:var(--green); color:#fff; }
.btn-rust{ background:var(--rust); color:#fff; }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-gold{ background:var(--gold); color:#fff; }
.btn-outline{ background:#fff; border:1px solid var(--ink); color:var(--ink); }

table{ border-collapse:collapse; width:100%; font-size:13px; }
table th{ text-align:left; padding:8px 10px; opacity:.5; font-weight:500; border-bottom:1px solid var(--line); }
table td{ padding:8px 10px; border-bottom:1px solid var(--line); }
.table-wrap{ overflow-x:auto; }

.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.opacity-60{ opacity:.6; } .opacity-50{ opacity:.5; } .opacity-70{opacity:.7;} .opacity-80{opacity:.8;}
.small{ font-size:12px; }
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:14px;} .mb-2{margin-bottom:8px;}

/* ---- Hero (dashboard) ---- */
.hero{ background:linear-gradient(135deg, #3B2A5E, #2C1F4A); color:#fff; border-radius:6px; padding:22px; margin-bottom:14px; position:relative; }
.hero .label{ color:#C9BFE8; opacity:1; }
.hero-figure{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:24px; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:700px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-box{ background:rgba(255,255,255,.06); border-radius:4px; padding:14px; }
.hero-box.accent{ background:linear-gradient(135deg, var(--teal), #3E8E7E); }
.progress-track{ background:rgba(255,255,255,.15); border-radius:6px; height:10px; margin-top:8px; overflow:hidden; }
.progress-fill{ background:linear-gradient(90deg, var(--teal), #6FD3B8); height:10px; }
.hero-edit{ position:absolute; top:18px; right:18px; color:#fff; opacity:.7; text-decoration:none; font-size:12px; }

.doc-thumb{ width:64px; height:64px; object-fit:cover; border-radius:3px; border:1px solid var(--line); }
.doc-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--paper-dark); border-radius:3px; padding:4px 8px; font-size:11px; }