/* 
 * Healthcare Cuernavaca - MVP Core Styles 
 * Features: Light/Dark Mode, CSS Variables, Premium UI
 */

 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

 :root {
     /* Light Mode Base Vairables */
     --primary: #0ca1a6; /* Extracted from Logo */
     --primary-dark: #09878b;
     --bg: #f8fafc;
     --surface: #ffffff;
     --surface-blur: rgba(255, 255, 255, 0.85);
     --text-main: #0f172a;
     --text-muted: #64748b;
     --border: #e2e8f0;
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --input-bg: #f1f5f9;
     --input-focus: rgba(12, 161, 166, 0.2);
     --danger: #ef4444;
     --success: #22c55e;
 }
 
 /* Dark Mode Override */
 [data-theme="dark"] {
     --bg: #0f172a;
     --surface: #1e293b;
     --surface-blur: rgba(30, 41, 59, 0.7);
     --text-main: #f8fafc;
     --text-muted: #94a3b8;
     --border: #334155;
     --input-bg: #0f172a;
     --input-focus: rgba(12, 161, 166, 0.4);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: 'Outfit', sans-serif;
     background-color: var(--bg);
     color: var(--text-main);
     transition: background-color 0.3s ease, color 0.3s ease;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
 }
 
 /* Split-screen layout for Login */
 .split-layout {
     display: flex;
     min-height: 100vh;
     width: 100%;
 }
 
 .split-left {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 2rem;
     background: var(--surface);
 }
 
 .split-right {
     flex: 1.2;
     position: relative;
     background-size: cover;
     background-position: center;
     display: none;
 }
 
 @media (min-width: 768px) {
     .split-right {
         display: block;
     }
 }
 
 .img-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(12, 161, 166, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
 }
 
 /* Glassmorphism Panel */
 .glass-panel {
     position: absolute;
     bottom: 10%;
     left: 10%;
     right: 10%;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     padding: 2rem;
     border-radius: 16px;
     color: white;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }
 
 /* Forms Elements */
 .login-form-container {
     width: 100%;
     max-width: 400px;
 }
 
 .login-header {
     margin-bottom: 2rem;
     text-align: center;
 }
 
 .login-header img {
     max-width: 180px;
     margin-bottom: 20px;
     /* If it's a dark logo, allow some filtering in dark mode */
 }
 [data-theme="dark"] .login-header img {
     filter: brightness(0) invert(1);
 }
 
 .login-header h1 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 8px;
 }
 
 .login-header p {
     color: var(--text-muted);
     font-size: 15px;
 }
 
 .form-group {
     margin-bottom: 1.5rem;
 }
 
 .form-label {
     display: block;
     margin-bottom: 6px;
     font-size: 14px;
     font-weight: 500;
 }
 
 .form-control {
     width: 100%;
     padding: 12px 16px;
     background: var(--input-bg);
     border: 1px solid var(--border);
     border-radius: 8px;
     color: var(--text-main);
     font-size: 15px;
     font-family: inherit;
     transition: all 0.2s ease;
 }
 
 .form-control:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px var(--input-focus);
     background: var(--surface);
 }
 
 .form-utils {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.5rem;
     font-size: 14px;
 }
 
 .remember-me {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
 .remember-me input[type="checkbox"] {
     width: 16px;
     height: 16px;
     accent-color: var(--primary);
     cursor: pointer;
 }
 
 .forgot-password {
     color: var(--primary);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.2s;
 }
 
 .forgot-password:hover {
     color: var(--primary-dark);
     text-decoration: underline;
 }
 
 .btn {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     padding: 12px 24px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: inherit;
 }
 
 .btn-primary {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
     box-shadow: 0 4px 6px rgba(12, 161, 166, 0.2);
 }
 
 .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 6px 12px rgba(12, 161, 166, 0.3);
 }
 
 /* Theme Toggle Button */
 .theme-toggle {
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     background: var(--input-bg);
     border: 1px solid var(--border);
     color: var(--text-main);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s;
     z-index: 10;
 }
 
 .theme-toggle:hover {
     background: var(--border);
 }

 /* Utility alerts */
 .alert {
     padding: 12px 16px;
     border-radius: 8px;
     margin-bottom: 1.5rem;
     font-size: 14px;
     display: flex;
     align-items: center;
 }
 .alert-error {
     background: rgba(239, 68, 68, 0.1);
     color: var(--danger);
     border: 1px solid rgba(239, 68, 68, 0.2);
 }
 .alert-success {
     background: rgba(34, 197, 94, 0.1);
     color: var(--success);
     border: 1px solid rgba(34, 197, 94, 0.2);
 }