/* visitasmedicas.com.ar — Unified Styles
   Version: 1.0 (2025-08-08)
   Scope: Base tokens, layout, typography, forms, buttons, cards, tables,
          utilities, PrimeNG overrides, light/dark support.
   Usage: <link rel="stylesheet" href="/assets/css/vm-styles.css">
*/

/* =============================
   1) DESIGN TOKENS
   ============================= */
:root {
  --brand-h: 205;
  --brand-s: 86%;
  --brand-l: 45%;
  --primary-color: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
  --primary-color-contrast: #ffffff;
  --primary-color-weak: hsl(var(--brand-h), 100%, 96%);
  --accent-color: hsl(153, 60%, 42%);
  --accent-color-weak: hsl(153, 80%, 92%);
  --danger: #e53935;
  --warning: #ffb300;
  --success: #2e7d32;
  --info: #0288d1;
  --surface-ground: #f6f7fb;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #e6e8ef;
  --text-strong: #16202c;
  --text: #263241;
  --text-muted: #5b6472;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --focus-ring: 0 0 0 3px hsla(var(--brand-h), 86%, 45%, .25);
  --card-shadow: 0 10px 28px rgba(22, 32, 44, .08);
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-1: clamp(1.6rem, 1.4rem + .6vw, 2.2rem);
  --fs-2: clamp(1.2rem, 1.1rem + .3vw, 1.4rem);
  --fs-3: 1rem;
  --fs-4: .875rem;
  --lh: 1.55;
}

/* Dark mode (auto) */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-ground: #0f141a;
    --surface-card: #121922;
    --surface-overlay: #1a2330;
    --surface-border: #233146;
    --text-strong: #e6eef8;
    --text: #d7deea;
    --text-muted: #9fb0c9;
    --card-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  }
}
html[data-theme="dark"] {
  --surface-ground: #0f141a;
  --surface-card: #121922;
  --surface-overlay: #1a2330;
  --surface-border: #233146;
  --text-strong: #e6eef8;
  --text: #d7deea;
  --text-muted: #9fb0c9;
  --card-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}

/* =============================
   2) RESET + BASE
   ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--text);
  background: var(--surface-ground);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary-color); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 10px;
}

/* =============================
   3) LAYOUT
   ============================= */
.container {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  background: var(--surface-card);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.vm-container {
  max-width: 1100px;
  margin: clamp(18px, 2.5vw, 36px) auto;
  padding: 20px;
}

/* =============================
   4) TYPOGRAPHY
   ============================= */
h1, h2, h3, h4 {
  color: var(--text-strong);
  margin: 0 0 .6em 0;
  line-height: 1.25;
}
h1 { font-size: var(--fs-1); }
h2 { font-size: calc(var(--fs-2) + .1rem); }
h3 { font-size: var(--fs-2); color: var(--text); }
small, .muted { color: var(--text-muted); }

/* =============================
   5) FORMS
   ============================= */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--surface-border);
  background: var(--surface-overlay);
  color: var(--text);
  border-radius: 12px;
}
input:focus, textarea:focus, select:focus {
  border-color: hsl(var(--brand-h), var(--brand-s), 70%);
  box-shadow: var(--focus-ring);
}
.p-inputtext { margin-bottom: 10px; }

/* =============================
   6) BUTTONS
   ============================= */
button, .p-button {
  background: var(--primary-color);
  color: var(--primary-color-contrast);
  padding: 11px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(45, 111, 200, .22);
}
button:hover, .p-button:hover {
  background: hsl(var(--brand-h), var(--brand-s), 40%);
}

/* =============================
   7) TABLES
   ============================= */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}
th, td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-border);
  text-align: left;
}
thead th {
  background: var(--primary-color-weak);
  color: var(--text-strong);
  font-weight: 700;
}

/* =============================
   8) UTILITIES
   ============================= */
.center { text-align: center; }
.right { text-align: right; }
.mt-2 { margin-top: 12px; }
.mb-2 { margin-bottom: 12px; }