:root{
  --bg:#202225; --card:#2a2c31; --card-2:#24262a;
  --accent:#ff8c1a; --accent-2:#ffad42; --text:#e8e8e8;
  --muted:#bdbdbd; --stroke:#3a3d44; --shadow:0 8px 22px rgba(0,0,0,.35); --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

.bg-app{background:var(--bg)}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.title{
  font-size:1.6rem;
  font-weight:800;
  color:#fff;
  margin:.25rem 0 1rem 0;
  text-align:center;
}
.subtitle{color:var(--muted)}
.center{text-align:center}
.mt-sm{margin-top:.75rem}
.mt-lg{margin-top:1.25rem}
.w-100{width:100%}

.tag{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color:var(--muted);
  background:var(--card-2);
}

.btn{
  border:0;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#181818;
}
.btn-small{
  padding:6px 10px;
  border-radius:8px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* inputs genéricos */
.input{
  background:#1f2024;
  border:1px solid var(--stroke);
  color:#fff;
  padding:11px 12px;
  border-radius:10px;
  width:100%;
}

/* tamaños específicos */
.input-qty{
  width:120px;      /* cantidad hasta 6 dígitos */
}
.input-date{
  width:180px;      /* solo fecha */
}
.input-datetime{
  width:230px;      /* fecha + hora */
}

.label{color:var(--muted);margin-top:.25rem}

.login-wrapper{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
}
.login-card{
  width:min(380px,94vw);
  text-align:center;
}
.brand-mark{
  width:64px;
  height:auto;
  display:block;
  margin:0 auto 8px auto;
}

/* ========= ICONOS ========= */

.icon-img{
  width:18px;
  height:18px;
  display:block;
  flex-shrink:0;
}

/* ========= PANEL ========= */

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:#1d1f23;
  border-bottom:1px solid var(--stroke);
}
.topbar-inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
}

/* grupos topbar */
.top-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.top-center{
  flex:1;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.top-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* logo +10% */
.top-logo{
  width:40px;
  height:auto;
}
.top-brand{
  font-weight:800;
  color:var(--accent);
}

/* compatibilidad */
.actions-right{
  margin-left:auto;
  display:inline-flex;
  gap:8px;
}

/* Sidebar */
.sidebar{
  position:fixed;
  inset:48px auto 0 0;
  width:310px;
  background:var(--card-2);
  border-right:1px solid var(--stroke);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sidebar-header{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--accent);
}
.sidebar-header img{width:28px;height:auto}

.menu{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* items con icono + texto */
.menu-item{
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:10px;
  text-decoration:none;
  color:#fff;
  background:#1f2024;
  display:flex;
  align-items:center;
  gap:8px;
}
.menu-item span{
  display:inline-flex;
  align-items:center;
}
.menu-item:hover,
.menu-item.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
  color:#fff;
}

.sidebar-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* contenido */
.workspace{
  margin-left:310px;
  padding:20px;
  max-width:1100px;
  margin-top:60px;
}

.section{
  margin-bottom:22px;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
.panel-title{
  display:inline-block;
  margin:0 0 10px 0;
  padding:6px 12px;
  background:#2b2d33;
  border:2px solid var(--accent);
  color:#fff;
  border-radius:999px;
  box-shadow:var(--shadow);
}

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:12px;
}
.table thead th{
  background:var(--accent);
  color:#181818;
  padding:8px;
  text-align:left;
}
.table tbody td{
  border-bottom:1px solid var(--stroke);
  padding:8px;
}

.only-supervisor{display:none}
.readonly .form input,
.readonly .form button,
.readonly .form select,
.readonly .form textarea{
  pointer-events:none;
  opacity:.55;
}

/* ========= RESPONSIVE ========= */
@media (max-width:920px){
  .workspace{
    margin-left:0;
    padding:16px;
    max-width:100%;
    margin-top:60px;
  }
  .sidebar{
    position:static;
    width:auto;
    border-right:none;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    inset:auto;
    margin-top:60px;
  }
  .menu{
    flex-direction:row;
    flex-wrap:wrap;
  }
}

@media print{
  .sidebar, .menu, .sidebar-footer, .topbar { display:none !important; }
  .workspace{ margin:0; padding:0; max-width:100% }
  .section{ page-break-inside: avoid; margin: 0 0 16px 0 }
  .table thead th, .table tbody td{ padding:6px }
  .panel-title{
    border: 1px solid #000;
    color:#000;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}