/* ============================================================
   Sistema de Gestión — sistema de diseño propio sobre Bootstrap 5.

   F1 (2026-09) — tokens con nombres honestos:
     --brand-*   verde (el primario del sistema; antes vivía en --sg-red-*)
     --ok/warn/danger-*  colores semánticos, NUNCA son el acento
     --steel-*   azul acero secundario (poco uso)
     --ink-*     neutros de texto      --surface/--border/...  superficies
     --radius-* / --elev-* / --sp-*    forma, sombra, espacio
   Los nombres viejos --sg-* siguen vivos como ALIAS (más abajo) para no
   reescribir las ~70 referencias de golpe. No usar --sg-* en código nuevo.
   ============================================================ */

:root {
  /* ---- Marca ---- */
  --brand-050: #e3f5ee;
  --brand-100: #c3e9db;
  --brand-400: #22b083;
  --brand-500: #0f9d6e;
  --brand-600: #0c7d58;
  --brand-700: #085f43;

  /* ---- Semánticos ---- */
  --ok-050:     #e7f4ec;  --ok-500:     #1f7a41;  --ok-600:     #166436;
  --warn-050:   #fbf1de;  --warn-600:   #8a6206;
  --danger-050: #fbe9ec;  --danger-500: #c81e3a;  --danger-600: #a5182f;  --danger-700: #7c1123;

  /* ---- Azul acero (secundario) ---- */
  --steel-100: #dbe4ef;   --steel-500: #1f3a5f;   --steel-600: #17304f;

  /* ---- Neutros / superficies ---- */
  --ink-900: #17191d;
  --ink-700: #3a3f47;
  --ink-500: #656b75;
  --ink-300: #a3a9b3;

  --ground:      #ffffff;
  --surface:     #ffffff;
  --surface-alt: #f2f4f3;
  --border:      #dfe2e7;
  --border-soft: #ebedf0;

  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --elev-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --elev-2: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --elev-3: 0 12px 28px -10px rgba(16, 24, 40, 0.16), 0 2px 8px rgba(16, 24, 40, 0.06);
  --elev-4: 0 24px 48px -12px rgba(16, 24, 40, 0.20);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ===== Alias de compatibilidad — NO usar en código nuevo ===== */
  --sg-red-50:  var(--brand-050);
  --sg-red-100: var(--brand-100);
  --sg-red-400: var(--brand-400);
  --sg-red-500: var(--brand-500);
  --sg-red-600: var(--brand-600);
  --sg-red-700: var(--brand-700);
  --sg-danger-50:  var(--danger-050);
  --sg-danger-500: var(--danger-500);
  --sg-danger-600: var(--danger-600);
  --sg-danger-700: var(--danger-700);
  --sg-green-50:  var(--ok-050);
  --sg-green-500: var(--ok-500);
  --sg-green-600: var(--ok-600);
  --sg-amber-50:  var(--warn-050);
  --sg-amber-600: var(--warn-600);
  --sg-secondary:     var(--steel-500);
  --sg-secondary-600: var(--steel-600);
  --sg-secondary-100: var(--steel-100);
  --sg-ink-900: var(--ink-900);
  --sg-ink-700: var(--ink-700);
  --sg-ink-500: var(--ink-500);
  --sg-ink-300: var(--ink-300);
  --sg-page-bg:     var(--ground);
  --sg-surface:     var(--surface);
  --sg-surface-alt: var(--surface-alt);
  --sg-card:        var(--surface);
  --sg-border:      var(--border);
  --sg-border-soft: var(--border-soft);
  --sg-radius-sm: var(--radius-sm);
  --sg-radius-md: var(--radius-md);
  --sg-radius-lg: var(--radius-lg);
  --sg-radius-xl: var(--radius-xl);
  --sg-shadow-xs: var(--elev-1);
  --sg-shadow-sm: var(--elev-2);
  --sg-shadow-md: var(--elev-3);
  --sg-shadow-lg: var(--elev-4);
  --sg-space-1: var(--sp-1);
  --sg-space-2: var(--sp-2);
  --sg-space-3: var(--sp-3);
  --sg-space-4: var(--sp-4);
  --sg-space-6: var(--sp-6);
  --sg-space-8: var(--sp-8);
  --sg-ease: var(--ease);

  /* ===== Overrides de Bootstrap 5.3 ===== */
  --bs-primary: var(--brand-500);
  --bs-primary-rgb: 15, 157, 110;
  --bs-secondary: var(--steel-500);
  --bs-secondary-rgb: 31, 58, 95;
  --bs-secondary-bg: #eceef1;
  --bs-success: var(--ok-500);
  --bs-success-rgb: 31, 122, 65;
  --bs-body-color: var(--ink-700);
  --bs-body-bg: var(--surface);
  --bs-tertiary-bg: var(--surface-alt);
  --bs-border-color: var(--border);
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-700);
  --bs-border-radius: var(--radius-sm);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Respeta "reducir movimiento" del sistema — corta animaciones y transiciones en todo el sitio. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* Fraunces (serif) SOLO para títulos de página y marca. El resto de encabezados
   van en Inter — escala consistente, menos peso visual. */
h1, h2, .sg-serif, .navbar-brand {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}

h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

a {
  transition: color 0.15s var(--ease);
}

::selection {
  background: color-mix(in srgb, var(--brand-500) 20%, transparent);
}

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* ---------- Layout / page header ---------- */

.sg-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-8) var(--sp-8);
}

.sg-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sg-space-4);
  margin: var(--sg-space-6) 0 var(--sg-space-8);
  flex-wrap: wrap;
  padding-bottom: var(--sg-space-6);
  border-bottom: 1px solid var(--sg-border-soft);
}

.sg-page-header h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
}

.sg-page-header p {
  margin: 0.4rem 0 0;
  color: var(--sg-ink-500);
  font-size: 0.98rem;
  max-width: 46rem;
}

/* ---------- Cards ---------- */

.card {
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-sm);
  transition: box-shadow 0.2s var(--sg-ease);
}

.card-header {
  background: var(--sg-surface-alt);
  border-bottom: 1px solid var(--sg-border);
  border-top-left-radius: var(--sg-radius-lg) !important;
  border-top-right-radius: var(--sg-radius-lg) !important;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sg-ink-500);
  padding: var(--sg-space-4) var(--sg-space-6);
}

.card-body {
  padding: var(--sg-space-6);
}

/* ---------- Forms ---------- */

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sg-ink-700);
  margin-bottom: 0.35rem;
}

.form-control,
.form-select {
  border-radius: var(--sg-radius-sm);
  border-color: var(--sg-border);
  background-color: var(--sg-surface);
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
  color: var(--sg-ink-900);
  transition: border-color 0.15s var(--sg-ease), box-shadow 0.15s var(--sg-ease), background-color 0.15s var(--sg-ease);
}

.form-control::placeholder {
  color: var(--sg-ink-300);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--sg-ink-300);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-500) 16%, transparent);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--sg-surface-alt);
  border-color: var(--sg-border);
  color: var(--sg-ink-700);
  opacity: 1;
}

.form-text {
  font-size: 0.8rem;
  color: var(--sg-ink-500);
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--sg-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.58rem 1.15rem;
  letter-spacing: 0.005em;
  transition: background-color 0.15s var(--sg-ease), border-color 0.15s var(--sg-ease),
              color 0.15s var(--sg-ease), transform 0.1s var(--sg-ease), box-shadow 0.15s var(--sg-ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  border-radius: 8px;
}

.btn-primary {
  background: var(--sg-red-500);
  border-color: var(--sg-red-500);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--sg-red-600);
  border-color: var(--sg-red-600);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 40, 0.20);
}

.btn-outline-primary {
  color: var(--sg-red-600);
  border-color: var(--sg-red-400);
}

.btn-outline-primary:hover {
  background: var(--sg-red-500);
  border-color: var(--sg-red-500);
}

.btn-success {
  background: var(--sg-green-500);
  border-color: var(--sg-green-500);
  box-shadow: 0 2px 8px -2px rgba(63, 157, 92, 0.45);
}

.btn-success:hover {
  background: var(--sg-green-600);
  border-color: var(--sg-green-600);
}

.btn-outline-secondary {
  color: var(--sg-ink-500);
  border-color: var(--sg-border);
}

.btn-outline-secondary:hover {
  background: var(--sg-ink-700);
  border-color: var(--sg-ink-700);
  color: #fff;
}

.btn-outline-warning {
  --bs-btn-color: var(--sg-amber-600);
  --bs-btn-border-color: #e7c179;
  --bs-btn-hover-bg: var(--sg-amber-50);
  --bs-btn-hover-color: #6b4a0a;
  --bs-btn-hover-border-color: #e7c179;
}

.btn-outline-danger {
  --bs-btn-hover-bg: var(--sg-red-600);
  --bs-btn-hover-border-color: var(--sg-red-600);
}

/* ---------- Tables ---------- */

.table-responsive {
  border-bottom-left-radius: var(--sg-radius-lg);
  border-bottom-right-radius: var(--sg-radius-lg);
}

.table {
  margin-bottom: 0;
  font-size: 0.89rem;
}

.table thead th {
  background: var(--sg-surface-alt);
  color: var(--sg-ink-500);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 1px solid var(--sg-border);
  padding: 0.8rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  color: var(--sg-ink-700);
  border-bottom-color: var(--sg-border-soft);
}

.table tbody tr {
  transition: background-color 0.12s var(--sg-ease);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--sg-surface-alt);
}

.table-hover > tbody > tr:hover > *,
.table tbody tr:hover td {
  background-color: var(--sg-red-50);
}

/* ---------- Badges de estado ---------- */

.badge {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.38em 0.75em;
  border-radius: 999px;
}

.text-bg-success { background-color: var(--sg-green-50) !important; color: var(--sg-green-600) !important; }
.text-bg-warning { background-color: var(--sg-amber-50) !important; color: var(--sg-amber-600) !important; }
.text-bg-danger  { background-color: var(--sg-danger-50) !important; color: var(--sg-danger-700) !important; }
.text-bg-secondary { background-color: var(--sg-border-soft) !important; color: var(--sg-ink-500) !important; }

/* ---------- Alertas ---------- */

.alert {
  border: none;
  border-radius: var(--sg-radius-md);
  font-size: 0.9rem;
  padding: 0.85rem 1.1rem;
  box-shadow: var(--sg-shadow-xs);
}

.alert-success {
  background: var(--sg-green-50);
  color: var(--sg-green-600);
}

.alert-danger {
  background: var(--sg-danger-50);
  color: var(--sg-danger-700);
}

/* ---------- Login ---------- */

.sg-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 12% 15%, rgba(52, 176, 136, 0.16), transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(63, 157, 92, 0.12), transparent 42%),
    var(--sg-surface);
  padding: var(--sg-space-4);
}

.sg-auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--sg-card);
  border-radius: var(--sg-radius-xl);
  box-shadow: var(--sg-shadow-lg);
  border: 1px solid var(--sg-border);
  padding: var(--sg-space-8) var(--sg-space-6);
}

.sg-auth-mark {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: var(--sg-space-2);
}

.sg-auth-title {
  text-align: center;
  margin-bottom: 0.25rem;
}

.sg-auth-subtitle {
  text-align: center;
  color: var(--sg-ink-500);
  font-size: 0.88rem;
  margin-bottom: var(--sg-space-6);
}

/* ---------- Utilidades ---------- */

.sg-muted-cell {
  color: var(--sg-ink-300);
  font-style: italic;
}

/* ---------- Vista de detalle (cliente/finca) ---------- */

.sg-back-link {
  display: inline-block;
  margin-bottom: var(--sg-space-4);
  color: var(--sg-ink-500);
  text-decoration: none;
  font-size: 0.9rem;
}

.sg-back-link:hover {
  color: var(--brand-600);
}

/* Cabecera de ficha — una barra plana, no una tarjeta que flota.
   Mismo componente para cliente / finca / cultivador / carro / conductor. */
.sg-detail-header {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  background: var(--surface);
}

.sg-detail-header > .card-body {
  padding: var(--sp-4) var(--sp-6);
}

.sg-detail-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sg-detail-title {
  margin: 0;
  font-size: 1.35rem;
}

.sg-detail-sub {
  color: var(--ink-400);
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
}

/* Caja grande para la foto del carro — siempre ocupa espacio, no se achica aunque no haya foto.
   Clic en cualquier parte abre el selector de archivo (label transparente que cubre toda la caja);
   la X arriba a la derecha la quita, solo aparece si hay foto cargada. */
.sg-carro-foto-box {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-ink-50, #f5f3f7);
  border: 1px dashed var(--sg-ink-200, #d8d3e0);
  border-radius: var(--sg-radius-md);
  overflow: hidden;
}

.sg-carro-foto-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sg-carro-foto-upload-form {
  position: absolute;
  inset: 0;
}

.sg-carro-foto-upload {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  cursor: pointer;
}

.sg-carro-foto-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.sg-carro-foto-quitar {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
}

.sg-carro-foto-quitar button {
  width: 28px;
  height: 28px;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-carro-foto-quitar button:hover {
  background: var(--sg-red-500);
}

/* ============ Buscador de pedidos ============ */
.sg-pedidos-hero {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  background: linear-gradient(180deg, rgba(52, 176, 136, 0.07), transparent 70%);
  border-radius: var(--sg-radius-lg, 16px);
  margin-bottom: 2rem;
}

.sg-pedidos-hero-icon {
  font-size: 2.6rem;
  margin-bottom: 0.5rem;
}

.sg-pedidos-hero-title {
  margin: 0 0 0.35rem;
}

.sg-pedidos-hero-sub {
  color: var(--sg-ink-500);
  margin-bottom: 1.5rem;
}

.sg-pedidos-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--sg-border, #e5e0ec);
  border-radius: 999px;
  padding: 0.4rem 0.5rem 0.4rem 1.1rem;
  box-shadow: 0 8px 24px -12px rgba(38, 20, 61, 0.18);
}

.sg-pedidos-search-icon {
  opacity: 0.6;
}

.sg-pedidos-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  background: transparent;
}

.sg-pedidos-search button {
  border: none;
  background: var(--sg-red-500);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  transition: background-color 0.15s var(--sg-ease);
}

.sg-pedidos-search button:hover {
  background: var(--sg-red-600);
}

.sg-pedidos-seccion-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sg-ink-700, #4a4458);
  margin-bottom: 1rem;
}

.sg-pedidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}

.sg-pedido-card {
  display: block;
  background: #fff;
  border: 1px solid var(--sg-border, #e5e0ec);
  border-radius: var(--sg-radius-md);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s var(--sg-ease), box-shadow 0.12s var(--sg-ease), border-color 0.12s var(--sg-ease);
}

.sg-pedido-card:hover {
  transform: translateY(-2px);
  border-color: var(--sg-red-300, #f0aab8);
  box-shadow: 0 10px 22px -14px rgba(38, 20, 61, 0.28);
}

.sg-pedido-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.sg-pedido-card-codigo {
  font-weight: 700;
  font-size: 0.95rem;
}

.sg-pedido-card-estado {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--sg-red-50, #fbe9ec);
  color: var(--sg-red-600, #b5203c);
}

.sg-pedido-card-info {
  font-size: 0.8rem;
  color: var(--sg-ink-500);
}

/* ============ Detalle de pedido (Despacho) — estilo seguimiento ============
   F4: dejó de tener paleta propia (morado #6c5ecf). Ahora deriva de los tokens
   del sistema — el stepper y la línea de tiempo quedan igual, en verde de marca. */
.sg-order-page {
  --sg-order-border: var(--border);
  --sg-order-bg-soft: var(--surface-alt);
  --sg-order-accent: var(--brand-500);
  --sg-order-accent-soft: var(--brand-050);
  --sg-order-text-muted: var(--ink-500);
}

.sg-order-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sg-order-eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sg-order-text-muted);
}

.sg-order-title {
  margin: 0.1rem 0 0.15rem;
  font-size: 1.5rem;
}

.sg-order-sub {
  color: var(--sg-order-text-muted);
  font-size: 0.88rem;
}

/* Stepper horizontal de estados */
.sg-order-stepper {
  display: flex;
  background: #fff;
  border: 1px solid var(--sg-order-border);
  border-radius: var(--sg-radius-md);
  padding: 1.1rem 1rem 0.9rem;
  margin-bottom: 1.25rem;
}

.sg-order-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sg-order-step::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--sg-order-border);
  z-index: 0;
}

.sg-order-step:first-child::before {
  display: none;
}

.sg-order-step.done::before {
  background: var(--sg-order-accent);
}

.sg-order-step-dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sg-order-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--sg-order-text-muted);
}

.sg-order-step.done .sg-order-step-dot {
  background: var(--sg-order-accent);
  border-color: var(--sg-order-accent);
  color: #fff;
}

.sg-order-step.current .sg-order-step-dot {
  border-color: var(--sg-order-accent);
  color: var(--sg-order-accent);
}

.sg-order-step-label {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--sg-order-text-muted);
  max-width: 90px;
}

.sg-order-step.current .sg-order-step-label {
  color: var(--sg-ink-900, #2a2436);
  font-weight: 600;
}

/* Layout: sidebar + tabs principales */
.sg-order-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.sg-order-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.sg-order-main {
  flex: 1;
  min-width: 0;
}

.sg-order-card {
  background: #fff;
  border: 1px solid var(--sg-order-border);
  border-radius: var(--sg-radius-md);
  padding: 1rem 1.1rem;
}

.sg-order-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sg-order-text-muted);
  margin-bottom: 0.75rem;
}

.sg-order-estado-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}

.sg-order-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--sg-order-accent-soft);
  color: var(--sg-order-accent);
}

.sg-order-badge-muted {
  background: var(--sg-order-bg-soft);
  color: var(--sg-order-text-muted);
}

/* Mini tabs del sidebar (Pedido / Clientes / Fincas / Conductor) */
.sg-order-minitabs {
  display: flex;
  gap: 0.9rem;
  border-bottom: 1px solid var(--sg-order-border);
  margin-bottom: 0.85rem;
}

.sg-order-minitabs .nav-link {
  padding: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--sg-order-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
}

.sg-order-minitabs .nav-link.active {
  color: var(--sg-order-accent);
  border-bottom-color: var(--sg-order-accent);
  font-weight: 600;
}

.sg-order-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.75rem;
  margin: 0;
  font-size: 0.83rem;
}

.sg-order-dl dt {
  color: var(--sg-order-text-muted);
  font-weight: 500;
}

.sg-order-dl dd {
  margin: 0;
  text-align: right;
}

/* Tabs principales (Productos / Mapa / Historial / Detalles / Hoja de pagos) */
.sg-order-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--sg-order-border);
  margin-bottom: 1rem;
}

.sg-order-tabs .nav-link {
  padding: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--sg-order-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
}

.sg-order-tabs .nav-link.active {
  color: var(--sg-order-accent);
  border-bottom-color: var(--sg-order-accent);
  font-weight: 600;
}

/* Historial (línea de tiempo vertical) */
.sg-order-historial {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-order-historial li {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
  position: relative;
}

.sg-order-historial li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -2px;
  width: 2px;
  background: var(--sg-order-border);
}

.sg-order-historial-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sg-order-accent);
  margin-top: 3px;
  flex-shrink: 0;
}

.sg-order-historial-estado {
  font-weight: 600;
  font-size: 0.88rem;
}

.sg-order-historial-fecha {
  font-size: 0.76rem;
  color: var(--sg-order-text-muted);
}

.sg-order-historial-nota {
  font-size: 0.8rem;
  color: var(--sg-ink-700, #4a4458);
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .sg-order-layout {
    flex-direction: column;
  }
  .sg-order-sidebar {
    width: 100%;
  }
}

.sg-order-mapa {
  height: 420px;
  border-radius: var(--sg-radius-md);
  overflow: hidden;
  border: 1px solid var(--sg-order-border, #e7e4ee);
}

/* Ícono del carro en el mapa en vivo — círculo blanco con sombra + anillo pulsante que deja claro
   que ese punto se está actualizando solo, no es un pin fijo. */
.sg-icono-carro {
  background: none;
  border: none;
}

.sg-icono-carro-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 2px;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(23, 20, 30, 0.35);
  border: 2px solid var(--brand-500);
}

.sg-icono-carro-pulso {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(52, 176, 136, 0.35);
  animation: sg-pulso-carro 1.8s ease-out infinite;
}

@keyframes sg-pulso-carro {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Acento sutil en tarjetas de resultado (ganancia/pérdida) — el número ya lleva el color, esto solo
   refuerza con el borde para que se note de un vistazo sin tener que leer el signo. */
.sg-card-resultado {
  border-width: 1px;
}
.sg-card-ganancia {
  border-color: var(--bs-success-border-subtle, #a3cfbb);
  background: var(--bs-success-bg-subtle, #e9f7ef);
}
.sg-card-perdida {
  border-color: var(--bs-danger-border-subtle, #f1aeb5);
  background: var(--bs-danger-bg-subtle, #f8d7da);
}

.sg-detail-list {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: var(--sg-space-3);
  margin: 0;
}

.sg-detail-list dt {
  color: var(--sg-ink-500);
  font-weight: 600;
}

.sg-detail-list dd {
  margin: 0;
}

/* ---------- Hero del Buscador (CRM) ---------- */

.sg-hero {
  padding: var(--sp-8) var(--sp-2) var(--sp-6);
}

.sg-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-900);
}

.sg-hero-accent1 { color: var(--ink-900); }
.sg-hero-accent2 { color: var(--brand-600); }

.sg-hero-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: 1.05rem;
  color: var(--ink-500);
}

.sg-hero-dash {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--brand-400);
  flex-shrink: 0;
}

/* ---------- Búsqueda (resultados) ---------- */

.sg-saldo {
  font-size: 0.85rem;
}

.sg-saldo-debe strong {
  color: var(--sg-red-600);
}

.sg-saldo-ok strong {
  color: var(--sg-green-600);
}

.sg-client-row {
  cursor: pointer;
}

.sg-client-row:hover {
  background: var(--sg-red-50);
}

/* ---------- Tarjetas de gasto (módulo Gastos) ---------- */

.sg-gasto-card {
  display: flex;
  align-items: center;
  gap: var(--sg-space-4);
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-xs);
  padding: var(--sg-space-6);
  height: 100%;
}

.sg-gasto-card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-gasto-card-icon svg {
  width: 22px;
  height: 22px;
}

.sg-gasto-card-icon-viaje  { background: var(--warn-050);  color: var(--warn-600); }
.sg-gasto-card-icon-cosecha { background: var(--brand-050); color: var(--brand-600); }
.sg-gasto-card-icon-total  { background: var(--ok-050);    color: var(--ok-600); }

.sg-gasto-card-label {
  color: var(--sg-ink-500);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.sg-gasto-card-valor {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--sg-ink-900);
}

.sg-gasto-card-total {
  border-color: var(--sg-green-500);
  background: linear-gradient(135deg, var(--sg-green-50) 0%, var(--sg-card) 60%);
}

.sg-gasto-card-total .sg-gasto-card-valor {
  color: var(--sg-green-600);
}

.sg-gasto-empty {
  text-align: center;
  padding: var(--sg-space-8) var(--sg-space-4);
}

.sg-gasto-empty-icon {
  font-size: 2.5rem;
  width: 40px;
  height: 40px;
  color: var(--ink-300);
  margin: 0 auto var(--sp-3);
}

/* ---------- Página de Notificaciones (/notificaciones) ---------- */

.sg-notif-list {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
}

.sg-notif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-space-4);
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  padding: var(--sg-space-4) var(--sg-space-5);
}

.sg-notif-row--noleida {
  background: var(--brand-050);
  border-color: var(--brand-600);
}

.sg-notif-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.sg-notif-icon-brand   { background: var(--brand-050);   color: var(--brand-600); }
.sg-notif-icon-warn    { background: var(--warn-050);    color: var(--warn-600); }
.sg-notif-icon-danger  { background: var(--danger-050);  color: var(--danger-600); }

.sg-notif-body { flex: 1 1 auto; min-width: 0; }

.sg-notif-titulo {
  font-weight: 700;
  color: var(--ink-900);
}

.sg-notif-texto {
  color: var(--ink-500);
  font-size: 0.9rem;
  margin-top: 2px;
}

.sg-notif-fecha {
  color: var(--ink-300);
  font-size: 0.78rem;
  margin-top: 6px;
}

.sg-notif-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Mini gráfico de barras de la tendencia mensual (sin librería) */
.sg-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sg-space-3);
  height: 220px;
  padding-top: var(--sg-space-4);
}

.sg-bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.sg-bar-valor {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--sg-ink-500, #6b7280);
  margin-bottom: var(--sg-space-1);
  white-space: nowrap;
}

.sg-bar {
  width: 100%;
  max-width: 56px;
  min-height: 2px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--sg-red-400, #e8637c), var(--sg-red-600, #b21f3c));
  transition: height var(--sg-ease, ease) 0.3s;
}

.sg-bar-label {
  font-size: 0.72rem;
  color: var(--sg-ink-500, #6b7280);
  margin-top: var(--sg-space-2);
  text-align: center;
  text-transform: capitalize;
}

/* Barras de antigüedad de cartera (módulo Cartera) — mismo lenguaje visual que .sg-bar-chart
   pero cada columna es un enlace de filtro por tramo, con color por severidad. */
.sg-cartera-tramos {
  display: flex;
  align-items: flex-end;
  gap: var(--sg-space-4);
  height: 200px;
  padding-top: var(--sg-space-4);
}

.sg-cartera-tramo {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  padding: var(--sg-space-2);
  border-radius: var(--sg-radius-md);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background var(--sg-ease, ease) 0.15s, border-color var(--sg-ease, ease) 0.15s;
}

.sg-cartera-tramo:hover { background: var(--sg-surface-alt); }
.sg-cartera-tramo.active { background: var(--sg-red-50); border-color: var(--sg-red-400); }

.sg-cartera-tramo-bar-wrap {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sg-cartera-tramo-bar {
  width: 100%;
  max-width: 64px;
  min-height: 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #f0b94a, var(--sg-danger-500));
}

.sg-cartera-tramo[data-tramo="D_0_30"] .sg-cartera-tramo-bar {
  background: linear-gradient(180deg, var(--sg-green-500), var(--sg-green-600));
}
.sg-cartera-tramo[data-tramo="D_31_60"] .sg-cartera-tramo-bar {
  background: linear-gradient(180deg, #f0b94a, #d99a2b);
}
.sg-cartera-tramo[data-tramo="D_61_90"] .sg-cartera-tramo-bar {
  background: linear-gradient(180deg, #ef8a4a, var(--sg-danger-500));
}
.sg-cartera-tramo[data-tramo="D_90_MAS"] .sg-cartera-tramo-bar {
  background: linear-gradient(180deg, var(--sg-danger-500), var(--sg-danger-700));
}

.sg-cartera-tramo-valor {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: var(--sg-space-2);
  white-space: nowrap;
}

.sg-cartera-tramo-label {
  font-size: 0.78rem;
  color: var(--sg-ink-500);
  margin-top: 2px;
}

.sg-cartera-tramo-cantidad {
  font-size: 0.7rem;
  color: var(--sg-ink-300);
}

/* ============================================================
   Shell (F3): topbar clara sobre superficie + sidebar verde espruce
   ============================================================ */

:root {
  --sg-topbar-h: 60px;
  --sg-sidebar-w: 264px;

  /* Alias heredados — la topbar ya no usa estos, se dejan por si algo los referencia */
  --sg-purple-700: var(--steel-600);
  --sg-purple-600: var(--steel-500);
  --sg-purple-500: #2b568a;

  /* Sidebar — verde espruce de la familia de marca (antes casi-negro con glow rosa) */
  --sg-sidebar-bg:         #14211c;
  --sg-sidebar-bg-2:       #1d3028;
  --sg-sidebar-elev:       #23392f;
  --sg-sidebar-border:     rgba(255, 255, 255, 0.08);
  --sg-sidebar-text:       #a9b8b0;
  --sg-sidebar-text-muted: #6b7d74;
  --sg-sidebar-text-active: #ffffff;
  --sg-sidebar-accent:     var(--brand-400);

  --sg-sidebar-bg-alt: var(--sg-sidebar-bg-2);
}

html, body {
  height: 100%;
}

body.sg-app-body {
  background: var(--sg-page-bg);
  padding-top: var(--sg-topbar-h);
  padding-left: var(--sg-sidebar-w);
}

/* ---------- Topbar ---------- */

.sg-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sg-topbar-h);
  z-index: 1040;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sg-space-6);
  box-shadow: var(--elev-1);
}

.sg-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-900);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.sg-topbar-brand:hover {
  color: var(--brand-600);
}

.sg-topbar-brand .sg-topbar-version {
  color: var(--ink-300);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0;
}

.sg-topbar-search {
  display: flex;
  align-items: center;
  height: 38px;
  margin-left: auto;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}

.sg-topbar-search:focus-within {
  border-color: var(--brand-400);
  background: var(--surface);
}

.sg-topbar-search-icon {
  padding-left: var(--sg-space-4);
  color: var(--ink-400);
  font-size: 0.85rem;
}

.sg-topbar-search-tipo,
.sg-topbar-search-input {
  border: none;
  background: transparent;
  color: var(--ink-900);
  height: 100%;
  padding: 0 var(--sg-space-3);
  font-size: 0.85rem;
}

.sg-topbar-search-tipo {
  border-right: 1px solid var(--border);
  color: var(--ink-700);
}

.sg-topbar-search-tipo option {
  color: var(--sg-ink-900);
}

.sg-topbar-search-input {
  width: 220px;
}

.sg-topbar-search-input::placeholder {
  color: var(--ink-300);
}

.sg-topbar-search-input:focus,
.sg-topbar-search-tipo:focus {
  outline: none;
}

.sg-topbar-search-btn {
  border: none;
  background: var(--brand-500);
  color: #fff;
  height: 100%;
  padding: 0 1.15rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.sg-topbar-search-btn:hover {
  background: var(--brand-600);
}

.sg-topbar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  color: var(--ink-700);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem 0.3rem 0.3rem;
  cursor: pointer;
  transition: background-color 0.15s var(--sg-ease), border-color 0.15s var(--sg-ease);
}

.sg-topbar-user:hover {
  background: var(--border-soft);
  border-color: var(--ink-300);
  color: var(--ink-900);
}

.sg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sg-topbar-user-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.1;
}

.sg-topbar-user-role {
  font-size: 0.7rem;
  color: var(--ink-400);
  line-height: 1.1;
}

/* ---------- Menú de usuario (panel verde desplegable) ---------- */

.sg-user-menu {
  min-width: 250px;
  padding: 0;
  border: none;
  border-radius: var(--sg-radius-md);
  overflow: hidden;
  box-shadow: var(--sg-shadow-lg);
}

.sg-user-menu-header {
  background: linear-gradient(135deg, var(--sg-green-500), var(--sg-green-600));
  color: #fff;
  padding: var(--sg-space-4);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sg-user-menu-header .sg-avatar {
  width: 42px;
  height: 42px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.22);
}

.sg-user-menu-header .name {
  font-weight: 700;
  font-size: 0.92rem;
}

.sg-user-menu-header .email {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.85);
}

.sg-user-menu-header .role {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.15rem;
}

.sg-user-menu-body {
  padding: 0.4rem 0;
  background: #fff;
}

.sg-user-menu-body .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem var(--sg-space-4);
  font-size: 0.86rem;
  color: var(--sg-ink-700);
}

.sg-user-menu-body .dropdown-item:hover {
  background: var(--sg-surface-alt);
  color: var(--sg-red-600);
}

.sg-user-menu-footer {
  padding: 0.6rem var(--sg-space-4);
  font-size: 0.72rem;
  color: var(--sg-ink-300);
  border-top: 1px solid var(--sg-border);
  background: #fff;
}

/* ---------- Sidebar ---------- */

.sg-sidebar {
  position: fixed;
  top: var(--sg-topbar-h);
  left: 0;
  bottom: 0;
  width: var(--sg-sidebar-w);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(52, 176, 136, 0.08), transparent 55%),
    linear-gradient(180deg, #16241e, #101a15);
  border-right: 1px solid var(--sg-sidebar-border);
  overflow: visible;
  z-index: 1030;
}

.sg-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sg-sidebar-nav-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sg-space-3) 0.6rem var(--sg-space-4);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.sg-sidebar-nav-scroll::-webkit-scrollbar {
  width: 8px;
}
.sg-sidebar-nav-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 8px;
}
.sg-sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Secciones del menú */
.sg-sidebar-section + .sg-sidebar-section {
  margin-top: var(--sg-space-4);
}

.sg-sidebar-section-title {
  text-transform: uppercase;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sg-sidebar-text-muted);
  padding: 0 0.75rem;
  margin-bottom: 0.3rem;
}

.sg-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sg-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--sg-sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.16s var(--sg-ease), color 0.16s var(--sg-ease);
}

.sg-sidebar-ico {
  flex: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sg-sidebar-ico svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: opacity 0.16s var(--ease);
}

.sg-sidebar-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sg-sidebar-link:hover {
  background: var(--sg-sidebar-bg-2);
  color: var(--sg-sidebar-text-active);
}
.sg-sidebar-link:hover .sg-sidebar-ico svg {
  opacity: 1;
}

.sg-sidebar-link.active {
  background: linear-gradient(90deg, rgba(52, 176, 136, 0.22), rgba(52, 176, 136, 0.03));
  color: var(--sg-sidebar-text-active);
  font-weight: 600;
}
.sg-sidebar-link.active .sg-sidebar-ico svg {
  opacity: 1;
  color: var(--sg-sidebar-accent);
}
.sg-sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.1rem;
  border-radius: 0 3px 3px 0;
  background: var(--sg-sidebar-accent);
  box-shadow: 0 0 10px rgba(52, 176, 136, 0.5);
}

.sg-sidebar-link.disabled {
  color: var(--sg-sidebar-text-muted);
  cursor: default;
  pointer-events: none;
}
.sg-sidebar-link.disabled .sg-sidebar-ico svg {
  opacity: 0.4;
}

.sg-sidebar-badge {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.13rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--sg-sidebar-text-muted);
  border: 1px solid var(--sg-sidebar-border);
}

/* Grupo expandible (Buscador y sus categorías) */
.sg-sidebar-expand > summary {
  list-style: none;
  cursor: pointer;
}
.sg-sidebar-expand > summary::-webkit-details-marker {
  display: none;
}
.sg-sidebar-expand > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 0.44rem;
  height: 0.44rem;
  margin-right: 0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.16s var(--sg-ease);
}
.sg-sidebar-expand[open] > summary::after {
  transform: rotate(-135deg);
}

.sg-sidebar-sublinks {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 3px 0 5px calc(0.7rem + 0.7rem);
  padding-left: 0.7rem;
  border-left: 1px solid var(--sg-sidebar-border);
}
.sg-sidebar-sublink {
  display: block;
  padding: 0.38rem 0.65rem;
  border-radius: 8px;
  font-size: 0.81rem;
  color: var(--sg-sidebar-text-muted);
  text-decoration: none;
  transition: background-color 0.16s var(--sg-ease), color 0.16s var(--sg-ease);
}
.sg-sidebar-sublink:hover {
  background: var(--sg-sidebar-bg-2);
  color: var(--sg-sidebar-text-active);
}
.sg-sidebar-sublink.active {
  color: var(--sg-sidebar-text-active);
  font-weight: 600;
}

@media (max-width: 900px) {
  body.sg-app-body {
    padding-left: 0;
  }
  .sg-sidebar {
    display: none;
  }
}

/* ---------- Perfil al pie del sidebar ---------- */

.sg-sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sg-sidebar-border);
  padding: var(--sg-space-3);
  background: rgba(0, 0, 0, 0.16);
}

.sg-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  background: var(--sg-sidebar-elev);
  border: 1px solid var(--sg-sidebar-border);
}

.sg-sidebar-profile .sg-avatar {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--sg-green-500), var(--sg-green-600));
  box-shadow: 0 2px 8px rgba(47, 129, 73, 0.35);
}

.sg-sidebar-profile-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--sg-sidebar-text-active);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sg-sidebar-profile-role {
  font-size: 0.68rem;
  color: var(--sg-sidebar-text-muted);
  line-height: 1.25;
}

.sg-sidebar-footer-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.sg-sidebar-footer-actions a,
.sg-sidebar-footer-actions button {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.42rem 0.5rem;
  border-radius: 9px;
  border: 1px solid var(--sg-sidebar-border);
  background: var(--sg-sidebar-bg-2);
  color: var(--sg-sidebar-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--sg-ease), color 0.16s var(--sg-ease), border-color 0.16s var(--sg-ease);
}

.sg-sidebar-footer-actions a:hover {
  background: var(--sg-sidebar-elev);
  color: #fff;
}

.sg-sidebar-footer-actions button:hover {
  background: var(--sg-red-500);
  color: #fff;
  border-color: transparent;
}

/* ---------- Panel de perfil desplegable (pie del sidebar) ---------- */

.sg-profile {
  position: relative;
}

.sg-profile > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  background: var(--sg-sidebar-elev);
  border: 1px solid var(--sg-sidebar-border);
  transition: border-color 0.16s var(--sg-ease), background-color 0.16s var(--sg-ease);
}
.sg-profile > summary::-webkit-details-marker { display: none; }
.sg-profile > summary:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #21362d;
}
.sg-profile[open] > summary {
  border-color: var(--sg-sidebar-accent);
}

.sg-profile-avatar {
  overflow: hidden;
  flex-shrink: 0;
}
.sg-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-profile-id {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sg-profile-caret {
  flex: 0 0 auto;
  width: 0.44rem;
  height: 0.44rem;
  margin-right: 0.15rem;
  border-right: 1.5px solid var(--sg-sidebar-text-muted);
  border-bottom: 1.5px solid var(--sg-sidebar-text-muted);
  transform: rotate(-135deg);
  transition: transform 0.16s var(--sg-ease);
}
.sg-profile[open] .sg-profile-caret {
  transform: rotate(45deg);
}

.sg-profile-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  background: #17251f;
  border: 1px solid var(--sg-sidebar-border);
  border-radius: 16px;
  box-shadow: 0 -20px 44px -14px rgba(0, 0, 0, 0.6);
  padding: 0.85rem;
  max-height: min(72vh, 580px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  z-index: 60;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.sg-profile:not([open]) .sg-profile-panel { display: none; }
.sg-profile-panel::-webkit-scrollbar { width: 8px; }
.sg-profile-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 8px; }

.sg-profile-flash {
  font-size: 0.76rem;
  padding: 0.45rem 0.6rem;
  border-radius: 9px;
  line-height: 1.35;
}
.sg-profile-flash.ok {
  background: rgba(63, 157, 92, 0.16);
  color: #86e0a5;
  border: 1px solid rgba(63, 157, 92, 0.3);
}
.sg-profile-flash.err {
  background: rgba(217, 45, 76, 0.16);
  color: #f2a6b3;
  border: 1px solid rgba(217, 45, 76, 0.32);
}

.sg-profile-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sg-sidebar-border);
}
.sg-profile-head-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sg-profile-photo {
  margin: 0;
  flex-shrink: 0;
}
.sg-profile-avatar-lg {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sg-green-500), var(--sg-green-600));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: filter 0.16s var(--sg-ease);
}
.sg-profile-avatar-lg:hover { filter: brightness(0.82); }
.sg-profile-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sg-profile-photo-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0; /* oculta el texto "Sin archivos seleccionados" */
}
.sg-profile-photo-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--sg-ease);
}
.sg-profile-avatar-lg:hover .sg-profile-photo-hint,
.sg-profile-photo-input:focus-visible + .sg-profile-photo-hint {
  opacity: 1;
}

.sg-profile-linkbtn {
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--sg-sidebar-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sg-profile-linkbtn:hover { color: #f2a6b3; }

.sg-profile-collapse {
  border: 1px solid var(--sg-sidebar-border);
  border-radius: 11px;
  background: #12201a;
  overflow: hidden;
}
.sg-profile-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--sg-sidebar-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sg-profile-collapse > summary::-webkit-details-marker { display: none; }
.sg-profile-collapse > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--sg-sidebar-text-muted);
  border-bottom: 1.5px solid var(--sg-sidebar-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.16s var(--sg-ease);
}
.sg-profile-collapse[open] > summary::after { transform: rotate(45deg); }
.sg-profile-collapse > summary:hover { color: #fff; }
.sg-profile-collapse .sg-profile-sec {
  padding: 0 0.7rem 0.7rem;
}
.sg-profile-head-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.sg-profile-head-email {
  font-size: 0.72rem;
  color: var(--sg-sidebar-text-muted);
  margin-top: 0.1rem;
  word-break: break-all;
}
.sg-profile-head-email .badge {
  font-size: 0.56rem;
  vertical-align: middle;
  margin-left: 0.25rem;
}
.sg-profile-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.4rem;
}
.sg-profile-rol {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  color: #d7c3e8;
  background: rgba(52, 176, 136, 0.16);
  border: 1px solid rgba(52, 176, 136, 0.3);
}

.sg-profile-sec {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sg-profile-sec-t {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sg-sidebar-text-muted);
  margin: 0;
}
.sg-profile-sec .form-control {
  background: #12201a;
  border: 1px solid var(--sg-sidebar-border);
  color: #e9e5f0;
  font-size: 0.8rem;
}
.sg-profile-sec .form-control::placeholder { color: #6b6579; }
.sg-profile-sec .form-control:focus {
  background: #12201a;
  color: #fff;
  border-color: var(--sg-sidebar-accent);
  box-shadow: 0 0 0 3px rgba(232, 83, 106, 0.18);
}
.sg-profile-hint {
  font-size: 0.72rem;
  color: var(--sg-sidebar-text-muted);
  margin: 0;
}

.sg-profile-actions {
  display: flex;
  gap: 0.4rem;
}

.sg-profile-btn {
  flex: 1;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.4rem 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--sg-sidebar-border);
  background: var(--sg-sidebar-bg-2);
  color: var(--sg-sidebar-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s var(--sg-ease), color 0.16s var(--sg-ease), border-color 0.16s var(--sg-ease);
}
.sg-profile-btn:hover {
  background: #21362d;
  color: #fff;
}
.sg-profile-btn.primary {
  background: linear-gradient(135deg, var(--sg-red-500), var(--sg-red-600));
  border-color: transparent;
  color: #fff;
}
.sg-profile-btn.primary:hover { filter: brightness(1.08); }
.sg-profile-btn.danger:hover {
  background: var(--sg-red-600);
  border-color: transparent;
  color: #fff;
}

.sg-profile-panel-foot {
  display: flex;
  gap: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--sg-sidebar-border);
}

/* ---------- Tabs de sección ---------- */

.sg-tabs {
  display: flex;
  gap: 0.2rem;
  margin-bottom: var(--sg-space-6);
  border-bottom: 1px solid var(--sg-border);
}

.sg-tabs a {
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sg-ink-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s var(--sg-ease), border-color 0.15s var(--sg-ease);
}

.sg-tabs a:hover {
  color: var(--sg-red-600);
}

.sg-tabs a.active {
  color: var(--sg-red-600);
  border-bottom-color: var(--sg-red-500);
}

/* ---------- Barra de filtros por tipo (segmented) ---------- */

.sg-segbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2);
  margin-bottom: var(--sg-space-6);
}

.sg-segbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--sg-border);
  background: var(--sg-surface);
  color: var(--sg-ink-500);
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s var(--sg-ease), color 0.15s var(--sg-ease),
              border-color 0.15s var(--sg-ease);
}

.sg-segbar a:hover {
  border-color: var(--sg-ink-300);
  color: var(--sg-ink-900);
}

.sg-segbar a.active {
  background: var(--sg-red-500);
  border-color: var(--sg-red-500);
  color: #fff;
}

.sg-segbar .n {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.42rem;
  border-radius: 999px;
  background: var(--sg-surface-alt);
  color: var(--sg-ink-500);
}

.sg-segbar a.active .n {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.sg-segbar a.is-empty {
  opacity: 0.5;
}

/* ---------- Matriz de permisos / checkbox grid ---------- */

.sg-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.sg-check-grid .form-check {
  min-width: 11rem;
}

.sg-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--sg-ink-700);
  margin-right: 0.6rem;
}

/* ---------- Tarjetas de inicio ---------- */

.sg-home-card {
  display: block;
  height: 100%;
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-sm);
  padding: var(--sg-space-6);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--sg-ease), box-shadow 0.18s var(--sg-ease), border-color 0.18s var(--sg-ease);
}

.sg-home-card:not(.disabled):hover {
  transform: translateY(-3px);
  box-shadow: var(--sg-shadow-md);
  border-color: var(--sg-red-100);
  color: inherit;
}

.sg-home-card.disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.sg-home-card-icon {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
}

.sg-home-card-title {
  font-weight: 700;
  color: var(--sg-ink-900);
  margin-bottom: 0.25rem;
}

.sg-home-card-desc {
  font-size: 0.85rem;
  color: var(--sg-ink-500);
  line-height: 1.5;
}

/* ---------- Tiles de indicador del panel (dashboard) ---------- */

.sg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.sg-kpi-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  padding: var(--sp-4) var(--sp-6);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s var(--ease);
}

.sg-kpi-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}

.sg-kpi-card--alerta { border-left-color: var(--warn-600); }

.sg-kpi-icon {
  font-size: 1.35rem;
  margin-bottom: 6px;
  color: var(--brand-500);
}
.sg-kpi-icon svg {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}
.sg-kpi-card--alerta .sg-kpi-icon { color: var(--warn-600); }

.sg-kpi-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.sg-kpi-label {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin-top: 2px;
}

.sg-kpi-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warn-600);
  margin-top: 2px;
}

/* ---------- Panel: lista de filas enlazadas (dashboard, resúmenes) ---------- */

.sg-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.sg-panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}

.sg-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-soft);
  font-size: 0.88rem;
  text-decoration: none;
  color: inherit;
}

.sg-panel-row:hover { background: var(--surface-alt); }

/* ---------- Selector de roles/permisos tipo pill ---------- */

.sg-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sg-pill-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-alt);
  color: var(--sg-ink-500);
  cursor: pointer;
  transition: background-color 0.15s var(--sg-ease), color 0.15s var(--sg-ease), border-color 0.15s var(--sg-ease), transform 0.1s var(--sg-ease);
}

.sg-pill-toggle:hover {
  border-color: var(--sg-red-400);
  color: var(--sg-red-600);
}

.sg-pill-toggle:active {
  transform: scale(0.97);
}

.btn-check:checked + .sg-pill-toggle {
  background: var(--sg-red-500);
  border-color: var(--sg-red-500);
  color: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.16);
}

.btn-check:disabled + .sg-pill-toggle {
  opacity: 0.55;
  pointer-events: none;
}

.sg-inline-editor {
  background: var(--sg-surface-alt);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-3);
}

.sg-generated-password {
  font-family: 'SFMono-Regular', Consolas, monospace;
  letter-spacing: 0.02em;
}

/* ---------- Modal de gestión de usuario ---------- */

.sg-modal {
  border: none;
  border-radius: var(--sg-radius-lg);
  box-shadow: var(--sg-shadow-lg);
}

.sg-modal .modal-header {
  background: var(--sg-surface-alt);
  border-bottom: 1px solid var(--sg-border);
  border-top-left-radius: var(--sg-radius-lg);
  border-top-right-radius: var(--sg-radius-lg);
  padding: var(--sg-space-4) var(--sg-space-6);
}

.sg-modal .modal-body {
  padding: var(--sg-space-6);
}

.sg-modal-section {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-md);
  padding: var(--sg-space-4);
  background: var(--sg-surface);
}

.sg-modal-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sg-ink-500);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

/* Grilla compacta de cajas por tamaño (entregas / cajas de terceros) */
.sg-tamano-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sg-space-2);
}

.sg-fila-tamano {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-surface-alt);
  padding: var(--sg-space-2) var(--sg-space-3);
  transition: border-color 0.15s var(--sg-ease), background 0.15s var(--sg-ease);
}

.sg-fila-tamano:focus-within {
  border-color: var(--sg-red-400);
  background: var(--sg-surface);
}

.sg-fila-tamano-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sg-ink-500);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sg-fila-tamano .sg-fila-cajas {
  text-align: center;
  padding: 0.25rem 0.4rem;
}

.sg-fila-valor {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sg-ink-700);
  text-align: center;
  margin-top: 0.3rem;
}

.sg-role-pill {
  display: inline-block;
  background: var(--sg-surface-alt);
  border: 1px solid var(--sg-border);
  color: var(--sg-ink-700);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  margin: 0.1rem 0.15rem 0.1rem 0;
}

/* Tarifario de gastos — tarjetas por grupo con acento de color por tipo */
.sg-tarifa-grupo {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  background: var(--sg-card);
  box-shadow: var(--sg-shadow-xs);
  overflow: hidden;
  margin-bottom: var(--sg-space-4);
  border-left: 4px solid var(--sg-border);
}

.sg-tarifa-grupo[data-tipo="ingreso"]  { border-left-color: var(--sg-green-500); }
.sg-tarifa-grupo[data-tipo="viaje"]    { border-left-color: var(--sg-red-400); }
.sg-tarifa-grupo[data-tipo="fijo"]     { border-left-color: var(--sg-ink-300); }

.sg-tarifa-grupo-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  padding: var(--sg-space-3) var(--sg-space-4);
  background: var(--sg-surface-alt);
  border-bottom: 1px solid var(--sg-border-soft);
}

.sg-tarifa-grupo-titulo {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sg-ink-900);
}

.sg-tarifa-grupo-desc {
  font-size: 0.82rem;
  color: var(--sg-ink-500);
}

.sg-tarifa-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sg-space-2) var(--sg-space-4);
  padding: var(--sg-space-3) var(--sg-space-4);
  border-top: 1px solid var(--sg-border-soft);
}

.sg-tarifa-fila:first-of-type { border-top: none; }
.sg-tarifa-fila:nth-child(even) { background: var(--sg-surface-alt); }

.sg-tarifa-categoria {
  font-weight: 600;
  color: var(--sg-ink-900);
  font-size: 0.88rem;
  min-width: 220px;
}

.sg-tarifa-notas {
  font-size: 0.78rem;
  color: var(--sg-ink-500);
  flex-basis: 100%;
}

.sg-tarifa-valor-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sg-ink-900);
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
}

.sg-tarifa-valor-unidad {
  font-weight: 500;
  color: var(--sg-ink-500);
  font-size: 0.74rem;
}

/* Tabla de costo estimado por destino */
.sg-costo-destino-card {
  background: linear-gradient(135deg, var(--sg-surface-alt), var(--sg-surface));
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
}

.sg-costo-destino-total {
  font-weight: 700;
  color: var(--sg-red-600);
}

/* ============================================================
   Pestañas — un único look (subrayado). Aplica a TODO .nav-tabs de
   Bootstrap, así las fichas de detalle y el módulo de Cultivos se ven igual.
   ============================================================ */

.nav-tabs {
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-500);
  background: none;
  border-radius: 0;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--brand-600);
  background: var(--brand-050);
  border-bottom-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--brand-600);
  background: none;
  border-bottom-color: var(--brand-500);
}

.sg-module-tabs.nav-tabs { margin-bottom: var(--sp-8); }

.sg-module-tabs.nav-tabs .nav-link .sg-tab-count {
  display: inline-block;
  min-width: 1.35rem;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  border-radius: 999px;
  background: var(--sg-surface-alt);
  color: var(--sg-ink-500);
}

.sg-module-tabs.nav-tabs .nav-link.active .sg-tab-count {
  background: var(--sg-red-100);
  color: var(--sg-red-700);
}

.sg-module-tabs.nav-tabs .nav-link .sg-tab-count.sg-tab-count--alert {
  background: var(--danger-050);
  color: var(--sg-red-700);
}

/* Barra de acción encima de una tabla dentro de una pestaña */
.sg-tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--sg-space-6);
}

.sg-tab-toolbar h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sg-ink-900);
}

.sg-tab-intro {
  color: var(--sg-ink-500);
  font-size: 0.9rem;
  margin: 0 0 var(--sg-space-6);
  max-width: 60ch;
}

/* ---------- Tarjetas de indicador (KPIs) ---------- */

.sg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sg-space-4);
  margin-bottom: var(--sg-space-8);
}

.sg-stat {
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-left: 3px solid var(--sg-ink-300);
  border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-xs);
  padding: var(--sg-space-4) var(--sg-space-6);
}

.sg-stat-label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sg-ink-500);
  margin-bottom: 0.35rem;
}

.sg-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sg-ink-900);
}

.sg-stat-hint {
  font-size: 0.78rem;
  color: var(--sg-ink-500);
  margin-top: 0.2rem;
}

.sg-stat--ok { border-left-color: #2e9c6a; }
.sg-stat--warn { border-left-color: #d99a2b; }
.sg-stat--danger { border-left-color: var(--sg-danger-500); }
.sg-stat--accent { border-left-color: var(--sg-red-500); }

.sg-stat--danger .sg-stat-value { color: var(--sg-danger-600); }

/* Lista de pendientes en el Resumen */
.sg-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-pending-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-4);
  padding: var(--sg-space-3) 0;
  border-bottom: 1px solid var(--sg-border-soft);
  font-size: 0.9rem;
}

.sg-pending-list li:last-child { border-bottom: none; }

.sg-pending-empty {
  color: var(--sg-ink-500);
  font-size: 0.9rem;
  padding: var(--sg-space-4) 0;
}

/* Grilla de carga diaria de precios de compra (burbuja de Cultivos) */
.sg-precios-grid th {
  position: sticky;
  top: 0;
  background: var(--sg-surface-alt);
  z-index: 1;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sg-ink-500);
  white-space: nowrap;
}

.sg-precios-grid td { padding: 0.25rem 0.3rem; }
.sg-precios-grid td:first-child { padding-left: 0.5rem; white-space: nowrap; }
.sg-precios-grid th, .sg-precios-grid td { min-width: 128px; }
.sg-precios-grid th:first-child, .sg-precios-grid td:first-child { min-width: auto; }

.sg-precios-grid .input-group { flex-wrap: nowrap; }

.sg-precios-grid .input-group-text {
  padding: 0.1rem 0.35rem;
  color: var(--sg-ink-500);
  background: var(--sg-surface-alt);
}

.sg-precios-grid input {
  min-width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sg-precios-grid input:focus {
  border-color: var(--sg-red-400);
  box-shadow: 0 0 0 2px var(--sg-red-100);
}

/* La grilla de precios usa un <form> como hijo directo de .modal-content:
   hay que re-armar el layout flex del modal scrollable sobre el form. */
#modalPreciosDia .modal-content { overflow: hidden; }
#modalPreciosDia #formPreciosDia {
  max-height: 100%;
  min-height: 0;
}
#modalPreciosDia .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Tamaño sin precio de compra del día: no se puede vender, se muestra deshabilitado */
.sg-fila-tamano.sg-sin-precio-dia {
  opacity: 0.7;
  background: repeating-linear-gradient(
    -45deg, var(--sg-surface-alt), var(--sg-surface-alt) 6px, var(--sg-border) 6px, var(--sg-border) 12px
  );
}
.sg-fila-tamano.sg-sin-precio-dia .sg-fila-cajas { cursor: not-allowed; }

/* Aviso tipo marquesina dentro del tile (nombre arriba, aviso que se desplaza debajo) */
.sg-tile-aviso {
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin: 0 0 0.25rem;
  border-radius: 3px;
}
.sg-tile-aviso-rojo { color: #fff; background: var(--sg-danger-500); }
.sg-tile-aviso-amarillo { color: #7a5b00; background: #ffe08a; }

.sg-tile-aviso span {
  display: inline-block;
  padding-left: 100%;
  animation: sg-tile-marquee 7s linear infinite;
}
.sg-fila-tamano:hover .sg-tile-aviso span { animation-play-state: paused; }

@keyframes sg-tile-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .sg-tile-aviso span {
    animation: none;
    padding-left: 0;
    display: block;
    text-align: center;
    white-space: normal;
  }
}

/* ============================================================
   F5 — CSS de módulo que estaba embebido en las plantillas
   ============================================================ */

/* WhatsApp: nav de secciones (Bandeja / Cobranza / Uso de IA).
   Antes vivía como .wa-tabs en un <style> duplicado en cobranza.html y uso-ia.html. */
.wa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-3);
}

.wa-tabs a, .wa-tabs button, .wa-tab-btn {
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
}

.wa-tabs a:hover, .wa-tabs button:hover, .wa-tab-btn:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
}

.wa-tabs a.on, .wa-tabs button.on, .wa-tab-btn.on {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
}

/* Cultivos → Banco de producto: tabla de existencias con barras de segmento.
   Antes vivía como .banco-* en un <style> en banco.html. */
.banco-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.banco-hero .sg-stat { margin: 0; }
.banco-hero .sg-stat-value { font-size: 1.9rem; line-height: 1.1; }
.banco-hero .sg-stat-value small { font-size: 0.95rem; font-weight: 500; opacity: 0.7; }

.banco-table { --pad: 0.7rem; }
.banco-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  font-weight: 600;
}
.banco-table td, .banco-table th { padding: var(--pad) 0.9rem; vertical-align: middle; }
.banco-table tbody tr + tr { border-top: 1px solid var(--border); }
.banco-size { font-weight: 600; letter-spacing: 0.02em; }
.banco-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.banco-num--muted { color: var(--ink-500); }
.banco-adj-neg { color: var(--danger-600); }
.banco-adj-pos { color: var(--ok-600); }

.banco-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-alt);
  margin-top: 0.35rem;
  max-width: 190px;
}
.banco-bar__seg { height: 100%; }
.banco-bar__seg--tra { background: var(--warn-600); }
.banco-bar__seg--ven { background: var(--ink-400, #9aa1ac); }
.banco-bar__seg--dis { background: var(--ok-500); }
.banco-bar-legend {
  font-size: 0.68rem;
  color: var(--ink-500);
  margin-top: 0.15rem;
  display: flex;
  gap: 0.75rem;
}
.banco-bar-legend b { font-weight: 600; color: var(--ink-900); }

.banco-col-dispo {
  background: var(--ok-050);
  border-left: 2px solid var(--brand-100);
}
.banco-table thead .banco-col-dispo { color: var(--ok-600); }
.banco-dispo-lb { font-weight: 700; font-size: 1.05rem; }
.banco-dispo-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.banco-table tfoot td {
  padding: var(--pad) 0.9rem;
  font-weight: 700;
  border-top: 2px solid var(--border);
}

.banco-note { color: var(--ink-500); font-size: 0.82rem; margin-top: 0.85rem; }
.banco-note strong { color: var(--ink-900); }

.reporte-dia-table td, .reporte-dia-table th { text-align: center; }
.reporte-dia-table td:first-child, .reporte-dia-table th:first-child { text-align: left; white-space: nowrap; }