:root{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --primary:#1f4f8f;
  --primary-dark:#173b6c;
  --accent:#22a06b;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#14345f,#1f4f8f 45%,#eef4ff 45%);
}
.login-card{
  width:420px;
  border:0;
  border-radius:22px;
  box-shadow:0 25px 80px rgba(0,0,0,.22);
}
.brand-mark{
  width:52px;height:52px;border-radius:16px;
  background:var(--primary);
  color:white;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:22px;
}
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.navbar-brand{font-weight:800;color:var(--primary)!important}
.app-shell{display:flex;min-height:calc(100vh - 65px)}
.sidebar{
  width:260px;background:#102a4c;color:white;padding:22px 16px;
}
.sidebar a{
  color:#dbeafe;text-decoration:none;display:block;
  padding:12px 14px;border-radius:12px;margin-bottom:6px;font-weight:600;
}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.12);color:white}
.content{flex:1;padding:28px}
.card-pro{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.stat-card{
  border-radius:18px;
  padding:22px;
  background:linear-gradient(135deg,#fff,#f8fbff);
  border:1px solid var(--border);
}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.table{vertical-align:middle}
.form-control,.form-select{border-radius:12px}
.action-btn{border-radius:14px;padding:12px 18px;font-weight:700}
.badge-role{font-size:.75rem;border-radius:999px;padding:6px 10px}

.kanban-wrap{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}
.kanban-column{background:#eef3fb;border:1px solid #d9e3f2;border-radius:18px;padding:14px;min-height:420px}
.kanban-title{font-weight:800;color:#173b6c;margin-bottom:10px}
.pedido-card{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:12px;margin-bottom:10px;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.pedido-card .comp{font-weight:800;color:#1f4f8f}
.pedido-card .client{font-size:.86rem;color:#374151}
.pedido-card .meta{font-size:.78rem;color:#6b7280}

/* OPERATIVA VPN VISUAL */
:root{
  --brand-blue:#1f4f8f;
  --brand-cyan:#00a3c7;
  --brand-green:#22a06b;
  --brand-orange:#f59e0b;
  --brand-red:#ef4444;
  --brand-purple:#7c3aed;
}
body{
  background:
    linear-gradient(rgba(244,246,251,.90), rgba(244,246,251,.94)),
    url('/static/fondo_loma_100.jpg') center center / cover fixed no-repeat;
}
.topbar{
  background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(238,247,255,.94));
  backdrop-filter: blur(6px);
}
.sidebar{
  background:linear-gradient(180deg,#0f2c52,#173b6c 55%,#1f4f8f);
  box-shadow:8px 0 24px rgba(15,23,42,.12);
}
.brand-mark{
  background:linear-gradient(135deg,#1f4f8f,#00a3c7);
}
.card-pro,.stat-card{
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(4px);
}
.card-pro{border-top:4px solid rgba(31,79,143,.16)}
.stat-card{position:relative;overflow:hidden}
.stat-card:before{
  content:"";
  position:absolute;
  right:-28px;
  top:-28px;
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(31,79,143,.08);
}
.kanban-column:nth-child(1){background:rgba(241,245,249,.92);border-top:5px solid #64748b}
.kanban-column:nth-child(2){background:rgba(255,247,237,.92);border-top:5px solid var(--brand-orange)}
.kanban-column:nth-child(3){background:rgba(239,246,255,.92);border-top:5px solid var(--brand-blue)}
.kanban-column:nth-child(4){background:rgba(245,243,255,.92);border-top:5px solid var(--brand-purple)}
.kanban-column:nth-child(5){background:rgba(240,253,244,.92);border-top:5px solid var(--brand-green)}
.kanban-column:nth-child(6){background:rgba(254,242,242,.92);border-top:5px solid var(--brand-red)}
.pedido-card{
  border-left:5px solid var(--brand-cyan);
  transition:.15s ease;
}
.pedido-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
}
.badge-role{background:linear-gradient(135deg,#1f4f8f,#00a3c7)!important}
.role-card{min-height:150px}
.role-card.admin{border-top:5px solid var(--brand-purple)}
.role-card.supervisor{border-top:5px solid var(--brand-blue)}
.role-card.encargado{border-top:5px solid var(--brand-orange)}
.role-card.operador{border-top:5px solid var(--brand-green)}
.btn-primary{background:linear-gradient(135deg,#1f4f8f,#2563eb);border:0}
.btn-success{background:linear-gradient(135deg,#16a34a,#22a06b);border:0}
.login-wrap{
  background:
    linear-gradient(135deg,rgba(20,52,95,.92),rgba(31,79,143,.82) 45%,rgba(238,244,255,.84) 45%),
    url('/static/fondo_loma_100.jpg') center center / cover no-repeat;
}

/* =========================================================
   V8.2 · IDENTIDAD VISUAL DOCUMENTADOR / ESPACIO
   Solo presentación. No modifica lógica ni datos.
   ========================================================= */
:root{
  --esp-blue:#1f4f8f;
  --esp-blue-dark:#173b6c;
  --esp-blue-soft:#eef5ff;
  --esp-red:#ff2424;
  --esp-ink:#262b33;
  --esp-muted:#6b7280;
  --esp-line:#e6e9ef;
}
html,body{min-height:100%;}
body{
  color:var(--esp-ink);
  background:
    linear-gradient(rgba(255,255,255,.69),rgba(255,255,255,.76)),
    url('/static/img/pattern_lomanegra.png') center top / 620px repeat fixed;
}
/* Cabecera como Documentador, con logo Espacio limpio */
.topbar{
  min-height:68px;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid rgba(31,79,143,.10);
  box-shadow:0 5px 22px rgba(20,52,95,.07);
  backdrop-filter:blur(8px);
}
.logo-espacio{height:46px;width:auto;max-width:185px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(15,42,76,.12));}
.brand-text{line-height:1.05;color:#17406f;font-weight:800;letter-spacing:-.02em;}
.brand-text small{display:block;font-size:.72rem;font-weight:600;color:#6b7280;margin-top:4px;letter-spacing:0;}
.app-shell{min-height:calc(100vh - 68px);}
.sidebar{
  width:264px;
  background:linear-gradient(180deg,rgba(15,44,82,.98),rgba(23,59,108,.98) 55%,rgba(31,79,143,.98));
  box-shadow:8px 0 26px rgba(15,23,42,.13);
}
.sidebar a{border-radius:11px;transition:background .16s ease,transform .16s ease;padding:11px 14px;}
.sidebar a:hover{background:rgba(255,255,255,.13);transform:translateX(2px);}
.content{padding:30px 32px;}
.card-pro,.stat-card{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(31,79,143,.10);
  box-shadow:0 12px 30px rgba(15,23,42,.07);
  backdrop-filter:blur(5px);
}
.card-pro{border-radius:17px;border-top:3px solid rgba(31,79,143,.18);}
.stat-card{border-radius:17px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
a:hover .stat-card{transform:translateY(-3px);box-shadow:0 17px 36px rgba(15,23,42,.11);border-color:rgba(31,79,143,.25);}
.btn{transition:transform .12s ease,box-shadow .12s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:linear-gradient(135deg,#214f8e,#2866dd);border:0;box-shadow:0 7px 16px rgba(37,99,235,.18);}
.action-btn{border-radius:12px;padding:11px 17px;font-weight:700;}
.form-control,.form-select{border-radius:11px;border-color:#d9dee8;}
.form-control:focus,.form-select:focus{border-color:#76a9ff;box-shadow:0 0 0 .22rem rgba(37,99,235,.12);}
.table{--bs-table-bg:rgba(255,255,255,.93);}

/* Login: misma composición visual que el Documentador de Producción */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px;
  background:
    linear-gradient(rgba(255,255,255,.43),rgba(255,255,255,.54)),
    url('/static/img/pattern_lomanegra.png') center center / 560px repeat;
}
.login-card{
  width:min(94vw,560px);
  border:0;
  border-radius:22px;
  background:rgba(255,255,255,.95);
  box-shadow:0 24px 70px rgba(24,39,75,.18);
  padding:30px 36px 26px!important;
  backdrop-filter:blur(5px);
}
.login-brand{text-align:center;margin-bottom:24px;}
.login-logo{
  display:block;
  width:min(88%,310px);
  height:auto;
  margin:0 auto 8px;
  object-fit:contain;
  filter:drop-shadow(0 9px 10px rgba(15,42,76,.14));
}
.login-brand h1{font-size:1.82rem;font-weight:700;letter-spacing:-.025em;margin:3px 0 1px;color:#2b2f36;}
.login-brand .subtitle{font-size:.98rem;color:#656b74;}
.version-badge{font-size:.74rem;color:#7b818b;text-align:center;margin-top:14px;}
.login-card .form-label{font-weight:500;margin-bottom:6px;}
.login-card .form-control{min-height:50px;background:#fff;}
.login-card .btn-primary{min-height:48px;font-size:1.08rem;}

/* Inicio QC: moderno, pero dentro del lenguaje visual del Documentador */
.qc-hero{margin-bottom:22px;}
.qc-hero h1{letter-spacing:-.035em;}
.qc-step{position:relative;min-height:150px;padding:23px 22px 20px;}
.qc-step .step-no{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#72809a;margin-bottom:7px;}
.qc-step h3{font-size:1.15rem;font-weight:750;color:#25344a;}
.qc-step:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;right:-22px;top:-22px;background:rgba(31,79,143,.065);}
.qc-quick{border-left:4px solid var(--esp-blue);}
@media(max-width:900px){.sidebar{width:220px}.content{padding:22px 18px}.brand-text{display:none}}
@media(max-width:700px){.app-shell{display:block}.sidebar{width:100%;height:auto}.content{padding:18px 12px}.login-card{padding:25px 22px!important}.topbar{position:relative}}