/* ================================
   ReyPaletas UI - Mobile First
   ================================ */

:root{
  --rp-bg:#f6f7f9;
  --rp-card:#ffffff;
  --rp-border:rgba(0,0,0,.08);
  --rp-muted:rgba(0,0,0,.55);
  --rp-radius:16px;
}

body{
  background:var(--rp-bg);
  font-family:Manrope, sans-serif;
}

/* Keep content readable on large screens */
.rp-inv-root{
  max-width:720px;
  margin:0 auto;
  padding:18px 14px;
}

/* ================================
   Layout Blocks
   ================================ */

.rp-section{
  margin-bottom:16px;
}

.rp-section-title{
  font-size:18px;
  font-weight:900;
  margin-bottom:10px;
}

.rp-big{
  font-size:28px;
  font-weight:900;
}

/* ================================
   NEW: Responsive 2-col grid
   (mobile-first; stacks on small screens)
   ================================ */

.rp-grid-2{
  display:grid;
  grid-template-columns:1fr; /* mobile stacked */
  gap:10px;
}

@media (min-width:520px){
  .rp-grid-2{
    grid-template-columns:1fr 1fr; /* side-by-side */
  }
}
/* Always single column */
.rp-grid-1{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

/* ================================
   Cards
   ================================ */

.rp-card{
  background:var(--rp-card);
  border:1px solid var(--rp-border);
  border-radius:var(--rp-radius);
  padding:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}

.rp-row-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.rp-name{
  font-size:15px;
  font-weight:900;
  margin-bottom:4px;
}

.rp-sub{
  font-size:12px;
  color:var(--rp-muted);
}

.rp-muted{
  font-size:12px;
  color:var(--rp-muted);
}

/* Inactive clients */
.rp-client-card.is-inactive{
  opacity: .55;
}

/* Supply Orders: responsive card layout */
.rp-supply-row{
  display:block;
}

.rp-pack-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px; /* mobile spacing under stock box */
}

.rp-pack-mid{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.rp-pack-mid .rp-input{
  width:110px;
  text-align:center;
}

.rp-pack-label{
  margin-top:6px;
}

/* Pack controls */
.rp-pack-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:10px;
}

.rp-pack-row{
  display:grid !important;
  grid-template-columns: repeat(4, auto);
  gap:10px;
  justify-content:start;
}

.rp-pack-row .rp-input{
  width:110px;
  text-align:center;
}

.rp-pack-label{
  margin-top:6px;
  width:110px;
  text-align:center;
}

/* Desktop layout (center controls vs stock box) */
@media (min-width: 640px){
  .rp-supply-row{
    display:flex;
    gap:12px;
    align-items:center;            /* <-- vertical center */
  }
  .rp-supply-left{ flex:1 1 auto; }
  .rp-supply-right{
    flex:0 0 220px;
    display:flex;
    justify-content:flex-end;
    align-items:center;            /* <-- vertical center */
  }
}

/* ===============================
   Review Modal
================================ */

.rp-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.rp-modal{
  background:#fff;
  border-radius:16px;
  padding:20px;
  width:420px;
  max-width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}

.rp-modal-title{
  font-weight:800;
  font-size:18px;
  margin-bottom:12px;
}

.rp-review-line{
  display:flex;
  justify-content:space-between;
  padding:4px 0;
}

.rp-review-total{
  margin-top:14px;
  font-size:16px;
  font-weight:700;
}

.rp-modal-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ================================
   Category Sections
   ================================ */

.rp-cat{
  margin-top:18px;
}

.rp-cat h2{
  font-size:16px;
  font-weight:900;
  margin:10px 0;
}

.rp-list{
  display:flex;
  flex-direction:column;
  gap:12px; /* single column spacing */
}

/* ================================
   Inventory Mini Rows
   ================================ */

.rp-mini-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}

.rp-mini-row{
  display:flex;
  justify-content:flex-start;
  align-items:baseline;
  gap:8px;
  font-size:12px;
  opacity:.9;
}

.rp-mini-row > div:first-child{
  min-width:80px;   /* aligns Napo / Orellana */
}

.rp-mini-row > div:last-child{
  white-space:nowrap;
}

.rp-mini-row strong{
  font-weight:900;
}

/* ================================
   Buttons
   ================================ */

/* Primary action button used across pages (works for <a>, <button>, <input>) */
.rp-btn,
button.rp-btn,
input.rp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:#111;
  color:#fff;
  border:1px solid #111;

  border-radius:12px;
  padding:10px 12px;

  font-size:12px;
  font-weight:800;

  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;

  transition:background .2s ease, border-color .2s ease, transform .05s ease, box-shadow .2s ease;
}

.rp-btn:hover{
  background:#000;
  border-color:#000;
  transform:translateY(-1px);
}

.rp-btn:active{
  transform:translateY(0);
}

/* Keyboard focus */
.rp-btn:focus{
  outline:none;
}
.rp-btn:focus-visible{
  outline:2px solid rgba(17,17,17,.35);
  outline-offset:2px;
}

/* Disabled state */
.rp-btn[aria-disabled="true"],
.rp-btn:disabled,
button.rp-btn:disabled,
input.rp-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Keep your existing "open/details" control as an alias */
.rp-open{
  background:#111;
  color:#fff;
  border:1px solid #111;
  border-radius:12px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.rp-open:hover{
  background:#000;
  border-color:#000;
}

/* Panel: primary-looking Edit button */
.rp-panel-actions [data-edit]{
  background:#111;
  color:#fff;
  border-color:#111;
}
.rp-panel-actions [data-edit]:hover{
  opacity:.92;
}
/* ===============================
   Danger buttons
================================ */

.rp-btn--danger{
  color:#a11b2b;
  border-color:#a11b2b;
}

.rp-btn--danger:hover{
  background:#a11b2b;
  color:#fff;
}
.rp-btn--cancel::before{
  content:"⚠";
  margin-right:6px;
}
.rp-warning{
  color:#b91c1c;
  font-weight:600;
}

/* ===============================
   Trash icon
================================ */

.rp-btn--trash::before{
  content:"🗑";
  margin-right:6px;
  font-size:14px;
}
/* ================================
   Chips (Clients, etc.)
   ================================ */

.rp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.rp-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--rp-border);
  background:rgba(0,0,0,.03);
  font-size:12px;
  line-height:1;
}

.rp-chip strong{
  font-weight:900;
}

.rp-chip--muted{
  opacity:.7;
}

.rp-note{
  font-size:11px;
  color:var(--rp-muted);
}

/* Clients: keep the title readable on small screens */
.rp-client-card .rp-name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
/* Supplier History - Filters */
.rp-sup-his-filters{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px 0 14px;
}

.rp-sup-his-tabs{
  gap:8px;
}

.rp-chip--active{
  background:#444;   /* dark grey */
  color:#fff;
  border-color:#444;
}

.rp-sup-his-cancel{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--rp-muted);
}

/* ================================
   Drawer Panel (Bottom Sheet)
   ================================ */

.rp-panel-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  z-index:9998;
}

.rp-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:-100%;
  background:#fff;
  border-radius:20px 20px 0 0;
  transition:.3s ease;
  z-index:9999;
  max-height:85vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* ================================
   Confirm (Unsaved changes)
   ================================ */
.rp-confirm-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  z-index:10000;
}

.rp-confirm{
  position:fixed;
  left:14px;
  right:14px;
  bottom:-220px;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--rp-border);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:14px;
  transition:.25s ease;
  z-index:10001;
}

.rp-confirm-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.rp-confirm.open{
  bottom:14px;
}

.rp-confirm-title{
  font-weight:900;
  font-size:14px;
}

.rp-confirm-msg{
  margin-top:6px;
  font-size:12px;
  color:var(--rp-muted);
}

.rp-confirm-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.rp-panel-inner{
  padding:16px;
  overflow-y:auto;
}

.rp-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.rp-panel-title{
  font-size:16px;
  font-weight:900;
}
.rp-panel-sub{
  font-size:12px;
  font-weight:600;
  color:var(--rp-muted);
  margin-top:2px;
}
.rp-panel-close{
  background:#fff;
  border:1px solid var(--rp-border);
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}

.rp-panel-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.rp-panel.open{
  bottom:0;
}

.rp-panel-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Tiny inline actions (copy / map / ver pedido) */
.rp-mini-btn{
  margin-left:8px;
  border:1px solid var(--rp-border);
  background:#fff;
  border-radius:10px;
  padding:4px 8px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.rp-mini-link{
  margin-left:8px;
  font-size:12px;
  font-weight:800;
  text-decoration:underline;
  opacity:.9;
}

/* Smaller inline link variant (for "(Abrir mapa)") */
.rp-mini-link--sm{
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  opacity:.85;
}

.rp-mini-link--sm:hover{
  text-decoration:underline;
  opacity:1;
}

/* Location header alignment */
.rp-loc-head{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.rp-mini-link:hover{ opacity:1; }

.rp-sup-his-head{
  align-items:flex-start;
}

.rp-sup-his-head-right{
  flex:0 0 auto;
}

.rp-sup-his-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}

/* Supplier History - Detail rows */
.rp-sup-det-group{
  margin-top:10px;
}

.rp-sup-det-group-title{
  margin-bottom:6px;
  font-size:11px;
  font-weight:900;
  color:var(--rp-muted);
}

.rp-sup-det-lines{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rp-sup-det-line{
  display:flex;
  align-items:center;
  gap:12px;
  padding:2px 0;
}

.rp-sup-det-name{
  font-size:14px;
  font-weight:800;
  min-width:140px;
}

.rp-sup-det-qty{
  font-size:14px;
  white-space:nowrap;
  color:var(--rp-muted);
  flex:0 0 auto;
}

/* ================================
   Small Utility Boxes
   ================================ */

.rp-box{
  border:1px solid var(--rp-border);
  border-radius:12px;
  padding:12px;
  margin-top:10px;
}

.rp-box h4{
  margin:0 0 8px 0;
  font-size:13px;
  font-weight:800;
}
/* Region title inside Resumen Regional */
.rp-region-title{
  font-size:13px;   /* same as h4 */
  font-weight:800;
  margin-bottom:6px;
}

.rp-warn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(220, 38, 38, .35);
  background:rgba(220, 38, 38, .08);
  color:#b91c1c;
}

/* ================================
   Basic Select Styling (if present)
   ================================ */

.rp-select{
  width:100%;
  max-width:220px;
  padding:8px 10px;
  border:1px solid var(--rp-border);
  border-radius:10px;
  background:#fff;
}

/* Inventory: hide region filter dropdown (not needed here) */
.rp-inv-root .rp-select{ display:none !important; }

/* Clients page container (match inventory padding) */
.rp-cl-root{
  max-width:720px;
  margin:0 auto;
  padding:18px 14px;
}
/* Locations: nickname + congelador on same line */
.rp-grid-locline{
  display:grid;
  grid-template-columns: 1fr 140px;
  gap:10px;
  align-items:end;
}

.rp-loc-card{
  border:1px solid var(--rp-border);
  border-radius:12px;
  padding:12px;
  margin-top:10px;
  background:#fff;
}

/* Locations: region + route on same line */
.rp-grid-locreg{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  align-items:end;
}

/* Top controls row */
.rp-cl-top{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Inputs (mobile-first, shared) */
.rp-input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--rp-border);
  border-radius:12px;
  background:#fff;
  font-size:13px;
  outline:none;
  box-sizing:border-box;
}

.rp-label{
  display:block;
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
  color:rgba(0,0,0,.75);
}

.rp-field{
  margin-bottom:10px;
}

.rp-err{
  margin-top:6px;
  font-size:12px;
  color:#b91c1c;
  min-height:14px;
}

.rp-field.is-error .rp-input{
  border-color: rgba(220, 38, 38, .55);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .10);
}

/* Keep RUC + Factura on the same line (even on mobile) */
.rp-grid-rucfact{
  display:grid;
  grid-template-columns: 1fr 120px;
  gap:10px;
  align-items:end;
}

/* ================================
   Inventory Panel: Region titles + freezer rows
   ================================ */

.rp-freezer-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-size:12px;
  opacity:.95;
}

.rp-freezer-row .rp-freezer-name{
  min-width:120px;
  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--rp-muted);
}

.rp-freezer-row strong{
  font-weight:900;
}

/*LOGIN PAGE */

/* =========================
   Staff Login UI
   ========================= */

.rp-login-wrap{
  max-width:520px;
  margin:24px auto;
  padding:0 14px;
}
.rp-login-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  background:#fff;
  padding:16px;
}
.rp-login-title{
  font-weight:900;
  font-size:18px;
}
.rp-login-sub{
  opacity:.75;
  margin-top:6px;
  font-size:12px;
}
.rp-login-msg{
  margin-top:12px;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
}
.rp-login-msg-error{
  border-color:rgba(220,0,0,.35);
  background:rgba(220,0,0,.06);
}
#rp_loginform{
  margin-top:12px;
}
#rp_loginform p{
  margin:10px 0;
}
#rp_loginform label{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-bottom:6px;
}
#rp_loginform input[type="submit"]{
  border:1px solid rgba(0,0,0,.12);
  background:#111;
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
}
.rp-login-help{
  margin-top:12px;
  font-size:12px;
  opacity:.75;
  line-height:1.35;
}
.rp-login-card .rp-btn {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 10px;
}
#rp_loginform input[type="text"],
#rp_loginform input[type="password"]{
  width:100%;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  outline:none;
  box-sizing:border-box;
}

/* Delta buttons uniform size */
.rp-actions [data-dbtn]{
  min-width:52px;
  text-align:center;
  justify-content:center;
  padding-left:0;
  padding-right:0;
}

.rp-gift-check{
  font-size:13px;
  color:var(--rp-muted);
  display:flex;
  gap:6px;
  align-items:center;
}
/* ===============================
   Receive Review Modal
================================ */
.rp-sup-rev-modal{
  width: min(720px, 94vw);
  max-height: 86vh;
  overflow: auto;
}

.rp-sup-rev-box{
  margin-top: 12px;
}

.rp-sup-rev-title{
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 10px;
}

.rp-sup-rev-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rp-sup-rev-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.rp-sup-rev-name{
  font-size: 13px;
  font-weight: 800;
}

.rp-sup-rev-sub{
  font-size: 12px;
  color: var(--rp-muted);
  margin-top: 2px;
}

.rp-sup-rev-amt{
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.rp-sup-rev-subtotal{
  margin-top: 10px;
  font-size: 13px;
}