/* Case Manager MVP — UI responsive (inspirado en LegalCase / Hostinger Horizons) */

:root {
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: hsl(220, 13%, 13%);
  --text-muted: hsl(220, 13%, 40%);
  --bg: hsl(0, 0%, 100%);
  --surface: hsl(0, 0%, 100%);
  --surface-muted: hsl(220, 13%, 97%);
  --surface-soft: hsl(220, 13%, 95%);
  --border: hsl(220, 13%, 91%);
  --primary: hsl(220, 13%, 20%);
  --primary-hover: hsl(220, 13%, 28%);
  --primary-fg: #ffffff;
  --accent: hsl(45, 93%, 47%);
  --accent-hover: hsl(45, 93%, 42%);
  --accent-fg: hsl(220, 13%, 13%);
  --danger: hsl(0, 84%, 42%);
  --success-bg: #ecfdf5;
  --success-border: #6ee7b7;
  --success-text: #065f46;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #991b1b;
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.75rem;
  --shadow: 0 1px 2px rgba(29, 33, 41, 0.06);
  --shadow-md: 0 4px 24px rgba(29, 33, 41, 0.1);
  --shadow-lg: 0 10px 40px rgba(29, 33, 41, 0.12);
  --space: clamp(0.75rem, 2vw, 1.25rem);
  --space-lg: clamp(1.25rem, 4vw, 2rem);
  --touch: 2.75rem;
  --touch-sm: 2.5rem;
  --max: 80rem;
  --header-h: 3.25rem;
  --header-h-desktop: 3.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: hsl(220, 13%, 95%);
    --text-muted: hsl(220, 13%, 60%);
    --bg: hsl(220, 13%, 10%);
    --surface: hsl(220, 13%, 13%);
    --surface-muted: hsl(220, 13%, 15%);
    --surface-soft: hsl(220, 13%, 20%);
    --border: hsl(220, 13%, 25%);
    --primary: hsl(220, 13%, 80%);
    --primary-hover: hsl(220, 13%, 88%);
    --primary-fg: hsl(220, 13%, 13%);
    --accent: hsl(45, 93%, 47%);
    --accent-hover: hsl(45, 93%, 52%);
    --accent-fg: hsl(220, 13%, 13%);
    --danger: #fca5a5;
    --success-bg: #064e3b;
    --success-border: #059669;
    --success-text: #d1fae5;
    --error-bg: #450a0a;
    --error-border: #991b1b;
    --error-text: #fecaca;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.45);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  height: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(45, 147, 235, 0.12);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    -webkit-tap-highlight-color: rgba(232, 185, 9, 0.15);
  }
}