/* =========================================
   SISTEMA DE COMPRAS Y PROCURA
   UI Framework — Mobile-first, Intuitive
   ========================================= */

/* === VARIABLES === */
:root {
  --bg: #f0f4f8;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --primary: #1e40af;
  --primary-dark: #1e3a8a;
  --primary-light: #dbeafe;
  --primary-mid: #3b82f6;

  --success: #15803d;
  --success-bg: #dcfce7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --info: #0369a1;
  --info-bg: #e0f2fe;

  --sidebar-bg: #0f172a;
  --sidebar-active: #1d4ed8;
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-text: rgba(255,255,255,.82);

  --nav-h: 66px;
  --side-w: 220px;
  --side-w-compact: 84px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 16px rgba(15,23,42,.07);
  --shadow-md: 0 6px 30px rgba(15,23,42,.13);
}

/* === BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* === NAVBAR === */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
  box-shadow: 0 1px 10px rgba(15,23,42,.07);
}

.hamburger {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  width: 40px; height: 40px;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; flex-shrink: 0;
}
.hamburger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }

.sidebar-compact-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text);
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-compact-btn .bi { font-size: 18px; }

.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 800; color: var(--primary);
  flex-shrink: 0; text-decoration: none;
}
.navbar-brand:hover { text-decoration: none; }

.navbar-brand-mark {
  width: 54px;
  height: 40px;
  padding: 6px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.96));
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.navbar-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.brand-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand-icon svg { width: 21px; height: 21px; color: white; }

.nav-spacer { flex: 1; }

.nav-context-chip {
  flex: 0 1 360px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  min-width: 0;
  max-width: 360px;
}

.nav-context-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-context-item-rates {
  color: var(--primary);
}

.nav-context-item-branch {
  color: #166534;
}

.nav-context-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-context-value {
  font-size: .82rem;
  white-space: nowrap;
}

.nav-context-meta {
  font-size: .65rem;
  color: #60a5fa;
  letter-spacing: .02em;
}

.nav-context-item-branch .nav-context-value {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-context-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, #cbd5e1, transparent);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}
.nav-user[role="button"] { cursor: default; }
.nav-avatar-link {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
.nav-avatar-link:hover,
.nav-avatar-link:focus-visible {
  text-decoration: none;
}

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-mid));
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; flex-shrink: 0;
}

.nav-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
  max-width: 220px;
}
.nav-name {
  font-size: .88rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-name-link {
  color: inherit;
  text-decoration: none;
  width: fit-content;
}
.nav-name-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nav-role { font-size: .74rem; color: var(--muted); }

.solicitud-catalog-item-desc {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  color: rgba(148,163,184,.9);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-logout {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--danger-bg); color: var(--danger);
  font-size: .82rem; font-weight: 600; transition: background .18s;
}
.nav-logout-form {
  display: inline-flex;
  flex-shrink: 0;
}
.nav-logout {
  border: 0;
  appearance: none;
  cursor: pointer;
}
.nav-logout:hover { background: #fecaca; text-decoration: none; color: var(--danger); }
.nav-logout svg { width: 15px; height: 15px; }

/* === SIDEBAR === */
.sidebar {
  position: fixed; top: var(--nav-h); left: 0; bottom: 0;
  width: var(--side-w); z-index: 40;
  background:
    linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border-right: 1px solid rgba(255,255,255,.04);
  overflow-y: auto; padding: 18px 10px 24px;
  transition: transform .25s ease, width .22s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.55) rgba(255,255,255,.04);
}
.sidebar::-webkit-scrollbar {
  width: 10px;
}
.sidebar::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(148,163,184,.62), rgba(100,116,139,.82));
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.72);
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(191,219,254,.72), rgba(96,165,250,.82));
}

.sidebar-section {
  padding: 16px 12px 8px;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(148,163,184,.62);
  transition: opacity .18s ease, height .18s ease, padding .18s ease;
}
.sidebar-section:first-of-type {
  padding-top: 6px;
}

.sidebar-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin: 3px 6px;
  padding: 12px 14px;
  border-radius: 14px;
  color: rgba(255,255,255,.9);
  font-size: .9rem; font-weight: 600;
  transition: background .18s, color .18s, padding .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}
.sidebar-link svg {
  width: 18px; height: 18px; flex-shrink: 0;
  opacity: .72;
  color: rgba(191,219,254,.86);
  margin-top: 1px;
}
.sidebar-link:hover {
  background: rgba(255,255,255,.055);
  color: white;
  text-decoration: none;
  transform: translateX(2px);
}
.sidebar-link:hover svg { opacity: 1; }
.sidebar-link.active {
  background: linear-gradient(135deg, #2563eb 0%, #3156d3 100%);
  color: white;
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}
.sidebar-link.active svg { opacity: 1; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 35;
  background: rgba(0,0,0,.55);
}

/* === LAYOUT === */
.content {
  margin-left: var(--side-w);
  padding-top: var(--nav-h);
  min-height: 100vh;
  transition: margin-left .22s ease;
}
.page { padding: 24px 28px; max-width: 1380px; }
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 28px 22px;
  color: #94a3b8;
  font-size: .74rem;
}
.app-footer small {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (min-width: 1440px) {
  .page {
    max-width: 1540px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .app-footer {
    padding-left: 32px;
    padding-right: 32px;
  }

  .modal-xxl {
    max-width: 1540px;
  }

  th {
    padding-left: 22px;
    padding-right: 22px;
  }

  td {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (min-width: 1200px) {
  .page-bandeja-procura {
    max-width: 100%;
    padding-left: 34px;
    padding-right: 34px;
  }

  .page-bandeja-procura .almacen-page-header {
    margin-bottom: 18px;
  }

  .page-bandeja-procura .bandeja-procura-card {
    overflow: hidden;
  }

  .page-bandeja-procura .almacen-hero {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    padding: 16px 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border, #e2e8f0);
  }

  .page-bandeja-procura .almacen-hero-main {
    max-width: 820px;
  }

  .page-bandeja-procura .almacen-hero-main h2 {
    margin: 6px 0 8px;
    font-size: 18px;
    line-height: 1.15;
  }

  .page-bandeja-procura .almacen-hero-main p {
    margin: 0;
    color: var(--muted, #64748b);
    font-size: 13px;
    line-height: 1.55;
  }

  .page-bandeja-procura .almacen-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
    min-width: 390px;
  }

  .page-bandeja-procura .almacen-stat {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    padding: 14px 16px;
  }

  .page-bandeja-procura .almacen-stat span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted, #64748b);
    font-weight: 700;
    margin-bottom: 6px;
  }

  .page-bandeja-procura .almacen-stat strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    color: var(--text, #0f172a);
  }

  .page-bandeja-procura .almacen-filters {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    margin-bottom: 16px;
    overflow: hidden;
  }

  .page-bandeja-procura .almacen-filters > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
  }

  .page-bandeja-procura .almacen-filters > summary::-webkit-details-marker {
    display: none;
  }

  .page-bandeja-procura .almacen-filters > summary strong {
    display: block;
    font-size: 14px;
    color: var(--text, #0f172a);
  }

  .page-bandeja-procura .almacen-filters > summary span {
    display: block;
    font-size: 12px;
    color: var(--muted, #64748b);
    margin-top: 2px;
  }

  .page-bandeja-procura .almacen-filters-toggle {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .page-bandeja-procura .almacen-filters .pagos-filters {
    padding: 0 16px 16px;
    margin: 0;
    border-top: 1px solid var(--border, #e2e8f0);
  }

  .page-bandeja-procura .pagos-filters-grid.bandeja-procura-filters-grid {
    grid-template-columns: minmax(240px, 1.3fr) repeat(4, minmax(160px, 1fr));
    gap: 16px 18px;
  }

  .page-bandeja-procura .pagos-filters-grid.bandeja-procura-filters-grid .field {
    min-width: 0;
  }

  .page-bandeja-procura .bandeja-procura-table {
    min-width: 1360px;
  }

  .page-bandeja-procura .bandeja-procura-table th {
    padding: 18px 22px;
  }

  .page-bandeja-procura .bandeja-procura-table td {
    padding: 22px 22px;
  }

  .page-bandeja-procura .bandeja-procura-table .td-actions {
    gap: 10px;
  }

  .page-bandeja-procura .bandeja-action-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }

  .page-bandeja-procura .bandeja-action-form .btn-sm {
    padding: 7px 11px;
    min-height: 34px;
    white-space: nowrap;
  }
}

@media (max-width: 1199px) {
  .page-bandeja-procura .almacen-hero {
    flex-direction: column;
  }

  .page-bandeja-procura .almacen-hero-stats {
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .page-bandeja-procura .almacen-hero-stats {
    grid-template-columns: 1fr;
  }

  .page-bandeja-procura .almacen-filters > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-bandeja-procura .almacen-filters-toggle {
    align-self: flex-start;
  }
}

.page-bandeja-procura .almacen-scope {
  display: grid;
  gap: 20px;
}

.page-bandeja-procura .almacen-panel {
  padding: 22px;
  display: grid;
  gap: 20px;
}

.page-bandeja-procura .almacen-hero.compact {
  margin-bottom: 0;
}

.page-bandeja-procura .almacen-section-head {
  align-items: flex-end;
  gap: 14px;
}

.page-bandeja-procura .almacen-search {
  min-width: 280px;
  max-width: 380px;
  width: 100%;
}

.page-bandeja-procura .almacen-search input {
  width: 100%;
}

.page-bandeja-procura .almacen-pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.page-bandeja-procura .almacen-pending-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  display: grid;
  gap: 14px;
}

.page-bandeja-procura .almacen-pending-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.page-bandeja-procura .almacen-pending-main {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.page-bandeja-procura .almacen-pending-main h4 {
  margin: 4px 0 4px;
  font-size: 17px;
  line-height: 1.2;
  color: var(--text, #0f172a);
}

.page-bandeja-procura .almacen-pending-main p {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 13px;
}

.page-bandeja-procura .almacen-pending-qty {
  min-width: 108px;
  text-align: right;
}

.page-bandeja-procura .almacen-pending-qty strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  color: var(--text, #0f172a);
}

.page-bandeja-procura .almacen-pending-qty small {
  display: block;
  margin-top: 4px;
  color: var(--muted, #64748b);
}

.page-bandeja-procura .almacen-pending-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-bandeja-procura .almacen-pending-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text, #0f172a);
}

.page-bandeja-procura .almacen-pending-actions {
  padding-top: 4px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.page-bandeja-procura .almacen-pending-actions .bandeja-action-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-bandeja-procura .almacen-stock-groups {
  display: grid;
  gap: 14px;
}

.page-bandeja-procura .almacen-stock-group {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.page-bandeja-procura .almacen-stock-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.page-bandeja-procura .almacen-stock-group-head h4 {
  margin: 4px 0 0;
  font-size: 16px;
}

.page-bandeja-procura .almacen-stock-list {
  display: grid;
}

.page-bandeja-procura .almacen-stock-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft, #edf2f7);
}

.page-bandeja-procura .almacen-stock-row:last-child {
  border-bottom: 0;
}

.page-bandeja-procura .almacen-stock-row-main strong {
  display: block;
  font-size: 15px;
  color: var(--text, #0f172a);
}

.page-bandeja-procura .almacen-stock-row-main small {
  display: block;
  margin-top: 4px;
  color: var(--muted, #64748b);
}

.page-bandeja-procura .almacen-stock-row-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.page-bandeja-procura .almacen-stock-row-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text, #0f172a);
}

.page-bandeja-procura .almacen-empty {
  margin: 0;
}

@media (max-width: 980px) {
  .page-bandeja-procura .almacen-section-head,
  .page-bandeja-procura .almacen-pending-top,
  .page-bandeja-procura .almacen-pending-main,
  .page-bandeja-procura .almacen-stock-group-head,
  .page-bandeja-procura .almacen-stock-row {
    grid-template-columns: 1fr;
    display: grid;
  }

  .page-bandeja-procura .almacen-search {
    max-width: none;
    min-width: 0;
  }

  .page-bandeja-procura .almacen-pending-qty {
    text-align: left;
  }

  .page-bandeja-procura .almacen-stock-row-meta {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1680px) {
  .page {
    max-width: 1680px;
  }
}

body.sidebar-compact .sidebar { width: var(--side-w-compact); }
body.sidebar-compact .content { margin-left: var(--side-w-compact); }
body.sidebar-compact .sidebar-section {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
body.sidebar-compact .sidebar-link {
  justify-content: center;
  gap: 0;
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 0;
  padding-right: 0;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}
body.sidebar-compact .sidebar-link svg {
  width: 19px;
  height: 19px;
}
body.sidebar-compact .sidebar-link.active::before {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -4px;
  width: 24px;
  height: 3px;
  transform: translateX(-50%);
}

body[data-user-role="solicitante"] .sidebar,
body[data-user-role="solicitante"].sidebar-compact .sidebar {
  display: none !important;
}

body[data-user-role="solicitante"] .content,
body[data-user-role="solicitante"].sidebar-compact .content {
  margin-left: 0 !important;
}

body.role-solicitante .content--full,
body.role-solicitante .content {
  margin-left: 0 !important;
}

body[data-user-role="solicitante"] .navbar {
  left: 0 !important;
}

body[data-user-role="solicitante"] .sidebar-overlay {
  display: none !important;
}

body[data-user-role="solicitante"] .sidebar-section,
body[data-user-role="solicitante"] .sidebar-link,
body[data-user-role="solicitante"].sidebar-compact .sidebar-section,
body[data-user-role="solicitante"].sidebar-compact .sidebar-link {
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  padding-top: initial !important;
  padding-bottom: initial !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  font-size: 14px !important;
}

body[data-user-role="solicitante"] .sidebar-link svg,
body[data-user-role="solicitante"].sidebar-compact .sidebar-link svg {
  width: 18px !important;
  height: 18px !important;
}

body[data-user-role="solicitante"] .sidebar-compact-btn {
  display: none !important;
}

body[data-user-role="solicitante"] .hamburger {
  display: none !important;
}

body[data-user-role="solicitante"] .page {
  max-width: none;
}

body[data-user-role="solicitante"] .app-footer {
  padding-left: 28px;
  padding-right: 28px;
}

/* ── Auth wrapper ── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-image: url(../img/background.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}
.auth-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15,25,50,.55), rgba(10,18,40,.40)),
    radial-gradient(circle at top right, rgba(25,118,210,.15), transparent 32%);
}
.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  display: grid;
  gap: 14px;
}
.auth-flash {
  margin: 0;
  border-radius: 16px;
  border-left-width: 5px;
  box-shadow: 0 16px 34px rgba(15,23,42,.12);
}

/* ── Login card ── */
.lp-card {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 40px 90px rgba(0,0,0,.40),
    0 10px 28px rgba(0,0,0,.22);
  background: #0d1526;
  min-height: 560px;
}

/* ── Left panel — dark brand ── */
.lp-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  background: transparent;
}
.lp-panel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
}
.lp-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.img-logo{
  width: 78%;
  height: 78%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: none;
}

.lp-logo-circle {
  width: 132px; height: 92px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 10px;
  color: white;
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.lp-brand-name {
  font-size: 1.9rem;
  font-weight: 900;
  color: white;
  letter-spacing: .07em;
}
.lp-panel-tagline {
  font-size: .74rem;
  color: rgba(255,255,255,.40);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.lp-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lp-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
}
.lp-dot-r { background: #ef5350; }
.lp-dot-o { background: #ff9800; }
.lp-dot-g { background: #66bb6a; }

/* ── Right panel — white card ── */
.lp-form-panel {
  background: white;
  border-radius: 28px 0 0 28px;
  box-shadow: -14px 0 48px rgba(0,0,0,.20);
  display: flex;
  flex-direction: column;
}
.lp-form-topbrand {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 26px 40px 0;
}
.lp-form-topbrand-name {
  font-size: .92rem;
  font-weight: 800;
  color: #0d1526;
  letter-spacing: .02em;
}
.lp-form-topbrand .lp-brand-icon {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  box-shadow: 0 4px 12px rgba(21,101,192,.30);
  border: none;
}
.lp-brand-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lp-brand-icon svg { width: 18px; height: 18px; color: white; }
.lp-brand-icon--sm { width: 36px; height: 36px; border-radius: 10px; }
.lp-mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 28px 28px 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0d1526;
}
.lp-mobile-brand .lp-brand-icon {
  background: linear-gradient(135deg, #1976d2, #1565c0);
  box-shadow: 0 4px 12px rgba(21,101,192,.30);
  border: none;
}
.lp-form-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 40px 40px;
}
.lp-form-head {
  margin-bottom: 26px;
}
.lp-form-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #0d1526;
  line-height: 1.35;
  margin-bottom: 4px;
}
.lp-form-title span { color: #1565c0; }
.lp-form-sub {
  font-size: .84rem;
  color: #94a3b8;
}

/* Fields */
.lp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lp-label {
  font-size: .73rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.lp-field input,
.lp-field select {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1.5px solid #e2e8f0;
  border-radius: 0;
  font-size: .93rem;
  font-family: inherit;
  color: #0f172a;
  background: transparent;
  outline: none;
  transition: border-color .18s;
  appearance: none;
  -webkit-appearance: none;
}
.lp-field input::placeholder { color: #cbd5e1; }
.lp-field input:focus,
.lp-field select:focus {
  border-bottom-color: #1565c0;
  box-shadow: none;
  background: transparent;
}
.lp-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.lp-select-wrap:focus-within {
  border-color: #1565c0;
  background: #ffffff;
  box-shadow:
    0 16px 34px rgba(21,101,192,.12),
    0 0 0 4px rgba(21,101,192,.10);
}
.lp-select-icon,
.lp-select-arrow {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lp-select-icon {
  left: 14px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #eff6ff;
  color: #1565c0;
  font-size: .95rem;
}
.lp-select-arrow {
  right: 14px;
  color: #64748b;
  font-size: .82rem;
  transition: transform .18s, color .18s;
}
.lp-select-wrap:focus-within .lp-select-arrow {
  color: #1565c0;
  transform: rotate(180deg);
}
.lp-branch-field select {
  min-height: 50px;
  padding: 0 44px 0 52px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}
.lp-branch-field select:focus {
  border: 0;
  box-shadow: none;
}
.lp-branch-field select:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}
.lp-select-wrap.is-disabled {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
}
.lp-select-wrap.is-disabled .lp-select-icon,
.lp-select-wrap.is-disabled .lp-select-arrow {
  color: #94a3b8;
  background: #f1f5f9;
}
.lp-branch-field option {
  color: #0f172a;
  font-weight: 600;
}

/* Password toggle */
.lp-pass-wrap { position: relative; }
.lp-pass-wrap input { padding-right: 32px; }
.lp-eye {
  position: absolute;
  right: 0; bottom: 6px;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px;
  color: #94a3b8;
  cursor: pointer;
  display: flex; align-items: center;
  transition: color .15s;
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
}
.lp-eye:hover { color: #1565c0; background: none !important; }

/* Submit */
.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  margin-top: 10px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  color: white;
  font-size: .82rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(21,101,192,.32);
  transition: opacity .18s, transform .15s, box-shadow .18s;
}
.lp-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(21,101,192,.42);
}
.lp-btn:active { transform: translateY(0); }

/* Demo box */
.lp-demo {
  margin-top: 18px;
  border-radius: 10px;
  border: 1.5px dashed #e2e8f0;
  overflow: hidden;
}
.lp-demo-label {
  display: block;
  padding: 5px 12px;
  background: #f8fafc;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.lp-demo-body {
  padding: 9px 12px;
  font-size: .76rem;
  color: #64748b;
  line-height: 1.75;
}
.lp-demo-body strong { color: #374151; }
.lp-demo-body em { font-style: normal; color: #94a3b8; }
.lp-credit {
  margin-top: 14px;
  font-size: .68rem;
  line-height: 1.55;
  color: #94a3b8;
  text-align: center;
}
.lp-credit span {
  display: block;
  color: #64748b;
  letter-spacing: .04em;
}

/* === PAGE HEADER === */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.page-eyebrow {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--primary); margin-bottom: 3px;
}
.page-header h1 { font-size: 1.6rem; font-weight: 800; line-height: 1.2; margin: 0; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* === STAT CARDS === */
.stats-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  margin-bottom: 28px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
}
.cotizacion-stats-grid .stat-card {
  display: flex;
  flex-direction: column;
}
.stat-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-value { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.ic-blue  { background: var(--primary-light); color: var(--primary); }
.ic-green { background: var(--success-bg); color: var(--success); }
.ic-red   { background: var(--danger-bg); color: var(--danger); }
.ic-yellow{ background: var(--warning-bg); color: var(--warning); }
.ic-purple{ background: #ede9fe; color: #6d28d9; }
.ic-teal  { background: #ccfbf1; color: #0f766e; }

/* === GENERIC CARD === */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.card-body { padding: 22px; }

/* === SEARCH BAR === */
.search-wrap {
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.search-box {
  display: flex; align-items: center;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); flex: 1; max-width: 380px; overflow: hidden;
}
.search-box svg { margin: 0 10px; color: var(--muted); flex-shrink: 0; width: 16px; height: 16px; }
.search-box input {
  flex: 1; border: none; background: none;
  padding: 11px 12px 11px 0;
  font-size: .9rem; outline: none; color: var(--text); font-family: inherit;
}

/* === TABLES === */
.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead { background: #f8fafc; }
th {
  padding: 14px 18px; text-align: left;
  font-size: .72rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1.5px solid var(--border); white-space: nowrap;
}
td {
  padding: 17px 18px; vertical-align: middle;
  border-bottom: 1px solid var(--border); font-size: .93rem;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
.td-mono { font-family: 'Courier New', monospace; font-weight: 700; color: var(--primary); font-size: .88rem; }
.td-bold { font-weight: 600; }
.td-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.usuarios-action-btn {
  width: 118px;
  justify-content: center;
}
.td-muted { color: var(--muted); font-size: .88rem; }

.pagos-table-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.pagos-table-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 18px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid #dbe5f0;
  background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
}
.pagos-filters {
  display: grid;
  gap: 16px;
  padding: 18px 22px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.pagos-filters-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
  align-items: start;
  gap: 16px;
}
.pagos-filters-head h3 {
  margin: 6px 0 0;
  font-size: 1.05rem;
  line-height: 1.2;
}
.pagos-filters-head p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
.pagos-filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.pagos-filters .field input,
.pagos-filters .field select {
  min-height: 48px;
}
.pagos-filters-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.pagos-table-banner-copy {
  min-width: 0;
}
.pagos-table-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pagos-table-banner-copy h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  line-height: 1.2;
}
.pagos-table-banner-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}
.pagos-table-banner-metric {
  width: 150px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.pagos-table-banner-metric strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
}
.pagos-table-banner-metric span {
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pagos-table-scroll {
  background: #fff;
}
.pagos-table {
  width: 100%;
  min-width: 1290px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.pagos-table thead {
  background: linear-gradient(180deg, #f8fafc, #eef4ff);
}
.pagos-table th {
  padding: 18px 22px;
}
.pagos-table tbody tr {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pagos-table tbody tr:nth-child(even) {
  background: #fcfdff;
}
.pagos-table tbody tr:hover {
  background: #f3f7ff;
  box-shadow: inset 3px 0 0 rgba(30,64,175,.32);
}
.pagos-table tbody td {
  padding: 22px 22px;
  vertical-align: middle;
}
.pagos-table .td-mono {
  width: 130px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 10px;
  background: #eef4ff;
  color: var(--primary-dark);
  line-height: 1.35;
  white-space: nowrap;
}
.pagos-order-cell,
.pagos-provider-cell,
.pagos-state-cell,
.pagos-currency-cell {
  white-space: nowrap;
}
.pagos-order-cell,
.pagos-provider-cell,
.pagos-factura-cell {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagos-order-cell,
.pagos-provider-cell {
  line-height: 1.35;
}
.pagos-order-cell {
  width: 170px;
}
.pagos-provider-cell {
  width: 220px;
}
.pagos-state-cell {
  width: 120px;
  text-align: center;
}
.pagos-money-cell {
  width: 138px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pagos-money-cell-paid {
  color: var(--success);
}
.pagos-money-cell-balance {
  font-size: .98rem;
}
.pagos-currency-cell {
  width: 112px;
  text-align: center;
}
.pagos-factura-cell {
  text-align: center;
}
.pagos-factura-cell .btn {
  min-width: 124px;
  justify-content: center;
  white-space: nowrap;
}
.pagos-actions-cell .td-actions {
  gap: 12px;
  justify-content: center;
}
.pagos-actions-cell .btn {
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.pagos-table .badge {
  min-width: 82px;
  padding-left: 12px;
  padding-right: 12px;
  justify-content: center;
  white-space: nowrap;
}
.pagos-table .td-bold {
  line-height: 1.45;
}

.pagos-list {
  display: grid;
  gap: 14px;
  padding: 18px 22px 22px;
  background: #fff;
}
.pagos-empty {
  margin: 0;
}
.pagos-card {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.22);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.06), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.pagos-card-top {
  display: grid;
  grid-template-columns: minmax(160px, .85fr) minmax(0, 1.25fr) auto;
  gap: 14px;
  align-items: start;
}
.pagos-card-order,
.pagos-card-provider {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pagos-card-label {
  display: inline-flex;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pagos-card-code {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagos-card-provider strong {
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagos-card-sub {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.pagos-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}
.pagos-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pagos-card-stat {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #f8fbff;
  min-width: 0;
}
.pagos-card-stat-label {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pagos-card-stat-value {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.pagos-card-stat-value--success {
  color: var(--success);
}
.pagos-card-stat-value--danger {
  color: var(--danger);
}
.pagos-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.pagos-card-footnote {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pagos-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.pagos-card-actions .btn {
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

@media (min-width: 1440px) {
  .pagos-table-card {
    border-radius: 26px;
  }

  .pagos-table-banner {
    padding: 24px 28px 22px;
  }

  .pagos-filters {
    padding: 20px 28px 22px;
  }

  .pagos-table th {
    padding-left: 26px;
    padding-right: 26px;
  }

  .pagos-table tbody td {
    padding-left: 26px;
    padding-right: 26px;
  }

  .pagos-table {
    min-width: 1360px;
  }

  .pagos-table .pagos-money-cell {
    font-size: 1rem;
  }

  .pagos-list {
    padding: 20px 28px 24px;
  }

  .pagos-card {
    padding: 20px 22px;
  }
}

@media (min-width: 1680px) {
  .pagos-table th {
    padding-left: 28px;
    padding-right: 28px;
  }

  .pagos-table tbody td {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 760px) {
  .pagos-filters {
    padding: 16px 18px 18px;
  }
  .pagos-filters-head {
    grid-template-columns: 1fr;
  }
  .pagos-filters-grid {
    grid-template-columns: 1fr;
  }
  .pagos-filters-actions {
    justify-content: flex-start;
  }
  .pagos-filters-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .pagos-table-banner {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .pagos-table-banner-metric {
    width: 100%;
  }

  .pagos-list {
    padding: 16px 18px 18px;
  }

  .pagos-card {
    padding: 16px;
  }
  .pagos-card-top {
    grid-template-columns: 1fr;
  }
  .pagos-card-badges {
    justify-content: flex-start;
  }
  .pagos-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pagos-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .pagos-card-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .pagos-card-actions .btn,
  .pagos-card-footnote .btn {
    width: 100%;
    justify-content: center;
  }

  .payments-adjustment-panel {
    padding: 16px;
    border-radius: 16px;
  }
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600;
  border: none; cursor: pointer; transition: all .18s;
  font-family: inherit; white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #166534; color: white; }
.btn-danger  { background: var(--danger); color: white; }
.btn-danger:hover  { background: #991b1b; color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #92400e; color: white; }
.btn-ghost {
  background: white; color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-sm { padding: 7px 13px; font-size: .8rem; border-radius: 7px; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }
.btn svg { width: 15px; height: 15px; }

/* button element fallback */
button:not(.hamburger) {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600;
  border: none; cursor: pointer; transition: all .18s;
  font-family: inherit; background: var(--primary); color: white;
}
button:not(.hamburger):hover { background: var(--primary-dark); }
button.danger-btn { background: var(--danger); }
button.danger-btn:hover { background: #991b1b; }
button.ghost-btn { background: white; color: var(--text); border: 1.5px solid var(--border); }
button.ghost-btn:hover { background: var(--bg); }
button.btn-add {
  background: var(--success-bg); color: var(--success);
  border: 1.5px solid var(--success-bg);
}
button.btn-add:hover { background: #bbf7d0; }

button.btn-primary,
button.btn-success,
button.btn-danger,
button.btn-warning,
button.btn-ghost,
button.btn-add {
  font-family: inherit;
}

button.btn-primary {
  background: var(--primary);
  color: #fff;
}

button.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
}

button.btn-success {
  background: var(--success);
  color: #fff;
}

button.btn-success:hover {
  background: #166534;
  color: #fff;
}

button.btn-danger {
  background: var(--danger);
  color: #fff;
}

button.btn-danger:hover {
  background: #991b1b;
  color: #fff;
}

button.btn-warning {
  background: var(--warning);
  color: #fff;
}

button.btn-warning:hover {
  background: #92400e;
  color: #fff;
}

button.btn-ghost {
  background: white;
  color: var(--text);
  border: 1.5px solid var(--border);
}

button.btn-ghost:hover {
  background: var(--bg);
  color: var(--text);
}

button.btn-sm {
  padding: 7px 13px;
  font-size: .8rem;
  border-radius: 7px;
}

button.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}

button.btn-block {
  width: 100%;
  justify-content: center;
}

button.nav-logout,
.nav-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  appearance: none;
  background: var(--danger-bg);
  color: var(--danger);
  cursor: pointer;
  flex-shrink: 0;
}

button.nav-logout:hover,
.nav-logout:hover {
  background: #fecaca;
  color: var(--danger);
  text-decoration: none;
}

.nav-logout svg {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* === BADGES === */
.badge {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  font-size: .73rem; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap;
}
.badge-aprobado, .badge-aprobada, .badge-pagada, .badge-cerrado, .badge-recibida, .badge-entregada,
.badge-green { background: var(--success-bg); color: var(--success); }

.badge-rechazado, .badge-eliminado, .badge-cancelada,
.badge-red { background: var(--danger-bg); color: var(--danger); }

.badge-devuelto, .badge-parcial, .badge-en-pago, .badge-pendiente,
.badge-yellow { background: var(--warning-bg); color: var(--warning); }

.badge-blue { background: var(--primary-light); color: var(--primary); }
.badge-gray, .badge-inactivo { background: #f1f5f9; color: var(--muted); }
.badge-purple { background: #ede9fe; color: #6d28d9; }

/* === ALERTS / FLASH === */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 18px; border-radius: var(--radius-sm);
  margin-bottom: 14px; font-size: .9rem;
}
/* legacy classes from flashes() */
.success {
  background: var(--success-bg); color: var(--success);
  border-left: 4px solid var(--success);
  padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: .9rem;
}
.danger {
  background: var(--danger-bg); color: var(--danger);
  border-left: 4px solid var(--danger);
  padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: .9rem;
}
.warning {
  background: var(--warning-bg); color: var(--warning);
  border-left: 4px solid var(--warning);
  padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: .9rem;
}
.info {
  background: var(--info-bg); color: var(--info);
  border-left: 4px solid var(--info);
  padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: .9rem;
}

/* === FORMS === */
[hidden] {
  display: none !important;
}

.form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px; max-width: 1080px; margin-bottom: 24px;
}
.form-card form { display: contents; }

.form-card.almacen-excepcion-form {
  max-width: none;
  width: 100%;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-grid.g3 { grid-template-columns: 1fr 1fr 1fr; }
.g-span2 { grid-column: span 2; }
.g-span3 { grid-column: span 3; }

.payments-adjustment-panel {
  grid-column: 1 / -1;
  width: 100%;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 24px rgba(15,23,42,.05);
}
.payments-adjustment-panel .field {
  margin-top: 6px;
}
.payments-adjustment-body .field {
  margin-bottom: 0;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: .82rem; font-weight: 700; color: var(--text);
}
.field input, .field select, .field textarea {
  padding: 12px 15px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: .93rem; font-family: inherit; color: var(--text);
  background: white; outline: none; transition: border-color .18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
.field textarea { min-height: 90px; resize: vertical; }

.almacen-excepcion-form .exception-input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  box-shadow: var(--shadow-soft);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.almacen-excepcion-form select.exception-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.almacen-excepcion-form .exception-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1), var(--shadow-soft);
  background: #fff;
}

.almacen-excepcion-form .exception-input::placeholder {
  color: #94a3b8;
}

.almacen-excepcion-form .exception-input[readonly] {
  background: #f8fafc;
  color: #475569;
}

.exception-table-scroll {
  border-top: 1px solid var(--border);
}

.exception-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.exception-table th,
.exception-table td {
  vertical-align: top;
  overflow: visible;
  padding: 12px 10px;
}

.exception-table td:first-child {
  overflow: visible;
}

.exception-table td > .searchable-select,
.exception-table td > .exception-input {
  width: 100%;
  min-width: 0;
}

.exception-table .col-producto { width: 29%; }
.exception-table .col-cantidad { width: 9%; }
.exception-table .col-unidad { width: 9%; }
.exception-table .col-precio { width: 11%; }
.exception-table .col-subtotal { width: 11%; }
.exception-table .col-observacion { width: 23%; }
.exception-table .col-accion { width: 8%; }

.exception-table .exception-product,
.exception-table .exception-note {
  min-height: 48px;
}

.exception-table .exception-remove {
  width: 100%;
  white-space: nowrap;
  padding-inline: 10px;
}

.almacen-excepcion-form .searchable-select {
  width: 100%;
  min-width: 0;
  display: block;
  position: relative;
}

.almacen-excepcion-form .searchable-select-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
  box-shadow: var(--shadow-soft);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}

.almacen-excepcion-form .searchable-select-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1), var(--shadow-soft);
}

.almacen-excepcion-form .searchable-select::after {
  top: 50%;
  margin-top: -2px;
}

.exception-table .searchable-select-list {
  min-width: 100%;
  width: 100%;
}

.exception-table .searchable-select {
  z-index: 2;
}

@media (max-width: 900px) {
  .exception-table-scroll {
    overflow-x: auto;
  }

  .exception-table {
    min-width: 920px;
  }
}

.almacen-excepcion-form .btn-sm {
  min-height: 44px;
}

@media (min-width: 721px) {
  .exception-table-scroll {
    overflow-x: visible;
  }
}
.field-hint { font-size: .78rem; color: var(--muted); }
.searchable-select {
  position: relative;
}
.searchable-select .searchable-select-native {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.searchable-select-input {
  width: 100%;
  padding-right: 42px !important;
}
.searchable-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.searchable-select-list {
  position: absolute;
  z-index: 220;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.searchable-select-list[hidden] {
  display: none !important;
}
.searchable-select .searchable-select-option,
.searchable-select .searchable-select-empty {
  width: 100%;
  border: 0;
  background: transparent !important;
  color: var(--text) !important;
  display: block !important;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.searchable-select .searchable-select-option:hover,
.searchable-select .searchable-select-option.is-active {
  background: #eff6ff !important;
  color: var(--primary) !important;
}
.searchable-select .searchable-select-empty {
  color: var(--muted) !important;
  cursor: default;
}
.field-check {
  min-height: 46px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.field-check input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--primary);
}

.form-section-title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--primary);
  padding-bottom: 10px; border-bottom: 1.5px solid var(--primary-light);
  margin-bottom: 18px; grid-column: 1 / -1;
}
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; grid-column: 1 / -1; margin-top: 6px; }

.product-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.product-import-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 2px dashed #bcd0f5;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
  text-align: left;
  min-height: 168px;
}
.product-import-dropzone:hover,
.product-import-dropzone:focus-within {
  border-color: var(--primary);
  background: #eef4ff;
  box-shadow: 0 6px 18px rgba(30, 64, 175, .12);
}
.product-import-dropzone.is-dragover {
  border-style: solid;
  border-color: var(--primary);
  background: #e6efff;
  transform: scale(1.01);
}
.product-import-dropzone.has-file {
  border-style: solid;
  border-color: #16a34a;
  background: #f0fbf3;
}
.product-import-dropzone__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(30, 64, 175, .1);
  color: var(--primary);
}
.product-import-dropzone.has-file .product-import-dropzone__icon {
  background: rgba(22, 163, 74, .12);
  color: #16a34a;
}
.product-import-dropzone__icon svg {
  width: 28px;
  height: 28px;
}
.product-import-dropzone__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.product-import-dropzone__copy strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.product-import-dropzone__copy span {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}
.product-import-dropzone__file {
  margin-top: 6px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.product-import-dropzone.has-file .product-import-dropzone__file {
  color: #15803d;
}
.product-import-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.product-import-format {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fafcff;
  min-width: 0;
}
.product-import-format__title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-import-format__code {
  display: block;
  padding: 10px 12px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem;
  line-height: 1.55;
  word-break: break-word;
  white-space: normal;
}
.product-import-format__list {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.45;
}
.product-import-format__list strong {
  font-weight: 700;
}

.product-import-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 16px;
}
.product-import-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.product-import-stat span {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-import-stat strong {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.product-import-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: #fafcff;
}
.product-import-note strong {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-import-note p {
  margin: 0;
  line-height: 1.5;
  color: var(--text);
}
.product-import-preview-scroll td {
  vertical-align: top;
}
.product-import-preview-scroll td:nth-child(7),
.product-import-preview-scroll td:nth-child(8) {
  white-space: normal;
  min-width: 220px;
}
.product-import-preview-scroll td:last-child {
  min-width: 180px;
}
.product-import-row.is-ready {
  background: #f8fbff;
}
.product-import-row.is-skip {
  background: #fffbeb;
}

/* Legacy label/form compatibility */
label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .82rem; font-weight: 700; margin: 0;
}
label input, label select, label textarea {
  padding: 12px 15px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: .93rem; font-family: inherit;
  color: var(--text); background: white; outline: none;
  transition: border-color .18s; margin: 0;
}
label input:focus, label select:focus, label textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
label textarea { min-height: 90px; resize: vertical; }

form.form {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px; max-width: 960px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 24px;
}
form.form h3 {
  grid-column: span 2; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--primary);
  padding-bottom: 10px; border-bottom: 1.5px solid var(--primary-light);
  margin-top: 8px;
}
form.form > button, form.form > .btn { grid-column: span 2; justify-self: start; }

form.compact {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; max-width: 700px; margin-top: 16px;
  display: grid; gap: 16px;
}
form.compact > button, form.compact > .btn { justify-self: start; }

/* === DYNAMIC ITEM ROWS === */
.items-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.item-row {
  display: grid;
  grid-template-columns: 1fr 110px 140px auto;
  gap: 10px; align-items: end;
  padding: 14px; background: #f8fafc;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.item-row label { margin: 0; font-size: .78rem; font-weight: 700; }
.item-row input, .item-row select { margin: 0; }
.item-row .del-btn {
  background: var(--danger-bg); color: var(--danger);
  border: none; padding: 8px 11px; border-radius: 7px;
  cursor: pointer; font-size: .85rem; font-family: inherit;
  font-weight: 700; align-self: end;
}
.item-row .del-btn:hover { background: #fecaca; }

.cotizaciones-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: 22px;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}
.cotizaciones-hero-copy h2 {
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 10px;
}
.cotizaciones-hero-copy p {
  color: var(--muted);
  max-width: 720px;
}
.cotizaciones-hero-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cotizaciones-hero-stats {
  display: grid;
  gap: 14px;
}
.cotizaciones-filters-card {
  padding: 22px 24px 20px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color: rgba(148,163,184,.24);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.cotizaciones-filters-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.cotizaciones-filters-head h3 {
  margin: 5px 0 0;
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.cotizaciones-filters-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.cotizaciones-filters-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cotizaciones-filters-form {
  display: grid;
}
.field-grid--cotizaciones-filters {
  align-items: end;
  grid-template-columns: 1.3fr .9fr .9fr auto;
  gap: 14px;
}
.cotizaciones-filters-cta {
  display: flex;
  align-items: flex-end;
}
.cotizaciones-filters-actions {
  width: 100%;
  justify-content: flex-end;
  margin-top: 0;
}
.cotizaciones-filters-actions .btn {
  min-width: 112px;
}
.cotizaciones-stat {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}
.cotizaciones-stat strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 6px;
}
.cotizaciones-stat span {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
}
.cotizaciones-filters-card .field-label {
  color: #334155;
}
.cotizaciones-filters-card .field input,
.cotizaciones-filters-card .field select {
  min-height: 50px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.cotizaciones-detail-table td[data-label]::before {
  content: none;
}

.modal-xl { width: min(1120px, 100%); max-width: 1120px; }
.modal-xxl { max-width: 1380px; }
/* ── Nueva Solicitud: layout ── */
.solicitud-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
}
.solicitud-wrap form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: stretch;
  min-width: 0;
}
.solicitud-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.solicitud-desc-field textarea {
  resize: vertical;
  min-height: 72px;
}
.solicitud-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
  height: calc(100vh - 340px);
  min-height: 460px;
}
.page-solicitud-insumos {
  max-width: none;
  width: 100%;
}
.page-solicitud-insumos .solicitud-builder {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: 14px;
  height: auto;
  min-height: 0;
  align-items: start;
  width: 100%;
}
.page-solicitud-insumos .solicitud-panel {
  min-width: 0;
}
.page-solicitud-insumos .solicitud-builder,
.page-solicitud-insumos .solicitud-panel,
.page-solicitud-insumos .solicitud-cart-list {
  overflow: hidden;
}
.page-solicitud-insumos .solicitud-panel {
  height: auto;
}
.page-solicitud-insumos .solicitud-catalog-list,
.page-solicitud-insumos .solicitud-cart-list {
  max-height: none;
}
.solicitud-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fcfdff;
  overflow: hidden;
}
.solicitud-panel-right {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.solicitud-panel-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.solicitud-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.solicitud-panel-title h3 {
  font-size: .95rem;
  margin: 0;
}
.solicitud-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: stretch;
  padding: 18px 20px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 34px rgba(15,23,42,.06);
}
.solicitud-hero-copy {
  display: grid;
  gap: 6px;
  align-content: start;
}
.solicitud-kicker {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.solicitud-hero-copy h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0;
}
.solicitud-hero-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}
.solicitud-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.solicitud-stat {
  min-width: 122px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
  display: grid;
  gap: 2px;
  align-content: center;
}
.solicitud-stat strong {
  font-size: 1.35rem;
  line-height: 1;
}
.solicitud-stat span {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}
.solicitud-cart-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Search input */
.solicitud-search-wrap {
  position: relative;
}
.solicitud-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.solicitud-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .875rem;
  font-family: inherit;
  background: white;
  transition: border-color .15s, box-shadow .15s;
}
.solicitud-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
.solicitud-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 16px;
  height: calc(100vh - 330px);
  min-height: 500px;
}
/* Catalog list */
.solicitud-catalog-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solicitud-catalog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent !important;
  border-radius: 16px;
  background: white !important;
  color: var(--text) !important;
  font-family: inherit;
  cursor: pointer;
  transition: transform .14s, background .12s, border-color .12s, box-shadow .12s;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}
.solicitud-catalog-item:hover {
  background: #eff6ff !important;
  border-color: rgba(30,64,175,.22) !important;
  box-shadow: 0 2px 8px rgba(30,64,175,.07);
  transform: translateY(-1px);
}
.solicitud-catalog-item.is-added {
  background: #f0fdf4 !important;
  border-color: rgba(22,163,74,.28) !important;
}
.solicitud-catalog-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.solicitud-catalog-item-name {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solicitud-catalog-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.solicitud-catalog-item-tags span {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: #eff6ff;
  color: var(--primary);
}
.solicitud-catalog-item.is-added .solicitud-catalog-item-tags span {
  background: #dcfce7;
  color: #166534;
}
.solicitud-catalog-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.solicitud-cart-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.solicitud-cart-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 220px;
  margin: 0 14px 14px;
  border: 1px dashed rgba(148,163,184,.28);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: var(--muted);
  text-align: center;
  padding: 18px;
}
.solicitud-cart-empty strong {
  color: var(--text);
  font-size: .98rem;
}
.solicitud-cart-empty p {
  margin: 0;
  font-size: .85rem;
}
body .solicitud-cart-row.item-row {
  grid-template-columns: minmax(0, 1.2fr) 120px auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(191,219,254,.72);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 24px rgba(15,23,42,.05);
}
body .solicitud-cart-row.item-row .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body .solicitud-cart-row.item-row .field-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.solicitud-cart-select,
.solicitud-cart-qty {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background: #fff;
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.solicitud-cart-select:focus,
.solicitud-cart-qty:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
body .solicitud-cart-row.item-row .del-btn {
  width: 100%;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 12px;
  min-height: 44px;
}
body .solicitud-cart-row.item-row.is-selected {
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 16px 28px rgba(37,99,235,.14);
  transform: translateY(-1px);
}
.solicitud-notes {
  padding: 18px 20px 20px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  background: #fff;
}
.solicitud-notes textarea {
  width: 100%;
  min-height: 94px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  font: inherit;
  color: var(--text);
}
.solicitud-notes textarea:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
.solicitud-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.solicitud-history-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.solicitud-history-hero-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}
.solicitud-history-hero-copy h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}
.solicitud-history-hero-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 65ch;
}
.solicitud-history-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.solicitud-history-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.solicitud-history-stat {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 112px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.solicitud-history-stat span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.solicitud-history-stat strong {
  font-size: 2rem;
  line-height: 1;
}
.solicitud-history-card {
  overflow: hidden;
}
.solicitud-history-card-head {
  padding-bottom: 16px;
}
.solicitud-history-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.solicitud-history-table-scroll {
  border-top: 1px solid rgba(148,163,184,.16);
}
.solicitud-history-table-scroll .td-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.solicitud-history-table-scroll .td-actions > form,
.solicitud-history-table-scroll .td-actions > details {
  width: 100%;
}
.solicitud-history-table-scroll .td-details {
  display: block;
  width: 100%;
}
.solicitud-history-table-scroll .td-details summary {
  width: 100%;
  justify-content: center;
}
.solicitud-history-table-scroll .td-details-panel {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.solicitud-history-table-scroll .simple-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.solicitud-history-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 54px 20px;
  text-align: center;
}
.solicitud-history-empty-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--primary-light);
  color: var(--primary);
}
.solicitud-history-empty-icon svg {
  width: 30px;
  height: 30px;
}
.solicitud-history-empty h3 {
  margin: 0;
  font-size: 1.05rem;
}
.solicitud-history-empty p {
  margin: 0;
  color: var(--muted);
  max-width: 52ch;
}
.bandeja-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 18px;
  align-items: stretch;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.bandeja-hero-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}
.bandeja-hero-copy h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}
.bandeja-hero-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}
.bandeja-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bandeja-stat {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 112px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}
.bandeja-stat span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bandeja-stat strong {
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bandeja-list-card {
  overflow: hidden;
}
.bandeja-list-head {
  align-items: flex-end;
}
.bandeja-list-tools {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.bandeja-search {
  display: grid;
  gap: 6px;
}
.bandeja-search input {
  min-width: 260px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background: #fff;
  font: inherit;
  color: var(--text);
}
.bandeja-search input:focus {
  outline: none;
  border-color: var(--primary-mid);
  box-shadow: 0 0 0 3px rgba(30,64,175,.1);
}
.bandeja-grid {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.bandeja-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.22);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.bandeja-card-top {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(0, 1.1fr) auto;
  gap: 14px;
  align-items: start;
}
.bandeja-card-request,
.bandeja-card-user {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.bandeja-card-label {
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bandeja-card-code {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.bandeja-card-user strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.bandeja-card-user small {
  color: var(--muted);
  font-size: .78rem;
}
.bandeja-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}
.bandeja-card-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.bandeja-card-meta > div {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid var(--border);
  display: grid;
  gap: 4px;
}
.bandeja-card-meta strong {
  font-size: .98rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bandeja-card-observation {
  display: grid;
  gap: 6px;
}
.bandeja-card-observation p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}
.bandeja-card-products {
  display: grid;
  gap: 8px;
}
.bandeja-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bandeja-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.bandeja-convert-form {
  display: flex;
  width: 100%;
}
.bandeja-reject-form {
  display: flex;
  width: 100%;
}
.bandeja-card-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
}
.bandeja-product-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  border: 1px solid rgba(59,130,246,.10);
  font-size: .82rem;
  font-weight: 700;
}
.bandeja-product-chip--muted {
  background: #f8fafc;
  color: var(--muted);
  border-color: var(--border);
}
.bandeja-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
}
.bandeja-empty-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: var(--primary-light);
  color: var(--primary);
}
.bandeja-empty-icon svg {
  width: 30px;
  height: 30px;
}
.bandeja-empty h3 {
  margin: 0;
  font-size: 1.05rem;
}
.bandeja-empty p {
  margin: 0;
  color: var(--muted);
  max-width: 56ch;
}
button.solicitud-meli-icon-btn,
button.solicitud-catalog-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  color: var(--primary);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
button.solicitud-meli-icon-btn {
  margin-top: 0;
  text-decoration: none;
}
button.solicitud-meli-icon-btn svg,
button.solicitud-catalog-add-btn svg {
  width: 15px;
  height: 15px;
}
button.solicitud-meli-icon-btn:hover,
button.solicitud-catalog-add-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--primary-dark);
}
button.solicitud-catalog-add-btn.is-added {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--primary);
}
.solicitud-catalog-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  color: inherit;
}
/* Shortcut chips */
.solicitud-shortcuts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.solicitud-shortcut {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  font-size: .7rem;
  font-weight: 700;
}
/* Empty state */
.solicitud-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  text-align: center;
  padding: 24px;
}
.solicitud-empty svg {
  width: 38px;
  height: 38px;
  opacity: .45;
}
.solicitud-empty p {
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
}
/* Selected table */
.solicitud-selected-scroll {
  flex: 1;
  overflow-y: auto;
}
.solicitud-selected-scroll table {
  width: 100%;
  border-collapse: collapse;
}
.solicitud-selected-scroll th,
.solicitud-selected-scroll td {
  padding: 10px 14px;
  font-size: .84rem;
  border-bottom: 1px solid var(--border);
}
.solicitud-selected-scroll thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: .78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Footer */
.solicitud-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.quote-selected-name {
  display: grid;
  gap: 4px;
}
.quote-selected-name small {
  color: var(--muted);
  font-size: .78rem;
}
.quote-qty-wrap {
  display: inline-grid;
  grid-template-columns: 34px minmax(72px, 92px) 34px;
  align-items: center;
  gap: 6px;
}
.quote-qty-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white !important;
  color: var(--text) !important;
  padding: 0;
  justify-content: center;
  font-family: inherit;
}
.quote-qty-input {
  text-align: center;
  padding: 8px 10px;
}
.quote-remove-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  padding: 0;
  justify-content: center;
}

.misc-admin-focus {
  margin-top: 18px;
}
.misc-approval-list {
  display: grid;
  gap: 14px;
}
.misc-approval-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow: 0 14px 36px rgba(15,23,42,.05);
}
.misc-approval-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}
.request-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.request-title-row strong {
  font-size: 1rem;
}
.misc-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: .86rem;
}
.misc-item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.misc-item-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 700;
}
.request-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}
.request-actions form {
  margin: 0;
}
.misc-approval-actions .btn {
  width: 100%;
}
.misc-reject-form {
  display: grid;
  gap: 8px;
}
.misc-reject-form textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: #fff;
}
.misc-reject-form textarea:focus {
  outline: none;
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.cotizacion-summary-card {
  background:
    linear-gradient(135deg, rgba(219,234,254,.55), rgba(255,255,255,.92)),
    white;
}

.quote-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.quote-request-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr) minmax(220px, .6fr);
  gap: 14px;
  margin-bottom: 20px;
}
.quote-request-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}
.quote-request-card strong {
  font-size: 1rem;
}
.quote-request-card p,
.quote-request-card span {
  color: var(--muted);
  font-size: .84rem;
}
.quote-entry-summary {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.quote-detail-section {
  margin-top: 22px;
}
.quote-entry-summary-horizontal {
  grid-template-columns: minmax(130px, auto) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
}
.quote-entry-summary-count {
  display: grid;
  gap: 4px;
}
.quote-entry-summary strong {
  font-size: 1.8rem;
  line-height: 1;
}
.quote-entry-summary p {
  color: var(--muted);
  font-size: .85rem;
  margin: 0;
  line-height: 1.45;
}
.quote-entry-summary-horizontal .btn {
  white-space: nowrap;
}
.quote-detail-table input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font: inherit;
}
.quote-subtotal {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  font-weight: 800;
  white-space: nowrap;
}
.quote-row-na td { background: #fffbeb; }
.quote-row-na td:not(:first-child) { opacity: .6; }
.quote-row-na input[type="number"][readonly],
.quote-row-na input[type="text"][readonly] { background: #f1f5f9; cursor: not-allowed; pointer-events:none; }
.quote-row-na .quote-subtotal { background:#fef3c7; color:#b45309; }
.quote-row-na .solicitud-meli-chip { opacity: .4; pointer-events:none; }

/* Chip toggle "No dispone" — limpio, compacto, estado activo en amber */
.quote-na-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 11px 5px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
  line-height: 1;
}
.quote-na-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.quote-na-chip-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  position: relative;
  flex-shrink: 0;
  transition: all .15s ease;
}
.quote-na-chip:hover {
  border-color: #cbd5e1;
  color: #334155;
  background: #f8fafc;
}
.quote-na-chip:has(input:checked),
.quote-na-chip.is-active {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}
.quote-na-chip:has(input:checked) .quote-na-chip-dot,
.quote-na-chip.is-active .quote-na-chip-dot {
  background: #d97706;
  border-color: #d97706;
}
.quote-na-chip:has(input:checked) .quote-na-chip-dot::after,
.quote-na-chip.is-active .quote-na-chip-dot::after {
  content: '';
  position: absolute;
  left: 3px; top: 5.5px;
  width: 5px; height: 2.5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.quote-na-chip input:focus-visible + .quote-na-chip-dot {
  box-shadow: 0 0 0 3px rgba(217,119,6,.25);
}
.quote-detail-table th:nth-child(1),
.quote-detail-table td:nth-child(1) {
  min-width: 240px;
}
.quote-detail-table th:nth-child(2),
.quote-detail-table td:nth-child(2),
.quote-detail-table th:nth-child(3),
.quote-detail-table td:nth-child(3) {
  min-width: 150px;
}
.quote-detail-table th:nth-child(4),
.quote-detail-table td:nth-child(4) {
  min-width: 130px;
}
.quote-provider-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.process-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 18px;
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow);
}
.process-card.is-complete {
  border-color: rgba(21,128,61,.24);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}
.process-card h3 {
  font-size: 1rem;
  margin: 0;
}
.process-card p {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.6;
}
.process-card strong {
  font-size: .92rem;
}
.process-step-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 6px 11px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
}

.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.rank-card {
  border: 1px dashed rgba(148,163,184,.55);
  border-radius: 18px;
  background: #fbfdff;
  padding: 18px;
  display: grid;
  gap: 8px;
}
.rank-card.is-filled {
  border-style: solid;
  border-color: rgba(30,64,175,.14);
  box-shadow: var(--shadow);
}
.rank-card strong {
  font-size: 1rem;
}
.rank-card p {
  color: var(--muted);
  font-size: .84rem;
}

.priority-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
}
.priority-rank-1 {
  background: #dcfce7;
  color: #15803d;
}
.priority-rank-2 {
  background: #eff6ff;
  color: var(--primary);
}
.priority-rank-3 {
  background: #fff7ed;
  color: #c2410c;
}

.review-route-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.review-route-banner > div {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 18px;
  display: grid;
  gap: 6px;
}
.review-route-banner strong {
  font-size: 1rem;
}
.review-route-banner p {
  color: var(--muted);
  font-size: .84rem;
}

.approval-decision-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.currency-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}
.currency-config-form {
  display: grid;
  gap: 18px;
}
.currency-converter {
  display: grid;
  gap: 18px;
}
.currency-rate-note {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  color: var(--muted);
  font-size: .85rem;
}
.currency-rate-note strong {
  color: var(--text);
}
.currency-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.currency-info-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 18px;
  display: grid;
  gap: 8px;
}
.currency-info-card strong {
  font-size: .95rem;
}
.currency-info-card p {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
  gap: 22px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.14), transparent 32%),
    radial-gradient(circle at bottom right, rgba(30,64,175,.1), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}
.dashboard-hero > * {
  min-height: 100%;
}
.dashboard-kicker {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dashboard-hero-copy h1 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 760px;
  margin-bottom: 14px;
}
.dashboard-hero-copy p {
  color: var(--muted);
  max-width: 700px;
  font-size: .98rem;
}
.dashboard-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.dashboard-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 700;
}
.dashboard-hero-panel {
  display: grid;
  gap: 14px;
  grid-template-rows: minmax(0, 1fr) auto;
}
.dashboard-spotlight,
.dashboard-mini-metrics > div {
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  padding: 20px;
}
.dashboard-spotlight strong {
  display: block;
  font-size: 3rem;
  line-height: 1;
  margin: 8px 0;
}
.dashboard-spotlight p,
.dashboard-mini-metrics span {
  color: var(--muted);
}
.dashboard-mini-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dashboard-mini-metrics strong {
  display: block;
  font-size: 1.4rem;
  margin-top: 6px;
}

.dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr);
  gap: 24px;
  align-items: start;
}
.dashboard-main,
.dashboard-side {
  display: grid;
  gap: 24px;
}
.dashboard-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.dashboard-section-head h2 {
  font-size: 1.35rem;
  line-height: 1.1;
}
.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.dashboard-metric-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--shadow);
  min-height: 108px;
}
.dashboard-metric-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: var(--primary);
}
.dashboard-metric-icon svg {
  width: 24px;
  height: 24px;
}
.dashboard-metric-copy strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 6px;
}
.dashboard-metric-copy span {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}
.dashboard-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.dashboard-alert-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 15px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.24);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  overflow: hidden;
}
.dashboard-alert-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 999px;
  background: var(--primary-light);
}
.dashboard-alert-card strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text);
}
.dashboard-alert-card p {
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
}
.dashboard-alert-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--primary);
}
.dashboard-alert-link:hover {
  text-decoration: none;
}
.dashboard-alert-top {
  display: grid;
  gap: 6px;
}
.dashboard-alert-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-alert-card--critical::before { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.dashboard-alert-card--warning::before { background: linear-gradient(180deg, #f59e0b, #b45309); }
.dashboard-alert-card--primary::before { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.dashboard-alert-card--info::before { background: linear-gradient(180deg, #0ea5e9, #0369a1); }
.dashboard-alert-card--success::before { background: linear-gradient(180deg, #22c55e, #15803d); }
.dashboard-alert-card--neutral::before { background: linear-gradient(180deg, #94a3b8, #64748b); }

.dashboard-flow-card,
.dashboard-activity-card {
  margin-bottom: 0;
}
.dashboard-flow-list {
  display: grid;
  gap: 12px;
}
.dashboard-flow-step {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-flow-step:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(30,64,175,.2);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
}
.dashboard-flow-step-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-flow-step strong {
  display: block;
  margin-bottom: 4px;
  font-size: .96rem;
  color: var(--text);
}
.dashboard-flow-step span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.dashboard-flow-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex-shrink: 0;
}
.dashboard-flow-count {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}
.dashboard-flow-link {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dashboard-flow-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.dashboard-flow-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary-mid), var(--primary));
}
.dashboard-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  min-height: 126px;
  scroll-snap-align: start;
}
.dashboard-activity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dashboard-activity-copy {
  min-width: 0;
}
.dashboard-activity-copy strong {
  display: block;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text);
}
.dashboard-activity-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}
.dashboard-activity-item time {
  align-self: start;
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.dashboard-activity-card .card-body {
  padding-top: 16px;
}
.dashboard-activity-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 260px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.dashboard-activity-list::-webkit-scrollbar {
  height: 10px;
}
.dashboard-activity-list::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.5);
  border-radius: 999px;
}
.dashboard-guide-card .card-body,
.dashboard-shortcuts-card .card-body,
.dashboard-notes-card .card-body {
  padding: 20px;
}
.dashboard-guide-card,
.dashboard-shortcuts-card,
.dashboard-notes-card {
  margin-bottom: 0;
}
.dashboard-guide-list {
  display: grid;
  gap: 14px;
}
.dashboard-guide-step {
  padding: 16px 18px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid var(--border);
}
.dashboard-guide-step strong {
  display: block;
  margin-bottom: 6px;
  font-size: .96rem;
}
.dashboard-guide-step p,
.dashboard-shortcut p,
.dashboard-note p {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.6;
}
.dashboard-shortcuts {
  display: grid;
  gap: 12px;
}
.dashboard-shortcut {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 96px;
}
.dashboard-shortcut:hover {
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(30,64,175,.2);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
}
.dashboard-shortcut strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}
.dashboard-shortcut-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: var(--primary);
}
.dashboard-shortcut-icon svg {
  width: 20px;
  height: 20px;
}
.dashboard-notes-card .card-body {
  display: grid;
  gap: 14px;
}
.dashboard-note {
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  min-height: 110px;
}
.dashboard-note strong {
  display: block;
  margin-bottom: 6px;
}

/* Legacy row */
.row {
  display: grid; grid-template-columns: 1fr 110px;
  gap: 10px; align-items: end;
  background: #f8fafc; padding: 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  margin-bottom: 8px;
}
.row select, .row input { margin: 0; }

/* === DETAIL / INFO GRID === */
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px; padding: 22px;
}
.detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.detail-value { font-size: .95rem; font-weight: 600; }

/* === SECTION DIVIDER === */
.section-title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--primary);
  padding: 0 22px 10px; border-bottom: 1.5px solid var(--primary-light);
  margin: 0 0 0;
}
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; flex-wrap: wrap;
}
.section-header h3 { font-size: .95rem; font-weight: 700; margin: 0; }









/* === LOGIN === */









/* === EMPTY STATE === */
.empty {
  padding: 60px 24px; text-align: center; color: var(--muted);
}
.empty svg {
  width: 54px; height: 54px; margin: 0 auto 16px;
  display: block; opacity: .28;
}
.empty h3 { color: var(--text); margin-bottom: 6px; font-size: 1rem; }
.empty p { font-size: .9rem; }

/* === REPORT CARDS === */
.reports-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr);
  gap: 18px;
  margin-bottom: 18px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(148,163,184,.22);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 34px rgba(15,23,42,.06);
}
.reports-hero-copy {
  min-width: 0;
}
.reports-hero-copy h2 {
  margin: 6px 0 10px;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.reports-hero-copy p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.55;
}
.reports-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.reports-hero-tags span {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reports-hero-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.reports-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: var(--primary);
  border: 1px solid rgba(59,130,246,.12);
}
.reports-hero-icon i {
  font-size: 28px;
}
.reports-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reports-hero-btn {
  min-width: 168px;
  justify-content: center;
}
.reports-hero-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.reports-hero-mini div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(148,163,184,.22);
}
.reports-hero-mini strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.reports-hero-mini small {
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.report-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; padding: 22px;
}
.report-card {
  background: #fff;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}
.report-card-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.report-card-icon svg { width: 22px; height: 22px; }
.report-card h3 { font-size: .97rem; margin-bottom: 8px; }
.report-card p { color: var(--muted); font-size: .85rem; margin-bottom: 16px; line-height: 1.5; }

.an-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === COMPARISON TABLE (cuadro comparativo) === */
.selected-row { background: #f0fdf4 !important; }
.selected-row td { border-bottom: 1px solid #bbf7d0; }

/* === HISTORY TABLE === */
.timeline-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}

/* === BALANCE CHIP === */
.balance-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  background: var(--primary-light); color: var(--primary);
}

/* === ARCHIVOS Y PLANOS === */
.page-subtitle {
  margin-top: 6px;
  color: var(--muted);
  max-width: 720px;
  line-height: 1.55;
}

.archive-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.archive-search-card {
  margin-bottom: 18px;
}

.archive-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: end;
}

.archive-search-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: start;
}

.archive-layout--history {
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
}

.archive-main,
.archive-side {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.archive-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.2);
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.archive-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.archive-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.archive-card h3 {
  font-size: 1rem;
  line-height: 1.25;
}

.archive-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.archive-card-meta {
  display: grid;
  gap: 8px;
  color: #475569;
  font-size: .82rem;
}

.archive-card-meta span,
.archive-list-item small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.archive-card-meta i,
.archive-list-item i {
  color: var(--primary);
}

.archive-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  padding-top: 4px;
  border-top: 1px solid rgba(148,163,184,.16);
}

.archive-card-status {
  display: grid;
  gap: 4px;
}

.archive-card-status strong {
  font-size: .9rem;
}

.archive-card-status small,
.archive-card-action-disabled span {
  color: var(--muted);
  font-size: .78rem;
}

.archive-card-action {
  display: flex;
  align-items: center;
  gap: 10px;
}

.archive-card-action-disabled {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.archive-list {
  display: grid;
  gap: 10px;
}

.archive-list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.archive-list-item strong {
  display: block;
  font-size: .92rem;
}

.archive-list-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
}

.archive-list-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 120px;
}

.archive-admin-form .field-grid {
  margin-bottom: 14px;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: .9rem;
}

.checkbox-inline input {
  width: 16px;
  height: 16px;
}

.archive-admin-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.archive-report-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.archive-report-columns h4 {
  margin-bottom: 10px;
  font-size: .92rem;
}

/* === RESPONSIVE === */
/* Login: panel izquierdo compacto en tablet */
@media (min-width: 561px) and (max-width: 900px) {
  .lp-card { grid-template-columns: .8fr 1.3fr; min-height: 520px; }
  .lp-panel { padding: 32px 24px; }
  .lp-logo-circle { width: 110px; height: 78px; border-radius: 24px; }
  .lp-brand-name { font-size: 1.5rem; }
  .lp-panel-tagline { display: none; }
  .lp-mobile-brand { display: none; }
  .lp-form-topbrand { padding: 20px 32px 0; }
  .lp-form-inner { padding: 24px 32px 32px; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .content { margin-left: 0; }
  .navbar {
    padding: 0 16px;
    gap: 10px;
  }
  .hamburger { display: flex; }
  .sidebar-compact-btn { display: none !important; }
  .nav-context-chip { display: none; }
  .nav-user {
    gap: 8px;
    margin-left: auto;
    cursor: default;
    max-width: 100%;
    align-items: center;
  }
  .nav-info {
    display: flex;
    min-width: 0;
  }
  .nav-name {
    max-width: 32vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-role { display: none; }
  .avatar {
    width: 36px;
    height: 36px;
    font-size: .78rem;
  }
  .nav-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .nav-logout-form {
    display: inline-flex;
    flex-shrink: 0;
  }
  .nav-logout span {
    display: none;
  }
  .nav-logout svg {
    width: 18px;
    height: 18px;
  }
  .navbar-brand span {
    font-size: 1rem;
  }
  .navbar-brand-mark {
    width: 50px;
    height: 38px;
    padding: 5px 7px;
    border-radius: 13px;
  }
  .page { padding: 20px 16px; }
  .reports-hero {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 22px;
  }
  .reports-hero-side {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
  }
  .reports-hero-actions {
    grid-column: 1 / -1;
  }
  .reports-hero-btn {
    min-width: 0;
    flex: 1 1 160px;
  }
  .reports-hero-mini {
    grid-column: 1 / -1;
  }
  .archive-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-search-form,
  .archive-layout,
  .archive-layout--history,
  .archive-admin-panels,
  .archive-report-columns {
    grid-template-columns: 1fr;
  }
  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-card-footer,
  .archive-list-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .archive-list-actions {
    align-items: flex-start;
    min-width: 0;
  }
  .report-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }
  .report-card {
    padding: 18px;
    border-radius: 18px;
  }
  .app-footer { padding: 0 16px 18px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr !important; }
  .g-span2, .g-span3 { grid-column: span 1; }
  form.form { grid-template-columns: 1fr; }
  form.form h3 { grid-column: span 1; }
  form.form > button, form.form > .btn { grid-column: span 1; }
  .item-row { grid-template-columns: 1fr 90px; }
  .item-row .del-btn { grid-column: 1 / -1; justify-self: start; }
  .nav-info { display: none; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  body.sidebar-compact .content { margin-left: 0; }
  .cotizaciones-hero,
  .solicitud-topbar,
  .solicitud-builder,
  .quote-entry-grid,
  .quote-request-banner,
  .quote-entry-summary-horizontal,
  .quote-provider-meta,
  .currency-layout,
  .dashboard-hero,
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-alert-grid {
    grid-template-columns: 1fr 1fr;
  }
  .quote-entry-summary-horizontal .btn { width: 100%; justify-content: center; }
  .solicitud-builder { height: auto; min-height: 0; }
  .solicitud-panel { height: 380px; }
  .page-solicitud-insumos .solicitud-builder {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .page-solicitud-insumos .solicitud-panel {
    height: auto;
  }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .archive-stats,
  .archive-grid {
    grid-template-columns: 1fr;
  }
  .archive-search-form {
    grid-template-columns: 1fr;
  }
  .page-header h1 { font-size: 1.3rem; }
  .navbar-brand span { display: none; }
  .navbar-brand {
    gap: 0;
  }
  .navbar-brand-mark {
    width: 46px;
    height: 34px;
    padding: 4px 6px;
    border-radius: 12px;
  }
  .brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  /* ── Login móvil: experiencia tipo app nativa ── */
  .auth-wrap {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    background-image: none;
    background:
      radial-gradient(120% 60% at 50% 0%, #1e3a8a 0%, #142244 55%, #0d1526 100%);
  }
  .auth-wrap::before { display: none; }
  .auth-shell {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    gap: 0;
    display: flex;
    flex-direction: column;
  }
  .auth-flash {
    margin: 12px 14px 0;
    border-radius: 12px;
  }
  .lp-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    border-radius: 0;
    background: transparent;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 0;
    box-shadow: none;
    overflow: visible;
    flex: 1;
  }
  /* Hero superior — área de marca */
  .lp-panel {
    display: flex;
    padding: 38px 24px 30px;
    justify-content: center;
    align-items: center;
    background: transparent;
  }
  .lp-panel-inner {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .lp-logo-wrap {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .lp-logo-circle {
    width: 88px; height: 88px;
    border-radius: 24px;
    padding: 12px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
    box-shadow:
      0 18px 38px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.18);
  }
  .lp-logo-circle .img-logo { width: 100%; height: 100%; }
  .lp-logo-circle svg { width: 32px !important; height: 32px !important; }
  .lp-brand-name {
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .lp-panel-tagline {
    display: block;
    font-size: .68rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .14em;
    margin-top: 2px;
  }
  .lp-dots { display: none; }

  /* Hoja blanca tipo bottom-sheet */
  .lp-form-panel {
    margin: 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.25);
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .lp-form-topbrand { display: none; }
  .lp-mobile-brand { display: none; }
  .lp-form-inner {
    padding: 28px 22px 22px;
    flex: 1;
    justify-content: flex-start;
  }
  .lp-form-head { margin-bottom: 22px; }
  .lp-form-title {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 4px;
  }
  .lp-form { gap: 18px; }
  .lp-field { gap: 6px; }
  .lp-label {
    font-size: .7rem;
    letter-spacing: .08em;
    color: #94a3b8;
  }
  .lp-field input,
  .lp-field select {
    padding: 14px 14px;
    font-size: 16px; /* evita zoom en iOS */
    background: #f1f5f9;
    border: 1.5px solid transparent;
    border-radius: 12px;
    color: #0f172a;
    transition: background .15s, border-color .15s, box-shadow .15s;
  }
  .lp-field input::placeholder { color: #94a3b8; }
  .lp-field input:focus,
  .lp-field select:focus {
    background: #ffffff;
    border-color: #1565c0;
    box-shadow: 0 0 0 4px rgba(21,101,192,.12);
  }
  .lp-select-wrap {
    min-height: 54px;
    border-radius: 14px;
    background: #f8fafc;
  }
  .lp-branch-field select {
    min-height: 54px;
    padding: 0 46px 0 54px;
    border: 0;
    background: transparent;
  }
  .lp-branch-field select:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .lp-pass-wrap input { padding-right: 46px; }
  .lp-eye {
    bottom: auto;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 6px;
  }
  .lp-eye svg { width: 20px; height: 20px; }
  .lp-btn {
    padding: 16px 20px;
    margin-top: 10px;
    font-size: .9rem;
    letter-spacing: .08em;
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(21,101,192,.36);
  }
  .lp-demo {
    margin-top: 18px;
    border-radius: 14px;
    border-style: solid;
    border-color: #e2e8f0;
    background: #f8fafc;
  }
  .lp-demo-label {
    padding: 7px 14px;
    font-size: .65rem;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
  }
  .lp-demo-body {
    padding: 10px 14px;
    font-size: .76rem;
    line-height: 1.65;
  }
  .lp-credit {
    margin-top: auto;
    padding-top: 18px;
    font-size: .68rem;
    line-height: 1.55;
  }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .card-head,
  .card-body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .app-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
  .detail-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  table { min-width: 580px; }
  .cotizaciones-hero {
    padding: 18px;
    gap: 16px;
  }
  .cotizaciones-filters-card {
    padding: 18px;
  }
  .cotizaciones-filters-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .cotizaciones-filters-chip {
    width: 100%;
    justify-content: center;
  }
  .field-grid--cotizaciones-filters {
    grid-template-columns: 1fr;
  }
  .cotizaciones-filters-cta {
    align-items: stretch;
  }
  .cotizaciones-filters-actions {
    justify-content: stretch;
  }
  .cotizaciones-filters-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .cotizaciones-hero-copy h2 {
    font-size: 1.25rem;
  }
  .cotizaciones-detail-table {
    min-width: 0;
  }
  .cotizaciones-detail-table thead {
    display: none;
  }
  .cotizaciones-detail-table tbody,
  .cotizaciones-detail-table tr,
  .cotizaciones-detail-table td {
    display: block;
    width: 100%;
  }
  .cotizaciones-detail-table tbody {
    display: grid;
    gap: 12px;
  }
  .cotizaciones-detail-table tr {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  }
  .cotizaciones-detail-table td {
    min-width: 0;
    padding: 0;
    border-bottom: none;
  }
  .cotizaciones-detail-table td + td {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .cotizaciones-detail-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .cotizaciones-detail-table .td-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cotizaciones-detail-table .td-actions .btn {
    justify-content: center;
    width: 100%;
  }
  .review-route-banner {
    grid-template-columns: 1fr;
  }
  .cotizacion-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .cotizacion-stats-grid .stat-card {
    min-height: 168px;
    padding: 18px;
  }
  .cotizacion-stats-grid .stat-card:last-child {
    grid-column: 1 / -1;
  }
  .cotizacion-stats-grid .stat-icon {
    margin-bottom: 14px;
  }
  .cotizacion-stats-grid .stat-value {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    line-height: .96;
    margin-bottom: 10px;
    text-wrap: balance;
  }
  .cotizacion-stats-grid .stat-label {
    margin-top: auto;
  }
  .review-route-banner > div,
  .field-grid,
  .field,
  .form-actions {
    min-width: 0;
  }
  .field input,
  .field select,
  .field textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .product-picker-grid { grid-template-columns: 1fr; }
  .quote-qty-wrap { grid-template-columns: 30px minmax(64px, 1fr) 30px; }
  .nav-context-chip { display: none; }
  .dashboard-mini-metrics { grid-template-columns: 1fr; }
  .roles-page-shell { grid-template-columns: 1fr; }
  .roles-rail {
    position: static;
    top: auto;
    overflow: visible;
    margin-bottom: 2px;
  }
  .roles-rail-body {
    gap: 12px;
  }
  .roles-rail .card-head {
    gap: 10px;
  }
  .roles-search-box {
    border-radius: 16px;
  }
  .roles-list {
    display: flex;
    gap: 10px;
    margin: 0 -2px;
    padding: 2px 2px 10px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .roles-list::-webkit-scrollbar { height: 0; }
  .role-item {
    min-width: 240px;
    max-width: 280px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 14px 14px 15px 16px;
    border-radius: 18px;
  }
  .role-item::before {
    inset: 10px auto 10px 10px;
  }
  .role-item-copy strong {
    font-size: .94rem;
  }
  .role-item-copy p {
    font-size: .82rem;
  }
  .role-item-badges {
    gap: 6px;
  }
  .roles-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px 14px;
    position: sticky;
    top: calc(var(--nav-h) + var(--safe-top));
    z-index: 12;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
  }
  .roles-tab {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    padding: 10px 12px;
    white-space: nowrap;
  }
  .roles-editor-hero {
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 18px;
    gap: 14px;
  }
  .roles-tabs-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .roles-editor-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .roles-mini-stat:last-child {
    grid-column: 1 / -1;
  }
  .roles-permissions-toolbar {
    padding: 14px;
    border-radius: 18px;
  }
  .roles-permissions-toolbar-copy p {
    font-size: .86rem;
  }
  .roles-permissions-toolbar-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .roles-permissions-toolbar-actions .btn {
    min-height: 44px;
  }
  .roles-permission-groups {
    gap: 14px;
  }
  .roles-permission-group-head {
    flex-direction: column;
  }
  .roles-permission-group-head {
    gap: 10px;
    align-items: flex-start;
  }
  .roles-group-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .roles-permission-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .permission-item {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
  }
  .permission-item input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
  .roles-summary-grid {
    grid-template-columns: 1fr;
  }
  .roles-summary-stats {
    grid-template-columns: 1fr 1fr;
  }
  .roles-summary-stats .roles-mini-stat:last-child {
    grid-column: 1 / -1;
  }
  .roles-create-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 14px;
  }
  .roles-create-hero .balance-chip {
    align-self: flex-start;
  }
  .users-modal-actions {
    grid-template-columns: 1fr;
  }
  .roles-summary-hero-actions .btn,
  .roles-summary-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .roles-summary-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .roles-summary-actions .btn,
  .roles-summary-actions .roles-restore-form {
    width: 100%;
  }
  .roles-summary-card {
    padding: 16px;
  }
  .roles-summary-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .roles-summary-hero-actions .btn {
    min-width: 0;
  }
  .roles-create-form {
    gap: 14px;
  }
  .roles-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .roles-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .roles-restore-form {
    margin-top: 0;
  }
}

.search-hint {
  font-size: .82rem;
  color: var(--muted);
}

.approval-history-toolbar {
  padding: 22px;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 26%),
    linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}
.approval-history-toolbar-copy {
  display: grid;
  gap: 6px;
  max-width: 900px;
}
.approval-history-kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.approval-history-toolbar-copy h2 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.2;
}
.approval-history-toolbar-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  max-width: 820px;
}
.approval-history-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(180px, .75fr)) auto;
  gap: 14px;
  align-items: end;
}
.approval-history-filters-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}
.approval-history-filter {
  display: grid;
  gap: 8px;
}
.approval-history-filter-search {
  min-width: 0;
}
.approval-history-filter-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.approval-history-filter .search-box,
.approval-history-filter input[type="date"] {
  width: 100%;
  max-width: none;
}
.approval-history-filter .search-box {
  background: white;
  border-color: rgba(148,163,184,.35);
  min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.approval-history-filter .search-box:focus-within {
  border-color: rgba(30,64,175,.45);
  box-shadow: 0 0 0 4px rgba(30,64,175,.10);
}
.approval-history-filter input[type="date"] {
  min-height: 48px;
  border: 1.5px solid rgba(148,163,184,.35);
  border-radius: 12px;
  background: white;
  padding: 0 14px;
  color: var(--text);
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.approval-history-filter input[type="date"]:focus {
  border-color: rgba(30,64,175,.45);
  box-shadow: 0 0 0 4px rgba(30,64,175,.10);
}
.approval-history-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.approval-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.approval-history-table {
  min-width: 1520px;
  table-layout: fixed;
  width: 100%;
}
.approval-history-table th,
.approval-history-table td {
  padding-left: 20px;
  padding-right: 20px;
}
.approval-history-table tbody td {
  vertical-align: top;
}
.approval-history-solicitud-cell,
.approval-history-order-cell,
.approval-history-user-cell,
.approval-history-observation-cell {
  white-space: normal;
}
.approval-history-solicitud-cell strong,
.approval-history-order-cell strong,
.approval-history-user-cell strong {
  display: block;
  margin-bottom: 2px;
}
.approval-history-solicitud-cell small,
.approval-history-order-cell small,
.approval-history-user-cell small {
  display: block;
  line-height: 1.4;
}
.approval-history-subline {
  font-size: .76rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.approval-history-provider-cell,
.approval-history-action-cell,
.approval-history-exp-state-cell,
.approval-history-order-state-cell,
.approval-history-pdf-cell,
.approval-history-date-cell {
  white-space: nowrap;
}
.approval-history-provider-cell,
.approval-history-user-cell {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.approval-history-provider-cell .td-bold,
.approval-history-user-cell .td-bold {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.approval-history-exp-state-cell .badge {
  max-width: 210px;
  white-space: normal;
  line-height: 1.22;
  text-align: center;
}
.approval-history-order-state-cell .badge {
  max-width: 120px;
  white-space: normal;
  line-height: 1.22;
  text-align: center;
}
.approval-history-pdf-cell .btn {
  min-width: 102px;
  justify-content: center;
}
.approval-history-observation-cell {
  min-width: 260px;
  line-height: 1.45;
  white-space: normal;
}
.approval-history-observation-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-history-detail-cell {
  width: 160px;
  vertical-align: top;
}
.approval-history-details {
  display: block;
}
.approval-history-details summary {
  list-style: none;
}
.approval-history-details summary::-webkit-details-marker {
  display: none;
}
.approval-history-detail-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}
.approval-history-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.approval-history-detail-panel .simple-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
.approval-history-detail-panel .simple-list li {
  display: grid;
  gap: 2px;
}
.approval-history-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.approval-history-detail-entry {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  display: grid;
  gap: 4px;
}
.approval-history-detail-entry strong {
  font-size: .95rem;
}
.approval-history-detail-entry .td-mono {
  font-size: .82rem;
}

.approval-history-table .approval-history-date-cell {
  width: 150px;
}
.approval-history-table .approval-history-solicitud-cell {
  width: 190px;
}
.approval-history-table .approval-history-order-cell {
  width: 180px;
}
.approval-history-table .approval-history-provider-cell {
  width: 220px;
}
.approval-history-table .approval-history-user-cell {
  width: 210px;
}
.approval-history-table .approval-history-action-cell {
  width: 108px;
}
.approval-history-table .approval-history-exp-state-cell {
  width: 200px;
}
.approval-history-table .approval-history-order-state-cell {
  width: 130px;
}
.approval-history-table .approval-history-pdf-cell {
  width: 110px;
}
.approval-history-table .approval-history-detail-cell {
  width: 160px;
}
.approval-history-cards {
  display: none;
}
.approval-history-card {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.22);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.06), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.approval-history-card-top {
  display: grid;
  grid-template-columns: minmax(160px, .85fr) minmax(0, 1.25fr) auto;
  gap: 14px;
  align-items: start;
}
.approval-history-card-block,
.approval-history-card-stat,
.approval-history-card-observation {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.approval-history-card-label {
  display: inline-flex;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.approval-history-card-value {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.approval-history-card-code {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-history-card-subline {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.approval-history-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
}
.approval-history-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.approval-history-card-stat {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #f8fbff;
  min-width: 0;
}
.approval-history-card-stat .badge {
  width: fit-content;
  white-space: nowrap;
}
.approval-history-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.approval-history-card-observation {
  flex: 1;
  min-width: 0;
}

body.modal-open { overflow: hidden; }
.modal-backdrop[hidden] {
  display: none !important;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .56);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-dialog {
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.modal-lg { max-width: 920px; }
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 {
  font-size: 1.4rem;
  line-height: 1.2;
}
.modal-body {
  padding: 24px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 24px;
}
.modal-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  padding: 0;
  justify-content: center;
  background: white;
  color: var(--text);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.modal-close:hover {
  background: var(--bg);
}
.modal-close .bi {
  font-size: 18px;
  line-height: 1;
}
.modal-close svg {
  width: 18px;
  height: 18px;
}
.empty-inline {
  border-top: 1px solid var(--border);
}

.auditorias-table {
  table-layout: auto;
  min-width: 100%;
}

.auditorias-desc-cell {
  width: 38%;
  min-width: 320px;
}

.auditorias-desc-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  justify-content: flex-start;
}

.auditorias-desc-text {
  min-width: 0;
  flex: 1;
  white-space: normal;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}

.auditorias-desc-btn {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}

.auditorias-desc-modal-text {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text);
  font-size: .98rem;
}

.auditorias-route-cell {
  max-width: 210px;
}

.auditorias-route-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: .84rem;
  line-height: 1.35;
}

@media (max-width: 560px) {
  .modal-backdrop { padding: 12px; }
  .modal-head, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }
  .modal-footer { padding-bottom: 18px; }
  .auditorias-desc-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .auditorias-desc-cell {
    width: auto;
    min-width: 0;
  }
  #aprobacionesBandejaApp .approval-history-toolbar,
  #aprobacionesBandejaApp .approval-history-filters,
  #aprobacionesBandejaApp .approval-history-filters-compact,
  #aprobacionesBandejaApp .approval-history-meta {
    display: grid;
    gap: 12px;
  }
  #aprobacionesBandejaApp .approval-history-meta {
    justify-items: start;
  }
  #aprobacionesBandejaApp .approval-history-actions {
    width: 100%;
  }
  #aprobacionesBandejaApp .approval-history-actions .btn {
    width: 100%;
    justify-content: center;
  }
  #aprobacionesBandejaApp .table-scroll .td-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .approval-decision-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .approval-decision-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .approval-comparison-scroll .btn {
    width: 100%;
    justify-content: center;
  }
  .approval-history-toolbar {
    padding: 18px;
  }
  .approval-history-toolbar-copy h2 {
    font-size: 1.02rem;
  }
  .approval-history-actions {
    width: 100%;
  }
  .approval-history-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (min-width: 1440px) {
  .approval-history-table th,
  .approval-history-table td {
    padding-left: 24px;
    padding-right: 24px;
  }
  .approval-history-table .approval-history-provider-cell {
    width: 240px;
  }
  .approval-history-table .approval-history-user-cell {
    width: 230px;
  }
  .approval-history-table .approval-history-exp-state-cell {
    width: 240px;
  }
  .approval-history-table .approval-history-order-state-cell {
    width: 140px;
  }
  .approval-history-table .approval-history-detail-cell {
    width: 170px;
  }
}

@media (min-width: 1680px) {
  .approval-history-table {
    min-width: 1600px;
  }
}

@media (max-width: 980px) {
  .approval-history-filters {
    grid-template-columns: 1fr 1fr;
  }
  .approval-history-filter-search,
  .approval-history-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .approval-history-filters {
    grid-template-columns: 1fr;
  }
}

/* === ROLES / PERMISOLOGÍA === */
@media (max-width: 720px) {
  .approval-history-table {
    display: none;
  }
  .approval-history-cards {
    display: grid;
    gap: 14px;
  }
  .approval-history-card {
    padding: 16px 18px;
    border-radius: 18px;
  }
  .approval-history-card-top {
    grid-template-columns: 1fr;
  }
  .approval-history-card-badges {
    justify-content: flex-start;
  }
  .approval-history-card-stats {
    grid-template-columns: 1fr 1fr;
  }
  .approval-history-card-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .approval-history-card .btn {
    width: 100%;
    justify-content: center;
  }
  .approval-history-table {
    min-width: 0;
    width: 100%;
    table-layout: auto;
  }

  .approval-history-table thead {
    display: none;
  }

  .approval-history-table tbody tr {
    display: grid;
    gap: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    width: 100%;
    margin: 0 0 12px;
    box-shadow: 0 4px 14px rgba(15,23,42,.05);
  }

  .approval-history-table tbody td {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    text-align: left;
    min-height: 0;
    white-space: normal;
    font-size: .9rem;
    word-break: break-word;
  }

  .approval-history-table tbody td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .approval-history-table td[data-label]::before,
  .approval-history-table td[data-mobile-label]::before {
    max-width: none;
    margin-bottom: 0;
    font-size: .68rem;
    line-height: 1.25;
    padding-top: 2px;
    width: auto;
    min-width: 92px;
    flex: 0 0 auto;
    text-align: left;
  }

  .approval-history-table tbody td > *,
  .approval-history-table .approval-history-cell-value {
    min-width: 0;
  }

  .approval-history-cell-value {
    flex: 1 1 auto;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
  }

  .approval-history-table .approval-history-solicitud-cell .td-mono,
  .approval-history-table .approval-history-order-cell .td-mono,
  .approval-history-table .approval-history-user-cell .td-bold,
  .approval-history-table .approval-history-provider-cell .td-bold {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .approval-history-table .approval-history-subline,
  .approval-history-table .approval-history-observation-text {
    -webkit-line-clamp: 2;
  }

  .approval-history-table .approval-history-order-cell .approval-history-subline,
  .approval-history-table .approval-history-user-cell .approval-history-subline,
  .approval-history-table .approval-history-solicitud-cell .approval-history-subline {
    margin-top: 2px;
  }

  .approval-history-table .approval-history-exp-state-cell .badge,
  .approval-history-table .approval-history-order-state-cell .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.22;
    align-self: flex-start;
  }

  .approval-history-table .approval-history-pdf-cell .btn {
    width: fit-content;
    min-width: 104px;
  }

  .approval-history-table .approval-history-date-cell .approval-history-cell-value {
    font-size: .96rem;
    color: var(--text);
  }

  .approval-history-table .approval-history-provider-cell .td-bold,
  .approval-history-table .approval-history-user-cell .td-bold,
  .approval-history-table .approval-history-solicitud-cell .td-mono,
  .approval-history-table .approval-history-order-cell .td-mono {
    line-height: 1.3;
  }
}

.roles-page-subtitle {
  margin-top: 8px;
  max-width: 760px;
  color: var(--muted);
  font-size: .94rem;
}

.roles-page-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.roles-rail {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  align-self: start;
  overflow: hidden;
}

.roles-rail .card-head {
  align-items: flex-start;
}

.roles-rail-copy {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 4px;
}

.roles-rail-body {
  display: grid;
  gap: 14px;
}

.roles-search {
  display: grid;
  gap: 8px;
}

.roles-search-box {
  max-width: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.roles-list {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - var(--nav-h) - 232px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.role-item {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px 16px 14px 20px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.role-item::before {
  content: '';
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--primary-mid), var(--primary));
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
}

.role-item:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: rgba(30,64,175,.34);
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  box-shadow:
    0 18px 28px rgba(15,23,42,.10),
    0 0 0 1px rgba(30,64,175,.05);
}

.role-item:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.role-item.is-active {
  border-color: rgba(30,64,175,.42);
  background: linear-gradient(135deg, #eaf3ff 0%, #ffffff 100%);
  box-shadow:
    0 18px 30px rgba(30,64,175,.12),
    0 0 0 1px rgba(30,64,175,.10);
}

.role-item.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}

.role-item-copy {
  min-width: 0;
}

.role-item-copy strong {
  display: block;
  color: var(--text);
  font-size: .96rem;
  margin-bottom: 4px;
}

.role-item-copy p {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.role-item-copy small {
  display: inline-block;
  margin-top: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}

.role-item-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.roles-empty-state {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}

.roles-empty-state strong {
  display: block;
  margin-bottom: 4px;
}

.roles-empty-state p {
  color: var(--muted);
  font-size: .86rem;
}

.roles-workbench {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.roles-section-copy {
  margin-top: 4px;
  color: var(--muted);
  font-size: .85rem;
}

.roles-form-grid {
  align-items: start;
}

.roles-form-actions {
  margin-top: 20px;
}

.roles-editor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  border: 1px solid #dbeafe;
  margin-bottom: 20px;
}

.roles-editor-copy h2 {
  margin-top: 2px;
  font-size: clamp(1.28rem, 2vw, 1.65rem);
  line-height: 1.18;
}

.roles-editor-copy p {
  margin-top: 8px;
  color: var(--muted);
  max-width: 720px;
}

.roles-editor-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.roles-editor-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
}

.roles-mini-stat {
  min-width: 92px;
  padding: 14px 15px;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(15,23,42,.05);
  text-align: center;
}

.roles-mini-stat strong {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 5px;
  color: var(--primary);
}

.roles-mini-stat span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.roles-permissions-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin: 22px 0 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.roles-permissions-toolbar-copy {
  display: grid;
  gap: 5px;
  max-width: 860px;
}

.roles-permissions-toolbar-copy p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

.roles-permissions-toolbar-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(2, minmax(150px, 170px));
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.roles-permissions-search {
  min-width: 0;
}

.roles-permissions-search .search-box {
  max-width: none;
  background: white;
}

.roles-permissions-toolbar-actions .btn {
  width: 100%;
  justify-content: center;
}

.users-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}

.users-modal-actions .btn {
  width: 100%;
  justify-content: center;
}

.roles-permission-groups {
  display: grid;
  gap: 18px;
}

.roles-permission-group {
  margin-bottom: 0;
  overflow: hidden;
}

.roles-permission-group-head {
  align-items: center;
}

.roles-permission-group-head p {
  color: var(--muted);
  font-size: .84rem;
  margin-top: 4px;
}

.roles-group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.roles-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.permission-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

.permission-item:hover {
  transform: translateY(-1px);
  border-color: rgba(30,64,175,.2);
  box-shadow: 0 12px 24px rgba(15,23,42,.07);
}

.permission-item.is-checked {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  border-color: rgba(30,64,175,.36);
  box-shadow: 0 12px 24px rgba(30,64,175,.08);
}

.permission-item input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.permission-item-copy {
  min-width: 0;
}

.permission-item-copy strong {
  display: block;
  color: var(--text);
  margin-bottom: 5px;
}

.permission-item-copy p {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}

.permission-item-copy small {
  display: inline-block;
  margin-top: 6px;
  color: var(--primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roles-permissions-empty {
  margin-top: 18px;
}

.roles-restore-form {
  margin-top: 14px;
}

.roles-tabs-card {
  min-width: 0;
  overflow: visible;
}

.roles-tabs-head {
  align-items: flex-start;
}

.roles-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 22px 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: center;
}

.roles-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.roles-tab:hover {
  background: #f8fafc;
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.roles-tab.is-active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: #bfdbfe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.roles-tab-panel {
  display: none;
  overflow: visible;
}

.roles-tab-panel.is-active {
  display: grid;
  gap: 16px;
}

.roles-tab-panels {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.roles-edit-form {
  display: grid;
  gap: 16px;
}

.roles-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.roles-form-actions-bottom {
  margin-top: 4px;
}

.roles-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
}

.roles-summary-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.roles-summary-card-hero {
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  border-color: #dbeafe;
}

.roles-summary-card h4 {
  margin-bottom: 12px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}

.roles-summary-card-hero h2 {
  margin-top: 4px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.18;
}

.roles-summary-card-hero p {
  margin-top: 8px;
  color: var(--muted);
}

.roles-summary-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.roles-summary-hero-actions .btn {
  min-width: 160px;
  justify-content: center;
}

.roles-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roles-summary-panels {
  display: grid;
  gap: 16px;
}

.roles-summary-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.roles-summary-empty {
  color: var(--muted);
  font-size: .9rem;
}

.roles-summary-progress-list {
  display: grid;
  gap: 12px;
}

.roles-summary-progress-item {
  display: grid;
  gap: 8px;
}

.roles-summary-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.roles-summary-progress-head strong {
  font-size: .92rem;
}

.roles-summary-progress-head span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.roles-progress {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.roles-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary));
}

.roles-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.roles-create-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #dbeafe;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  margin-bottom: 18px;
}

.roles-create-hero h2 {
  margin-top: 4px;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.18;
}

.roles-create-hero p {
  margin-top: 8px;
  max-width: 760px;
  color: var(--muted);
}

.roles-create-form {
  display: grid;
  gap: 16px;
}

/* =========================================
   MOBILE POLISH — solo afecta breakpoints mobile
   No modifica nada del desktop (>900px).
   ========================================= */

/* Safe-area + scroll inertia + hammerless touches */
@media (max-width: 900px) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }
  body {
    -webkit-tap-highlight-color: transparent;
  }
  .navbar {
    padding-top: var(--safe-top);
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    height: calc(var(--nav-h) + var(--safe-top));
  }
  .content {
    padding-top: calc(var(--nav-h) + var(--safe-top));
  }
  .sidebar {
    top: calc(var(--nav-h) + var(--safe-top));
    padding-bottom: calc(24px + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll {
    -webkit-overflow-scrolling: touch;
  }
  .page {
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }
  .app-footer {
    padding-bottom: calc(18px + var(--safe-bottom));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }
  /* hamburger más cómodo al tap */
  .hamburger {
    width: 44px;
    height: 44px;
  }
  .hamburger:active {
    background: var(--bg);
  }
  .nav-user:active {
    background: var(--bg);
  }
  .nav-user {
    padding: 6px 8px;
    border-radius: 12px;
    transition: background .15s;
  }
  /* Drawer overlay con fade y sombra al abrir */
  .sidebar-overlay {
    transition: opacity .22s ease;
    opacity: 0;
  }
  .sidebar-overlay.open {
    opacity: 1;
  }
  .sidebar.open {
    box-shadow: 18px 0 38px rgba(0,0,0,.35);
  }
  /* Tap feedback en sidebar */
  .sidebar-link:active {
    background: rgba(255,255,255,.12);
    transform: none;
  }
}

/* Tablas → cards apilables (genérico + opt-out) */
@media (max-width: 720px) {
  .table-scroll {
    overflow: visible;
  }
  .table-scroll table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .table-scroll thead {
    display: none;
  }
  .table-scroll tbody,
  .table-scroll tr,
  .table-scroll td {
    display: block;
    width: 100%;
  }
  /* Respetar el atributo hidden inyectado por los filtros de búsqueda */
  .table-scroll tbody tr[hidden],
  .table-scroll tbody td[hidden] {
    display: none !important;
  }
  .table-scroll tbody tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 12px;
    box-shadow: 0 4px 14px rgba(15,23,42,.05);
  }
  .table-scroll tbody tr:hover {
    background: var(--card);
  }
  .table-scroll tbody tr:last-child {
    margin-bottom: 0;
  }
  .table-scroll tbody td {
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    font-size: .9rem;
    text-align: right;
    word-break: break-word;
  }
  .table-scroll tbody tr td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .table-scroll tbody tr td:first-child {
    padding-top: 0;
  }
  .table-scroll td[data-label]::before,
  .table-scroll td[data-mobile-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    flex: 0 0 auto;
    max-width: 45%;
  }
  .table-scroll td[data-mobile-label]::before {
    content: attr(data-mobile-label);
  }
  .table-scroll .td-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .table-scroll .td-actions::before {
    margin-bottom: 4px;
  }
  .table-scroll .td-actions .btn,
  .table-scroll .td-actions a.btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
  }
  .table-scroll .td-actions .badge {
    align-self: flex-start;
  }
  /* fila vacía (1 td colspan): no convertir en card */
  .table-scroll tbody tr[data-no-card="true"],
  .table-scroll tbody tr:has(> td[colspan]:only-child) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  .table-scroll tbody tr[data-no-card="true"] > td,
  .table-scroll tbody tr:has(> td[colspan]:only-child) > td {
    display: block;
    padding: 0;
    border: none;
    min-height: 0;
    text-align: center;
  }
  .table-scroll tbody tr[data-no-card="true"] > td::before,
  .table-scroll tbody tr:has(> td[colspan]:only-child) > td::before {
    content: none;
  }
  /* La tabla .cotizaciones-detail-table conserva su propio layout
     definido en el bloque @560px (cards con data-label). */

  .misc-approval-card {
    grid-template-columns: 1fr;
  }
  .request-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Refinamientos finos para móvil estrecho */
@media (max-width: 560px) {
  /* Inputs nativos: 16px evita zoom en iOS */
  .field input,
  .field select,
  .field textarea,
  label input,
  label select,
  label textarea,
  .search-box input,
  .approval-history-filter input[type="date"] {
    font-size: 16px;
  }
  /* Touch targets cómodos */
  .btn,
  button:not(.hamburger) {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 38px;
    padding: 9px 14px;
    font-size: .82rem;
  }
  /* Card: márgenes más coherentes */
  .card {
    border-radius: 16px;
    margin-bottom: 16px;
  }
  .card-head {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  /* Stats / dashboard hero comprimido */
  .dashboard-hero {
    padding: 20px 18px;
    border-radius: 22px;
    margin-bottom: 18px;
  }
  .dashboard-hero-copy h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .dashboard-hero-copy p {
    font-size: .9rem;
  }
  .dashboard-spotlight,
  .dashboard-mini-metrics > div {
    padding: 16px;
    border-radius: 18px;
  }
  .dashboard-spotlight strong {
    font-size: 2.2rem;
  }
  .dashboard-alert-grid {
    grid-template-columns: 1fr;
    margin-bottom: 18px;
  }
  .dashboard-alert-card {
    padding: 16px;
    border-radius: 18px;
  }
  .dashboard-alert-card strong {
    font-size: 1.35rem;
  }
  .dashboard-activity-list {
    grid-auto-columns: minmax(190px, 82vw);
  }
  .dashboard-flow-step,
  .dashboard-activity-item {
    padding: 14px 15px;
    border-radius: 16px;
  }
  .dashboard-flow-step-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard-flow-meta {
    justify-items: start;
  }
  .dashboard-activity-item {
    grid-template-columns: 1fr;
  }
  .dashboard-activity-item time {
    justify-self: start;
  }
  .dashboard-section-head h2 {
    font-size: 1.1rem;
  }
  .dashboard-metric-card {
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 14px;
    min-height: 0;
    border-radius: 16px;
  }
  .dashboard-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .dashboard-metric-icon svg {
    width: 20px;
    height: 20px;
  }
  .dashboard-metric-copy strong {
    font-size: 1.4rem;
  }
  .dashboard-metric-copy span {
    font-size: .8rem;
  }
  .dashboard-shortcut {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 16px;
  }
  /* Page title y eyebrows */
  .page { padding: 16px 14px; }
  .page-header { margin-bottom: 18px; }
  .page-header h1 { font-size: 1.25rem; }
  .page-eyebrow { font-size: .68rem; }
  .page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .page-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    padding: 10px 12px;
    font-size: .82rem;
  }
  /* Si solo hay 1 acción, que ocupe ancho completo */
  .page-actions .btn:only-child {
    grid-column: 1 / -1;
  }
  /* Stat-card global más compacto */
  .stats-grid { gap: 12px; margin-bottom: 18px; }
  .stat-card { padding: 16px; border-radius: 16px; }
  .stat-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-value { font-size: 1.6rem; }
  .stat-label { font-size: .76rem; }
  /* Search wrap más confortable */
  .search-wrap { padding: 12px 14px; }
  .search-box { max-width: none; min-height: 44px; }
  .search-box input { padding: 12px 12px 12px 0; }

  /* === Modal bottom-sheet en móvil === */
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    border: none;
    box-shadow: 0 -16px 36px rgba(0,0,0,.28);
    padding-bottom: var(--safe-bottom);
    animation: mobileSheetUp .24s cubic-bezier(.2,.7,.3,1);
  }
  .modal-dialog::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 8px auto 4px;
  }
  .modal-head {
    padding: 12px 18px 14px;
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
  }
  .modal-head h2 { font-size: 1.1rem; }
  .modal-body { padding: 18px; }
  .modal-close {
    width: 38px;
    height: 38px;
  }
  @keyframes mobileSheetUp {
    from { transform: translateY(40px); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* === Flashes / alerts: bordes coherentes y sin overflow === */
  .success, .danger, .warning, .info, .alert {
    border-radius: 12px;
    margin-left: 0;
    margin-right: 0;
    font-size: .88rem;
  }

  /* Chip BCV / sucursal: en mobile ya estaba oculto, aseguramos */
  .nav-context-chip { display: none !important; }

  /* Item-row (cotización ítems) más cómodo */
  .item-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
  }
  .item-row .del-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: .85rem;
  }

  /* Solicitud: panel del catálogo más alto y sin perderse */
  .solicitud-panel {
    height: auto;
    min-height: 320px;
    max-height: 60vh;
  }

  /* Quote qty: botones tap-friendly */
  .quote-qty-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
  .quote-qty-input { font-size: 16px; }

  /* Field grid: que respiren */
  .field-grid { gap: 14px; }
  .form-card { padding: 18px; border-radius: 16px; }
  form.form { padding: 18px; border-radius: 16px; }
  .role-item {
    grid-template-columns: 1fr;
  }
  .role-item-badges {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .roles-permission-grid {
    grid-template-columns: 1fr;
  }
  .roles-editor-stats {
    grid-template-columns: 1fr 1fr;
  }
  .roles-mini-stat:last-child {
    grid-column: 1 / -1;
  }
  .roles-permissions-toolbar {
    padding: 14px;
  }
  .roles-group-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .roles-permissions-toolbar-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Cuando tabla está dentro de una card y se vuelve cards apilables,
     bajar el padding interno de la card para que las tarjetas hijas no queden
     ahogadas. */
  .product-import-summary {
    grid-template-columns: 1fr;
  }
  .product-import-layout {
    grid-template-columns: 1fr;
  }
  .product-import-dropzone {
    padding: 18px;
    min-height: 0;
  }
  .product-import-format {
    padding: 14px;
  }
  .product-import-preview-scroll td:nth-child(7),
  .product-import-preview-scroll td:nth-child(8),
  .product-import-preview-scroll td:last-child {
    min-width: 0;
  }
  .card > .table-scroll {
    padding: 12px;
  }
}

/* === DASHBOARD ADDITIONS === */
.dashboard-metric-amount {
  display: block;
  font-size: .76rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-pending-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: var(--primary-light);
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.dashboard-pending-banner > svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--primary);
}
.dashboard-pending-banner-copy {
  flex: 1;
  min-width: 0;
}
.dashboard-pending-banner-copy strong {
  display: block;
  color: var(--primary-dark);
  font-size: .95rem;
}
.dashboard-pending-banner-copy span {
  color: var(--muted);
  font-size: .83rem;
}
@media (max-width: 600px) {
  .dashboard-pending-banner {
    flex-wrap: wrap;
  }
}

/* === DASHBOARD V2: limpio, dinamico y por rol === */
@keyframes dashRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dashFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dashGlow {
  0%, 100% { transform: translate(-30%, -30%) scale(1); opacity: .55; }
  50%      { transform: translate(-25%, -35%) scale(1.05); opacity: .75; }
}
@keyframes dashFlowFill {
  from { width: 0; }
}

.dash-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
  gap: 22px;
  padding: 28px;
  margin-bottom: 24px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.2);
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.14), transparent 32%),
    radial-gradient(circle at bottom right, rgba(30,64,175,.1), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
  animation: dashRise .4s ease both;
}
.dash-hero--procura, .dash-hero--contable, .dash-hero--gerencia,
.dash-hero--direccion, .dash-hero--admin { /* mismo fondo claro para todos */ }

.dash-hero-glow { display: none; }
.dash-hero-main, .dash-hero-pulse {
  position: relative;
  z-index: 1;
}
.dash-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.dash-hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(30,64,175,.08);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dash-hero-pill--ghost {
  background: #eff6ff;
  color: var(--primary);
}
.dash-hero-mobile-branch {
  display: none;
}
.dash-hero-mobile-branch-label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.dash-hero-mobile-branch-value {
  display: block;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--text);
  font-weight: 800;
}
.dash-hero-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 800;
}
.dash-hero-title span {
  color: var(--primary);
  font-weight: 800;
}
.dash-hero-lead {
  max-width: 640px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.dash-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--primary);
  font-weight: 700;
}
.dash-hero-meta > span:not(.dash-dot) {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eff6ff;
}
.dash-dot { display: none; }

.dash-hero-pulse {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(148,163,184,.22);
  color: var(--text);
}
.dash-hero-pulse-label {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 800;
  color: var(--primary);
}
.dash-hero-pulse-value {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 8px 0;
}
.dash-hero-pulse-hint {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}
.dash-hero-pulse-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dash-hero-pulse-row > div {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(148,163,184,.22);
}
.dash-hero-pulse-row span {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
}
.dash-hero-pulse-row strong {
  display: block;
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
}

.dash-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dash-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.22);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation: dashRise .5s var(--dash-kpi-delay, 0ms) ease both;
}
.dash-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--primary-light);
  border-radius: 0 4px 4px 0;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15,23,42,.12);
  border-color: rgba(30,64,175,.28);
  text-decoration: none;
}
.dash-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: var(--primary);
}
.dash-kpi-icon svg { width: 22px; height: 22px; }
.dash-kpi-body { min-width: 0; }
.dash-kpi-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 4px;
}
.dash-kpi-value {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.dash-kpi-value--money {
  font-size: 1.3rem;
}
.dash-kpi-hint {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--muted);
}
.dash-kpi-arrow {
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform .22s ease, color .22s ease;
}
.dash-kpi:hover .dash-kpi-arrow {
  transform: translateX(4px);
  color: var(--primary);
}
.dash-kpi--critical::before { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.dash-kpi--critical .dash-kpi-icon { background: #fee2e2; color: #b91c1c; }
.dash-kpi--warning::before  { background: linear-gradient(180deg, #f59e0b, #b45309); }
.dash-kpi--warning .dash-kpi-icon  { background: #fef3c7; color: #b45309; }
.dash-kpi--success::before  { background: linear-gradient(180deg, #22c55e, #15803d); }
.dash-kpi--success .dash-kpi-icon  { background: #dcfce7; color: #15803d; }
.dash-kpi--info::before     { background: linear-gradient(180deg, #0ea5e9, #0369a1); }
.dash-kpi--info .dash-kpi-icon     { background: #e0f2fe; color: #0369a1; }
.dash-kpi--primary::before  { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.dash-kpi--primary .dash-kpi-icon  { background: #eff6ff; color: #1d4ed8; }
.dash-kpi--neutral::before  { background: linear-gradient(180deg, #94a3b8, #64748b); }
.dash-kpi--neutral .dash-kpi-icon  { background: #f1f5f9; color: #475569; }

.dash-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.dash-section-head h2 {
  font-size: 1.25rem;
  margin: 4px 0 0;
  line-height: 1.15;
}

.dash-focus {
  margin-bottom: 26px;
  animation: dashFade .5s ease both;
}
.dash-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.dash-focus-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 8px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.22);
  background: #fff;
  box-shadow: 0 14px 32px rgba(15,23,42,.07);
  overflow: hidden;
  animation: dashRise .5s var(--dash-focus-delay, 0ms) ease both;
}
.dash-focus-card::after {
  content: '';
  position: absolute;
  inset: -50% -20% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59,130,246,.15), transparent);
  pointer-events: none;
}
.dash-focus-card--critical::after { background: radial-gradient(closest-side, rgba(239,68,68,.18), transparent); }
.dash-focus-card--warning::after  { background: radial-gradient(closest-side, rgba(245,158,11,.18), transparent); }
.dash-focus-card--success::after  { background: radial-gradient(closest-side, rgba(34,197,94,.18), transparent); }
.dash-focus-card--info::after     { background: radial-gradient(closest-side, rgba(14,165,233,.18), transparent); }
.dash-focus-card--primary::after  { background: radial-gradient(closest-side, rgba(59,130,246,.20), transparent); }

.dash-focus-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: var(--primary);
}
.dash-focus-card--critical .dash-focus-icon { background: #fee2e2; color: #b91c1c; }
.dash-focus-card--warning  .dash-focus-icon { background: #fef3c7; color: #b45309; }
.dash-focus-card--success  .dash-focus-icon { background: #dcfce7; color: #15803d; }
.dash-focus-card--info     .dash-focus-icon { background: #e0f2fe; color: #0369a1; }
.dash-focus-icon svg { width: 22px; height: 22px; }

.dash-focus-copy strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.dash-focus-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
}
.dash-focus-cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: .82rem;
  color: var(--primary);
  letter-spacing: .02em;
  transition: transform .2s ease;
}
.dash-focus-cta:hover {
  text-decoration: none;
  transform: translateX(3px);
}
.dash-focus-card--critical .dash-focus-cta { color: #b91c1c; }
.dash-focus-card--warning  .dash-focus-cta { color: #b45309; }
.dash-focus-card--success  .dash-focus-cta { color: #15803d; }

.dash-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.dash-main, .dash-side { height: 100%; }
.dash-main > .dash-card, .dash-side > .dash-card { height: 100%; }
.dash-main, .dash-side {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.dash-card {
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.22);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
  padding: 22px;
}
.dash-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.dash-card-head h3 {
  margin: 4px 0 0;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.dash-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,.12);
  color: #15803d;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dash-card-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}

.dash-flow-list {
  display: grid;
  gap: 12px;
}
.dash-flow-step {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: dashRise .5s var(--dash-flow-delay, 0ms) ease both;
}
.dash-flow-step:hover {
  transform: translateY(-1px);
  border-color: rgba(30,64,175,.25);
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
  text-decoration: none;
}
.dash-flow-step--focus {
  border-color: rgba(30,64,175,.4);
  background: linear-gradient(180deg, #ffffff, #eff6ff);
}
.dash-flow-step-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.dash-flow-step strong {
  display: block;
  font-size: .98rem;
  margin-bottom: 2px;
}
.dash-flow-step span {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.dash-flow-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex-shrink: 0;
}
.dash-flow-count {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.dash-flow-step--focus .dash-flow-count { color: #1d4ed8; }
.dash-flow-link {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-flow-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.dash-flow-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  animation: dashFlowFill .9s ease both;
}
.dash-flow-step--focus .dash-flow-track span {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.dash-shortcuts-list {
  display: grid;
  gap: 10px;
}
.dash-shortcut {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dash-shortcut:hover {
  transform: translateY(-1px);
  border-color: rgba(30,64,175,.25);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  text-decoration: none;
}
.dash-shortcut-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  color: var(--primary);
}
.dash-shortcut-icon svg { width: 20px; height: 20px; }
.dash-shortcut-copy strong {
  display: block;
  font-size: .9rem;
  margin-bottom: 1px;
}
.dash-shortcut-copy small {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.4;
}

.dash-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dashStep;
  display: grid;
  gap: 10px;
}
.dash-guide-list li {
  position: relative;
  padding: 14px 14px 14px 52px;
  border-radius: 16px;
  border: 1px dashed rgba(30,64,175,.22);
  background: #f8fafc;
  counter-increment: dashStep;
}
.dash-guide-list li::before {
  content: counter(dashStep);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.dash-guide-list li strong {
  display: block;
  font-size: .92rem;
  margin-bottom: 2px;
}
.dash-guide-list li p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-shell { grid-template-columns: 1fr; }
  .solicitud-hero,
  .solicitud-builder {
    grid-template-columns: 1fr;
  }
  .solicitud-history-hero {
    grid-template-columns: 1fr;
  }
  .bandeja-hero {
    grid-template-columns: 1fr;
  }
  .bandeja-card-top,
  .bandeja-card-meta {
    grid-template-columns: 1fr 1fr;
  }
  .bandeja-card-badges {
    justify-content: flex-start;
  }
  .bandeja-card-actions {
    grid-template-columns: 1fr;
  }
  .solicitud-builder {
    height: auto;
    min-height: 0;
  }
  body .solicitud-cart-row.item-row {
    grid-template-columns: 1fr 110px;
  }
  body .solicitud-cart-row.item-row .del-btn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .dash-hero {
    padding: 20px;
    border-radius: 22px;
    gap: 16px;
  }
  .dash-hero-tags {
    display: none;
  }
  .dash-hero-mobile-branch {
    display: grid;
    gap: 4px;
    margin-bottom: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    border: 1px solid #dbeafe;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  }
  .dash-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }
  .dash-hero-meta > span:not(.dash-dot) {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 14px;
    text-align: center;
    justify-content: center;
  }
  .dash-hero-title { font-size: 1.7rem; }
  .dash-hero-pulse-value { font-size: 2.6rem; }
  .dash-kpi { grid-template-columns: 48px 1fr; }
  .dash-kpi-arrow { display: none; }
  .dash-kpi-value { font-size: 1.6rem; }
  .dash-card { padding: 18px; border-radius: 18px; }
  .dash-flow-step-top { flex-direction: column; align-items: flex-start; }
  .dash-flow-meta { justify-items: start; }
  .solicitud-hero {
    padding: 16px;
  }
  .solicitud-hero-stats {
    grid-template-columns: 1fr;
  }
  .solicitud-history-stats {
    grid-template-columns: 1fr;
  }
  .bandeja-hero-stats {
    grid-template-columns: 1fr;
  }
  .bandeja-search input {
    min-width: 0;
    width: 100%;
  }
  .bandeja-grid {
    padding: 14px;
  }
  .bandeja-card {
    padding: 16px;
  }
  .solicitud-panel,
  .solicitud-notes {
    border-radius: 18px;
  }
  .solicitud-cart-actions {
    justify-content: stretch;
  }
  .solicitud-cart-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .bandeja-card-top,
  .bandeja-card-meta {
    grid-template-columns: 1fr;
  }
  .bandeja-list-tools {
    width: 100%;
  }
  .bandeja-search {
    width: 100%;
  }
  body .solicitud-cart-row.item-row {
    grid-template-columns: 1fr;
  }
  body .solicitud-cart-row.item-row .del-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .reports-hero {
    padding: 16px;
  }
  .reports-hero-side {
    grid-template-columns: 1fr;
  }
  .reports-hero-actions .btn {
    width: 100%;
    min-width: 0;
  }
  .reports-hero-mini {
    grid-template-columns: 1fr;
  }
  .reports-hero-tags span {
    width: 100%;
    justify-content: center;
  }
  .report-grid {
    padding: 14px;
  }
  .report-card {
    padding: 16px;
  }
  .an-table-wrap {
    overflow: visible;
  }
  .an-table--analytics {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }
  .an-table--analytics thead {
    display: none;
  }
  .an-table--analytics tbody,
  .an-table--analytics tr,
  .an-table--analytics td,
  .an-table--analytics tfoot {
    display: block;
    width: 100%;
  }
  .an-table--analytics tbody {
    display: grid;
    gap: 12px;
  }
  .an-table--analytics tbody tr {
    padding: 12px 14px;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
  }
  .an-table--analytics tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    text-align: left;
    white-space: normal;
  }
  .an-table--analytics tbody td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .an-table--analytics tbody td::before,
  .an-table--analytics tfoot td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    min-width: 86px;
    color: var(--muted);
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .an-table--analytics tbody td.c,
  .an-table--analytics tbody td.r,
  .an-table--analytics tfoot td.r {
    text-align: left;
  }
  .an-table--analytics tfoot {
    margin-top: 4px;
  }
  .an-table--analytics tfoot tr {
    padding: 12px 14px;
    border: 1px solid #ddd6fe;
    border-radius: 16px;
    background: #f5f3ff;
  }
  .an-table--analytics tfoot td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border: 0;
  }
  .an-table--analytics tfoot td:first-child {
    font-weight: 700;
    color: #3730a3;
  }
}

/* =====================================================
   PAGINATION — mobile-first
   ===================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 0 4px;
  flex-wrap: wrap;
}
.pagination-info {
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 13px;
  min-height: 38px;
  min-width: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
  white-space: nowrap;
  user-select: none;
}
.pagination-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-mid);
  color: var(--primary);
}
.pagination-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}
.pagination-btn.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  color: var(--muted);
  font-size: .82rem;
  pointer-events: none;
  user-select: none;
}
.pagination-mobile-counter {
  display: none;
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 4px;
}

@media (max-width: 600px) {
  .pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 0 4px;
  }
  .pagination-info {
    text-align: center;
    font-size: .85rem;
  }
  .pagination-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
  }
  .pagination-btn {
    min-height: 44px;
    font-size: .88rem;
    padding: 10px 14px;
  }
  .pagination-btn:first-child {
    justify-self: start;
    width: 100%;
  }
  .pagination-btn:last-child {
    justify-self: end;
    width: 100%;
  }
  .pagination-pages {
    display: none;
  }
  .pagination-mobile-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
  }
}

/* ── Meli / Price-reference panel ─────────────────────────────── */
button.solicitud-meli-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  margin-top: 5px;
  border: 0;
  background: transparent;
  font-size: .67rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  user-select: none;
  opacity: .6;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: opacity .15s, color .15s, text-decoration-color .15s;
}
button.solicitud-meli-chip:hover {
  opacity: 1;
  color: var(--primary);
  background: transparent;
  text-decoration-color: rgba(99,102,241,.35);
}
button.solicitud-meli-chip svg { color: inherit; }

.meli-ref-panel {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 360px;
  max-height: 450px;
  background: linear-gradient(160deg, #1e2d48 0%, #16223a 100%);
  border: 1px solid rgba(99,179,237,.18);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 990;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: meliIn .18s ease;
}
@keyframes meliIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.meli-ref-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(99,179,237,.1);
  flex-shrink: 0;
  background: rgba(255,255,255,.02);
}
.meli-ref-kicker {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #7dd3fc;
  margin-bottom: 4px;
}
.meli-ref-product-name {
  font-size: .875rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.3;
  display: block;
}
.meli-ref-close {
  background: none;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 800;
}
.meli-ref-close:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }
.meli-ref-body { flex: 1; overflow-y: auto; padding: 6px 8px; }
.meli-ref-section { padding: 4px 0 8px; }
.meli-ref-section + .meli-ref-section {
  position: relative;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(99,179,237,.32);
  box-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
.meli-ref-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 8px;
}
.meli-ref-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
}
.meli-ref-badge--meli {
  color: #fde68a;
  background: rgba(250,204,21,.10);
  border-color: rgba(250,204,21,.28);
}
.meli-ref-badge--meli::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,.55);
}
.meli-ref-badge--proveedor {
  color: #bae6fd;
  background: rgba(56,189,248,.10);
  border-color: rgba(56,189,248,.28);
}
.meli-ref-badge--proveedor::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56,189,248,.55);
}
.meli-ref-section-count {
  font-size: .65rem;
  color: #64748b;
  font-weight: 600;
}
.meli-ref-section-list { display: flex; flex-direction: column; }
.meli-ref-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  color: #94a3b8;
  font-size: .84rem;
}
.meli-ref-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: meliSpin .75s linear infinite;
  flex-shrink: 0;
}
@keyframes meliSpin { to { transform: rotate(360deg); } }
.meli-ref-empty {
  padding: 18px 10px;
  color: #64748b;
  font-size: .84rem;
  text-align: center;
  margin: 0;
}
.meli-ref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.meli-ref-item:last-child { border-bottom: none; }
.meli-ref-item:hover { background: rgba(255,255,255,.06); }
.meli-ref-item-info { flex: 1; min-width: 0; }
.meli-ref-item-title {
  display: block;
  font-size: .8rem;
  color: #cbd5e1;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meli-ref-item-snippet {
  display: block;
  font-size: .68rem;
  color: #64748b;
  line-height: 1.35;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meli-ref-item-price {
  font-size: .9rem;
  font-weight: 700;
  color: #34d399;
  white-space: nowrap;
  flex-shrink: 0;
}
.meli-ref-item-pricebox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
}
.meli-ref-item-price-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}
.meli-ref-item-price--muted { color: #94a3b8; }
.meli-ref-foot {
  padding: 9px 16px;
  font-size: .67rem;
  color: #3d5068;
  border-top: 1px solid rgba(99,179,237,.07);
  background: rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
@media (max-width: 500px) {
  .meli-ref-panel { right: 8px; bottom: 8px; left: 8px; width: auto; }
}
}