/* =====================================================================
   Sistema de diseño erpcardozo — Fase 0 del rediseño mobile-first.
   Prefijo `ds-` en todas las clases a propósito: evita cualquier choque
   con nombres ad-hoc ya usados en templates viejos (.card, .btn, etc.)
   mientras se migra pantalla por pantalla.
   ===================================================================== */

:root {
  /* Marca */
  --ds-red: #D71920;
  --ds-red-dark: #b0141a;
  --ds-red-soft: #fde8e8;

  /* Neutros */
  --ds-ink: #111827;
  --ds-ink-2: #1f2937;
  --ds-ink-3: #374151;
  --ds-muted: #6b7280;
  --ds-muted-2: #9ca3af;
  --ds-border: #e5e7eb;
  --ds-bg: #f5f6fa;
  --ds-bg-card: #ffffff;

  /* Estados (mismos colores ya usados en vehiculos/ — se centralizan acá) */
  --ds-success: #059669;
  --ds-success-bg: #ecfdf5;
  --ds-warning: #d97706;
  --ds-warning-bg: #fffbeb;
  --ds-info: #2563eb;
  --ds-info-bg: #eff6ff;
  --ds-danger: #b91c1c;
  --ds-danger-bg: #fef2f2;
  --ds-neutral: #374151;
  --ds-neutral-bg: #f3f4f6;

  /* Espaciado */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 20px;
  --ds-sp-6: 24px;
  --ds-sp-7: 32px;

  /* Radios y sombras */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --ds-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10);
  --ds-shadow-lg: 0 10px 28px rgba(15, 23, 42, 0.18);

  /* Tamaño mínimo de zona táctil recomendado (Apple/Material ~44-48px) */
  --ds-tap-min: 44px;
}

/* ---------------------------------------------------------------------
   Nota importante: main/base.html define `body, body * { font-size:
   calc(1rem + 5pt) !important; }` a nivel global — una regla histórica
   que agranda TODO el texto del ERP sin excepción. Para que este sistema
   de diseño pueda establecer una jerarquía tipográfica real (texto
   secundario más chico que el principal) las clases de texto de acá
   necesitan su propio !important para poder ganarle a esa regla. No se
   toca la regla global (rompería las pantallas todavía no migradas).
   --------------------------------------------------------------------- */

.ds-text-sm { font-size: 0.85rem !important; line-height: 1.35; }
.ds-text-xs { font-size: 0.72rem !important; line-height: 1.3; }
.ds-text-muted { color: var(--ds-muted); }

/* ── Cards ── */
.ds-card {
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-sp-4);
}
.ds-card + .ds-card { margin-top: var(--ds-sp-3); }
.ds-card-title {
  font-weight: 700 !important;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-sp-2);
}

/* ── Botones ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-sp-2);
  min-height: var(--ds-tap-min);
  padding: 0 var(--ds-sp-4);
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  font-weight: 600 !important;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ds-btn:active { transform: scale(0.98); }
.ds-btn-block { display: flex; width: 100%; }
.ds-btn-primary { background: #1f2937; border-color: #1f2937; color: #fff; }
.ds-btn-primary:hover, .ds-btn-primary:active { background: #111827; border-color: #111827; color: #fff; }
.ds-btn-secondary { background: #fff; border-color: var(--ds-border); color: var(--ds-ink); }
.ds-btn-secondary:hover { background: var(--ds-neutral-bg); }
.ds-btn-danger { background: var(--ds-danger-bg); border-color: var(--ds-danger); color: var(--ds-danger); }
.ds-btn-ghost { background: none; border-color: transparent; color: var(--ds-ink-3); }

/* ── Chips / badges de estado ── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-1);
  padding: 3px 12px;
  border-radius: var(--ds-radius-pill);
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.ds-chip-success { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-chip-warning { background: var(--ds-warning-bg); color: var(--ds-warning); }
.ds-chip-info { background: var(--ds-info-bg); color: var(--ds-info); }
.ds-chip-danger { background: var(--ds-danger-bg); color: var(--ds-danger); }
.ds-chip-neutral { background: var(--ds-neutral-bg); color: var(--ds-neutral); }

/* ── Campos de formulario ── */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-sp-1); margin-bottom: var(--ds-sp-3); }
.ds-field > label { font-weight: 600 !important; font-size: 0.82rem !important; color: var(--ds-ink-3); }
.ds-field input,
.ds-field select,
.ds-field textarea {
  min-height: var(--ds-tap-min);
  padding: var(--ds-sp-2) var(--ds-sp-3);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-size: inherit;
  font-family: inherit;
  background: #fff;
}
.ds-field textarea { min-height: 80px; }
.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus { outline: none; border-color: var(--ds-red); }

/* ── Barra de acción inferior sticky (formularios largos en mobile) ── */
.ds-sticky-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--ds-border);
  padding: var(--ds-sp-3) var(--ds-sp-4);
  padding-bottom: calc(var(--ds-sp-3) + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: var(--ds-sp-2);
  z-index: 500;
  margin: var(--ds-sp-4) calc(var(--ds-sp-4) * -1) 0;
}

/* ── FAB: botón flotante de acción principal por pantalla ── */
.ds-fab {
  position: fixed;
  right: var(--ds-sp-4);
  bottom: calc(var(--ds-sp-5) + env(safe-area-inset-bottom, 0px));
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-2);
  height: 56px;
  padding: 0 var(--ds-sp-5);
  border-radius: var(--ds-radius-pill);
  background: #1f2937;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none;
  box-shadow: var(--ds-shadow-lg);
  border: none;
  cursor: pointer;
}
.ds-fab:active { transform: scale(0.97); }
.ds-fab-icon { font-size: 1.3rem !important; line-height: 1; }

/* ── Bottom sheet (paneles deslizables desde abajo, ej. carrito POS) ── */
.ds-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 950;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ds-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ds-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  background: #fff;
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
  box-shadow: var(--ds-shadow-lg);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding: var(--ds-sp-4);
  padding-bottom: calc(var(--ds-sp-5) + env(safe-area-inset-bottom, 0px));
}
.ds-bottom-sheet.is-open { transform: translateY(0); }
.ds-bottom-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-border);
  margin: 0 auto var(--ds-sp-3);
}

/* ── Estado vacío ── */
.ds-empty {
  text-align: center;
  color: var(--ds-muted);
  padding: var(--ds-sp-7) var(--ds-sp-4);
}

/* ── Listado de cards (patron mobile-first para reemplazar tablas anchas) ── */
.ds-list { display: flex; flex-direction: column; gap: var(--ds-sp-3); }
.ds-list-item {
  display: flex;
  gap: var(--ds-sp-3);
  align-items: center;
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-sp-3);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ds-shadow-sm);
}
.ds-list-item-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--ds-radius-sm);
  object-fit: cover;
  background: var(--ds-neutral-bg);
  flex-shrink: 0;
}
.ds-list-item-body { min-width: 0; flex: 1; }
.ds-list-item-title { font-weight: 700 !important; color: var(--ds-ink); }

/* Estas clases solo se aplican dentro de pantallas ya migradas al
   sistema nuevo — el resto del ERP sigue con su CSS inline hasta que
   le toque su fase, sin que esto los afecte. */