:root{
  --paper:#DEEBF9;
  --paper-line:#B7CCE3;
  --ink:#122236;
  --ink-soft:#5C7189;
  --teal:#0E2E4A;
  --teal-light:#154169;
  --accent:#2E90D9;
  --accent-light:#E4F2FC;
  --ok:#1FA97D;
  --ok-light:#E1F7EC;
  --warn:#E1483F;
  --warn-light:#FBE2DF;
  --card:#FFFFFF;
  --shadow: 0 1px 2px rgba(18,34,54,0.05), 0 10px 28px rgba(18,34,54,0.09);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(46,144,217,0.20), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(46,144,217,0.13), transparent 55%),
    var(--paper);
  min-height:100vh;
}
a{color:var(--accent);}

/* -------- topbar (menu / admin / motivos) -------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  max-width:1040px; margin:0 auto; padding:16px 16px 0;
}
.topbar .brand{
  font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:var(--teal);
  display:flex; align-items:center; gap:8px; text-decoration:none;
}
.topbar .brand .logo-icon{width:37px; height:37px; display:block; flex-shrink:0; object-fit:contain;}
.topbar .who{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-soft); min-width:0;}
.topbar .who > span:first-child{overflow-wrap:anywhere; min-width:0;}
.topbar .who b{color:var(--ink);}
.topbar .role-pill{
  font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  background:var(--accent-light); color:var(--accent); border-radius:20px; padding:3px 9px;
}
.topbar .logout{
  font-family:'Inter'; font-weight:600; font-size:12.5px; color:var(--warn); background:var(--warn-light);
  border:none; border-radius:8px; padding:7px 12px; cursor:pointer; text-decoration:none;
}
.topbar .logout:hover{opacity:.85;}

.wrap{max-width:1040px; margin:0 auto; padding:24px 16px 60px;}

/* -------- centered card (login / install) -------- */
.center-screen{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px;}
.auth-card{
  width:100%; max-width:380px; background:var(--card); border:2px solid var(--paper-line);
  border-top:3px solid var(--accent); border-radius:16px; padding:28px 26px; box-shadow:var(--shadow);
}
.auth-card h1{
  font-family:'Sora',sans-serif; font-weight:800; font-size:22px; margin:0 0 4px; color:var(--teal);
  display:flex; align-items:center; gap:9px;
}
.auth-card h1 .logo-icon{width:48px; height:48px; display:block; flex-shrink:0; object-fit:contain;}
.auth-card .sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:20px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:5px;}
.field input, .field select{
  width:100%; font-family:'Inter'; font-size:14px; color:var(--ink); background:var(--card);
  border:2px solid var(--paper-line); border-radius:10px; padding:10px 12px; transition:border-color .15s;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);}

.btn{
  font-family:'Inter'; font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:10px;
  border:2px solid var(--paper-line); background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .15s, border-color .15s;
}
.btn:hover{border-color:var(--accent); background:var(--accent-light);}
.btn.primary{background:linear-gradient(135deg, var(--accent), #1E6FAE); color:#fff; border-color:transparent; box-shadow:0 3px 10px rgba(46,144,217,.3); width:100%;}
.btn.primary:hover{background:linear-gradient(135deg, #3B9DE0, var(--teal-light));}
.btn.danger{color:var(--warn); border-color:var(--warn-light);}
.btn.danger:hover{background:var(--warn-light); border-color:var(--warn);}
.btn.small{padding:6px 11px; font-size:12px; border-radius:8px;}

.alert{border-radius:10px; padding:10px 13px; font-size:13px; margin-bottom:16px; font-weight:600;}
.alert.error{background:var(--warn-light); color:var(--warn); border:1.5px solid var(--warn);}
.alert.ok{background:var(--ok-light); color:var(--ok); border:1.5px solid var(--ok);}

/* -------- menu de sistemas -------- */
.hero-title{text-align:center; margin-bottom:26px;}
.hero-title h1{font-family:'Sora',sans-serif; font-weight:800; font-size:26px; color:var(--teal); margin:0 0 6px;}
.hero-title .sub{font-size:13.5px; color:var(--ink-soft);}
.system-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;}
.system-card{
  background:var(--card); border:2px solid var(--paper-line); border-radius:16px; padding:20px;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .1s, border-color .15s;
  display:flex; flex-direction:column; gap:8px;
}
.system-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.system-card .icon{font-size:26px;}
.system-card .name{font-family:'Sora',sans-serif; font-weight:700; font-size:15.5px; color:var(--teal);}
.system-card .desc{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
.system-card.disabled{opacity:.5; cursor:default; pointer-events:none;}
.system-card .soon{font-family:'IBM Plex Mono'; font-size:10px; font-weight:600; text-transform:uppercase; color:var(--ink-soft); background:var(--paper-line); border-radius:20px; padding:2px 8px; width:fit-content;}

/* -------- tabla de usuarios (admin) -------- */
.panel{background:var(--card); border:2px solid var(--paper-line); border-radius:16px; padding:20px; box-shadow:var(--shadow); margin-bottom:20px;}
.panel h2{font-family:'Sora',sans-serif; font-size:15px; margin:0 0 14px; color:var(--teal);}
table.users{width:100%; border-collapse:collapse; font-size:13px;}
table.users th, table.users td{padding:10px 8px; border-bottom:1.5px solid var(--paper-line); text-align:left;}
table.users th{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);}
table.users td.user-code{font-family:'IBM Plex Mono'; font-weight:600; color:var(--accent);}
.role-tag{font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:20px;}
.role-tag.administrador{background:var(--accent-light); color:var(--accent);}
.role-tag.digitador{background:var(--paper-line); color:var(--ink-soft);}
.status-tag{font-size:10px; font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:20px;}
.status-tag.activo{background:var(--ok-light); color:var(--ok);}
.status-tag.inactivo{background:var(--warn-light); color:var(--warn);}
.form-grid{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.form-grid .field{flex:1 1 150px; margin-bottom:0;}
.table-scroll-x{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

footer.note{margin-top:32px; font-size:11.5px; color:var(--ink-soft); line-height:1.7; text-align:center;}
footer.note .credit{font-weight:600; color:var(--accent);}

/* -------- mostrar/ocultar (toggle) -------- */
.toggle-btn{
  font-family:'Inter'; font-weight:600; font-size:11.5px; color:var(--ink-soft); background:var(--card);
  border:1.5px solid var(--paper-line); border-radius:8px; padding:5px 11px; cursor:pointer; white-space:nowrap;
}
.toggle-btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-light);}

/* -------- modal -------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,34,54,0.45); display:flex; align-items:center; justify-content:center;
  padding:16px; z-index:200;
}
.modal-box{
  width:100%; max-width:400px; background:var(--card); border:2px solid var(--paper-line); border-radius:16px;
  padding:22px; box-shadow:var(--shadow);
}
.modal-box h3{font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:var(--teal); margin:0 0 16px;}

@media (max-width:600px){
  .topbar{padding:12px 10px 0; gap:8px;}
  .topbar .brand{font-size:14px;}
  .topbar .who{width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11.5px;}
  .wrap{padding:16px 10px 50px;}
  .system-grid{grid-template-columns:1fr;}
  .form-grid{flex-direction:column; align-items:stretch;}
  .auth-card{padding:22px 18px; max-width:100%;}
  .auth-card h1{font-size:19px;}
  .panel{padding:14px;}
  .hero-title h1{font-size:20px;}
  .table-scroll-x{-webkit-overflow-scrolling:touch;}
  table.users{font-size:12px; min-width:520px;}
}
@media (max-width:400px){
  .center-screen{padding:12px;}
  .system-card{padding:16px;}
}