.grid{
  grid-column:2 !important;
  display:grid !important;
  grid-template-columns:minmax(420px, 1.12fr) minmax(360px, .88fr) !important;
  gap:22px !important;
  padding:28px !important;
  align-items:start !important;
  background:
    linear-gradient(180deg,#f8faf5 0%,#f1f6ef 100%) !important;
}

.card,
.panel-title-box,
.alerts-box{
  background:#ffffff !important;
  color:#17231e !important;
  border:1px solid rgba(25,70,47,.08) !important;
  border-radius:28px !important;
  padding:22px !important;
  box-shadow:0 16px 46px rgba(26,55,42,.10) !important;
}

.card{
  position:relative !important;
}

.card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  border-radius:28px 0 0 28px;
  background:linear-gradient(180deg,#1fa66b,#c29a3b);
  opacity:.92;
}

.card h2{
  margin:0 0 18px !important;
  color:#10251c !important;
  font-size:21px !important;
  font-weight:950 !important;
  letter-spacing:.2px !important;
}

.card h2::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:10px;
  border-radius:50%;
  background:#1fa66b;
  box-shadow:0 0 0 5px rgba(31,166,107,.13);
  vertical-align:middle;
}

.card p,
.sub,
.note,
.panel-title-note,
.alerts-box-note,
.item .meta,
.inv-count,
.pager-info{
  color:#63776d !important;
}

.form-grid{
  gap:14px !important;
}

.field{
  gap:7px !important;
}

label,
.panel-title-box label,
.alerts-box-title{
  color:#30483b !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.55px !important;
  text-transform:uppercase !important;
}

input,
textarea,
.panel-title-input{
  background:#f7f9f4 !important;
  color:#17231e !important;
  border:1px solid #d7e3db !important;
  border-radius:16px !important;
  box-shadow:none !important;
}

input:focus,
textarea:focus,
.panel-title-input:focus{
  border-color:#1fa66b !important;
  box-shadow:0 0 0 4px rgba(31,166,107,.13) !important;
}

.date-input-wrap input[type="date"],
.date-input-wrap input[type="date"]::-webkit-datetime-edit,
.date-input-wrap input[type="date"]::-webkit-datetime-edit-text,
.date-input-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.date-input-wrap input[type="date"]::-webkit-datetime-edit-day-field,
.date-input-wrap input[type="date"]::-webkit-datetime-edit-year-field{
  color:#ffffff !important;
}
.date-input-wrap input[type="date"]::placeholder{
  color:#ffffff !important;
  opacity:1 !important;
}

.actions{
  gap:12px !important;
  margin-top:20px !important;
}

button,
.small-btn{
  border-radius:16px !important;
  letter-spacing:.15px !important;
}

.btn-primary,
.pager-btn.is-active{
  background:linear-gradient(135deg,#168453,#28bd7b) !important;
  color:#ffffff !important;
  box-shadow:0 12px 26px rgba(31,166,107,.22) !important;
}

.btn-dark,
.btn-ghost,
.pager-btn{
  background:#ffffff !important;
  color:#183125 !important;
  border:1px solid #d6e3da !important;
  box-shadow:0 8px 20px rgba(26,55,42,.06) !important;
}

.btn-danger{
  background:linear-gradient(135deg,#c83d3d,#8e1f1f) !important;
  color:#ffffff !important;
  box-shadow:0 12px 24px rgba(200,61,61,.16) !important;
}

.status,
.products-fixed-note{
  background:#eef8f2 !important;
  border:1px solid #cce7d6 !important;
  color:#1f6c49 !important;
  border-radius:18px !important;
}

#lastRecordBox{
  background:#eef8f2 !important;
  border-color:#cce7d6 !important;
  color:#1f6c49 !important;
}

#editModeBox{
  background:#fff7e4 !important;
  border-color:#ead59b !important;
  color:#7c5a13 !important;
}

.products-select{
  gap:12px !important;
}

.product-option{
  background:#f7f9f4 !important;
  color:#1a2d23 !important;
  border:1px solid #d7e3db !important;
  border-radius:16px !important;
  box-shadow:none !important;
}

.product-option:hover,
.item:hover{
  border-color:#9ccdad !important;
  box-shadow:0 12px 28px rgba(31,166,107,.10) !important;
}

.product-option input{
  accent-color:#1fa66b !important;
}

.inv-head{
  padding-bottom:12px !important;
  border-bottom:1px solid #e1e9e3 !important;
}

.inventory{
  gap:12px !important;
}

.item{
  background:#f8faf6 !important;
  border:1px solid #dde8df !important;
  border-left:5px solid #1fa66b !important;
  border-radius:18px !important;
  padding:16px !important;
  box-shadow:none !important;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.item:hover{
  transform:translateY(-1px) !important;
}

.inventory-search{
  background:#f7f9f4 !important;
  border:1px solid #d7e3db !important;
  border-radius:16px !important;
  box-shadow:none !important;
}

.alert-pill{
  background:#f8faf6 !important;
  border:1px solid #dce8df !important;
  border-radius:18px !important;
  color:#17231e !important;
}

.alert-pill.is-blue{
  border-color:#cce7d6 !important;
}

.undo-bar,
.desktop-zoom-ui{
  background:#ffffff !important;
  color:#17231e !important;
  border:1px solid #d7e3db !important;
  box-shadow:0 18px 50px rgba(26,55,42,.18) !important;
  border-radius:20px !important;
}

.undo-text{
  color:#17231e !important;
}

.desktop-zoom-btn{
  background:#f7f9f4 !important;
  color:#183125 !important;
  border:1px solid #d6e3da !important;
  box-shadow:none !important;
}

html{
  scrollbar-color:#1fa66b #edf4ed !important;
}

body::-webkit-scrollbar-track{
  background:#edf4ed !important;
}

body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#28bd7b,#168453) !important;
  border:2px solid #edf4ed !important;
}

/* Mantener legibilidad del bloqueo de impresión */
body.sp-public-locked.sp-hide-on-print .sp-print-blocked{
  background:linear-gradient(180deg,#10251c,#07100c) !important;
  color:#f5fff8 !important;
}

/* Responsivo */
@media (max-width: 1120px){
  .wrap{
    max-width:calc(100% - 24px) !important;
    padding:12px 0 !important;
  }

  .wrap > .panel{
    grid-template-columns:1fr !important;
    border-radius:28px !important;
  }

  .topbar{
    position:relative !important;
    top:auto !important;
    grid-column:1 !important;
    min-height:auto !important;
    border-radius:28px 28px 0 0 !important;
  }

  .topbar > div{
    min-height:auto !important;
  }

  .topbar > div::after{
    margin-top:8px !important;
  }

  .grid{
    grid-column:1 !important;
    grid-template-columns:1fr !important;
    padding:18px !important;
  }
}

@media (max-width: 680px){
  #loginScreen{
    background:linear-gradient(180deg,#10251c 0 28%, #f4f7ef 28% 100%) !important;
    padding:16px !important;
  }

  .login-box{
    padding:26px 20px !important;
    border-radius:24px !important;
  }

  .wrap{
    max-width:100% !important;
    padding:0 !important;
  }

  .wrap > .panel{
    min-height:100vh !important;
    border-radius:0 !important;
  }

  .topbar{
    border-radius:0 !important;
    padding:24px 18px !important;
  }

  .grid{
    padding:14px !important;
    gap:14px !important;
  }

  .card,
  .panel-title-box,
  .alerts-box{
    border-radius:22px !important;
    padding:18px !important;
  }

  .card::before{
    border-radius:22px 0 0 22px;
  }

  .products-select,
  .actions,
  .alerts-box-grid{
    grid-template-columns:1fr !important;
  }
}