:root {
  /* Colores principales */
  --primary-color: #FF81AE;
  --primary-hover: #FF69A0;
  --secondary-color: #FFB3D9;
  --background-gradient: linear-gradient(135deg, #FF81AE 0%, #FFB3D9 100%);
  --text-color: #333;
  --text-color-light: #555;
  --muted-text: #666;
  --label-color: #555;
  --input-bg: #f8f9fa;
  --input-border: #e1e5e9;
  --input-focus-border: #FF81AE;
  --input-focus-shadow: rgba(255, 129, 174, 0.1);
  --btn-bg: linear-gradient(135deg, #FF81AE 0%, #FFB3D9 100%);
  --btn-hover-shadow: rgba(255, 129, 174, 0.3);
  --error-color: #e74c3c;
  --error-bg: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
  --info-bg: linear-gradient(135deg, #FF81AE 0%, #FFB3D9 100%);
  --info-border: rgba(255, 129, 174, 0.3);
  --icon-color: #FF81AE;
  --float-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  --radial-bg1: radial-gradient(circle at 20% 30%, rgba(255,129,174,0.14), transparent 25%);
  --radial-bg2: radial-gradient(circle at 80% 70%, rgba(255,179,217,0.10), transparent 20%);
  --border-radius-medium: 12px;
  
  /* Colores adicionales del sistema */
  --success-color: #27ae60;
  --success-hover: #229954;
  --warning-color: #f39c12;
  --danger-color: #e74c3c;
  --danger-hover: #c0392b;
  --info-color: #3498db;
  --info-hover: #2980b9;
  
  /* Colores de acción */
  --action-view: #3b82f6;
  --action-view-hover: #2563eb;
  --action-edit: #16a34a;
  --action-edit-hover: #15803d;
  --action-delete: #ef4444;
  --action-delete-hover: #dc2626;
  --action-schedule: #10b981;
  
  /* Colores de fondo */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f8fafc;
  --gray-200: #f1f5f9;
  --gray-300: #e2e8f0;
  --gray-400: #cbd5e1;
  --gray-500: #9ca3af;
  --gray-600: #6b7280;
  --gray-700: #475569;
  --gray-800: #374151;
  --gray-900: #1f2937;
  
  /* Colores de estado */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: #3b82f6;
  
  /* Colores de calendario */
  --calendar-border: rgba(74, 144, 164, 0.2);
  --calendar-hover: rgba(74, 144, 164, 0.1);
  --calendar-selected: rgba(74, 144, 164, 0.3);
  
  /* Overlays y sombras */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  /* Tipografía */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Tamaños de fuente */
  --h1-size: 2.2rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --subtitle-size: 0.95rem;
  --label-size: 0.9rem;
  --body-size: 1rem;
  --small-size: 0.875rem;
  --p-size: 1rem;
  --input-font-size: 16px;
  --btn-font-size: 16px;
  --error-font-size: 0.9rem;
  --info-font-size: 0.9rem;
  --forgot-font-size: 0.9rem;

  /* Bordes y radios */
  --border-radius: 12px;
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-large: 20px;
  --border-radius-xl: 30px;

  /* Paddings */
  --padding-xs: 4px;
  --padding-small: 8px;
  --padding-medium: 15px;
  --padding-large: 20px;
  --padding-xl: 30px;
  --padding-xxl: 40px;

  /* Margins */
  --margin-small: 5px;
  --margin-medium: 10px;
  --margin-large: 20px;
  --margin-xl: 25px;
  --margin-xxl: 30px;

  /* Gaps */
  --gap-medium: 40px;
  --gap-small: 20px;

  /* Sombras */
  --box-shadow: 0 30px 80px rgba(7, 18, 30, 0.12);
  --box-shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 10px 25px rgba(255, 129, 174, 0.3);

  /* Transiciones */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;

  /* Iconos */
  --icon-size: 18px;

  /* Animaciones */
  --float-animation: floatY 6s ease-in-out infinite;
}