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

:root{
  --ink:#1c1a22;
  --ink-soft:#5c5768;
  --paper:#faf6ee;
  --surface:#ffffff;
  --surface-sunken:#f1ebdd;
  --line:#e2d9c4;
  --wine:#7c2836;
  --wine-soft:#f6e4e3;
  --wine-strong:#5c1a25;
  --brass:#96702a;
  --brass-soft:#f6ecd5;
  --brass-strong:#6e5216;
  --focus:#3a3550;
  --radius:0;
  --dur:150ms;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f2ede1; --ink-soft:#b8b0c4; --paper:#17151d; --surface:#211e29; --surface-sunken:#1b1922;
    --line:#39333f; --wine:#e0808c; --wine-soft:#3a2028; --wine-strong:#f4c3c9;
    --brass:#e0b567; --brass-soft:#372e1c; --brass-strong:#f2d495; --focus:#c9c2e6;
  }
}
:root[data-theme="dark"]{
  --ink:#f2ede1; --ink-soft:#b8b0c4; --paper:#17151d; --surface:#211e29; --surface-sunken:#1b1922;
  --line:#39333f; --wine:#e0808c; --wine-soft:#3a2028; --wine-strong:#f4c3c9;
  --brass:#e0b567; --brass-soft:#372e1c; --brass-strong:#f2d495; --focus:#c9c2e6;
}

*{ box-sizing: border-box; }
html,body{ margin:0; }
body{
  background: var(--paper); color: var(--ink);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}
h1,h2,h3{ font-family:'Fraunces', ui-serif, Georgia, serif; margin:0; font-weight:600; text-wrap: balance; }
a{ color: var(--wine); }
code{ background: var(--surface-sunken); padding: 1px 5px; font-size: .85em; }

.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.topbar{ background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line); }
.topbar .wrap{ display:flex; align-items:center; justify-content: space-between; height: 64px; flex-wrap: wrap; }
.topbar .brand{ font-family:'Fraunces',serif; font-weight:700; font-size: 18px; color: var(--paper); text-decoration:none; }
.topbar .brand em{ font-style: normal; color: var(--brass); }
.topbar nav{ display:flex; gap: 24px; align-items: center; }
.topbar nav a{
  color: rgba(250,246,238,.72); text-decoration:none; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.topbar nav a:hover, .topbar nav a.active{ color: var(--paper); }
.topbar .who{ font-size: 13px; color: rgba(250,246,238,.6); }
.topbar .logout{ font-size: 13px; text-decoration: underline; }

main{ padding: 40px 0 80px; }

.page-head{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 32px; }
.page-head .eyebrow{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--wine); font-weight:700; }
.page-head h1{ font-size: clamp(1.6rem, 3vw, 2.1rem); }
.page-head p{ color: var(--ink-soft); max-width: 68ch; line-height: 1.55; margin:0; }

/* ---------- panels & forms ---------- */
.panel{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display:flex; flex-direction:column; gap: 16px; margin-bottom: 24px;
}
.panel h2{ font-size: 1.15rem; }
.panel .sub{ color: var(--ink-soft); font-size:.9rem; line-height:1.5; margin:0; }

label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); font-weight:600; display:block; margin-bottom:6px; }
input, select, textarea{
  font-family:'Archivo',sans-serif; font-size:.92rem; padding:10px 12px; width: 100%;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-sizing: border-box;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom: 14px; }
.field-row{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }

button, .btn{
  font-family:'Archivo',sans-serif; font-size:.85rem; font-weight:700; text-transform: uppercase; letter-spacing:.03em;
  border-radius: var(--radius); padding:12px 20px; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-primary{ background: var(--wine); color: #fff8f6; border-color: var(--wine); }
.btn-primary:hover{ background: var(--wine-strong); border-color: var(--wine-strong); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink-soft); }
.btn-small{ padding:8px 14px; font-size:.76rem; }
.row-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hint{ color: var(--ink-soft); font-size:.8rem; }
.error-box{ background: var(--wine-soft); color: var(--wine-strong); border-left: 3px solid var(--wine); padding: 14px 16px; font-size: .88rem; }

/* ---------- stat tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom: 32px; }
.tile{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:16px 18px; }
.tile .n{ font-family:'Fraunces',serif; font-size:2rem; font-variant-numeric: tabular-nums; line-height:1; display:block; }
.tile .l{ font-size:.72rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top: 6px; display:block; }
.tile.critica .n, .tile.roja .n{ color: var(--wine); }
.tile.amarilla .n{ color: var(--brass); }

/* ---------- table ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); }
table.data{ min-width:800px; width:100%; border-collapse: collapse; font-size:.85rem; }
table.data th{
  text-align:left; background: var(--surface-sunken); color: var(--ink-soft); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em; padding:10px 12px; border-bottom:1px solid var(--line);
}
table.data td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top; background: var(--surface); }
tr.row-clickable{ cursor:pointer; }
tr.row-clickable:hover td{ background: var(--surface-sunken); }
.name-cell{ font-weight:700; font-family:'Fraunces',serif; }
.name-cell .nivel{ display:block; font-weight:400; font-family:'Archivo',sans-serif; color: var(--ink-soft); font-size:.75rem; margin-top:2px; }

.chip{
  display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:700; text-transform: uppercase;
  padding:4px 9px; border-radius: var(--radius); white-space:nowrap;
}
.chip.roja{ background: var(--wine-soft); color: var(--wine-strong); }
.chip.amarilla{ background: var(--brass-soft); color: var(--brass-strong); }
.chip.limpio{ background: var(--surface-sunken); color: var(--ink-soft); font-weight:500; }
.chip.critica{ background: var(--wine); color:#fff8f6; }
.chip.vencido{ background: var(--ink); color: var(--brass-soft); }
.flags-cell{ display:flex; flex-wrap:wrap; gap:5px; max-width:220px; }

tr.detail-row td{ background: var(--surface-sunken); padding:20px 22px; }
tr.detail-row.is-hidden{ display:none; }
.detail-values{ font-size:.82rem; color: var(--ink-soft); line-height:1.6; margin-bottom: 16px; }
.detail-values strong{ color: var(--ink); }

.report-box{
  white-space:pre-wrap; background: var(--surface-sunken); border-left: 3px solid var(--brass);
  border-radius: var(--radius); padding:20px 22px; font-size:.92rem; line-height:1.65;
}

.badge-rol{
  display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  padding:3px 9px; background: var(--surface-sunken); color: var(--ink-soft);
}
.badge-rol.is-inactive{ text-decoration: line-through; opacity:.6; }

footer.app-footer{ border-top:1px solid var(--line); padding: 24px 0 40px; color: var(--ink-soft); font-size:.8rem; }

/* ---------- login ---------- */
.login-wrap{ min-height: 100vh; display:flex; align-items:center; justify-content:center; background: var(--ink); }
.login-card{ background: var(--surface); border:1px solid var(--line); padding: 40px; width: 100%; max-width: 380px; }
.login-card h1{ font-size:1.6rem; margin-bottom: 6px; }
.login-card p.sub{ color: var(--ink-soft); font-size:.9rem; margin: 0 0 24px; }
.login-card button{ width:100%; justify-content:center; margin-top: 8px; }

@media (max-width: 720px){
  .topbar .wrap{ height:auto; padding-block: 12px; }
  .topbar nav{ flex-wrap: wrap; gap: 12px 18px; width: 100%; padding-top: 10px; }
}