/* ==========================================================================
   PORTAL WEB DE ENFERMERÍA - MARILUZ MERCADO TAPIA
   VARIABLES CSS: COLORES, TIPOGRAFÍA, SOMBRAS, ESPACIADOS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* Paleta Stitch */
  --primary: #0F2B48;             /* Deep Sea Navy */
  --primary-hover: #163B61;
  --primary-light: #2F4867;
  --primary-container: #0F2B48;
  --primary-fixed: #D2E4FF;
  
  --secondary: #D48C70;           /* Muted Terracotta */
  --secondary-dark: #8A4F37;
  --secondary-fixed: #FFDBCE;
  --secondary-container: #FFB193;

  --tertiary: #8EA89D;            /* Soft Sage */
  --tertiary-dark: #2C5E4E;
  --tertiary-fixed: #CDE9DC;

  --surface: #FAF5ED;             /* Lino Cálido Clínico (Canvas principal) */
  --surface-sand: #F5EFE3;        /* Arena Cálida (Paneles y Contraste) */
  --surface-card: #FFFFFF;        /* Blanco Clínico Puro para Tarjetas */
  --surface-low: #F1E9DE;         /* Crema Suave Agradable */
  --surface-dim: #E3D8C8;
  --surface-sage: #EDF5F1;        /* Salvia Curativa / Seguridad Clínica */
  --surface-mint: #E2EDE7;        /* Menta Aséptica Suave */

  --ink: #1C242C;                 /* Soft Charcoal */
  --ink-muted: #555B62;
  --ink-light: #7E858E;

  --border-subtle: rgba(15, 43, 72, 0.08);
  --border-focus: rgba(15, 43, 72, 0.2);

  /* Tipografías */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Sombras Stitch */
  --shadow-card: 0 4px 20px -2px rgba(15, 43, 72, 0.04), 0 2px 6px -1px rgba(15, 43, 72, 0.02);
  --shadow-floating: 0 12px 32px -4px rgba(15, 43, 72, 0.08), 0 4px 12px -2px rgba(15, 43, 72, 0.03);
  --shadow-critical: 0 24px 48px -8px rgba(15, 43, 72, 0.16);

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Transición estándar */
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}