/* =========================================================
   VetAdmin — global.css
   Variables, reset, tipografía base
   ========================================================= */

/* ---- Fuentes ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ---- Variables de diseño ---- */
:root {
  /* Paleta de marca */
  --teal-50:  #E1F5EE;
  --teal-100: #9FE1CB;
  --teal-200: #5DCAA5;
  --teal-400: #1D9E75;
  --teal-600: #0F6E56;
  --teal-800: #085041;
  --teal-900: #04342C;

  --blue-50:  #E6F1FB;
  --blue-200: #85B7EB;
  --blue-400: #378ADD;
  --blue-600: #185FA5;
  --blue-800: #0C447C;

  --amber-50:  #FAEEDA;
  --amber-200: #EF9F27;
  --amber-400: #BA7517;
  --amber-600: #854F0B;

  --red-50:  #FCEBEB;
  --red-200: #F09595;
  --red-400: #E24B4A;
  --red-600: #A32D2D;

  --purple-50:  #EEEDFE;
  --purple-200: #AFA9EC;
  --purple-400: #7F77DD;
  --purple-600: #534AB7;

  --gray-50:  #F8F8F6;
  --gray-100: #F1EFE8;
  --gray-200: #E0DED6;
  --gray-300: #C8C6BE;
  --gray-400: #9E9C96;
  --gray-500: #6E6D69;
  --gray-600: #4A4946;
  --gray-700: #2E2D2A;
  --gray-800: #1C1B19;
  --gray-900: #0E0E0C;

  /* Semántica modo claro */
  --color-bg:           #F6F5F0;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F1EFE8;
  --color-surface-3:    #E8E6DE;

  --color-text-1:       #1C1B19;
  --color-text-2:       #4A4946;
  --color-text-3:       #8A8884;
  --color-text-inv:     #FFFFFF;

  --color-border:       rgba(0,0,0,0.08);
  --color-border-md:    rgba(0,0,0,0.14);
  --color-border-str:   rgba(0,0,0,0.22);

  --color-primary:      #0F6E56;
  --color-primary-hover:#085041;
  --color-primary-soft: #E1F5EE;
  --color-primary-text: #04342C;

  --color-danger:       #E24B4A;
  --color-danger-soft:  #FCEBEB;
  --color-danger-text:  #A32D2D;

  --color-warning:      #BA7517;
  --color-warning-soft: #FAEEDA;
  --color-warning-text: #854F0B;

  --color-info:         #185FA5;
  --color-info-soft:    #E6F1FB;
  --color-info-text:    #0C447C;

  --color-success:      #0F6E56;
  --color-success-soft: #E1F5EE;
  --color-success-text: #04342C;

  /* Sidebar */
  --sidebar-bg:         #1C1B19;
  --sidebar-text:       rgba(255,255,255,0.72);
  --sidebar-text-active:#FFFFFF;
  --sidebar-item-hover: rgba(255,255,255,0.06);
  --sidebar-item-active:rgba(255,255,255,0.12);
  --sidebar-border:     rgba(255,255,255,0.08);
  --sidebar-width:      240px;
  --sidebar-width-collapsed: 60px;

  /* Tipografía */
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'DM Mono', 'Fira Code', monospace;

  /* Espaciado */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Bordes */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  /* Transiciones */
  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   320ms ease;

  /* Topbar */
  --topbar-height: 56px;
}

:root[data-theme="dark"] {
  --color-bg:           #111110;
  --color-surface:      #1C1B19;
  --color-surface-2:    #242320;
  --color-surface-3:    #2E2D2A;
  --color-text-1:       #F0EEE6;
  --color-text-2:       #B4B2AA;
  --color-text-3:       #706E68;
  --color-border:       rgba(255,255,255,0.08);
  --color-border-md:    rgba(255,255,255,0.14);
  --color-border-str:   rgba(255,255,255,0.22);
  --color-primary-soft: #04342C;
  --color-primary-text: #5DCAA5;
  --color-danger-soft:  #501313;
  --color-danger-text:  #F09595;
  --color-warning-soft: #412402;
  --color-warning-text: #EF9F27;
  --color-info-soft:    #042C53;
  --color-info-text:    #85B7EB;
  --color-success-soft: #04342C;
  --color-success-text: #5DCAA5;
  --sidebar-bg:         #141412;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg:           #111110;
    --color-surface:      #1C1B19;
    --color-surface-2:    #242320;
    --color-surface-3:    #2E2D2A;
    --color-text-1:       #F0EEE6;
    --color-text-2:       #B4B2AA;
    --color-text-3:       #706E68;
    --color-border:       rgba(255,255,255,0.08);
    --color-border-md:    rgba(255,255,255,0.14);
    --color-border-str:   rgba(255,255,255,0.22);
    --color-primary-soft: #04342C;
    --color-primary-text: #5DCAA5;
    --color-danger-soft:  #501313;
    --color-danger-text:  #F09595;
    --color-warning-soft: #412402;
    --color-warning-text: #EF9F27;
    --color-info-soft:    #042C53;
    --color-info-text:    #85B7EB;
    --color-success-soft: #04342C;
    --color-success-text: #5DCAA5;
    --sidebar-bg:         #141412;
  }
}


/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-1);
  background: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Tipografía ---- */
h1 { font-size: 1.6rem;  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.3rem;  font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
h3 { font-size: 1.1rem;  font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: 0.95rem; font-weight: 500; line-height: 1.4; }
h5 { font-size: 0.85rem; font-weight: 500; line-height: 1.4; }

p  { color: var(--color-text-2); line-height: 1.65; }

a  {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); }

strong { font-weight: 600; color: var(--color-text-1); }
small  { font-size: 0.8rem; color: var(--color-text-3); }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
}

code {
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-1);
}

kbd {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-md);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-3);
  font-size: 0.78em;
}

ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ---- Focus visible ---- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Scrollbar personalizada ---- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--color-border-md); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-str); }

/* ---- Selección de texto ---- */
::selection {
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

/* ---- Utilidades de accesibilidad ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none !important; }

/* ── iOS Safe Area (notch / Dynamic Island) ── */
@supports (padding-top: env(safe-area-inset-top)) {
  #app-shell {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sala-actions,
  #pwa-install-banner {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  }
}