:root{
  --navy-900:#0A0F1C;
  --navy-800:#111A2C;
  --navy-700:#1C2A44;
  --ink-50:#F4F5F7;
  --slate-400:#8B93A7;
  --brass-500:#B8935A;
  --brass-300:#D9BD8C;
  --ok:#7CC28E;
  --err:#E3897A;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--navy-900);
  color:var(--ink-50);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  min-height:100vh;
}
h1,h2,h3{font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

/* ---------- login ---------- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:380px; background:var(--navy-800); border:1px solid var(--navy-700);
  border-radius:4px; padding:40px 32px;
}
.login-card img{height:34px; display:block; margin:0 auto 28px;}
.login-card h1{font-size:19px; text-align:center; margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em;
  color:var(--slate-400); text-transform:uppercase; display:block; margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--navy-900); border:1px solid var(--navy-700); color:var(--ink-50);
  padding:12px 14px; border-radius:2px; font-family:'Inter',sans-serif; font-size:14.5px;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--brass-500);}
.btn{
  background:var(--brass-500); color:var(--navy-900); font-weight:600; border:none; cursor:pointer;
  padding:13px 24px; border-radius:2px; font-size:14.5px; font-family:'Inter',sans-serif;
  transition:background .2s ease; display:inline-block; text-align:center;
}
.btn:hover{background:var(--brass-300);}
.btn-full{width:100%;}
.btn-outline{background:transparent; border:1px solid var(--navy-700); color:var(--ink-50);}
.btn-outline:hover{border-color:var(--brass-500);}
.error-msg{
  background:rgba(227,137,122,0.12); border:1px solid var(--err); color:#F3C4BB;
  padding:10px 14px; border-radius:2px; font-size:13.5px; margin-bottom:18px;
}
.ok-msg{
  background:rgba(124,194,142,0.12); border:1px solid var(--ok); color:#BFE6C9;
  padding:10px 14px; border-radius:2px; font-size:13.5px; margin-bottom:18px;
}

/* ---------- app shell ---------- */
header.app{
  border-bottom:1px solid var(--navy-700); background:rgba(10,15,28,0.9);
  position:sticky; top:0; z-index:20;
}
.app-nav{
  max-width:1080px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between;
}
.app-nav .brand{display:flex; align-items:center; gap:10px;}
.app-nav .brand img{height:26px;}
.app-nav .who{font-size:13px; color:var(--slate-400); display:flex; align-items:center; gap:16px;}
.app-nav .who a{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em; color:var(--slate-400); border:1px solid var(--navy-700); padding:7px 14px; border-radius:2px;}
.app-nav .who a:hover{border-color:var(--brass-500); color:var(--brass-300);}

main.app{max-width:1080px; margin:0 auto; padding:48px 24px 80px;}
.page-title{font-size:26px; margin-bottom:6px;}
.page-sub{color:var(--slate-400); font-size:14.5px; margin-bottom:40px;}

.panel{
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:4px;
  padding:28px 26px; margin-bottom:28px;
}
.panel h2{font-size:16px; margin-bottom:18px; display:flex; align-items:center; gap:8px;}
.panel .tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--brass-300);
  text-transform:uppercase; margin-bottom:10px; display:block;
}

.aviso-box{
  border-left:3px solid var(--brass-500); padding:14px 18px; background:var(--navy-900);
  font-size:14.5px; color:var(--ink-50);
}

table{width:100%; border-collapse:collapse; font-size:14.5px;}
thead th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  color:var(--slate-400); text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--navy-700);
}
tbody td{padding:14px 12px; border-bottom:1px solid var(--navy-700);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(255,255,255,0.02);}
.dl-link{color:var(--brass-300); font-size:13.5px; font-family:'IBM Plex Mono',monospace;}
.dl-link:hover{color:var(--brass-500);}
.empty-row{color:var(--slate-400); font-size:14px; padding:20px 12px;}

.badge{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:2px; border:1px solid var(--navy-700); color:var(--slate-400);
}
.badge.admin{border-color:var(--brass-500); color:var(--brass-300);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:760px){ .grid-2{grid-template-columns:1fr;} .app-nav .who{gap:10px;} }

.doc-item{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--navy-700);}
.doc-item:last-child{border-bottom:none;}
.doc-item .doc-name{font-size:14.5px;}
.doc-item .doc-meta{font-size:12px; color:var(--slate-400); margin-top:2px;}

form.inline-form{display:flex; flex-direction:column; gap:14px;}