@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* HMC Connect Premium Color Palette (Unified HMC Green Design System) */
  --primary: #0F8F79;        /* Verde HMC */
  --primary-dark: #0A6D5E;   /* Verde Oscuro HMC */
  --primary-light: #E8F7F3;  /* Verde Claro HMC */

  --primary-blue: var(--primary);
  --secondary-blue: var(--primary-dark);
  --light-blue: var(--primary-light);

  --success-green: #2E7D32;
  --warning-orange: #F9A825;
  --danger-red: #D32F2F;
  --bg-gray: #F8FAFC;
  --card-bg: #FFFFFF;
  --text-dark: #263238;
  --text-muted: #546E7A;
  --border-color: #E2E8F0;
  
  /* Alert/Status Subtle Tints */
  --success-light: #E8F5E9;
  --warning-light: #FFF8E1;
  --danger-light: #FFEBEE;
  
  /* Elevating Shadows */
  --shadow-sm: 0 2px 4px rgba(38, 50, 56, 0.04);
  --shadow-md: 0 8px 16px rgba(38, 50, 56, 0.06), 0 2px 4px rgba(38, 50, 56, 0.04);
  --shadow-lg: 0 16px 24px rgba(38, 50, 56, 0.08), 0 4px 8px rgba(38, 50, 56, 0.04);
  --shadow-premium: 0 20px 40px rgba(25, 118, 210, 0.08), 0 1px 3px rgba(0,0,0,0.02);
  
  /* Design System Spacing (8px Grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  
  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  
  /* Font Families */
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-roboto: 'Roboto Flex', sans-serif;
  
  /* Grid settings */
  --max-width: 1440px;
}

/* Base Styles & Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-inter);
  background-color: var(--bg-gray);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  background: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

a {
  text-decoration: none;
  color: inherit;
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
  background: rgba(38, 50, 56, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Skeleton Loading Animation */
.skeleton {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Heartbeat / Vitals Animation */
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  70% { transform: scale(1); }
}

.pulse-icon {
  animation: heartbeat 1.8s infinite ease-in-out;
}

/* Page / Panel Transitions */
.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-up {
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-right {
  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Ripple Animation Utility */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.6s, height 0.6s, opacity 0.6s;
}

.ripple-btn:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: 0s;
}

/* Standard Spacing Classes */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* Custom Scrollbar for Premium Feel */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Material Symbols Adjustments */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-rounded.outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Global display utility class */
.hidden {
  display: none !important;
}