:root{
  --bg:#f6f7f9; --card:#ffffff; --line:#e6e8ec; --fg:#1a1d24; --muted:#6b7280;
  --cyan:#0e7490; --purple:#5225ba; --green:#15803d; --red:#dc2626; --yellow:#b45309;
  --brand1:#fc018b; --brand2:#5225ba; /* colores reales del logo ABTV */
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
header.topbar{
  display:flex; align-items:center; gap:16px; padding:16px 24px;
  border-bottom:1px solid var(--line); background:var(--card);
}
header.topbar .brand{font-weight:800; font-size:18px; letter-spacing:.3px; color:var(--fg)}
header.topbar .brand span{color:var(--brand1)}
header.topbar .spacer{flex:1}
header.topbar .user{color:var(--muted); font-size:14px}
header.topbar a.btn, a.btn, button.btn{
  background:transparent; border:1px solid var(--line); color:var(--fg);
  border-radius:8px; padding:8px 14px; font-size:14px; text-decoration:none;
  cursor:pointer; display:inline-block;
}
header.topbar a.btn:hover, a.btn:hover, button.btn:hover{border-color:var(--brand1); color:var(--brand1)}
a.btn-primary{
  background:var(--fg); color:#fff; border-color:var(--fg);
}
a.btn-primary:hover{background:#000; border-color:#000; color:#fff}
main{flex:1; padding:28px 24px; max-width:1000px; width:100%; margin:0 auto}
h1{font-size:22px; margin:0 0 18px}
h2{font-size:17px; margin:28px 0 12px; color:var(--muted); font-weight:600}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:16px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; color:var(--muted); font-weight:600; padding:10px 8px; border-bottom:1px solid var(--line); font-size:12px; text-transform:uppercase; letter-spacing:.5px}
td{padding:10px 8px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
a{color:var(--brand2)}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600}
.badge.ok{background:rgba(21,128,61,.1); color:var(--green)}
.badge.full{background:rgba(82,37,186,.1); color:var(--brand2)}
.badge.inc{background:rgba(252,1,139,.1); color:var(--brand1)}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px; margin-top:14px}
input[type=email], input[type=password], input[type=text]{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:#fbfbfc; color:var(--fg); font-size:14px;
}
input:focus{outline:none; border-color:var(--brand1); box-shadow:0 0 0 3px rgba(252,1,139,.1)}
.submit{
  width:100%; margin-top:20px; background:var(--fg);
  color:#fff; font-weight:600; border:none; border-radius:8px; padding:12px; font-size:15px; cursor:pointer;
  transition:background .15s;
}
.submit:hover{background:#000}

/* ===== Login — minimalista, colores de marca ABTV ===== */
body.login-page{
  --lp-bg:#f6f7f9; --lp-card:#ffffff; --lp-line:#e6e8ec; --lp-fg:#1a1d24; --lp-muted:#6b7280;
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(640px 420px at 50% 4%, rgba(252,1,139,.08), transparent 60%),
    radial-gradient(640px 420px at 50% 96%, rgba(82,37,186,.08), transparent 60%),
    var(--lp-bg);
  padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.login-page .login-wrap{display:flex; flex-direction:column; align-items:center; gap:22px; width:100%; max-width:460px}
.login-page .login-box{
  background:var(--lp-card);
  border:1px solid var(--lp-line); border-radius:22px; padding:80px 44px;
  width:100%; box-shadow:0 16px 40px rgba(20,24,34,.08), 0 2px 8px rgba(20,24,34,.04);
}
.login-logo{display:block; margin:0 auto; width:230px; height:auto}
.login-tagline{
  text-align:center; margin:10px 0 18px; font-size:12px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.login-slogan{
  text-align:center; margin:0 0 38px; font-size:13.5px; color:var(--lp-muted);
  line-height:1.4;
}
.login-page label{margin-top:20px; color:var(--lp-muted); font-size:13px}
.login-page input[type=email], .login-page input[type=password]{
  background:#fbfbfc; border:1px solid var(--lp-line); color:var(--lp-fg);
  padding:12px 14px; border-radius:10px;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.login-page input[type=email]::placeholder, .login-page input[type=password]::placeholder{color:#b4b8c0}
.login-page input[type=email]:focus, .login-page input[type=password]:focus{
  background:#fff; border-color:var(--brand1); box-shadow:0 0 0 3px rgba(252,1,139,.1);
}
.pw-field{position:relative}
.pw-field input[type=password], .pw-field input[type=text]{padding-right:44px; width:100%}
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px; color:var(--lp-muted); cursor:pointer;
  transition:color .15s, background .15s;
}
.pw-toggle:hover{color:var(--lp-fg); background:#f1f2f5}
.pw-toggle svg{width:19px; height:19px}
.login-page .submit{
  background:var(--lp-fg);
  color:#fff; border-radius:10px; padding:13px; font-size:14px; letter-spacing:.3px; font-weight:600;
  box-shadow:0 4px 12px rgba(20,24,34,.12); transition:transform .12s, box-shadow .12s, background .15s;
}
.login-page .submit:hover{background:#000; transform:translateY(-1px); box-shadow:0 8px 20px rgba(252,1,139,.18)}
.login-page .error{background:#fdf0f1; color:#c22433; border:1px solid #f6d3d6}
.login-foot{color:var(--lp-muted); font-size:12px; text-align:center; letter-spacing:.2px}
.error{background:#fdf0f1; color:#c22433; border:1px solid #f6d3d6; padding:10px 14px; border-radius:8px; font-size:14px; margin-bottom:10px}
.ok-msg{background:#eefbf3; color:#0f7a3d; border:1px solid #c9f0d9; padding:10px 14px; border-radius:8px; font-size:14px; margin-bottom:10px}
.breadcrumb{color:var(--muted); font-size:13px; margin-bottom:16px}
.breadcrumb a{color:var(--muted); text-decoration:none}
.breadcrumb a:hover{color:var(--brand1)}
.muted{color:var(--muted)}
.actions{display:flex; gap:8px}
footer.foot{padding:16px 24px; text-align:center; color:var(--muted); font-size:12px; border-top:1px solid var(--line)}