/* CTMSoftware ERP — portal representante */
:root{
  --ctm-primary:#183f8c;
  --ctm-primary-2:#0b2e6f;
  --ctm-accent:#f2b705;
  --ctm-bg:#f3f6fb;
  --ctm-card:#ffffff;
  --ctm-border:#dbe4f0;
  --ctm-text:#1f2a37;
  --ctm-muted:#667085;
  --ctm-ok:#198754;
  --ctm-danger:#dc3545;
  --ctm-radius:18px;
  --ctm-shadow:0 10px 28px rgba(16,24,40,.08);
}

/* ── Base ── */
body.ctm-erp-portal{background:linear-gradient(180deg,#edf3ff 0,#f7f8fb 260px,var(--ctm-bg) 100%);color:var(--ctm-text)}

/* ── Navbar ── */
.ctm-navbar{background:linear-gradient(135deg,var(--ctm-primary-2),var(--ctm-primary))!important;box-shadow:0 8px 24px rgba(11,46,111,.18)}
.ctm-navbar .navbar-brand{font-weight:800;letter-spacing:.2px;font-size:.95rem}
.ctm-user-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.35rem .7rem}
.ctm-nav-cart{position:relative}
.ctm-cart-qty{display:inline-block;background:#dc3545;border-radius:50%;min-width:17px;height:17px;line-height:17px;text-align:center;font-size:.62rem;font-weight:800;margin-left:2px;vertical-align:middle;padding:0 2px}

/* ── Page / Hero ── */
.ctm-page{max-width:1360px!important}
.ctm-hero{background:linear-gradient(135deg,#fff,#eef4ff);border:1px solid var(--ctm-border);border-radius:22px;box-shadow:var(--ctm-shadow);padding:22px;margin-bottom:18px}
.ctm-hero h4,.ctm-hero h5{margin:0;font-weight:800}
.ctm-hero p{color:var(--ctm-muted);margin:.25rem 0 0}

/* ── Cards ── */
.ctm-action-card,.ctm-erp-portal .card{border:1px solid var(--ctm-border)!important;border-radius:var(--ctm-radius)!important;box-shadow:var(--ctm-shadow)!important;overflow:hidden}
.ctm-action-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;background:var(--ctm-card)}
.ctm-action-card:hover{transform:translateY(-2px);border-color:#adc6ff!important;box-shadow:0 16px 36px rgba(16,24,40,.12)!important}
.ctm-action-card .bi{filter:drop-shadow(0 5px 12px rgba(0,0,0,.08))}
.ctm-erp-portal a.card{transition:transform .15s,box-shadow .15s;text-decoration:none}
.ctm-erp-portal a.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(16,24,40,.14)!important}

/* ── Buttons / Inputs ── */
.ctm-erp-portal .btn{border-radius:12px;font-weight:700}
.ctm-erp-portal .btn-primary{background:var(--ctm-primary);border-color:var(--ctm-primary)}
.ctm-erp-portal .btn-primary:hover{background:var(--ctm-primary-2);border-color:var(--ctm-primary-2)}
.ctm-erp-portal .form-control,.ctm-erp-portal .form-select{border-radius:12px;border-color:var(--ctm-border);min-height:44px}
.ctm-erp-portal .form-control:focus,.ctm-erp-portal .form-select:focus{border-color:#8badff;box-shadow:0 0 0 .2rem rgba(24,63,140,.13)}

/* ── Tables ── */
.ctm-erp-portal table thead th{background:#eef4ff!important;color:#183f8c!important;font-weight:800;text-transform:uppercase;font-size:.72rem;letter-spacing:.03em;border-bottom:1px solid var(--ctm-border)!important}
.ctm-erp-portal table tbody tr:hover{background:#f8fbff}
.ctm-erp-portal .table-responsive{border-radius:0 0 var(--ctm-radius) var(--ctm-radius)}
.ctm-erp-portal code{background:#f2f6ff;border:1px solid #e1eaff;border-radius:8px;padding:.12rem .35rem;color:#183f8c}

/* ── Search / Section ── */
.ctm-search-card .card-body{padding:14px}
.ctm-section-title{display:flex;align-items:center;gap:.55rem;font-weight:800;margin:0}
.ctm-section-title .bi{color:var(--ctm-primary)}

/* ── KPIs ── */
.ctm-client-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ctm-kpi{background:#f8fbff;border:1px solid var(--ctm-border);border-radius:14px;padding:10px}
.ctm-kpi small{display:block;color:var(--ctm-muted);font-weight:700;text-transform:uppercase;font-size:.68rem}
.ctm-kpi strong{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Order table ── */
.ctm-order-table{font-size:.82rem}
.ctm-order-table input[type=number]{min-width:64px;text-align:center}

/* ── Sticky actions ── */
.ctm-sticky-actions{position:sticky;bottom:12px;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--ctm-border);border-radius:18px;box-shadow:var(--ctm-shadow);padding:10px;margin-top:12px}

/* ════════════════════════════════════════════
   RESPONSIVE — TABLET (< 992px)
════════════════════════════════════════════ */
@media(max-width:991px){
  .ctm-navbar .ctm-brand-text{display:none}
  .ctm-navbar .navbar-brand{font-size:.88rem}
  .ctm-navbar .navbar-collapse{background:rgba(11,46,111,.98);border-radius:0 0 12px 12px;padding:8px 16px 14px;margin:4px -12px 0}
  .ctm-navbar .navbar-collapse .ctm-user-pill{background:rgba(255,255,255,.1)}
  .ctm-navbar .navbar-collapse .btn-outline-light{border-color:rgba(255,255,255,.4)}
  .ctm-client-summary{grid-template-columns:1fr 1fr}
  .ctm-action-card{min-height:140px}
  .ctm-hero{padding:16px;border-radius:16px}
}

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE (< 768px)
════════════════════════════════════════════ */
@media(max-width:767px){
  .ctm-cart-total,.ctm-cart-sep{display:none!important}
  .ctm-page{padding-left:8px!important;padding-right:8px!important}
  .ctm-hero{padding:12px;border-radius:12px;margin-bottom:12px}
  .ctm-hero h4,.ctm-hero h5{font-size:1rem}
  .ctm-hero p{font-size:.85rem}
  .ctm-client-summary{grid-template-columns:1fr 1fr;gap:6px}
  .ctm-kpi{padding:8px}
  .ctm-kpi small{font-size:.63rem}
  .ctm-kpi strong{font-size:.85rem}
  .ctm-erp-portal table{font-size:.76rem}
  .ctm-erp-portal table thead th{font-size:.65rem;padding:6px 6px;white-space:nowrap}
  .ctm-erp-portal table td{padding:6px 6px;vertical-align:middle}
  .ctm-erp-portal .table-responsive{border-radius:10px}
  .ctm-erp-portal a.card{border-radius:14px!important}
  .ctm-erp-portal a.card .bi{font-size:2rem!important}
  .ctm-erp-portal a.card h6{font-size:.82rem}
  .ctm-erp-portal a.card p.text-muted{font-size:.75rem}
  .ctm-sticky-actions{border-radius:12px;padding:8px;bottom:8px;position:fixed;left:8px;right:8px;margin-top:0}
  .ctm-section-title{font-size:.9rem}
}

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE XS (< 576px)
════════════════════════════════════════════ */
@media(max-width:575px){
  .ctm-erp-portal .row.g-3>[class*="col-md-6"],
  .ctm-erp-portal .row.g-3>[class*="col-lg-3"]{flex:0 0 50%;max-width:50%}
  .ctm-hero{padding:10px}
  .ctm-hero h4,.ctm-hero h5{font-size:.88rem}
  #erpCartBadge{bottom:16px;right:8px;padding:6px 10px;font-size:.8rem}
  #erpCartBadge .cb-icon{font-size:16px}
}

/* ════════════════════════════════════════════
   TOUCH — tap targets minimos 44px
════════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
  .ctm-erp-portal .btn{min-height:44px;padding:.55rem 1rem}
  .ctm-erp-portal .btn-sm{min-height:38px;padding:.4rem .75rem}
  .ctm-erp-portal table td input[type=number]{min-height:38px;font-size:.88rem}
  .ctm-action-card:hover{transform:none}
  .ctm-erp-portal a.card:hover{transform:none;box-shadow:var(--ctm-shadow)!important}
}