/* FarmaciaPlus design system: shared tokens and lightweight UI primitives. */
:root {
  --fp-font-sans: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fp-color-primary: #6d35f1;
  --fp-color-primary-600: #5b21d6;
  --fp-color-primary-soft: #f1ebff;
  --fp-color-primary-border: #d8c8ff;

  --fp-color-success: #10b981;
  --fp-color-success-600: #059669;
  --fp-color-success-soft: #ecfdf5;
  --fp-color-success-border: #bbf7d0;

  --fp-color-info: #0ea5e9;
  --fp-color-info-600: #0284c7;
  --fp-color-info-soft: #e0f2fe;
  --fp-color-info-border: #bae6fd;

  --fp-color-warning: #f59e0b;
  --fp-color-warning-600: #d97706;
  --fp-color-warning-soft: #fffbeb;
  --fp-color-warning-border: #fde68a;

  --fp-color-danger: #ef4444;
  --fp-color-danger-600: #dc2626;
  --fp-color-danger-soft: #fef2f2;
  --fp-color-danger-border: #fecaca;

  --fp-color-teal: #0f766e;
  --fp-color-teal-soft: #ccfbf1;
  --fp-color-blue: #2563eb;
  --fp-color-blue-soft: #eff6ff;
  --fp-color-orange: #f97316;
  --fp-color-orange-soft: #fff7ed;

  --fp-color-page: #f8fbff;
  --fp-color-page-web: #f5fbfb;
  --fp-color-surface: #ffffff;
  --fp-color-surface-soft: #f8fafc;
  --fp-color-border: #dbe6f2;
  --fp-color-border-strong: #ccd8e7;
  --fp-color-text: #0b1730;
  --fp-color-heading: #061731;
  --fp-color-muted: #66758d;
  --fp-color-muted-strong: #536984;

  --fp-radius-xs: 6px;
  --fp-radius-sm: 8px;
  --fp-radius-md: 10px;
  --fp-radius-lg: 12px;
  --fp-radius-xl: 16px;
  --fp-radius-pill: 999px;

  --fp-shadow-xs: 0 6px 16px rgba(15, 23, 42, .055);
  --fp-shadow-sm: 0 10px 24px rgba(15, 23, 42, .07);
  --fp-shadow-md: 0 14px 34px rgba(15, 23, 42, .1);
  --fp-shadow-lg: 0 18px 42px rgba(15, 23, 42, .14);

  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 20px;
  --fp-space-6: 24px;

  --fp-control-height-sm: 36px;
  --fp-control-height: 42px;
  --fp-control-height-lg: 48px;
  --fp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  font-family: var(--fp-font-sans);
  letter-spacing: 0;
}

.fp-surface,
.fp-panel,
.fp-card,
.fp-table-shell {
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--fp-radius-sm);
  box-shadow: var(--fp-shadow-xs);
}

.fp-card,
.fp-panel {
  padding: var(--fp-space-4);
}

.fp-muted {
  color: var(--fp-color-muted);
}

.fp-title {
  color: var(--fp-color-heading);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0;
}

.fp-subtitle {
  color: var(--fp-color-muted);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  margin: var(--fp-space-1) 0 0;
}

.fp-control,
.fp-input,
.fp-select,
.fp-textarea {
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border-strong);
  border-radius: var(--fp-radius-sm);
  color: var(--fp-color-text);
  min-height: var(--fp-control-height);
}

.fp-control:focus,
.fp-input:focus,
.fp-select:focus,
.fp-textarea:focus {
  border-color: rgba(109, 53, 241, .55);
  box-shadow: 0 0 0 .18rem rgba(109, 53, 241, .12);
  outline: 0;
}

.fp-btn {
  align-items: center;
  border-radius: var(--fp-radius-sm);
  display: inline-flex;
  font-weight: 900;
  gap: var(--fp-space-2);
  justify-content: center;
  letter-spacing: 0;
  min-height: var(--fp-control-height);
  padding: 0 var(--fp-space-4);
  text-decoration: none;
  white-space: nowrap;
}

.fp-btn-primary {
  background: linear-gradient(135deg, var(--fp-color-primary), var(--fp-color-primary-600));
  border: 1px solid var(--fp-color-primary-600);
  box-shadow: 0 12px 24px rgba(109, 53, 241, .18);
  color: #fff;
}

.fp-btn-secondary {
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  color: var(--fp-color-text);
}

.fp-btn-success {
  background: linear-gradient(135deg, var(--fp-color-success), var(--fp-color-success-600));
  border: 1px solid var(--fp-color-success-600);
  color: #fff;
}

.fp-action-icon {
  align-items: center;
  background: var(--fp-color-surface);
  border: 1px solid var(--fp-color-border);
  border-radius: var(--fp-radius-sm);
  color: var(--fp-color-text);
  display: inline-flex;
  height: 38px;
  justify-content: center;
  min-width: 38px;
  width: 38px;
}

.fp-status {
  align-items: center;
  border-radius: var(--fp-radius-pill);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
  line-height: 1;
  min-height: 26px;
  padding: 0 10px;
}

.fp-status-success {
  background: var(--fp-color-success-soft);
  border: 1px solid var(--fp-color-success-border);
  color: var(--fp-color-success-600);
}

.fp-status-warning {
  background: var(--fp-color-warning-soft);
  border: 1px solid var(--fp-color-warning-border);
  color: var(--fp-color-warning-600);
}

.fp-status-danger {
  background: var(--fp-color-danger-soft);
  border: 1px solid var(--fp-color-danger-border);
  color: var(--fp-color-danger-600);
}

.fp-status-info {
  background: var(--fp-color-info-soft);
  border: 1px solid var(--fp-color-info-border);
  color: var(--fp-color-info-600);
}

.fp-table {
  color: var(--fp-color-text);
  margin-bottom: 0;
  width: 100%;
}

.fp-table th {
  color: var(--fp-color-muted-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.fp-table td {
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  :root {
    --fp-control-height: 44px;
    --fp-radius-lg: 10px;
  }

  .fp-mobile-shell {
    background: var(--fp-color-page);
    min-height: 100dvh;
    overflow-x: hidden;
    padding: 14px 16px calc(88px + var(--fp-safe-bottom));
  }

  .fp-mobile-card {
    background: var(--fp-color-surface);
    border: 1px solid var(--fp-color-border);
    border-radius: var(--fp-radius-sm);
    box-shadow: var(--fp-shadow-xs);
    padding: var(--fp-space-4);
  }

  .fp-mobile-actions {
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--fp-color-border);
    display: grid;
    gap: var(--fp-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 14px calc(10px + var(--fp-safe-bottom));
  }
}