/* ============================================================================
   app.css – OC & Import (Vista Gerencial Ejecutiva)
   Novacolor S.A.S
   ========================================================================== */

/* ---------- RESET BÁSICO ---------- */
html, body{
  height:100%;
  margin:0;
}

body{
  background:linear-gradient(180deg,#F8FAFC,#FFFFFF);
  color:#0f172a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* ---------- VARIABLES ---------- */
:root{
  --bg0:#F8FAFC;
  --bg1:#FFFFFF;
  --panel:#ffffff;
  --muted:#6b6f76;
  --text:#0f172a;
  --brand:#E86C08;
  --brand2:#FF8A2A;
  --border:rgba(15,23,42,.10);
  --shadow:0 12px 40px rgba(15,23,42,.08);
}

/* ---------- BOTONES ---------- */
.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
}
.btn-primary:hover{
  background:#C85B06;
  border-color:#C85B06;
}
.btn-outline-secondary{
  border-color:var(--border);
}

/* Asegura visibilidad de botones tipo “Acciones” */
.btn,
.btn-light,
.btn-outline-secondary,
.btn-icon{
  background:rgba(15,23,42,.04);
  border:1px solid var(--border);
  color:var(--text);
}
.btn:hover,
.btn-icon:hover{
  background:rgba(15,23,42,.08);
}

/* ---------- LAYOUT BASE ---------- */
.app-shell{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* ---------- SIDEBAR (CLAVE) ---------- */
.app-sidebar,
#appSidebar{
  width:280px;
  height:100vh;
  background:rgba(255,255,255,.88);
  border-right:1px solid var(--border);
  backdrop-filter:blur(10px);
  padding:16px 14px;
  overflow:auto;
  position:relative; /* ❗️ NO sticky para evitar desfase */
  transition:width .2s ease;
}

.app-sidebar.collapsed{
  width:86px;
}

/* ---------- BRAND ---------- */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px 14px;
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
}

.logo{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  box-shadow:var(--shadow);
}

.title small{
  color:var(--muted);
}

/* ---------- NAVEGACIÓN ---------- */
.side-nav .section{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin:14px 10px 6px;
}

.side-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
}

.side-link:hover{
  background:rgba(33,193,166,.08);
  border-color:rgba(33,193,166,.20);
}

.side-link.active{
  background:rgba(33,193,166,.12);
  border-color:rgba(33,193,166,.25);
}

.side-link i{
  font-size:1.05rem;
}

/* Colapsado */
.app-sidebar.collapsed .side-link span,
.app-sidebar.collapsed .section,
.app-sidebar.collapsed .title strong,
.app-sidebar.collapsed .title small{
  display:none;
}

/* ---------- MAIN ---------- */
.app-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ---------- TOPBAR ---------- */
.app-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

/* ---------- CONTENIDO ---------- */
.content-wrap{
  padding:1.25rem 1.25rem 2rem;
  flex:1;
}

/* ---------- CARDS ---------- */
.card{
  border-radius:18px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

/* ---------- FORMULARIOS ---------- */
.form-control,
.form-select{
  border-radius:14px;
  border:1px solid var(--border);
}
.form-control:focus,
.form-select:focus{
  border-color:rgba(33,193,166,.6);
  box-shadow:0 0 0 .2rem rgba(33,193,166,.15);
}

/* ---------- BADGES ---------- */
.badge-soft{
  background:rgba(15,23,42,.06);
  color:var(--text);
  border:1px solid rgba(15,23,42,.08);
}
.badge-info{
  background:rgba(45,212,191,.12);
  border:1px solid rgba(45,212,191,.25);
  color:#0b3b33;
}
.badge-warn{
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.28);
  color:#3a2a00;
}

/* ---------- TEXTOS ---------- */
.smallcaps{
  letter-spacing:.08em;
  font-size:.72rem;
  text-transform:uppercase;
  color:var(--muted);
}
.help{
  color:var(--muted);
  font-size:.92rem;
}
.table thead th{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px){
  .app-sidebar{
    display:none;
  }
  .content-wrap{
    padding:1rem;
  }
}

.app-sidebar{
  display:flex;
  flex-direction:column;
}
.side-nav{
  flex:1;
}
.sidebar-footer{
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:12px;
}

/* ================= TOPBAR EJECUTIVO ================= */

.app-topbar-exec{
  position:sticky;
  top:0;
  z-index:900;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  gap:16px;
}

.topbar-context{
  line-height:1.2;
}

.topbar-title{
  font-weight:600;
  font-size:1.05rem;
  color:var(--text);
}

.topbar-title .dot{
  margin:0 6px;
  color:var(--muted);
}

.topbar-subtitle{
  font-size:.85rem;
  color:var(--muted);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-date{
  font-size:.85rem;
  color:var(--muted);
  white-space:nowrap;
}

/* Responsive */
@media (max-width: 768px){
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .topbar-actions{
    width:100%;
    justify-content:flex-end;
  }
}
/* ===== Sidebar Executive (mejoras) ===== */

/* Sidebar como columna: brand arriba, nav ocupa el centro, footer abajo */
.app-sidebar, #appSidebar{
  display:flex;
  flex-direction:column;
}

/* BRAND */
.sidebar-brand{
  padding:8px 10px 6px;
}
.sidebar-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:10px;
}
.sidebar-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}
.sidebar-logo{
  width:100%;
  max-width:260px;  /* logo grande sin desbordar */
  height:auto;
  display:block;
}

/* Línea divisoria clara */
.sidebar-divider{
  height:1px;
  background:var(--border);
  margin:12px 10px;
}

/* NAV ocupa todo el espacio disponible (scroll solo si hace falta) */
.sidebar-nav{
  flex:1;
  overflow:auto;   /* aparece solo cuando se necesite */
  padding:0 4px;
}

/* Footer siempre abajo */
.sidebar-footer{
  border-top:1px solid var(--border);
  padding:12px 10px;
  margin-top:10px;
}

/* Scrollbar discreto (solo WebKit) */
.sidebar-nav::-webkit-scrollbar{
  width:10px;
}
.sidebar-nav::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.12);
  border-radius:12px;
  border:3px solid rgba(255,255,255,.75);
}
.sidebar-nav::-webkit-scrollbar-track{
  background:transparent;
}

/* ===========================
   Sidebar Premium (Gerencia)
   =========================== */

/* Sidebar con “premium feel” */
.app-sidebar, #appSidebar{
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(232,108,8,.06), transparent 55%),
    rgba(255,255,255,.90);
  border-right:1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
}

/* BRAND */
.sidebar-brand{
  padding:14px 14px 10px;
}

.sidebar-kicker{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:rgba(15,23,42,.55);
  margin-bottom:12px;
}

/* Logo grande pero con aire */
.sidebar-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 0 10px;
}

.sidebar-logo{
  width:100%;
  max-width:240px;         /* grande pero controlado */
  height:auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(15,23,42,.10));
}

/* Separador más fino y elegante */
.sidebar-divider{
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(15,23,42,.12),
    transparent
  );
  margin:10px 14px 12px;
}

/* NAV ocupa el centro, scroll solo si hace falta */
.sidebar-nav{
  flex:1;
  overflow:auto;
  padding:0 8px 8px;
}

/* Secciones con mejor jerarquía */
.side-nav .section{
  font-size:.70rem;
  letter-spacing:.12em;
  color:rgba(15,23,42,.50);
  margin:14px 10px 8px;
}

/* Links con “pill” premium */
.side-link{
  border-radius:16px;
  padding:10px 12px;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.side-link:hover{
  background:rgba(232,108,8,.07);
  border-color:rgba(232,108,8,.18);
}

.side-link.active{
  background:rgba(232,108,8,.10);
  border-color:rgba(232,108,8,.25);
}

/* Footer pegado abajo */
.sidebar-footer{
  border-top:1px solid rgba(15,23,42,.10);
  padding:12px 14px;
  margin-top:8px;
  background:linear-gradient(180deg, transparent, rgba(15,23,42,.02));
}

/* Scrollbar ultra discreto */
.sidebar-nav::-webkit-scrollbar{
  width:10px;
}
.sidebar-nav::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.14);
  border-radius:12px;
  border:3px solid rgba(255,255,255,.85);
}
.sidebar-nav::-webkit-scrollbar-track{
  background:transparent;
}
/* ===========================
   Topbar Premium – Gerencia
   =========================== */

/* Contenedor ya definido, solo afinamos colores */
.app-topbar-exec{
  background:rgba(255,255,255,.96);
}

/* TÍTULO PRINCIPAL */
.topbar-title{
  font-weight:600;
  font-size:1.08rem;
  color:#0f172a; /* slate oscuro premium */
  letter-spacing:.2px;
}

/* Separador tipo “·” con color marca */
.topbar-title .dot{
  color:var(--brand); /* Novacolor */
  margin:0 6px;
  font-weight:700;
}

/* Subtítulo ejecutivo */
.topbar-subtitle{
  font-size:.85rem;
  color:rgba(15,23,42,.60);
  margin-top:2px;
}

/* Fecha discreta */
.topbar-date{
  color:rgba(15,23,42,.55);
  font-weight:500;
}

/* Botón Nueva OC – más premium */
.app-topbar-exec .btn-primary{
  box-shadow:0 6px 18px rgba(232,108,8,.25);
}

/* Botón de acciones más sobrio */
.app-topbar-exec .btn-outline-secondary{
  background:rgba(15,23,42,.03);
}
.app-topbar-exec .btn-outline-secondary:hover{
  background:rgba(15,23,42,.07);
}

/* ===== Page Head Premium ===== */
.page-head{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.85);
  box-shadow:var(--shadow);
}

.page-head__left{ max-width:820px; }

.page-kicker{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:rgba(15,23,42,.55);
  margin-bottom:6px;
}

.page-title{
  font-size:1.35rem;
  margin:0 0 6px;
  color:#0f172a;
}

.page-subtitle{
  margin:0;
  color:rgba(15,23,42,.62);
  font-size:.95rem;
  line-height:1.45;
}

.page-head__right{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

@media (max-width: 768px){
  .page-head{ flex-direction:column; }
  .page-head__right{ width:100%; justify-content:flex-start; }
}

/* ===== Dashboard – Proceso ===== */
.process-step{
  padding:10px 8px;
  border-radius:14px;
  background:rgba(15,23,42,.05);
  color:rgba(15,23,42,.55);
  font-size:.85rem;
  border:1px solid rgba(15,23,42,.08);
}

.process-step.active{
  background:rgba(232,108,8,.12);
  border-color:rgba(232,108,8,.30);
  color:#0f172a;
  font-weight:600;
}
/* ===== Matriz – estilos premium ===== */
.prio{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.80rem;
  font-weight:600;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.04);
}
.prio-critical{ background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.22); color:#7a0b0b; }
.prio-high{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.26); color:#5a3900; }
.prio-medium{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.22); color:#123a7a; }
.prio-low{ background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.12); color:rgba(15,23,42,.70); }

.status{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.80rem;
  border:1px solid rgba(15,23,42,.10);
}
.status-pending{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.28); color:#3a2a00; }
.status-approved{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); color:#0b3b1c; }
.status-buying{ background:rgba(232,108,8,.12); border-color:rgba(232,108,8,.28); color:#4a2100; }
.status-import{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.22); color:#123a7a; }

/* ===== Registros – Eventos ===== */
.ev{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.80rem;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.04);
  font-weight:600;
}

.ev-create{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); color:#0b3b1c; }
.ev-edit{ background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.22); color:#123a7a; }
.ev-approve{ background:rgba(232,108,8,.12); border-color:rgba(232,108,8,.28); color:#4a2100; }
.ev-alert{ background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.22); color:#7a0b0b; }


/* ===== Pagos – Estados ===== */
.status-paid{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.22);
  color:#0b3b1c;
}

/* ===== Importaciones – Steps ===== */
.import-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.import-steps .step{
  text-align:center;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
  color:rgba(15,23,42,.60);
  font-size:.82rem;
}
.import-steps .step.done{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.22);
  color:#0b3b1c;
  font-weight:600;
}
.import-steps .step.active{
  background:rgba(232,108,8,.12);
  border-color:rgba(232,108,8,.28);
  color:#4a2100;
  font-weight:600;
}
/* ===== Modal Docs – premium ===== */
.modal-premium{
  border-radius:22px;
  overflow:hidden;
}
.modal-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}
.modal-icon{
  width:44px; height:44px;
  border-radius:16px;
  display:grid; place-items:center;
  background:rgba(232,108,8,.12);
  border:1px solid rgba(232,108,8,.22);
  color:#4a2100;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.75);
  font-size:.82rem;
  color:rgba(15,23,42,.75);
}

.nav-pills-premium .nav-link{
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.03);
  color:rgba(15,23,42,.78);
  padding:.45rem .85rem;
}
.nav-pills-premium .nav-link.active{
  background:rgba(232,108,8,.12);
  border-color:rgba(232,108,8,.28);
  color:#4a2100;
  font-weight:600;
}

.docs-list{ display:grid; gap:10px; }
.docs-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
}
.docs-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.doc-flag{
  width:28px; height:28px;
  border-radius:10px;
  display:grid; place-items:center;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(15,23,42,.04);
}
.doc-flag.ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.22); color:#0b3b1c; }
.doc-flag.warn{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.26); color:#5a3900; }
.doc-flag.soft{ background:rgba(15,23,42,.04); border-color:rgba(15,23,42,.12); color:rgba(15,23,42,.55); }

.progress-bar{
  background:linear-gradient(90deg, var(--brand), rgba(232,108,8,.55));
}