body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.login-container{align-items:center;background:#f8f8f8;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;border:2px solid #000;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:400px;padding:40px;width:100%}.login-header{margin-bottom:30px}.login-header h1{color:#304878;font-size:2rem;font-weight:700;margin-bottom:8px}.login-header p{color:#525252;font-size:.875rem}.login-form{gap:20px}.form-group{gap:8px}.form-group label{color:#171717;font-size:.875rem;font-weight:600}.form-group input{background:#fff;border:2px solid #d4d4d4;border-radius:8px;color:#171717;font-size:1rem;padding:12px 16px;transition:border-color .2s,box-shadow .2s}.form-group input:focus{border-color:#304878}.form-group input:disabled{background-color:#f9fafb;cursor:not-allowed;opacity:.6}.login-button{background:linear-gradient(135deg,#304878,#7890a8);border:none;border-radius:8px;box-shadow:0 4px 14px 0 #30487826;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:14px 20px;transition:transform .2s,box-shadow .2s}.login-button:hover:not(:disabled){box-shadow:0 10px 15px -3px #0000001a;transform:translateY(-2px)}.login-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.error-message{background-color:#ffebee;border:1px solid #ff3b30;border-radius:8px;color:#ff3b30;font-size:.875rem;font-weight:500;padding:12px 16px;text-align:left}.login-footer{margin-top:20px}.login-footer p{color:#525252;font-size:.75rem}.loading-spinner{border:2px solid #ffffff4d;border-radius:9999px;border-top-color:#fff;height:20px;width:20px}@media (max-width:768px){.login-container{padding:16px}.login-card{padding:32px 24px}.login-header h1{font-size:1.5rem}}@media (max-width:480px){.login-container{padding:12px}.login-card{padding:24px 16px}.login-header h1{font-size:1.25rem}.form-group input{padding:10px 12px}.login-button{padding:12px 16px}}.form-group input:focus,.login-button:focus{outline:2px solid #304878;outline-offset:2px}@media (prefers-contrast:high){.form-group input{border-width:3px}.login-button{border:2px solid #000}}@media (prefers-reduced-motion:reduce){.login-button:hover{transform:none}.loading-spinner{animation:none}}:root{--color-accent:#f0a818;--color-accent-hover:#d89410}.bg-accent{background-color:#f0a818}.text-accent{color:#f0a818}.dashboard-container{font-family:var(--font-family)}.dashboard-container,.error-container{background:var(--color-bg-main);min-height:100vh;position:relative}.error-container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xl);text-align:center;z-index:1}.header-logo:active{transform:scale(.98)}.logo-image{height:100px}.header-left{align-items:center}.header-text{display:flex;flex-direction:column;gap:.25rem}.header-logo{flex-shrink:0}.dashboard-title{color:#304878;font-size:1.5rem;font-weight:700;margin:0}.dashboard-subtitle{color:#525252;font-size:.875rem;margin:0}.school-year-selector{align-items:center;background:#eff6ff;background:var(--color-primary-bg,#eff6ff);border:1px solid #3b82f6;border:1px solid var(--color-primary,#3b82f6);border-radius:8px;display:flex;gap:.5rem;padding:.375rem .75rem}.school-year-selector label{color:#3b82f6;color:var(--color-primary,#3b82f6);font-size:.8125rem;font-weight:600;white-space:nowrap}.school-year-dropdown{background:#fff;border:1px solid #d1d5db;border:1px solid var(--color-border,#d1d5db);border-radius:6px;color:#1f2937;color:var(--color-text-primary,#1f2937);cursor:pointer;font-size:.875rem;font-weight:600;outline:none;padding:.375rem .625rem}.school-year-dropdown:focus{border-color:#3b82f6;border-color:var(--color-primary,#3b82f6);box-shadow:0 0 0 2px #3b82f626}.school-year-dropdown option{background:#fff;color:#1f2937}.user-avatar.small,.user-name{font-size:var(--font-size-sm)}.user-name{color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.user-role{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.btn-logout svg{transition:transform var(--transition-base)}.btn-logout:hover svg{transform:translateX(2px)}.dashboard-nav{background:var(--color-bg-white);border-bottom:1px solid var(--color-gray-200);box-shadow:var(--shadow-xs);position:relative;z-index:1}.nav-container{display:flex;gap:0;margin:0 auto;max-width:var(--container-max-width);overflow-x:auto;padding:0 var(--spacing-xl);scrollbar-color:var(--color-gray-300) #0000;scrollbar-width:thin}.nav-container::-webkit-scrollbar{height:4px}.nav-container::-webkit-scrollbar-track{background:#0000}.nav-container::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:var(--radius-full)}.nav-tab{align-items:center;background:none;border:none;border-bottom:3px solid #0000;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);position:relative;transition:all var(--transition-base);white-space:nowrap}.nav-tab.active,.nav-tab:hover{background:var(--color-bg-light);color:var(--color-primary)}.nav-tab.active{border-bottom-color:var(--color-accent);font-weight:var(--font-weight-semibold)}.nav-icon{font-size:var(--font-size-lg)}.nav-label{font-weight:inherit}.content-container{max-width:var(--container-max-width)}.section-card{margin-bottom:var(--spacing-2xl);padding:var(--spacing-2xl)}.section-header{gap:var(--spacing-lg)}.section-header h2{margin-bottom:var(--spacing-xs)}.section-header p{color:var(--color-text-secondary);font-size:var(--font-size-base)}.stats-grid{grid-gap:var(--spacing-xl);display:grid;gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:var(--spacing-2xl)}.stat-card{align-items:center;background:var(--color-bg-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;gap:var(--spacing-lg);padding:var(--spacing-xl);transition:all var(--transition-base)}.stat-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;font-size:var(--font-size-2xl);height:56px;justify-content:center;width:56px}.stat-icon.primary{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);box-shadow:var(--shadow-primary)}.stat-icon.success{background:linear-gradient(135deg,var(--color-success) 0,#22c55e 100%);box-shadow:var(--shadow-success)}.stat-icon.warning{background:linear-gradient(135deg,var(--color-warning) 0,#fb923c 100%);box-shadow:var(--shadow-md)}.stat-icon.danger{background:linear-gradient(135deg,var(--color-danger) 0,#f87171 100%);box-shadow:var(--shadow-danger)}.stat-icon.accent{background:linear-gradient(135deg,var(--color-accent) 0,var(--color-accent-hover) 100%);box-shadow:var(--shadow-accent)}.stat-content{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs)}.stat-label{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);letter-spacing:.05em;text-transform:uppercase}.stat-value{color:var(--color-text-primary);font-family:var(--font-mono);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:1}.stat-change{align-items:center;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-xs)}.stat-change.positive{color:var(--color-success)}.stat-change.negative{color:var(--color-danger)}.btn-primary:active{transform:translateY(0)}.btn-accent{align-items:center;background:var(--color-accent);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-accent);color:var(--color-dark);cursor:pointer;display:inline-flex;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-md) var(--spacing-xl);transition:all var(--transition-base)}.btn-accent:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-sm{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}.btn-lg{font-size:var(--font-size-lg);padding:var(--spacing-lg) var(--spacing-2xl)}.data-table{background:var(--color-bg-white);border:1px solid var(--color-gray-200)}.table-wrapper{overflow-x:auto}.data-table table{border-collapse:collapse;width:100%}.data-table thead{background:var(--color-primary);color:var(--color-text-inverse)}.data-table th{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;padding:var(--spacing-md) var(--spacing-lg);text-transform:uppercase;white-space:nowrap}.data-table tbody tr{border-bottom:1px solid var(--color-gray-200);transition:all var(--transition-fast)}.data-table tbody tr:last-child{border-bottom:none}.data-table tbody tr:hover{background:var(--color-bg-light)}.data-table td{color:var(--color-text-primary);font-size:var(--font-size-sm);padding:var(--spacing-md) var(--spacing-lg)}.badge{align-items:center;border-radius:var(--radius-md);display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);gap:var(--spacing-xs);letter-spacing:.05em;padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase}.badge.success{background:var(--color-success-light);border:1px solid var(--color-success);color:var(--color-success)}.badge.warning{background:var(--color-warning-light);border:1px solid var(--color-warning);color:var(--color-warning)}.badge.danger{background:var(--color-danger-light);border:1px solid var(--color-danger);color:var(--color-danger)}.badge.info{background:var(--color-info-light);border:1px solid var(--color-info);color:var(--color-info)}.badge.neutral{background:var(--color-gray-100);border:1px solid var(--color-gray-300);color:var(--color-gray-700)}.modal-content{max-width:1024px}.modal-title{color:var(--color-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.modal-close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-sm);transition:all var(--transition-fast)}.modal-close:hover{background:var(--color-danger-light);color:var(--color-danger)}.modal-body,.modal-footer{padding:var(--spacing-xl)}.modal-footer{background:var(--color-bg-light);border-top:1px solid var(--color-gray-200);display:flex;gap:var(--spacing-md);justify-content:flex-end}.form-label{display:block;margin-bottom:var(--spacing-sm)}.form-input,.form-select,.form-textarea{background:var(--color-bg-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-md);transition:all var(--transition-base);width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3048781a;outline:none}.form-textarea{min-height:100px;resize:vertical}@media (max-width:1024px){.content-container,.header-content,.nav-container{padding:0 var(--spacing-lg)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}@media (max-width:768px){.header-content{flex-wrap:wrap;gap:var(--spacing-md)}.header-logo{order:1}.header-left{flex:0 0 100%;order:2}.header-right{flex:1 1;justify-content:flex-end;order:3}.dashboard-title{font-size:var(--font-size-xl)}.user-info{display:none}.stats-grid{gap:var(--spacing-md);grid-template-columns:1fr}.nav-tab{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}.section-card{padding:var(--spacing-lg)}.modal-content{margin:var(--spacing-sm)}}@media (max-width:720px){.logo-image{height:120px}.dashboard-title{font-size:var(--font-size-lg)}.title-icon{font-size:var(--font-size-xl)}.stat-value{font-size:var(--font-size-2xl)}.btn-accent,.btn-primary,.btn-secondary{width:100%}}:root{--color-primary:#3b82f6;--color-success:#22c55e;--color-warning:#f59e0b;--color-danger:#ef4444;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--radius-sm:0.375rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--font-mono:ui-monospace,monospace}.payments-section{display:flex;flex-direction:column;gap:1.5rem;gap:var(--spacing-lg);padding:1rem;padding:var(--spacing-md);width:100%}.section-card{background:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);padding:2rem}.section-header{flex-wrap:wrap;gap:1rem;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.section-header h2{color:#111827;color:var(--color-gray-900);margin:0 0 var(--spacing-xs)}.section-header p{color:#4b5563;color:var(--color-gray-600);font-size:.875rem}.loading-container{gap:1.5rem;gap:var(--spacing-lg);padding:3rem;padding:var(--spacing-2xl)}.loading-spinner{border:4px solid #e5e7eb;border-top-color:#3b82f6;border:4px solid var(--color-gray-200);border-radius:50%}.loading-text{color:#4b5563;color:var(--color-gray-600);font-weight:500}.header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem;margin-bottom:var(--spacing-lg)}.header h2{color:#111827;color:var(--color-gray-900);font-size:1.25rem;font-weight:700}.header select{background:#fff;border:1px solid #d1d5db;border:1px solid var(--color-gray-300);border-radius:.5rem;border-radius:var(--radius-md);color:#374151;color:var(--color-gray-700);cursor:pointer;font-size:.875rem;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md)}.header-actions{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;gap:var(--spacing-md)}.search-input{border:1px solid #d1d5db;border:1px solid var(--color-gray-300);border-radius:.5rem;border-radius:var(--radius-md);font-size:.875rem;min-width:250px;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md);transition:border-color .2s ease}.search-input:focus{border-color:var(--color-primary)}.filter-select{background:#fff;border:1px solid #d1d5db;border:1px solid var(--color-gray-300);border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;font-size:.875rem;min-width:150px;padding:.5rem 1rem;padding:var(--spacing-sm) var(--spacing-md)}.btn-export,.btn-primary,.btn-secondary{align-items:center;border:none;border-radius:.5rem;border-radius:var(--radius-md);cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.25rem;gap:var(--spacing-xs);padding:.5rem 1.5rem;padding:var(--spacing-sm) var(--spacing-lg);transition:all .2s ease}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-secondary{background:#e5e7eb;background:var(--color-gray-200);color:#374151;color:var(--color-gray-700)}.btn-secondary:hover:not(:disabled){background:#d1d5db;background:var(--color-gray-300);transform:translateY(-1px)}.btn-export{background:#22c55e;background:var(--color-success);color:#fff}.btn-export:hover:not(:disabled){background:#16a34a;box-shadow:0 4px 6px -1px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-export:disabled,.btn-primary:disabled,.btn-secondary:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.create-payment-container{margin:1.5rem 0;margin:var(--spacing-lg) 0;padding:2rem 0;padding:var(--spacing-xl) 0}.btn-create-payment-large,.create-payment-container{align-items:center;display:flex;justify-content:center}.btn-create-payment-large{background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:16px;box-shadow:0 4px 20px #3b82f64d;color:#fff;cursor:pointer;font-size:1.125rem;font-weight:700;gap:1rem;min-width:300px;padding:1.25rem 2.5rem;transition:all .3s ease}.btn-create-payment-large:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 8px 30px #3b82f666;transform:translateY(-4px)}.btn-create-payment-large:active:not(:disabled){transform:translateY(-2px)}.btn-create-payment-large:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.btn-icon-large{align-items:center;display:flex;font-size:1.5rem}.filters-section{background:#f9fafb;background:var(--color-gray-50);border:1px solid #e5e7eb;border:1px solid var(--color-gray-200);border-radius:.75rem;border-radius:var(--radius-lg);margin-bottom:1.5rem;margin-bottom:var(--spacing-lg);padding:1.5rem;padding:var(--spacing-lg)}.filters-header{justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-md)}.filters-header,.filters-title{align-items:center;display:flex}.filters-title{color:#374151;color:var(--color-gray-700);font-weight:600;gap:.25rem;gap:var(--spacing-xs)}.filters-badge{align-items:center;background:#3b82f6;background:var(--color-primary);border-radius:10px;color:#fff;display:inline-flex;font-size:.75rem;font-weight:600;height:20px;justify-content:center;min-width:20px;padding:0 6px}.filters-grid{grid-gap:1rem;grid-gap:var(--spacing-md);display:grid;gap:1rem;gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1rem;margin-bottom:var(--spacing-md)}.filter-group{display:flex;flex-direction:column;gap:.25rem;gap:var(--spacing-xs)}.filter-label{color:#4b5563;color:var(--color-gray-600);font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.range-inputs{align-items:center;display:flex;gap:.5rem;gap:var(--spacing-sm)}.range-separator{color:#9ca3af;color:var(--color-gray-400);font-weight:600}.filters-actions{border-top:1px solid #e5e7eb;border-top:1px solid var(--color-gray-200);display:flex;gap:1rem;gap:var(--spacing-md);justify-content:flex-end;padding-top:1rem;padding-top:var(--spacing-md)}.table-container{border-radius:.75rem;border-radius:var(--radius-lg)}.results-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-bottom:var(--spacing-md);padding:.5rem 0;padding:var(--spacing-sm) 0}.results-count{color:#111827;color:var(--color-gray-900);font-weight:600}.results-info{color:#4b5563;color:var(--color-gray-600);font-size:.875rem;font-weight:500}.data-table{background:#fff;border-collapse:collapse;border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);overflow:hidden;width:100%}.data-table th{background:#f9fafb;background:var(--color-gray-50);border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--color-gray-200);color:#374151;color:var(--color-gray-700);font-size:.875rem;font-weight:600;text-align:left}.data-table td,.data-table th{padding:1rem;padding:var(--spacing-md)}.data-table td{border-bottom:1px solid #f3f4f6;border-bottom:1px solid var(--color-gray-100);vertical-align:middle}.data-table tr:hover{background:#f9fafb;background:var(--color-gray-50)}.overdue-row{background:#ef44440d}.overdue-row:hover{background:#ef44441a}.table-user{align-items:center;display:flex;gap:.5rem;gap:var(--spacing-sm)}.user-avatar{background:#3b82f6;background:var(--color-primary);border-radius:50%;color:#fff;font-size:1rem;font-weight:600}.user-avatar.small{font-size:.875rem;height:32px;width:32px}.user-name{color:#111827;color:var(--color-gray-900);font-weight:600}.user-email{color:#6b7280;color:var(--color-gray-500);font-size:.875rem}.amount{color:#111827;color:var(--color-gray-900);font-family:ui-monospace,monospace;font-family:var(--font-mono);font-weight:600}.status-badge{border-radius:.375rem;border-radius:var(--radius-sm);letter-spacing:.025em;padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm)}.status-pending{background:#f59e0b1a;border:1px solid #f59e0b33;color:#d97706}.status-paid{background:#22c55e1a;border:1px solid #22c55e33}.status-overdue{background:#ef44441a;border:1px solid #ef444433}.status-cancelled{background:#6b72801a;border:1px solid #6b728033}.details-btn{border-radius:.5rem;border-radius:var(--radius-md);color:var(--color-primary);padding:var(--spacing-sm)}.details-btn:hover{background:var(--color-primary);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm)}.table-actions{display:flex;flex-wrap:wrap;gap:.25rem;gap:var(--spacing-xs)}.btn-small{border:none;border-radius:.375rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.75rem;font-weight:600;padding:.25rem .5rem;padding:var(--spacing-xs) var(--spacing-sm);transition:all .2s ease;white-space:nowrap}.btn-small.success{background:#22c55e;background:var(--color-success);color:#fff}.btn-small.success:hover{background:#16a34a;transform:translateY(-1px)}.btn-small.secondary{background:#e5e7eb;background:var(--color-gray-200);color:#374151;color:var(--color-gray-700)}.btn-small.secondary:hover{background:#d1d5db;background:var(--color-gray-300);transform:translateY(-1px)}.btn-small.primary{background:#3b82f6;background:var(--color-primary);color:#fff}.btn-small.primary:hover{background:#2563eb;transform:translateY(-1px)}.btn-small:disabled{cursor:not-allowed;opacity:.6;transform:none!important}.empty-state{color:#6b7280;color:var(--color-gray-500);padding:3rem 1.5rem;padding:var(--spacing-2xl) var(--spacing-lg)}.empty-icon{margin-bottom:1.5rem}@media (max-width:768px){.header-actions{align-items:stretch;flex-direction:column;gap:.5rem;gap:var(--spacing-sm)}.filter-select,.search-input{width:100%}.filters-grid{grid-template-columns:1fr}.range-inputs{flex-direction:column}.range-separator{display:none}.filters-actions{align-items:stretch;flex-direction:column;gap:1rem;gap:var(--spacing-md)}.table-actions{flex-direction:column;gap:.25rem;gap:var(--spacing-xs)}.btn-small{text-align:center;width:100%}.data-table{font-size:.875rem}.data-table td,.data-table th{padding:.5rem;padding:var(--spacing-sm)}.details-btn{height:32px;min-width:32px}.user-avatar.small{font-size:.75rem;height:28px;width:28px}.btn-create-payment-large{font-size:1rem;min-width:250px;padding:1rem 2rem}.create-payment-container{padding:1rem 0;padding:var(--spacing-md) 0}}@media (max-width:480px){.payments-section{padding:.5rem;padding:var(--spacing-sm)}.section-card{padding:1rem;padding:var(--spacing-md)}.btn-create-payment-large{min-width:100%;padding:1rem 1.5rem}}.summary-cards{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2rem}.summary-card{border-radius:12px;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s}.summary-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.summary-card.active{background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.summary-card.inactive{background:linear-gradient(135deg,#fff3e0,#ffe0b2)}.summary-icon{font-size:2.5rem;line-height:1}.summary-content h3{color:#2c3e50;font-size:2rem;font-weight:700;margin:0}.summary-content p{color:#7f8c8d;font-size:.9rem;margin:.25rem 0 0}.action-button-row{display:flex;justify-content:flex-end;margin-bottom:1.5rem}.btn-register-student{align-items:center;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:12px;box-shadow:0 4px 12px #22c55e4d;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;padding:.875rem 1.5rem;transition:all .2s ease}.btn-register-student:hover{box-shadow:0 6px 20px #22c55e66;transform:translateY(-2px)}.btn-register-student:active{transform:translateY(0)}.estudiantes-section .section-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:1.5rem}.section-header{margin-bottom:1.5rem}.section-header h2{color:#2c3e50;font-size:1.5rem;font-weight:700;margin:0 0 .25rem}.section-header p{color:#7f8c8d;font-size:.9rem;margin:0}.controls-row{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.search-container{flex:1 1;min-width:300px;position:relative}.search-input{border:1px solid #ddd;border-radius:8px;font-size:.95rem;padding:.75rem 2.5rem .75rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%}.search-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.clear-search-btn{align-items:center;background:#e74c3c;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:.8rem;height:24px;justify-content:center;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);transition:background .2s;width:24px}.clear-search-btn:hover{background:#c0392b}.export-btn{background:#27ae60;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:600;padding:.75rem 1.5rem;transition:background .2s,transform .2s;white-space:nowrap}.export-btn:hover{background:#229954;transform:translateY(-1px)}.results-summary{color:#7f8c8d;font-size:.9rem;margin-bottom:1rem}.table-container{border:1px solid #e0e0e0;border-radius:8px;margin-bottom:1.5rem;overflow-x:auto}.students-table{border-collapse:collapse;font-size:.9rem;width:100%}.students-table thead{background:#f8f9fa;position:-webkit-sticky;position:sticky;top:0;z-index:10}.students-table th{border-bottom:2px solid #e0e0e0;color:#2c3e50;font-weight:600;padding:1rem;text-align:left;white-space:nowrap}.students-table th.sortable{cursor:pointer;transition:background .2s;-webkit-user-select:none;user-select:none}.students-table th.sortable:hover{background:#e9ecef}.students-table th.text-center{text-align:center}.students-table th.text-right{text-align:right}.students-table tbody tr{border-bottom:1px solid #e0e0e0;transition:background .2s}.students-table tbody tr:hover{background:#f8f9fa}.students-table td{padding:1rem;vertical-align:middle}.students-table td.text-center{text-align:center}.students-table td.text-right{text-align:right}.students-table td.no-results{color:#95a5a6;font-style:italic;padding:3rem;text-align:center}.student-cell{gap:.75rem}.student-avatar,.student-cell{align-items:center;display:flex}.student-avatar{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;flex-shrink:0;font-size:1.1rem;font-weight:700;height:40px;justify-content:center;width:40px}.level-badge{background:#e3f2fd;border-radius:12px;color:#1976d2;display:inline-block;font-size:.85rem;font-weight:500;padding:.25rem .75rem}.email-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{border-radius:12px;display:inline-block;font-size:.85rem;font-weight:600;padding:.25rem .75rem}.badge-pending{background:#fff3cd;color:#856404}.badge-overdue{background:#f8d7da;color:#721c24}.badge-ok{background:#d4edda;color:#155724}.badge-new{background:#dbeafe;color:#1e40af}.badge-returning{background:#e0e7ff;color:#3730a3}.amount-cell{color:#2c3e50;white-space:nowrap}.pagination{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.5rem}.pagination-btn{background:#fff;border:1px solid #ddd;border-radius:6px;color:#2c3e50;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .2s}.pagination-btn:hover:not(:disabled){background:#3498db;border-color:#3498db;color:#fff}.pagination-btn:disabled{cursor:not-allowed;opacity:.5}.pagination-numbers{align-items:center;display:flex;gap:.25rem}.pagination-number{background:#fff;border:1px solid #ddd;border-radius:6px;color:#2c3e50;cursor:pointer;font-size:.9rem;min-width:40px;padding:.5rem .75rem;transition:all .2s}.pagination-number:hover{background:#ecf0f1}.pagination-number.active{background:#3498db;border-color:#3498db;color:#fff;font-weight:600}.pagination-ellipsis{color:#7f8c8d;padding:.5rem .25rem}@media (max-width:1200px){.students-table{font-size:.85rem}.students-table td,.students-table th{padding:.75rem .5rem}.student-avatar{font-size:1rem;height:35px;width:35px}}@media (max-width:768px){.summary-cards{grid-template-columns:1fr}.controls-row{flex-direction:column}.search-container{min-width:100%}.export-btn{width:100%}.table-container{border-radius:0;margin-left:-1.5rem;margin-right:-1.5rem}.students-table{font-size:.8rem}.students-table td,.students-table th{padding:.5rem .25rem}.email-cell{max-width:120px}.pagination{font-size:.85rem}.pagination-number{min-width:35px;padding:.4rem .6rem}}.student-summary-tab{padding:1rem;width:100%}.search-container{margin-bottom:2rem}.search-form{width:100%}.search-input-group{align-items:center;display:flex;gap:1rem}.search-input{border:2px solid #e5e7eb;border-radius:12px;flex:1 1;font-size:1rem;padding:.875rem 1.25rem;transition:all .3s ease}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.search-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.btn-new-search,.btn-search{border:none;border-radius:12px;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 1.75rem;transition:all .3s ease;white-space:nowrap}.btn-search{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.btn-search:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f64d;transform:translateY(-2px)}.btn-search:disabled{cursor:not-allowed;opacity:.6}.btn-new-search{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff}.btn-new-search:hover{background:linear-gradient(135deg,#4b5563,#374151);box-shadow:0 4px 12px #6b72804d;transform:translateY(-2px)}.error-message{background:#fee2e2;border:1px solid #fecaca;border-radius:12px;color:#991b1b;gap:.75rem;margin-bottom:1.5rem;padding:1rem 1.25rem}.error-icon{font-size:1.25rem}.search-results{margin-bottom:2rem}.results-title{color:#1f2937;font-size:1.125rem;font-weight:600;margin-bottom:1rem}.results-list{display:flex;flex-direction:column;gap:.75rem}.result-item{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;display:flex;gap:1rem;padding:1rem 1.25rem;transition:all .3s ease}.result-item:hover{background:#f8fafc;border-color:#3b82f6;box-shadow:0 4px 12px #3b82f626;transform:translateY(-2px)}.result-avatar{align-items:center;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:12px;color:#fff;display:flex;flex-shrink:0;font-size:1.25rem;font-weight:600;height:48px;justify-content:center;width:48px}.result-info{flex:1 1}.result-name{color:#1f2937;font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.result-details{color:#6b7280;display:flex;font-size:.875rem;gap:1rem}.result-code{color:#3b82f6;font-weight:600}.result-arrow{color:#9ca3af;font-size:1.5rem;transition:all .3s ease}.result-item:hover .result-arrow{color:#3b82f6;transform:translateX(4px)}.student-summary-content{display:flex;flex-direction:column;gap:1.5rem}.student-header-card{background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:16px;color:#fff;padding:2rem}.student-header-info{align-items:center;display:flex;gap:1.5rem;margin-bottom:1.5rem}.student-avatar-large{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:16px;display:flex;flex-shrink:0;font-size:2rem;font-weight:600;height:80px;justify-content:center;width:80px}.student-main-info{flex:1 1}.student-name{color:#fff;font-size:2rem;font-weight:700;margin-bottom:.75rem}.student-meta{align-items:center;display:flex;gap:1rem}.status-badge{border-radius:8px;display:inline-block;font-size:.875rem;padding:.375rem .875rem}.status-active{background:#22c55e33;border:1px solid #86efac4d;color:#86efac}.status-inactive{background:#ef444433;border:1px solid #fca5a54d;color:#fca5a5}.student-code-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border-radius:8px;font-size:.875rem;font-weight:600;padding:.375rem .875rem}.student-quick-info{display:flex;flex-wrap:wrap;gap:1rem}.info-pill{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border-radius:10px;display:flex;gap:.5rem;padding:.625rem 1rem}.info-label{font-size:.875rem;opacity:.9}.info-value{font-size:.875rem;font-weight:600}.payment-summary-cards{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.summary-card{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:16px;display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.summary-card:hover{box-shadow:0 8px 24px #0000001a;transform:translateY(-4px)}.summary-card-icon{align-items:center;border-radius:12px;display:flex;flex-shrink:0;font-size:2rem;height:60px;justify-content:center;width:60px}.overdue-card{border-color:#fecaca}.overdue-card .summary-card-icon{background:linear-gradient(135deg,#fee2e2,#fecaca)}.pending-card{border-color:#fcd34d}.pending-card .summary-card-icon{background:linear-gradient(135deg,#fef3c7,#fde68a)}.paid-card{border-color:#86efac}.paid-card .summary-card-icon{background:linear-gradient(135deg,#dcfce7,#bbf7d0)}.total-card{border-color:#93c5fd}.total-card .summary-card-icon{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.summary-card-content{flex:1 1}.summary-card-label{color:#6b7280;font-size:.875rem;margin-bottom:.25rem}.summary-card-value{color:#1f2937;font-size:1.5rem;font-weight:700}.info-section-card{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:1.5rem}.section-subtitle{align-items:center;color:#1f2937;display:flex;font-size:1.25rem;font-weight:600;gap:.5rem;margin-bottom:1.25rem}.info-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.info-item{background:#f9fafb;border-radius:10px;display:flex;flex-direction:column;gap:.25rem;padding:1rem}.info-item-label{color:#6b7280;font-size:.875rem;font-weight:500}.info-item-value{color:#1f2937;font-size:1rem;font-weight:600}.payments-table-container{border:1px solid #e5e7eb;border-radius:10px;overflow-x:auto}.payments-table{border-collapse:collapse;width:100%}.payments-table thead{background:#f9fafb}.payments-table th{border-bottom:2px solid #e5e7eb;color:#6b7280;font-size:.875rem;font-weight:600;padding:1rem;text-align:left}.payments-table td{border-bottom:1px solid #f3f4f6;color:#1f2937;font-size:.875rem;padding:1rem}.payments-table tbody tr:last-child td{border-bottom:none}.payments-table tbody tr:hover{background:#f9fafb}.amount-cell{color:#1f2937;font-weight:600}.payment-status-badge{border-radius:8px;display:inline-block;font-size:.8125rem;font-weight:600;padding:.375rem .75rem;white-space:nowrap}.status-paid{background:#dcfce7;color:#16a34a}.status-pending{background:#fef3c7;color:#ca8a04}.status-overdue{background:#fee2e2;color:#dc2626}.status-cancelled{background:#f3f4f6;color:#6b7280}.payment-method{color:#6b7280;font-size:.875rem}.no-method{color:#9ca3af}.details-btn{align-items:center;background:#3b82f61a;border:1px solid #3b82f633;border-radius:8px;color:#3b82f6;cursor:pointer;display:flex;height:36px;justify-content:center;min-width:36px;padding:.5rem;transition:all .2s ease}.details-btn:hover{background:#3b82f6;box-shadow:0 2px 8px #3b82f64d;color:#fff;transform:translateX(2px)}.details-btn:active{transform:translateX(1px)}.payments-header{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:1.25rem}.btn-register-cash{align-items:center;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:.9375rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;position:relative;transition:all .2s ease}.btn-register-cash:hover:not(:disabled){background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px #22c55e4d;transform:translateY(-2px)}.btn-register-cash:disabled{cursor:not-allowed;opacity:.5;transform:none}.btn-create-payment{align-items:center;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:.9375rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;position:relative;transition:all .2s ease}.btn-create-payment:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #3b82f64d;transform:translateY(-2px)}.btn-create-payment:disabled{cursor:not-allowed;opacity:.5;transform:none}.btn-icon{font-size:1.125rem}.btn-badge{align-items:center;background:#ffffff4d;border-radius:10px;display:inline-flex;font-size:.75rem;font-weight:700;height:20px;justify-content:center;min-width:20px;padding:0 6px}.checkbox-column{text-align:center;width:50px}.payment-checkbox{accent-color:#3b82f6;height:18px;width:18px}.payment-checkbox:disabled{cursor:not-allowed;opacity:.5}.selected-row{background:#eff6ff!important;border-left:3px solid #3b82f6}.selected-row:hover{background:#dbeafe!important}.selection-summary{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;color:#1e40af;font-weight:600;margin-top:1rem;padding:.75rem 1rem;text-align:center}.empty-state{padding:4rem 2rem}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h3{color:#1f2937;font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.empty-state p{color:#6b7280;font-size:1rem}@media (max-width:768px){.search-input-group{flex-direction:column}.btn-new-search,.btn-search{width:100%}.payment-summary-cards{grid-template-columns:1fr}.student-header-info{flex-direction:column;text-align:center}.student-name{font-size:1.5rem}.student-quick-info{justify-content:center}.info-grid{grid-template-columns:1fr}.payments-table-container{font-size:.8125rem}.payments-table td,.payments-table th{padding:.75rem .5rem}}@media (max-width:480px){.student-summary-tab{padding:.5rem}.student-header-card{padding:1.5rem}.student-avatar-large{font-size:1.5rem;height:60px;width:60px}.student-name{font-size:1.25rem}.summary-card{padding:1rem}.summary-card-icon{font-size:1.5rem;height:48px;width:48px}.summary-card-value{font-size:1.25rem}}.modal-overlay{animation:fadeIn .2s ease;padding:20px;z-index:9999}.modal-container{animation:slideUp .3s ease;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;max-height:90vh;max-width:600px;overflow:hidden;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{border-bottom:2px solid #f3f4f6;padding:24px}.modal-header h2{color:#1f2937;font-size:1.5rem;font-weight:700;margin:0}.close-button{align-items:center;background:#f3f4f6;border:none;border-radius:8px;color:#6b7280;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.close-button:hover{background:#e5e7eb;color:#1f2937}.modal-content{flex:1 1;padding:0}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#f3f4f6}.modal-content::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.modal-content::-webkit-scrollbar-thumb:hover{background:#9ca3af}.edit-actions{display:flex;flex-shrink:0;gap:.5rem;margin-left:auto}.btn-cancel,.btn-edit,.btn-save{border:none;border-radius:10px;cursor:pointer;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;transition:all .2s ease;white-space:nowrap}.btn-edit{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:1px solid #ffffff4d;color:#fff}.btn-edit:hover{background:#ffffff59}.btn-save{background:#22c55e;color:#fff}.btn-save:hover:not(:disabled){background:#16a34a;box-shadow:0 2px 8px #22c55e66;transform:translateY(-1px)}.btn-save:disabled{cursor:not-allowed;opacity:.6}.btn-cancel{background:#ffffff26;border:1px solid #ffffff4d;color:#fff}.btn-cancel:hover:not(:disabled){background:#ef44444d}.edit-input{background:#fff;border:1px solid #d1d5db;border-radius:8px;color:#1f2937;font-size:.9375rem;padding:.5rem .75rem;transition:border-color .2s ease;width:100%}.edit-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f626;outline:none}.edit-input-header{background:#fff3;border:1px solid #fff6;color:#fff;font-size:1.5rem;font-weight:700;margin-bottom:.5rem;padding:.5rem .75rem}.edit-input-header::placeholder{color:#fff9}.edit-input-header:focus{border-color:#ffffffb3;box-shadow:0 0 0 2px #ffffff26}.edit-input-header-small{background:#ffffff26;border:1px solid #ffffff4d;color:#fff;font-size:.875rem;font-weight:600;max-width:200px;padding:.375rem .625rem;width:auto}.edit-input-header-small::placeholder{color:#ffffff80}.edit-input-header-small:focus{border-color:#fff9;box-shadow:0 0 0 2px #ffffff1a}.edit-select{background:#fff;border:1px solid #d1d5db;border-radius:8px;color:#1f2937;cursor:pointer;font-size:.9375rem;padding:.5rem .75rem;transition:border-color .2s ease;width:100%}.edit-select:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f626;outline:none}.edit-select-pill{background:#fff3;border:1px solid #fff6;color:#fff;font-size:.875rem;padding:.375rem .5rem;width:auto}.edit-select-pill option,.edit-textarea{background:#fff;color:#1f2937}.edit-textarea{border:1px solid #d1d5db;border-radius:8px;font-family:inherit;font-size:.9375rem;padding:.5rem .75rem;resize:vertical;transition:border-color .2s ease;width:100%}.edit-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f626;outline:none}.edit-toggle-label{align-items:center;cursor:pointer;display:flex;gap:.5rem}.edit-toggle{accent-color:#22c55e;cursor:pointer;height:20px;width:20px}.parent-edit-section{display:flex;flex-direction:column;gap:1rem}.parent-search-container{display:flex;flex-direction:column;gap:.5rem;position:relative}.parent-search-results{background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px #0000001f;left:0;max-height:240px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:50}.parent-result-item{border-bottom:1px solid #f3f4f6;cursor:pointer;display:flex;flex-direction:column;gap:.125rem;padding:.75rem 1rem;transition:background .15s ease}.parent-result-item:last-child{border-bottom:none}.parent-result-item:hover{background:#eff6ff}.parent-result-detail{color:#6b7280;font-size:.8125rem}.spm-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000073;display:flex;inset:0;justify-content:center;padding:var(--spacing-lg);position:fixed;z-index:1000}.spm-modal{background:#fff;border-radius:var(--radius-xl);box-shadow:0 24px 80px #0003;display:flex;flex-direction:column;max-height:90vh;max-width:900px;overflow:hidden;width:100%}.spm-header{align-items:flex-start;border-bottom:1px solid var(--color-gray-200);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-lg)}.spm-title{color:var(--color-gray-900);font-size:1.25rem;font-weight:700;margin:0 0 var(--spacing-xs) 0}.spm-subtitle{color:var(--color-gray-500);font-size:.875rem;margin:0}.spm-header-actions{gap:var(--spacing-sm)}.spm-close,.spm-header-actions{align-items:center;display:flex;flex-shrink:0}.spm-close{background:none;border:none;border-radius:var(--radius-sm);color:var(--color-gray-500);cursor:pointer;justify-content:center;padding:var(--spacing-xs);transition:background .15s}.spm-close:hover{background:#f5f5f7;background:var(--color-gray-100,#f5f5f7);color:var(--color-gray-900)}.spm-edit-service-btn{font-size:.8125rem}.spm-edit-service-btn--active{background:#007aff14;border-color:#007aff33;color:var(--color-primary)}.spm-service-edit-form{background:#007aff08;border-bottom:1px solid var(--color-gray-200)}.spm-field-label--wide{flex:1 1;min-width:220px}.spm-delete-confirm{align-items:center;color:#ff3b30;color:var(--color-danger,#ff3b30);display:flex;flex-wrap:wrap;font-size:.8125rem;gap:var(--spacing-sm);padding:var(--spacing-sm) 0}.spm-delete-confirm-icon{flex-shrink:0}.spm-delete-confirm-actions{display:flex;gap:var(--spacing-sm);margin-left:auto}.spm-field-label--inline{color:var(--color-gray-700);cursor:pointer;flex-direction:row;gap:var(--spacing-sm);padding-top:18px}.spm-banner,.spm-field-label--inline{align-items:center;font-size:.875rem;font-weight:500}.spm-banner{display:flex;flex-shrink:0;gap:var(--spacing-md);justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl)}.spm-banner--success{background:#34c7591a;border-bottom:1px solid #34c75933;color:var(--color-success)}.spm-banner--error{background:#ff3b3014;border-bottom:1px solid #ff3b3026;color:#ff3b30;color:var(--color-danger,#ff3b30)}.spm-banner-dismiss{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex-shrink:0;opacity:.6}.spm-banner-dismiss:hover{opacity:1}.spm-filters{align-items:center;border-bottom:1px solid #f5f5f7;border-bottom:1px solid var(--color-gray-100,#f5f5f7);display:flex;flex-shrink:0;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-xl)}.spm-search{background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);flex:1 1;font-family:var(--font-family);font-size:.875rem;padding:var(--spacing-sm) var(--spacing-md);transition:border-color .2s}.spm-search:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #007aff1a;outline:none}.spm-status-filter{background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-family);font-size:.875rem;padding:var(--spacing-sm) var(--spacing-md)}.spm-refresh-btn{align-items:center;background:none;border:1px solid var(--color-gray-200);border-radius:var(--radius-md);color:var(--color-gray-500);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-sm);transition:all .15s}.spm-refresh-btn:hover{background:#f5f5f7;background:var(--color-gray-100,#f5f5f7);color:var(--color-gray-900)}.spm-toolbar{align-items:center;background:#007aff0a;border-bottom:1px solid #007aff1a;display:flex;flex-shrink:0;flex-wrap:wrap;gap:var(--spacing-md);justify-content:space-between;padding:var(--spacing-sm) var(--spacing-xl)}.spm-toolbar-count{color:var(--color-primary);font-size:.875rem;font-weight:600}.spm-toolbar-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.spm-bulk-form{background:#007aff08;border-bottom:1px solid var(--color-gray-200);flex-shrink:0;padding:var(--spacing-lg) var(--spacing-xl)}.spm-bulk-form--danger{background:#ff3b300a}.spm-bulk-form-title{align-items:center;color:var(--color-gray-900);display:flex;font-size:.9375rem;font-weight:600;gap:var(--spacing-sm);margin:0 0 var(--spacing-xs) 0}.spm-bulk-form--danger .spm-bulk-form-title{color:#ff3b30;color:var(--color-danger,#ff3b30)}.spm-bulk-form-hint{color:var(--color-gray-500);font-size:.8125rem;margin:0 0 var(--spacing-md) 0}.spm-bulk-fields{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);margin-bottom:var(--spacing-md)}.spm-field-label{color:var(--color-gray-700);display:flex;flex-direction:column;font-size:.8125rem;font-weight:500;gap:var(--spacing-xs);min-width:180px}.spm-field-input{background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-family:var(--font-family);font-size:.875rem;padding:var(--spacing-sm) var(--spacing-md);transition:border-color .2s}.spm-field-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #007aff1a;outline:none}.spm-bulk-error{color:#ff3b30;color:var(--color-danger,#ff3b30);font-size:.8125rem;margin:0 0 var(--spacing-sm) 0}.spm-bulk-actions{display:flex;gap:var(--spacing-sm)}.spm-btn{align-items:center;border:1px solid #0000;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-size:.8125rem;font-weight:600;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s;white-space:nowrap}.spm-btn:disabled{cursor:not-allowed;opacity:.5}.spm-btn--primary{background:var(--color-primary);color:#fff}.spm-btn--primary:hover:not(:disabled){background:#0066d6;background:var(--color-primary-hover,#0066d6)}.spm-btn--secondary{background:#007aff14;border-color:#007aff33;color:var(--color-primary)}.spm-btn--secondary:hover:not(:disabled){background:#007aff24}.spm-btn--ghost{background:none;border-color:var(--color-gray-300);color:var(--color-gray-600)}.spm-btn--ghost:hover:not(:disabled){background:#f5f5f7;background:var(--color-gray-100,#f5f5f7);color:var(--color-gray-900)}.spm-btn--danger{background:#ff3b30;background:var(--color-danger,#ff3b30);color:#fff}.spm-btn--danger:hover:not(:disabled){background:#d93025}.spm-btn--danger-outline{background:none;border-color:#ff3b304d;color:#ff3b30;color:var(--color-danger,#ff3b30)}.spm-btn--danger-outline:hover:not(:disabled){background:#ff3b300f}.spm-body{flex:1 1;min-height:0;overflow-y:auto}.spm-empty,.spm-error,.spm-loading{align-items:center;color:var(--color-gray-500);display:flex;flex-direction:column;font-size:.875rem;gap:var(--spacing-md);justify-content:center;padding:3rem;padding:var(--spacing-2xl,3rem)}.spm-error{color:#ff3b30;color:var(--color-danger,#ff3b30)}.spm-spinner{animation:spin .8s linear infinite;border:2px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-primary);height:28px;width:28px}.spm-table{border-collapse:collapse;font-size:.875rem;width:100%}.spm-table thead{background:#f9fafb;background:var(--color-gray-50,#f9fafb);position:-webkit-sticky;position:sticky;top:0;z-index:1}.spm-table th{border-bottom:1px solid var(--color-gray-200);color:var(--color-gray-600);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:var(--spacing-sm) var(--spacing-md);text-align:left;text-transform:uppercase;white-space:nowrap}.spm-th-check{text-align:center;width:40px}.spm-table td{border-bottom:1px solid #f5f5f7;border-bottom:1px solid var(--color-gray-100,#f5f5f7);color:var(--color-gray-900);padding:var(--spacing-sm) var(--spacing-md);vertical-align:middle}.spm-row{transition:background .12s}.spm-row:hover{background:#007aff08}.spm-row--selected{background:#007aff0f}.spm-row--selected:hover{background:#007aff17}.spm-td-check{text-align:center}.spm-checkbox{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-gray-400);cursor:pointer;display:inline-flex;justify-content:center;padding:2px;transition:color .15s}.spm-checkbox:hover,.spm-row--selected .spm-checkbox{color:var(--color-primary)}.spm-td-student{font-weight:500}.spm-td-amount{font-family:var(--font-mono);font-weight:600}.spm-td-date{color:var(--color-gray-600);white-space:nowrap}.spm-td-method{color:var(--color-gray-500);text-transform:capitalize}.spm-td-actions{text-align:right}.spm-row-btn{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--color-gray-400);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--spacing-xs);transition:all .15s}.spm-row-btn:hover{background:#007aff14;color:var(--color-primary)}.spm-status{align-items:center;border-radius:var(--radius-md);display:inline-flex;font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:2px 8px;text-transform:uppercase;white-space:nowrap}.spm-status--paid{background:#34c7591a;color:var(--color-success)}.spm-status--pending{background:#ff95001a;color:var(--color-warning)}.spm-status--overdue{background:#ff3b301a;color:#ff3b30;color:var(--color-danger,#ff3b30)}.spm-status--cancelled{background:#8e8e931a;color:var(--color-secondary)}.spm-footer{align-items:center;background:#f9fafb;background:var(--color-gray-50,#f9fafb);border-top:1px solid var(--color-gray-200);color:var(--color-gray-500);display:flex;flex-shrink:0;font-size:.8125rem;justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl)}.spm-footer-selected{color:var(--color-primary);font-weight:600}@media (max-width:768px){.spm-overlay{align-items:flex-end;padding:var(--spacing-sm)}.spm-modal{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-height:95vh}.spm-bulk-fields,.spm-toolbar{flex-direction:column}.spm-toolbar{align-items:flex-start}}.services-container{padding:var(--spacing-xl)}.services-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:var(--spacing-xl)}.services-header h2{color:var(--color-gray-900);font-size:1.5rem;font-weight:700;margin:0 0 var(--spacing-xs) 0}.services-header p{color:var(--color-gray-600);font-size:1rem;margin:0}.services-stats-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--spacing-xl)}.services-stat-card{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);transition:all .3s ease}.services-stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.services-stat-card.primary{border-left:4px solid var(--color-primary)}.services-stat-card.success{border-left:4px solid var(--color-success)}.services-stat-card.warning{border-left:4px solid var(--color-warning)}.services-stat-card.info{border-left:4px solid #3b82f6}.services-stat-card.revenue{border-left:4px solid #8b5cf6}.services-stat-card.inactive{border-left:4px solid var(--color-secondary)}.services-stat-icon{align-items:center;background:#00000008;border-radius:var(--radius-md);display:flex;font-size:2rem;height:48px;justify-content:center;width:48px}.services-stat-content{flex:1 1;min-width:0;overflow:hidden}.services-stat-value{color:var(--color-gray-900);font-family:var(--font-mono);font-size:1.75rem;font-weight:700;line-height:1.1;margin-bottom:var(--spacing-xs)}.fittext-container{overflow:hidden;width:100%}.fittext-text{color:var(--color-gray-900);display:inline-block;font-family:var(--font-mono);font-weight:700;line-height:1.1;white-space:nowrap}.services-stat-label{color:var(--color-gray-600);font-size:.875rem;font-weight:500}.services-filters{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.services-search-box{flex:1 1;min-width:300px;position:relative}.search-icon{font-size:1.125rem;left:var(--spacing-md);opacity:.5;position:absolute;top:50%;transform:translateY(-50%)}.services-search-input{background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-family:var(--font-family);font-size:.875rem;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 2.75rem;transition:all .2s ease;width:100%}.services-search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #007aff1a;outline:none}.services-filter-group{display:flex;gap:var(--spacing-md)}.services-filter-select{background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-family);font-size:.875rem;min-width:150px;padding:var(--spacing-md) var(--spacing-lg);transition:all .2s ease}.services-filter-select:hover{border-color:var(--color-gray-400)}.services-filter-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #007aff1a;outline:none}.services-table-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-lg);overflow-x:auto;overflow-y:visible}.services-table{border-collapse:collapse;min-width:960px;width:100%}.services-table thead{background:#00000005;border-bottom:2px solid var(--color-gray-200)}.services-table th{color:var(--color-gray-700);font-size:.8125rem;font-weight:600;letter-spacing:.05em;padding:var(--spacing-lg) var(--spacing-md);text-align:left;text-transform:uppercase;white-space:nowrap}.services-table tbody tr{border-bottom:1px solid var(--color-gray-200);transition:background-color .15s ease}.services-table tbody tr:last-child{border-bottom:none}.services-table tbody tr:hover{background:#007aff05}.services-table td{color:var(--color-gray-900);font-size:.875rem;padding:var(--spacing-lg) var(--spacing-md);vertical-align:middle}.service-name-cell{font-weight:500;min-width:200px}.service-name-wrapper{align-items:center;display:flex;gap:var(--spacing-sm)}.service-icon{align-items:center;background:#007aff1a;border-radius:var(--radius-sm);display:flex;font-size:1.25rem;height:32px;justify-content:center;width:32px}.service-name{color:var(--color-gray-900);font-weight:600}.service-type-cell{color:var(--color-gray-600)}.service-price-cell{color:var(--color-success);font-family:var(--font-mono);font-weight:600}.service-duration-cell{color:var(--color-gray-600)}.service-stat-cell{text-align:center}.stat-number{align-items:center;background:#007aff1a;border-radius:var(--radius-sm);color:var(--color-primary);display:inline-flex;font-size:.875rem;height:32px;justify-content:center;min-width:32px;padding:0 var(--spacing-sm)}.service-revenue-cell,.stat-number{font-family:var(--font-mono);font-weight:600}.service-revenue-cell{color:#8b5cf6;text-align:right}.status-badge{align-items:center;border-radius:var(--radius-md);display:inline-flex;font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:var(--spacing-xs) var(--spacing-md);text-transform:uppercase}.status-active{background:#34c7591a;color:var(--color-success)}.status-inactive{background:#8e8e931a;color:var(--color-secondary)}.services-empty-state{padding:var(--spacing-2xl)!important;text-align:center}.empty-state-content{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md)}.empty-icon{opacity:.3}.empty-state-content p{color:var(--color-gray-500);font-size:.875rem;margin:0}.btn-clear-filters{background:var(--color-primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);transition:all .2s ease}.btn-clear-filters:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.services-summary{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;padding:var(--spacing-lg)}.summary-text{color:var(--color-gray-600);font-size:.875rem}.summary-text strong{color:var(--color-gray-900);font-weight:600}.services-loading{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-lg);justify-content:center;min-height:400px}.services-spinner{animation:spin 1s linear infinite;border-top:3px solid var(--color-gray-200);border:3px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-primary);height:48px;width:48px}.services-loading p{color:var(--color-gray-600);font-size:.875rem}.services-error{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-lg);justify-content:center;min-height:400px;text-align:center}.services-error .error-icon{font-size:3rem}.services-error h3{color:var(--color-gray-900);font-size:1.25rem;font-weight:600;margin:0}.services-error p{color:var(--color-gray-600);font-size:.875rem;margin:0;max-width:400px}.btn-retry{background:var(--color-primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:var(--spacing-md) var(--spacing-xl);transition:all .2s ease}.btn-retry:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.service-expand-cell{color:var(--color-gray-500);text-align:center;width:40px}.service-expand-icon{display:inline-block;transition:transform .2s ease}.services-table-row--clickable{cursor:pointer}.services-table-row--expanded{background:#007aff0a}.service-payments-row{background:#007aff05}.service-payments-row:hover{background:#007aff05!important}.service-payments-cell{border-bottom:2px solid var(--color-gray-200);padding:0!important}.service-payments-empty,.service-payments-error,.service-payments-loading{align-items:center;color:var(--color-gray-500);display:flex;font-size:.875rem;gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-xl)}.service-payments-error{color:#ff3b30;color:var(--color-danger,#ff3b30)}.services-spinner--sm{border-width:2px;height:20px;width:20px}.service-payments-panel{padding:var(--spacing-md) var(--spacing-xl) var(--spacing-xl)}.service-payments-panel-header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:space-between;margin-bottom:var(--spacing-md)}.service-payments-panel-title{color:var(--color-gray-700);font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.service-payments-hint{color:var(--color-gray-400);font-size:.75rem}.service-payments-table{background:#fff;border:1px solid var(--color-gray-200);border-collapse:collapse;border-radius:var(--radius-md);font-size:.8125rem;overflow:hidden;width:100%}.service-payments-table thead{background:#f5f5f7;background:var(--color-gray-100,#f5f5f7);border-bottom:1px solid var(--color-gray-200)}.service-payments-table th{color:var(--color-gray-600);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:var(--spacing-sm) var(--spacing-md);text-align:left;text-transform:uppercase;white-space:nowrap}.service-payments-table tbody tr{border-bottom:1px solid #f5f5f7;border-bottom:1px solid var(--color-gray-100,#f5f5f7);transition:background-color .15s ease}.service-payments-table tbody tr:last-child{border-bottom:none}.service-payment-row{cursor:pointer}.service-payment-row:hover{background:#007aff0d}.service-payments-table td{color:var(--color-gray-900);padding:var(--spacing-sm) var(--spacing-md);vertical-align:middle}.svc-payment-student{font-weight:500}.svc-payment-amount{color:var(--color-gray-800);font-family:var(--font-mono);font-weight:600}.svc-payment-date{color:var(--color-gray-600);white-space:nowrap}.svc-payment-method{color:var(--color-gray-500);text-transform:capitalize}.status-badge--paid{background:#34c7591a;color:var(--color-success)}.status-badge--pending{background:#ff95001a;color:var(--color-warning)}.status-badge--overdue{background:#ff3b301a;color:#ff3b30;color:var(--color-danger,#ff3b30)}.status-badge--cancelled{background:#8e8e931a;color:var(--color-secondary)}.service-manage-cell{padding-right:var(--spacing-md)!important;text-align:right;width:110px}.service-manage-btn{background:#007aff0f;border:1px solid #007aff4d;border-radius:var(--radius-md);color:var(--color-primary);cursor:pointer;font-family:var(--font-family);font-size:.75rem;font-weight:600;padding:var(--spacing-xs) var(--spacing-md);transition:all .15s;white-space:nowrap}.service-manage-btn:hover{background:#007aff1f;border-color:var(--color-primary)}@media (max-width:1200px){.services-stats-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.services-container{padding:var(--spacing-lg)}.services-stats-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}.services-filters{flex-direction:column;gap:var(--spacing-md)}.services-search-box{min-width:100%}.services-filter-group{flex-direction:column;width:100%}.services-filter-select{width:100%}.services-table td,.services-table th{font-size:.8125rem;padding:var(--spacing-md) var(--spacing-sm)}}@media (max-width:480px){.services-stats-grid{grid-template-columns:1fr}.services-stat-card{padding:var(--spacing-md)}.services-stat-icon{font-size:1.5rem;height:40px;width:40px}.services-stat-value{font-size:1.5rem}.services-table td,.services-table th{font-size:.75rem;padding:var(--spacing-sm)}.service-name-cell{min-width:150px}}.parent-login{align-items:center;background:var(--color-bg-main);display:flex;font-family:var(--font-family);justify-content:center;min-height:100vh;padding:var(--spacing-xl);position:relative}.login-container{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:420px;position:relative;width:100%;z-index:1}.login-card{animation:slideIn .6s ease-out;background:var(--color-bg-white);border:2px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:var(--spacing-2xl)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.login-header{margin-bottom:var(--spacing-2xl);text-align:center}.academy-logo{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.logo-icon{animation:float 3s ease-in-out infinite;font-size:3rem}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.academy-logo h1{color:var(--color-primary);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin:0}.login-subtitle{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-normal);margin:0}.login-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.error-message{animation:shake .5s ease-in-out;background:var(--color-danger-light);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-sm);padding:var(--spacing-md)}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.error-icon{font-size:var(--font-size-base)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-label{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.input-wrapper{align-items:center;display:flex;position:relative}.input-icon{color:var(--color-gray-400);left:var(--spacing-md);pointer-events:none;position:absolute;z-index:1}.form-input{background:var(--color-bg-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 3rem;transition:all var(--transition-base);width:100%}.form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3048781a;outline:none}.form-input::placeholder{color:var(--color-text-disabled)}.form-actions{margin-top:var(--spacing-md)}.btn-login{align-items:center;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-primary);color:var(--color-text-inverse);cursor:pointer;display:flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-lg);transition:all var(--transition-base);width:100%}.btn-login:hover:not(:disabled){box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-login:disabled{cursor:not-allowed;opacity:.6;transform:none}.loading-spinner-small{animation:spin 1s linear infinite;border:2px solid #ffffff4d;border-radius:var(--radius-full);border-top-color:#fff;height:20px;width:20px}.form-footer{margin-top:var(--spacing-lg);text-align:center}.forgot-link{color:var(--color-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-decoration:none;transition:color var(--transition-base)}.forgot-link:hover{color:var(--color-primary-hover);text-decoration:underline}.login-help{background:var(--color-bg-white);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:var(--spacing-lg);padding:var(--spacing-xl)}.help-section h3{align-items:center;color:var(--color-primary);display:flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.help-section p{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.contact-info{flex-direction:column}.contact-info,.contact-link{display:flex;gap:var(--spacing-sm)}.contact-link{align-items:center;border:1px solid #0000;border-radius:var(--radius-sm);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-sm);text-decoration:none;transition:all var(--transition-base)}.contact-link:hover{background:var(--color-bg-light);border-color:var(--color-primary-light);color:var(--color-primary);transform:translateX(2px)}.login-footer{color:var(--color-text-secondary);font-size:var(--font-size-sm);text-align:center}.login-footer p{margin-bottom:var(--spacing-sm)}.footer-links{display:flex;gap:var(--spacing-lg);justify-content:center}.footer-links a{color:var(--color-text-secondary);text-decoration:none;transition:color var(--transition-base)}.footer-links a:hover{color:var(--color-primary);text-decoration:underline}@media (max-width:768px){.parent-login{padding:var(--spacing-lg)}.login-container{max-width:100%}.login-card{padding:var(--spacing-xl)}.academy-logo h1{font-size:var(--font-size-2xl)}.logo-icon{font-size:2.5rem}.form-input{padding:var(--spacing-md) var(--spacing-sm) var(--spacing-md) 2.5rem}.input-icon{left:var(--spacing-sm)}}@media (max-width:480px){.parent-login{padding:var(--spacing-md)}.login-card{padding:var(--spacing-lg)}.academy-logo{gap:var(--spacing-sm)}.academy-logo h1{font-size:var(--font-size-xl)}.logo-icon{font-size:2rem}.login-subtitle{font-size:var(--font-size-sm)}.login-help{padding:var(--spacing-lg)}.contact-info{gap:var(--spacing-xs)}.footer-links{flex-direction:column;gap:var(--spacing-sm)}}.btn-login:focus,.contact-link:focus,.forgot-link:focus,.form-input:focus{outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-contrast:high){.form-input{border-width:3px}.form-input:focus{border-width:4px}.btn-login{border:2px solid var(--color-border)}}@media (prefers-reduced-motion:reduce){.error-message,.login-card,.logo-icon{animation:none}.btn-login:hover,.contact-link:hover{transform:none}}@media print{.login-card,.login-help,.parent-login{background:var(--color-bg-white)}.login-card,.login-help{border:1px solid var(--color-gray-200);box-shadow:none}.btn-login{background:var(--color-gray-800)}}:root{--color-primary:#304878;--color-primary-hover:#253658;--color-primary-light:#7890a8;--color-accent:#e4d685;--color-accent-hover:#e4d05a;--color-dark:#181848;--color-border:#000;--color-bg-main:#f8f8f8;--color-bg-white:#fff;--color-bg-light:#fafafa;--color-bg-dark:#f0f0f0;--color-success:#34c759;--color-success-light:#e8f5e9;--color-warning:#ff9500;--color-warning-light:#fff3e0;--color-danger:#ff3b30;--color-danger-light:#ffebee;--color-info:#007aff;--color-info-light:#e3f2fd;--color-gray-50:#fafafa;--color-gray-100:#f5f5f5;--color-gray-200:#e5e5e5;--color-gray-300:#d4d4d4;--color-gray-400:#a3a3a3;--color-gray-500:#737373;--color-gray-600:#525252;--color-gray-700:#404040;--color-gray-800:#262626;--color-gray-900:#171717;--color-text-primary:#171717;--color-text-secondary:#525252;--color-text-tertiary:#737373;--color-text-disabled:#a3a3a3;--color-text-inverse:#fff;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;--font-mono:"SF Mono",Monaco,Inconsolata,"Roboto Mono","Source Code Pro",monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-none:0;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-xs:0 1px 2px 0 #0000000d;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-primary:0 4px 14px 0 #30487826;--shadow-accent:0 4px 14px 0 #f0a81833;--shadow-success:0 4px 14px 0 #34c75926;--shadow-danger:0 4px 14px 0 #ff3b3026;--transition-fast:150ms ease-in-out;--transition-base:200ms ease-in-out;--transition-slow:300ms ease-in-out;--z-base:0;--z-dropdown:1000;--z-sticky:1100;--z-modal-backdrop:1300;--z-modal:1400;--z-tooltip:1500;--z-notification:1600;--container-max-width:1400px;--content-max-width:1200px;--reading-max-width:65ch;--header-height:80px;--header-logo-height:50px;--nav-height:60px}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f8f8;background-color:var(--color-bg-main);color:#171717;color:var(--color-text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-family:var(--font-family);font-size:1rem;font-size:var(--font-size-base);line-height:1.5;line-height:var(--line-height-normal)}.bg-primary{background-color:#304878;background-color:var(--color-primary)}.bg-accent{background-color:#e4d685;background-color:var(--color-accent)}.bg-white{background-color:#fff;background-color:var(--color-bg-white)}.bg-light{background-color:#fafafa;background-color:var(--color-bg-light)}.text-primary{color:#304878;color:var(--color-primary)}.text-accent{color:#e4d685;color:var(--color-accent)}.text-success{color:#34c759;color:var(--color-success)}.text-warning{color:#ff9500;color:var(--color-warning)}.text-danger{color:#ff3b30;color:var(--color-danger)}.text-muted{color:#525252;color:var(--color-text-secondary)}.border-primary{border-color:#000;border-color:var(--color-border)}.border-light{border-color:#e5e5e5;border-color:var(--color-gray-200)}.shadow-sm{box-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;box-shadow:var(--shadow-lg)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.parent-dashboard{font-family:var(--font-family)}.error-container,.loading-container,.parent-dashboard{background:var(--color-bg-main);min-height:100vh;position:relative}.error-container,.loading-container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xl);text-align:center;z-index:1}.loading-spinner{border-top:3px solid var(--color-gray-200);border:3px solid var(--color-gray-200);border-radius:var(--radius-full);border-top-color:var(--color-primary);height:48px;margin-bottom:var(--spacing-md);width:48px}.loading-spinner,.spinner-small{animation:spin 1s linear infinite}.spinner-small{border-top:2px solid var(--color-gray-200);border:2px solid var(--color-gray-200);border-radius:var(--radius-full);border-top-color:var(--color-primary);height:24px;width:24px}.error-container,.error-container h2{color:var(--color-text-primary)}.error-container h2{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md)}.error-container p{color:var(--color-text-secondary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-xl);max-width:500px}.dashboard-header{background:var(--color-bg-white);border-bottom:2px solid var(--color-border);box-shadow:var(--shadow-sm);padding:var(--spacing-md) 0;position:relative}.header-content{gap:var(--spacing-lg)}.header-logo{align-items:center;border-radius:var(--radius-md);cursor:pointer;display:flex;padding:var(--spacing-xs);transition:all var(--transition-base)}.header-logo:hover{transform:scale(1.05)}.logo-image{height:var(--header-logo-height);object-fit:contain;width:auto}.header-left{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs)}.greeting{color:var(--color-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);gap:var(--spacing-sm);margin:0}.greeting,.header-right{align-items:center;display:flex}.header-right{gap:var(--spacing-lg)}.user-profile{gap:var(--spacing-md)}.user-avatar,.user-profile{align-items:center;display:flex}.user-avatar{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);border:2px solid var(--color-bg-white);border-radius:var(--radius-full);box-shadow:var(--shadow-md);color:var(--color-text-inverse);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);height:40px;justify-content:center;width:40px}.user-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.user-name{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.user-email{color:var(--color-text-secondary)}.btn-logout,.user-email{font-size:var(--font-size-sm)}.btn-logout{align-items:center;background:var(--color-bg-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;display:flex;font-weight:var(--font-weight-medium);gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-base)}.btn-logout:hover{background:var(--color-danger);border-color:var(--color-danger);box-shadow:var(--shadow-danger);color:var(--color-text-inverse);transform:translateY(-1px)}.dashboard-main{min-height:calc(100vh - 140px);padding:var(--spacing-2xl) 0;position:relative;z-index:var(--z-base)}.content-container{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:800px}.total-due-card{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);border:2px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-primary);color:var(--color-text-inverse);overflow:hidden;padding:var(--spacing-2xl);position:relative;text-align:center;transition:all var(--transition-base)}.total-due-card:before{background:var(--color-accent);content:"";height:4px;left:0;position:absolute;right:0;top:0}.total-due-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}.due-header h2{color:#ffffffe6;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md)}.due-amount{color:var(--color-text-inverse);font-family:var(--font-mono);font-size:3rem;font-weight:var(--font-weight-bold);line-height:1;margin-bottom:var(--spacing-sm);text-shadow:0 2px 4px #0000001a}.due-subtitle{color:#fffc;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xl)}.btn-make-payment{align-items:center;background:var(--color-accent);border:2px solid var(--color-accent-hover);border-radius:var(--radius-xl);box-shadow:var(--shadow-accent);color:var(--color-dark);cursor:pointer;display:inline-flex;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);gap:var(--spacing-md);justify-content:center;min-width:200px;padding:var(--spacing-lg) var(--spacing-2xl);transition:all var(--transition-base)}.btn-make-payment:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-make-payment:disabled{cursor:not-allowed;opacity:.5;transform:none}.section-card{background:var(--color-bg-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--spacing-xl);transition:all var(--transition-base)}.section-card:hover{border-color:var(--color-gray-300);box-shadow:var(--shadow-md)}.section-header{align-items:flex-start;border-bottom:2px solid var(--color-gray-200);display:flex;justify-content:space-between;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md)}.section-header h2{color:var(--color-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0}.section-summary{align-items:flex-end;display:flex;flex-direction:column;gap:var(--spacing-xs)}.children-count,.payment-count{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:1}.children-names,.next-due{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.btn-primary{padding:var(--spacing-md) var(--spacing-xl)}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-manage-profiles,.btn-view-all,.btn-view-schedule{align-items:center;background:var(--color-primary-light);border:none;border-radius:var(--radius-md);color:var(--color-text-inverse);cursor:pointer;display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-sm) var(--spacing-lg);transition:all var(--transition-base)}.btn-manage-profiles:hover,.btn-view-all:hover,.btn-view-schedule:hover{background:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn-close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--spacing-sm);transition:all var(--transition-fast)}.btn-close:hover{background:var(--color-danger-light);color:var(--color-danger)}.overdue-section,.upcoming-section{border:2px solid;border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg)}.overdue-section{background:var(--color-danger-light);border-color:var(--color-danger)}.upcoming-section{background:var(--color-info-light);border-color:var(--color-info)}.overdue-header{margin-bottom:var(--spacing-lg)}.overdue-badge{background:var(--color-danger);color:var(--color-text-inverse);font-size:var(--font-size-sm);gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.payments-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.payment-icon{align-items:center;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-primary);display:flex;flex-shrink:0;font-size:var(--font-size-xl);height:48px;justify-content:center;width:48px}.payment-details{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs)}.tax-status{border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);padding:var(--spacing-xs) var(--spacing-md)}.tax-status.complete{background:var(--color-success-light);border:1px solid var(--color-success);color:var(--color-success)}.tax-status.incomplete{background:var(--color-warning-light);border:1px solid var(--color-warning);color:var(--color-warning)}.tax-info-display{background:var(--color-bg-light);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.tax-info-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--spacing-lg)}.tax-field{display:flex;flex-direction:column;gap:var(--spacing-xs)}.tax-field.full-width{grid-column:1/-1}.tax-field label{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;text-transform:uppercase}.tax-field span{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.tax-actions{border-top:1px solid var(--color-gray-200);display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-md);padding-top:var(--spacing-md)}.tax-form,.tax-setup{padding:var(--spacing-lg)}.setup-message{margin-bottom:var(--spacing-xl);text-align:center}.setup-icon{font-size:3rem;margin-bottom:var(--spacing-md)}.setup-options{display:flex;flex-direction:column;gap:var(--spacing-md)}.setup-option{background:var(--color-bg-light);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;padding:var(--spacing-lg);transition:all var(--transition-base)}.setup-option:hover{background:var(--color-bg-white);border-color:var(--color-primary);box-shadow:var(--shadow-primary)}.setup-divider{color:var(--color-text-secondary);font-weight:var(--font-weight-medium);margin:var(--spacing-lg) 0;text-align:center}.form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-group input,.form-group select,.form-group textarea{background:var(--color-bg-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-md);transition:all var(--transition-base);width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3048781a;outline:none}.form-group textarea{min-height:80px;resize:vertical}.form-actions{border-top:1px solid var(--color-gray-200);display:flex;gap:var(--spacing-md);justify-content:flex-end;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg)}.file-upload-container{background:var(--color-bg-light);border:2px dashed var(--color-gray-300);border-radius:var(--radius-lg);cursor:pointer;margin-top:var(--spacing-md);padding:var(--spacing-lg);text-align:center;transition:all var(--transition-base)}.file-upload-container:hover{background:var(--color-bg-white);border-color:var(--color-primary)}.file-name{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-sm)}.children-grid{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:var(--spacing-lg)}.child-card{align-items:center;background:var(--color-bg-light);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);display:flex;flex-direction:column;padding:var(--spacing-lg);text-align:center;transition:all var(--transition-base)}.child-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-accent);transform:translateY(-4px)}.child-avatar{align-items:center;background:linear-gradient(135deg,var(--color-accent) 0,var(--color-accent-hover) 100%);border-radius:var(--radius-full);box-shadow:var(--shadow-accent);color:var(--color-dark);display:flex;font-size:var(--font-size-2xl);height:64px;justify-content:center;margin-bottom:var(--spacing-md);width:64px}.child-avatar,.child-info h3{font-weight:var(--font-weight-bold)}.child-info h3{color:var(--color-text-primary);font-size:var(--font-size-lg);margin:0 0 var(--spacing-xs) 0}.child-info p{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:0 0 var(--spacing-sm) 0}.swimming-level{background:var(--color-info-light);border:1px solid var(--color-info);border-radius:var(--radius-md);color:var(--color-info);display:inline-block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase}.history-list{flex-direction:column}.history-item,.history-list{display:flex;gap:var(--spacing-md)}.history-item{align-items:center;background:var(--color-bg-light);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--spacing-md);transition:all var(--transition-base)}.history-item:hover{background:var(--color-bg-white);border-color:var(--color-primary-light);box-shadow:var(--shadow-sm)}.history-icon{font-size:var(--font-size-2xl)}.history-details{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs)}.history-service{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.history-child{color:var(--color-text-secondary)}.history-child,.history-date{font-size:var(--font-size-sm)}.history-date{color:var(--color-text-tertiary)}.history-amount{color:var(--color-success);font-family:var(--font-mono);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.modal-overlay{align-items:center;animation:fadeIn var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--z-modal-backdrop)}.modal-content{animation:slideInUp var(--transition-slow);background:var(--color-bg-white);border:2px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);margin:var(--spacing-lg);max-height:90vh;max-width:800px;overflow-y:auto;width:100%}.tax-form-modal{max-width:600px}.modal-header{align-items:center;background:var(--color-bg-light);border-bottom:2px solid var(--color-gray-200);display:flex;justify-content:space-between;padding:var(--spacing-xl)}.modal-header h3{color:var(--color-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0}.dashboard-card.incident-card{background:var(--color-bg-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--spacing-xl)}@media (max-width:768px){.header-content{flex-wrap:wrap}.header-logo{order:1}.header-left{flex:0 0 100%;order:2}.header-right{flex:1 1;justify-content:flex-end;order:3}.user-info{display:none}.greeting{font-size:var(--font-size-xl)}.content-container{padding:0 var(--spacing-lg)}.due-amount{font-size:var(--font-size-3xl)}.children-grid,.form-row,.tax-info-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions button{width:100%}}@media (max-width:480px){.logo-image{height:40px}.greeting{font-size:var(--font-size-lg)}.due-amount{font-size:var(--font-size-2xl)}.btn-make-payment{width:100%}.section-header{flex-direction:column;gap:var(--spacing-md)}.section-header,.section-summary{align-items:flex-start}}.payment-flow{font-family:var(--font-family)}.loading-container,.payment-flow{background:var(--color-bg-main);min-height:100vh;position:relative}.loading-container{align-items:center;display:flex;flex-direction:column;justify-content:center;z-index:1}.loading-spinner,.spinner{animation:spin 1s linear infinite;border-top:3px solid var(--color-gray-200);border:3px solid var(--color-gray-200);border-radius:var(--radius-full);border-top-color:var(--color-primary);height:48px;margin-bottom:var(--spacing-md);width:48px}.loading-text{color:var(--color-text-secondary);font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}.error-message{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:60vh;padding:var(--spacing-2xl);text-align:center}.error-icon{color:var(--color-danger);font-size:4rem;margin-bottom:var(--spacing-lg)}.error-message h2{color:var(--color-text-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md)}.error-message p{color:var(--color-text-secondary);font-size:var(--font-size-base);margin-bottom:var(--spacing-xl);max-width:500px}.payment-header{background:var(--color-bg-white);border-bottom:2px solid var(--color-border);box-shadow:var(--shadow-sm);padding:var(--spacing-md) 0;position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-sticky)}.header-content{justify-content:space-between;margin:0 auto;max-width:var(--container-max-width);padding:0 var(--spacing-xl)}.header-content,.payment-title{align-items:center;display:flex}.payment-title{color:var(--color-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);gap:var(--spacing-sm);margin:0}.title-icon{font-size:var(--font-size-3xl)}.btn-back{align-items:center;background:var(--color-bg-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-base)}.btn-back:hover{background:var(--color-gray-100);border-color:var(--color-gray-400);transform:translateX(-2px)}.payment-main{min-height:calc(100vh - 100px);padding:var(--spacing-2xl) 0;position:relative;z-index:1}.content-container{margin:0 auto;max-width:900px;padding:0 var(--spacing-xl)}.progress-container{background:var(--color-bg-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl)}.progress-steps{align-items:center;display:flex;justify-content:space-between;position:relative}.progress-steps:before{background:var(--color-gray-200);content:"";height:3px;left:10%;position:absolute;right:10%;top:20px;z-index:0}.step{flex:1 1;flex-direction:column;gap:var(--spacing-sm);position:relative;z-index:1}.step,.step-number{align-items:center;display:flex}.step-number{background:var(--color-gray-200);border:3px solid var(--color-bg-white);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);color:var(--color-text-secondary);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);height:40px;justify-content:center;transition:all var(--transition-base);width:40px}.step.active .step-number{background:var(--color-primary);box-shadow:var(--shadow-primary);color:var(--color-text-inverse);transform:scale(1.1)}.step.completed .step-number{background:var(--color-success);box-shadow:var(--shadow-success);color:var(--color-text-inverse)}.step-label{color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-align:center}.step.active .step-label{color:var(--color-primary);font-weight:var(--font-weight-bold)}.step.completed .step-label{color:var(--color-success)}.step-card{animation:slideInUp var(--transition-slow);background:var(--color-bg-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}.step-header{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-light) 100%);border-bottom:2px solid var(--color-border);color:var(--color-text-inverse);padding:var(--spacing-xl)}.step-header h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-xs) 0}.step-header p{color:#ffffffe6;font-size:var(--font-size-base);margin:0}.step-content{padding:var(--spacing-2xl)}.payments-selection{display:flex;flex-direction:column;gap:var(--spacing-xl)}.payment-category-section{background:var(--color-bg-light);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-base)}.payment-category-section:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md)}.payment-category-section h3{color:var(--color-primary);display:flex;font-size:var(--font-size-xl);gap:var(--spacing-sm);margin:0 0 var(--spacing-md) 0}.overdue-badge,.payment-category-section h3{align-items:center;font-weight:var(--font-weight-bold)}.overdue-badge{background:var(--color-danger-light);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);display:inline-flex;font-size:var(--font-size-xs);gap:var(--spacing-xs);letter-spacing:.05em;padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase}.payment-item{align-items:center;background:var(--color-bg-white);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-lg);transition:all var(--transition-base)}.payment-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-primary);transform:translateX(4px)}.payment-item.selected{background:var(--color-bg-light);border-color:var(--color-accent);box-shadow:var(--shadow-accent)}.payment-item.overdue{background:var(--color-danger-light);border-color:var(--color-danger)}.payment-item.disabled{cursor:not-allowed;opacity:.5;transform:none}.payment-item.disabled:hover{border-color:var(--color-gray-200);box-shadow:none;transform:none}.payment-checkbox{accent-color:var(--color-accent);cursor:pointer;height:24px;width:24px}.payment-info{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-xs)}.payment-service{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-bold)}.payment-child{color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.payment-child,.payment-due{font-size:var(--font-size-sm)}.payment-due{color:var(--color-text-tertiary)}.payment-amount{color:var(--color-primary);font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold)}.adicionales-header{align-items:center;background:var(--color-info-light);border:2px solid var(--color-info);border-radius:var(--radius-lg);cursor:pointer;display:flex;justify-content:space-between;margin-bottom:var(--spacing-md);padding:var(--spacing-md);transition:all var(--transition-base)}.adicionales-header:hover{background:var(--color-info);color:var(--color-text-inverse)}.adicionales-header h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0}.adicionales-content{margin-top:var(--spacing-md)}.selection-summary{background:linear-gradient(135deg,var(--color-accent) 0,var(--color-accent-hover) 100%);border:2px solid var(--color-border);border-radius:var(--radius-xl);bottom:var(--spacing-xl);box-shadow:var(--shadow-xl);color:var(--color-dark);margin-top:var(--spacing-xl);padding:var(--spacing-xl);position:-webkit-sticky;position:sticky}.selection-summary h3{color:var(--color-dark);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-md) 0}.selection-summary p{color:#181848cc;font-size:var(--font-size-base);margin:0 0 var(--spacing-lg) 0}.summary-details{background:#ffffff4d;border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);padding:var(--spacing-md)}.summary-row{align-items:center;display:flex;font-size:var(--font-size-base);justify-content:space-between;padding:var(--spacing-sm) 0}.summary-row.total{border-top:2px solid #18184833;font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-top:var(--spacing-sm);padding-top:var(--spacing-md)}.payment-method-section{margin-bottom:var(--spacing-xl)}.payment-method-section h3{color:var(--color-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-lg) 0}.payment-methods{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.method-option{align-items:center;background:var(--color-bg-light);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-xl);transition:all var(--transition-base)}.method-option:hover{background:var(--color-bg-white);border-color:var(--color-primary);box-shadow:var(--shadow-primary);transform:translateY(-4px)}.method-option.selected{background:var(--color-bg-white);border-color:var(--color-accent);box-shadow:var(--shadow-accent)}.method-icon{font-size:2.5rem}.method-option span{color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.card-form{background:var(--color-bg-light);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);margin-top:var(--spacing-xl);padding:var(--spacing-xl)}.form-group{margin-bottom:var(--spacing-lg)}.form-row{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.form-group label{color:var(--color-text-primary);display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}.form-group input{background:var(--color-bg-white);border:2px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:var(--font-size-base);padding:var(--spacing-md);transition:all var(--transition-base);width:100%}.form-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #3048781a;outline:none}.form-group input::placeholder{color:var(--color-text-disabled)}.invoice-section{background:var(--color-info-light);border:2px solid var(--color-info);border-radius:var(--radius-lg);margin-top:var(--spacing-xl);padding:var(--spacing-xl)}.invoice-section h3{align-items:center;color:var(--color-info);display:flex;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);gap:var(--spacing-sm);margin:0 0 var(--spacing-md) 0}.invoice-option{align-items:center;background:var(--color-bg-white);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-md);transition:all var(--transition-base)}.invoice-option:hover{border-color:var(--color-info);box-shadow:var(--shadow-md)}.invoice-option.selected{background:var(--color-success-light);border-color:var(--color-success)}.payment-summary{background:var(--color-bg-light);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);margin-bottom:var(--spacing-xl);padding:var(--spacing-xl)}.payment-summary h3{color:var(--color-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-lg) 0}.detail-row{align-items:center;border-bottom:1px solid var(--color-gray-200);color:var(--color-text-primary);display:flex;font-size:var(--font-size-base);justify-content:space-between;padding:var(--spacing-md) 0}.detail-row:last-child{border-bottom:none;border-top:2px solid var(--color-border);font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-top:var(--spacing-md);padding-top:var(--spacing-lg)}.step-actions{border-top:2px solid var(--color-gray-200);display:flex;gap:var(--spacing-md);justify-content:space-between;margin-top:var(--spacing-2xl);padding-top:var(--spacing-xl)}.btn-primary{align-items:center;background:var(--color-primary);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-primary);color:var(--color-text-inverse);cursor:pointer;display:inline-flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);justify-content:center;min-width:150px;padding:var(--spacing-md) var(--spacing-2xl);transition:all var(--transition-base)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary:disabled{cursor:not-allowed;opacity:.5;transform:none}.btn-secondary{align-items:center;background:var(--color-bg-white);border:2px solid var(--color-primary);border-radius:var(--radius-md);color:var(--color-primary);cursor:pointer;display:inline-flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);justify-content:center;padding:var(--spacing-md) var(--spacing-xl);transition:all var(--transition-base)}.btn-secondary:hover{background:var(--color-primary);box-shadow:var(--shadow-primary);color:var(--color-text-inverse);transform:translateY(-2px)}.processing-container{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:400px;text-align:center}.processing-animation{height:80px;margin-bottom:var(--spacing-xl);position:relative;width:80px}.processing-animation:after,.processing-animation:before{animation:pulse 2s ease-in-out infinite;border:4px solid var(--color-primary);border-radius:var(--radius-full);content:"";height:100%;position:absolute;width:100%}.processing-animation:after{animation-delay:1s}@keyframes pulse{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(1.2)}}.processing-container h2{color:var(--color-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}.processing-container p{color:var(--color-text-secondary);font-size:var(--font-size-base)}.processing-amount{color:var(--color-accent);font-family:var(--font-mono);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-top:var(--spacing-lg)}.success-container{flex-direction:column;padding:var(--spacing-2xl);text-align:center}.success-container,.success-icon{align-items:center;display:flex;justify-content:center}.success-icon{animation:successPop .5s ease-out;background:var(--color-success);border-radius:var(--radius-full);box-shadow:var(--shadow-success);color:var(--color-text-inverse);font-size:3rem;height:80px;margin-bottom:var(--spacing-xl);width:80px}@keyframes successPop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.success-message h2{color:var(--color-success);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}.success-message p{color:var(--color-text-secondary);font-size:var(--font-size-lg);margin-bottom:var(--spacing-xl)}.transaction-details{background:var(--color-bg-light);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);margin:var(--spacing-xl) 0;max-width:500px;padding:var(--spacing-xl);text-align:left;width:100%}.transaction-details h3{color:var(--color-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-lg) 0}.empty-state{color:var(--color-text-secondary);padding:var(--spacing-2xl);text-align:center}.empty-icon{font-size:3rem;margin-bottom:var(--spacing-lg);opacity:.5}.empty-state h3{color:var(--color-text-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}.empty-state p{color:var(--color-text-secondary);font-size:var(--font-size-base);margin:0}@media (max-width:768px){.payment-header{padding:var(--spacing-sm) 0}.header-content{flex-direction:column;gap:var(--spacing-md);padding:0 var(--spacing-lg)}.payment-title{font-size:var(--font-size-xl)}.content-container{padding:0 var(--spacing-lg)}.progress-steps{flex-direction:column;gap:var(--spacing-md)}.progress-steps:before{display:none}.step{flex-direction:row;justify-content:flex-start;width:100%}.step-number{font-size:var(--font-size-sm);height:32px;width:32px}.step-content{padding:var(--spacing-lg)}.form-row,.payment-methods{grid-template-columns:1fr}.step-actions{flex-direction:column-reverse}.btn-primary,.btn-secondary{width:100%}.selection-summary{position:static}}@media (max-width:480px){.payment-title{font-size:var(--font-size-lg)}.title-icon{font-size:var(--font-size-2xl)}.step-header h2{font-size:var(--font-size-xl)}.payment-amount{font-size:var(--font-size-lg)}.processing-amount{font-size:var(--font-size-2xl)}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;color:#fff;padding:20px}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}