:root{
  /* Paleta */
  --brand-900:#0B2E1F;
  --brand-800:#0F3F29;
  --brand-700:#146A3C;
  --brand-600:#1E8A50;
  --brand-500:#26A863;
  --brand-400:#5FCC8A;
  --brand-200:#E2F6EB;
  --brand:#1E8A50;

  --head-bg:#E7F4EC;
  --head-text:#0F3F29;

  --bg:#F4F8F5;
  --surface:#FFFFFF;
  --surface-2:#FAFBFA;

  --border:#D3E6D9;
  --border-strong:#B9D4C2;

  --ok:#27AE60;
  --warn:#D98C15;
  --err:#C0392B;

  --accent-soft:#CDEED9;
  --accent-hover:#E9F6EF;

  /* Texto */
  --ink:#0f172a;
  --ink-2:#111827;
  --muted:#6b7280;

  /* Radius + sombras */
  --radius:16px;
  --shadow-1:0 8px 22px rgba(0,0,0,.05);
  --shadow-2:0 16px 38px rgba(0,0,0,.08);
}


html{
  scroll-behavior:smooth
}

body{ background: var(--bg); color: var(--ink-2); }


/* Dark theme */
html[data-theme="dark"]{
  --bg:#0d1114; 
  --surface:#0f1417; 
  --surface-2:#12181c;
  --ink:#e8eaed; 
  --ink-2:#e2e4e8; 
  --muted:#9aa4ae;
  --border:#1f2a30; 
  --head-grad:linear-gradient(180deg, #0f2015, #0c1711);
}

html[data-theme="dark"] body{
  background: radial-gradient(1000px 700px at -10% -10%, #0f2015 0, transparent 55%),
              radial-gradient(1100px 750px at 110% -20%, #0c1711 0, transparent 50%),
              var(--bg);
}

/* Navbar */
.custom-navbar{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  position: sticky; 
  top: 0; 
  z-index: 1000;
  padding: .8rem 1rem; 
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}

.navbar-brand{ 
  color:#fff !important; 
  font-weight:800; 
  letter-spacing:.2px; 
}

.brand-dot{ 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:#b4ffca; 
  box-shadow:0 0 12px #b4ffca; 
  display:inline-block 
}
.action-bar .divider{ 
  width:1px; 
  height:22px; 
  background:rgba(255,255,255,.35); 
  margin-inline:.25rem 
}

.custom-navbar .btn, .custom-navbar .btn-sm{ 
  border-radius:999px 
}

.custom-navbar .btn-light{
  background:#fff; 
  color:var(--brand)!important; 
  border:1px solid #e9ecef;
  transition: .2s ease; 
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}

.custom-navbar .btn-light:hover{ 
  transform: translateY(-1px); 
  background:#f4fff5 
}

.custom-navbar .btn-outline-light{ 
  color:#fff; 
  border-color:#fff 
}

.custom-navbar .btn-outline-light:hover{ 
  background:rgba(255,255,255,.12) 
}

.thin-progress{
  height:3px; 
  background:linear-gradient(90deg,#b4ffca,#7fe3a1,#d1ffd9);
  transition: width .4s ease; 
  box-shadow:0 0 12px rgba(180,255,202,.5) inset;
}

.thin-progress.active{ 
  width:80% 
}

/* Card principal */
.ancho-ampliado{ 
  max-width:100%; 
  width:100%; 
  padding-inline:2rem 
}

.ancho-ampliado .card{ 
  max-width:1400px; 
  margin:auto 
}

.glass-card{
  border:none; border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.82));
  box-shadow: var(--shadow-2); 
  backdrop-filter: blur(6px);
}

html[data-theme="dark"] .glass-card{
  background: linear-gradient(180deg, rgba(20,25,28,.85), rgba(16,20,23,.82));
}

/* Header */
.custom-header{
  background: linear-gradient(180deg, var(--brand) 0, var(--brand-700) 100%);
  color:#fff; 
  padding:1rem 1.5rem; 
  font-weight:700;
  border-top-left-radius:var(--radius); 
  border-top-right-radius:var(--radius);
}

.pill-input{
  border-radius:999px; 
  border:none; 
  padding:.35rem .8rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  background: rgba(255,255,255,.15); 
  color:#fff;
}

html[data-theme="dark"] .pill-input{ 
  color:#eaeef0 
}

.section-title{ 
  font-weight:800; 
  letter-spacing:.02em 
}

/* Spinner overlay + loader */
.spinner-overlay{
  position:absolute; 
  inset:0; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  background: rgba(0,0,0,.25); 
  z-index:10; 
  border-radius:var(--radius);
}

.loader{ 
  display:flex; 
  gap:.35rem 
}

.loader span{
  width:10px; 
  height:10px; 
  border-radius:50%;
  background:#c1ffd0; 
  box-shadow:0 0 10px #c1ffd0;
  animation: b 1s infinite ease-in-out
}

.loader span:nth-child(2){ 
  animation-delay:.15s 
}

.loader span:nth-child(3){ 
  animation-delay:.3s 
}

@keyframes b{ 
  0%,80%,100%{ transform:scale(0)} 40%{ transform:scale(1)} 
}

/* KPIs */
.kpi{ 
  display:flex; 
  flex-direction:column; 
  align-items:flex-end; 
  color:#fff 
}

.kpi-label{ 
  font-size:.7rem; 
  opacity:.7 
}

.kpi-value{ 
  font-weight:800; 
  line-height:1
}

/* Tablas premium */
.table-responsive{ 
  overflow:auto; 
  width:100% 
}

.table-responsive.mb-4{ 
  margin-bottom:1.5rem 
}

.elevate{ 
  border-radius:14px;
  box-shadow: var(--shadow-1); 
  overflow:hidden 
}

.nice-table{ 
  width:100%; 
  table-layout:fixed; 
  border-collapse:separate; 
  border-spacing:0;
  min-width:1500px;
}

.nice-table thead th{
  position:sticky; top:0; z-index:2;
  background: var(--head-bg);
  color: var(--brand-800);
  font-weight:800; 
  border-bottom:2px solid var(--border);
  text-transform:uppercase; 
  font-size:.78rem; 
  letter-spacing:.02em
}

html[data-theme="dark"] .nice-table thead th{ 
  color:#cfe7d2 
}

.nice-table th, .nice-table td{
  padding:.7rem .6rem; 
  white-space:normal; 
  word-wrap:break-word;
  overflow-wrap:break-word; 
  text-overflow:ellipsis; 
  overflow:hidden;
  font-size:.92rem; 
  border-bottom:1px solid var(--border);
  background: var(--surface)
}

tbody tr:nth-child(odd) td{ 
  background: var(--surface-2) 
}

tbody tr.table-success td{ 
  background:#dff5e2 !important 
}

tbody tr.table-secondary td{ 
  background:#eff1f3 !important 
}

/* STOCK SUFICIENTE (ancho columnas) */
.tabla-stock-suficiente th:nth-child(1),
.tabla-stock-suficiente td:nth-child(1){ 
  width:65px; 
  text-align:center
}

.tabla-stock-suficiente th:nth-child(2),
.tabla-stock-suficiente td:nth-child(2){ 
  width:110px; 
  text-align:center
}

.tabla-stock-suficiente th:nth-child(3),
.tabla-stock-suficiente td:nth-child(3){ 
  width:110px; 
  text-align:center
}

.tabla-stock-suficiente th:nth-child(4){ 
  width:210px;
  text-align:center
}

.tabla-stock-suficiente td:nth-child(4){ 
  width:210px; 
  text-align:left
}

.tabla-stock-suficiente th:nth-child(5),
.tabla-stock-suficiente td:nth-child(5){ 
  width:125px; 
  text-align:center
}

.tabla-stock-suficiente th:nth-child(6){
  width:250px; 
  text-align:center
}
.tabla-stock-suficiente td:nth-child(6){ 
  width:250px; 
  text-align:left
}

.tabla-stock-suficiente th:nth-child(7),
.tabla-stock-suficiente td:nth-child(7){ 
  width:90px; 
  text-align:center !important 
}

.tabla-stock-suficiente th:nth-child(8),
.tabla-stock-suficiente td:nth-child(8){ 
  width:110px; 
  text-align:center
}

.tabla-stock-suficiente th:nth-child(9),
.tabla-stock-suficiente td:nth-child(9){ 
  width:90px; 
  text-align:center 
}

.tabla-stock-suficiente th:nth-child(10),
.tabla-stock-suficiente td:nth-child(10){ 
  width:120px; 
  text-align:center
}

/* STOCK INSUFICIENTE */
.tabla-stock-insuficiente th:nth-child(1),
.tabla-stock-insuficiente td:nth-child(1){ 
  width:100px; 
  text-align:center
}

.tabla-stock-insuficiente th:nth-child(2),
.tabla-stock-insuficiente td:nth-child(2){ 
  width:110px; 
  text-align:center
}

.tabla-stock-insuficiente th:nth-child(3){
  width:220px; 
  text-align:center
}
.tabla-stock-insuficiente td:nth-child(3){ 
  width:220px; 
  text-align:left
}

.tabla-stock-insuficiente th:nth-child(4),
.tabla-stock-insuficiente td:nth-child(4){ 
  width:130px; text-align:center; 
}

.tabla-stock-insuficiente th:nth-child(5){
  width:270px; 
  text-align:center
}
.tabla-stock-insuficiente td:nth-child(5){ 
  width:270px; 
  text-align:left
}

.tabla-stock-insuficiente th:nth-child(6),
.tabla-stock-insuficiente td:nth-child(6){ 
  width:100px; 
  text-align:center !important 
}

.tabla-stock-insuficiente th:nth-child(7),
.tabla-stock-insuficiente td:nth-child(7){
  width:75px; 
  text-align:center
}

.tabla-stock-insuficiente th:nth-child(8),
.tabla-stock-insuficiente td:nth-child(8){ 
  width:90px; 
  text-align:center 
}

.tabla-stock-insuficiente th:nth-child(9),
.tabla-stock-insuficiente td:nth-child(9){ 
  width:120px; 
  text-align:center 
}

/* Select orden */
select.orden-select{
  width:100%; 
  border:1px solid #ced4da;
  border-radius:999px;
  padding:.25rem .6rem; 
  font-size:.85rem; 
  background:#fff; 
  transition:.15s ease
}

select.orden-select:focus{
  outline:none; 
  border-color:#9ad0a1; 
  box-shadow:0 0 0 .2rem rgba(29,92,47,.18)
}

/* Badges */
.badge{ 
  border-radius:999px; 
  font-weight:700; 
  letter-spacing:.02em
}

/* Alerta */
#mensaje-notif{
  font-size:.95rem; 
  padding:.85rem; 
  border-radius:12px; 
  margin-bottom:1rem;
  border:1px solid var(--border); 
  background:#fcfffc
}

/* Overlay ATP */
#atp-overlay{
  display:none; 
  position:fixed; 
  inset:0; 
  z-index:1055;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  justify-content:center; 
  align-items:center
}

#atp-overlay div{
  color:#fff; 
  font-size:1.1rem; 
  padding:.9rem 1.2rem; 
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  box-shadow: var(--shadow-2)
}

/* Scrollbar */
.table-responsive::-webkit-scrollbar{ height:10px; width:10px }
.table-responsive::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#d2e8d4,#c9e6cc);
  border-radius:999px; border:2px solid #f6fbf6;
}

.table-responsive::-webkit-scrollbar-track{ 
  background:#f6fbf6; 
  border-radius:999px
}

/* Compact mode */
body.dense .nice-table th, 
body.dense .nice-table td{ 
  padding:.45rem .4rem; 
  font-size:.86rem 
}

/* Responsive */
@media (max-width: 992px){
  .nice-table th, .nice-table td{ 
    font-size:.88rem; padding:.55rem 
  }
}

@media (max-width: 768px){
  .navbar-brand{ 
    font-size:1rem 
  }

  .custom-header h5{ 
    font-size:1rem 
  }
}

.table-responsive {
  overflow-x: auto !important;
  overflow-y: hidden !important
}

.nice-table {
  table-layout: auto !important; /* permite que se expanda */
  min-width: 1500px !important  /* asegura scroll horizontal */
}

/* ====== FIX: Filtros en UNA sola línea (desktop) ====== */

/* El header: título a la izquierda, filtros a la derecha */
.card-header.custom-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Contenedor de filtros: NO partir en desktop */
.card-header.custom-header .filters{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap !important;   /* <-- clave */
  white-space:nowrap;            /* <-- clave */
}

/* "Rango de fechas:" en una sola línea */
.card-header.custom-header .filters .form-label{
  margin:0;
  white-space:nowrap;            /* <-- clave */
}

/* Inputs con ancho fijo para que no se rompan */
.card-header.custom-header .filters input[type="date"]{
  width:170px;
  min-width:170px;
}

/* Botón limpiar no se achica */
.card-header.custom-header .filters #btn-limpiar-fechas{
  flex:0 0 auto;
}

/* ============================= */
/* ====== MODO MÓVIL ========= */
/* ============================= */
@media (max-width: 768px){

  /* Navbar */
  .custom-navbar{
    padding:.6rem .75rem;
  }

  .action-bar{
    flex-wrap: wrap;
    gap:.5rem;
  }

  .kpi{
    align-items:flex-start;
  }

  .kpi-value{
    font-size:1rem;
  }

  /* OCULTAR TABLAS EN MÓVIL */
  .nice-table{
    display:none;
  }

  /* CONTENEDOR DE TARJETAS */
  .mobile-cards{
    display:flex;
    flex-direction:column;
    gap:.75rem;
  }

  .mobile-card{
    background:#fff;
    border-radius:14px;
    padding:.75rem;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    border-left:6px solid var(--ok);
  }

  .mobile-card.insuficiente{
    border-left-color: var(--err);
  }

  .mobile-card h6{
    font-weight:800;
    margin-bottom:.25rem;
    font-size:.95rem;
  }

  .mobile-card small{
    color:var(--muted);
    display:block;
    font-size:.75rem;
  }

  .mobile-card .row{
    font-size:.85rem;
    margin-top:.35rem;
  }

  .mobile-card .badge{
    font-size:.7rem;
  }

  .card-header.custom-header{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .card-header.custom-header .filters{
    flex-wrap:wrap !important;
    white-space:normal;
  }
  .card-header.custom-header .filters input[type="date"],
  .card-header.custom-header .filters #btn-limpiar-fechas{
    width:100%;
    min-width:0;
  }
}