/* styles.css — Sistema de Asistencia */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #0a3d7c; --primary-dark: #041E42; --primary-light: #1665c0;
  --secondary: #0ea5e9; --success: #10b981; --warning: #f59e0b;
  --danger: #ef4444; --info: #3b82f6;
  --bg-dark: #f0f4f8; --bg-glass: #ffffff;
  --border-glass: #e2e8f0;
  --text-primary: #1a2a3a; --text-secondary: #4a5568; --text-muted: #64748b;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --shadow-card: 0 4px 16px rgba(4,30,66,0.08);
  --shadow-card-hover: 0 8px 24px rgba(4,30,66,0.15);
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg-dark); color:var(--text-primary); min-height:100vh; line-height:1.6; overflow-x:hidden; }

.bg-animated { position:fixed; inset:0; z-index:-1;
  background: linear-gradient(135deg, #041E42 0%, #0a3d7c 55%, #004e92 100%); }

.glass-card { background:var(--bg-glass); border:1px solid var(--border-glass); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); transition:var(--transition); }

.metric-card { background:var(--bg-glass); border:1px solid var(--border-glass); border-radius:var(--radius-md); padding:1.25rem 1.5rem; transition:var(--transition); position:relative; overflow:hidden; box-shadow:var(--shadow-card); }
.metric-card::before { content:''; position:absolute; top:0;left:0;right:0; height:4px; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.metric-card.primary::before { background:linear-gradient(90deg,var(--primary-dark),var(--primary)); }
.metric-card.success::before { background:linear-gradient(90deg,var(--success),#34d399); }
.metric-card.warning::before { background:linear-gradient(90deg,var(--warning),#fbbf24); }
.metric-card.danger::before  { background:linear-gradient(90deg,var(--danger),#f87171); }
.metric-card.info::before    { background:linear-gradient(90deg,var(--info),#60a5fa); }
.metric-card .metric-value   { font-size:2rem; font-weight:800; line-height:1; color: var(--primary-dark); }
.metric-card .metric-label   { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-top:.25rem; font-weight:600; }
.metric-card .metric-icon    { font-size:2rem; opacity:.15; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--primary); }
.metric-card:hover           { transform:translateY(-2px); box-shadow:var(--shadow-card-hover); }

.btn-primary-custom { background:linear-gradient(135deg,var(--primary-dark),var(--primary)); border:none; color:#fff; padding:.75rem 1.75rem; border-radius:var(--radius-md); font-weight:600; transition:var(--transition); box-shadow:0 4px 15px rgba(10,61,124,.3); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; }
.btn-primary-custom:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(10,61,124,.45); }
.btn-primary-custom:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-success-custom { background:linear-gradient(135deg,var(--success),#059669); border:none; color:#fff; padding:.75rem 1.75rem; border-radius:var(--radius-md); font-weight:600; transition:var(--transition); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 4px 15px rgba(16,185,129,.3); }
.btn-success-custom:hover { transform:translateY(-1px); }
.btn-ghost { background:transparent; border:1px solid var(--border-glass); color:var(--text-secondary); padding:.5rem 1rem; border-radius:var(--radius-sm); font-weight:500; transition:var(--transition); cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.btn-ghost:hover { background:var(--bg-dark); color:var(--primary); border-color:var(--primary); }

.form-control-custom { background:#f8fafc; border:1px solid var(--border-glass); border-radius:var(--radius-sm); color:var(--text-primary); padding:.75rem 1rem; font-size:.95rem; width:100%; transition:var(--transition); outline:none; }
.form-control-custom:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,61,124,.15); background:#ffffff; }
.form-control-custom::placeholder { color:var(--text-muted); }
.form-group { margin-bottom:1.25rem; }
.form-label { font-size:.85rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4rem; display:block; }

.table-custom { width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; }
.table-custom thead th { background:#f8fafc; color:var(--text-secondary); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.85rem 1rem; border-bottom:2px solid var(--border-glass); white-space:nowrap; }
.table-custom tbody tr { border-bottom:1px solid var(--border-glass); transition:var(--transition); }
.table-custom tbody tr:hover { background:#f8fafc; }
.table-custom tbody td { padding:.875rem 1rem; vertical-align:middle; color: var(--text-primary); }

.badge-custom { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .65rem; border-radius:999px; font-size:.7rem; font-weight:600; }
.badge-success { background:rgba(16,185,129,.15); color:#34d399; border:1px solid rgba(16,185,129,.2); }
.badge-warning { background:rgba(245,158,11,.15); color:#fbbf24; border:1px solid rgba(245,158,11,.2); }
.badge-danger  { background:rgba(239,68,68,.15);  color:#f87171; border:1px solid rgba(239,68,68,.2);  }
.badge-info    { background:rgba(59,130,246,.15); color:#60a5fa; border:1px solid rgba(59,130,246,.2); }
.badge-neutral { background:rgba(100,116,139,.15);color:#94a3b8; border:1px solid rgba(100,116,139,.2); }
.badge-purple  { background:rgba(99,102,241,.15); color:#a5b4fc; border:1px solid rgba(99,102,241,.2); }

.sidebar { width:260px; min-height:100vh; background:var(--primary-dark); border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; padding:1.5rem 0; position:fixed; left:0; top:0; bottom:0; z-index:100; transition:transform .3s ease; box-shadow: 4px 0 20px rgba(0,0,0,.25); }
.sidebar-logo { padding:0 1.5rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:.75rem; }
.sidebar-logo .logo-icon { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--primary-light),var(--primary)); display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.sidebar-logo .logo-text { font-size:.92rem; font-weight:700; color:#fff; line-height:1.2; }
.sidebar-logo .logo-sub  { font-size:.68rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:1.5px; }
.sidebar-nav { padding:1rem 0; flex:1; overflow-y:auto; list-style:none; }
.nav-section-label { font-size:.65rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); padding:.5rem 1.5rem .25rem; }
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.72rem 1rem; margin:2px 1rem; color:rgba(255,255,255,.75); cursor:pointer; transition:var(--transition); border-radius:10px; text-decoration:none; font-size:.88rem; font-weight:500; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.14); color:#fff; font-weight:600; }
.nav-item .nav-icon { font-size:.95rem; width:18px; text-align:center; }
.nav-badge { margin-left:auto; font-size:.68rem; padding:2px 7px; border-radius:20px; background:rgba(255,255,255,.15); color:#fff; font-weight:600; }
.sidebar-footer { padding:1rem 1.2rem; border-top:1px solid rgba(255,255,255,.08); }
.user-info { display:flex; align-items:center; gap:.65rem; margin-bottom:.75rem; }
.user-avatar { width:38px; height:38px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; color:#fff; }
.user-name { font-size:.82rem; font-weight:600; color:#fff; line-height:1.2; }
.user-role { font-size:.68rem; color:rgba(255,255,255,.45); }

.main-content { margin-left:260px; padding:2rem; min-height:100vh; }
.page-title   { font-size:1.4rem; font-weight:800; color:var(--primary-dark); }
.page-subtitle{ font-size:.9rem; color:var(--text-muted); margin-top:.25rem; }

.toast-container { position:fixed; top:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.75rem; max-width:380px; }
.toast-item { background:var(--card-bg); border:1px solid var(--border-glass); border-radius:var(--radius-md); padding:1rem 1.25rem; box-shadow:var(--shadow-card); display:flex; align-items:flex-start; gap:.75rem; animation:slideInRight .3s ease forwards; color:var(--text-primary); }
@keyframes slideInRight { from{transform:translateX(120%);opacity:0;} to{transform:translateX(0);opacity:1;} }
.toast-item.fade-out { animation:slideOutRight .3s ease forwards; }
@keyframes slideOutRight { to{transform:translateX(120%);opacity:0;} }
.toast-item.success { border-left:4px solid var(--success); }
.toast-item.error   { border-left:4px solid var(--danger); }
.toast-item.warning { border-left:4px solid var(--warning); }
.toast-item.info    { border-left:4px solid var(--info); }
.toast-icon { font-size:1.2rem; }
.toast-msg  { font-size:.875rem; flex:1; }
.toast-title{ font-weight:700; margin-bottom:.1rem; color:var(--text-primary); }
.toast-close{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1rem; }

.camera-container { position:relative; width:100%; background:#000; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.camera-video { width:100%; height:100%; object-fit:cover; display:block; }
.camera-guide { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:55%; aspect-ratio:1; border:2px solid rgba(99,102,241,.7); border-radius:50%; box-shadow:0 0 0 9999px rgba(0,0,0,.4); }

.qr-display-card { text-align:center; padding:1.5rem; background:#f8fafc; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.5); display:inline-block; }
.qr-image { width:220px; height:220px; image-rendering:pixelated; }
.qr-timer { font-size:1.5rem; font-weight:800; color:#4f46e5; }
.qr-timer.urgent { color:#ef4444; animation:blink .5s ease-in-out infinite; }
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.5;}}

.step-indicator { display:flex; align-items:center; margin-bottom:2rem; }
.step { display:flex; flex-direction:column; align-items:center; flex:1; }
.step-circle { width:36px; height:36px; border-radius:50%; border:2px solid var(--border-glass); background:var(--bg-glass); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; transition:var(--transition); }
.step.active .step-circle { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 0 12px rgba(99,102,241,.5); }
.step.done   .step-circle { background:var(--success); border-color:var(--success); color:#fff; }
.step-label  { font-size:.7rem; color:var(--text-muted); margin-top:.4rem; text-align:center; font-weight:500; }
.step.active .step-label { color:var(--primary-light); }
.step.done   .step-label { color:var(--success); }
.step-line   { flex:1; height:2px; background:var(--border-glass); margin-bottom:1.5rem; transition:var(--transition); }
.step-line.done { background:var(--success); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; transition:opacity .25s; pointer-events:none; }
.modal-overlay.show { opacity:1; pointer-events:all; }
.modal-box { background:#ffffff; border-radius:var(--radius-lg); max-width:560px; width:100%; box-shadow:0 25px 80px rgba(0,0,0,.4); transform:scale(.95); transition:transform .25s; overflow:hidden; }
.modal-overlay.show .modal-box { transform:scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding: 1.5rem; background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); color: #fff; }
.modal-body { padding: 2rem 1.5rem; }
.modal-title  { font-size:1.15rem; font-weight:700; }
.modal-close  { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.3rem; cursor:pointer; transition: color var(--transition); }
.modal-close:hover { color: #fff; }
.modal-footer { padding:1.5rem; display:flex; justify-content:flex-end; gap:.75rem; background:#f8fafc; border-top:1px solid var(--border-glass); }

.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; position: relative; z-index: 1; }
.login-card { width:100%; max-width:420px; padding:3rem 2.8rem 2.5rem; background: #ffffff; border-radius: 24px; box-shadow: 0 24px 64px rgba(0,0,0,0.45); border: none; }
.login-logo { text-align:center; margin-bottom:2rem; }
.login-logo .logo-circle { width:88px; height:88px; border-radius:50%; margin:0 auto 1.5rem; background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); display:flex; align-items:center; justify-content:center; font-size:2.1rem; box-shadow:0 10px 28px rgba(4,30,66,0.35); color: #fff; }
.login-title { font-size:1.7rem; font-weight:800; color: var(--primary-dark); margin-bottom: 4px; }
.login-sub   { font-size:0.82rem; color:var(--text-muted); }

@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;padding:1rem;}
  .sidebar-toggle{display:flex!important;}
  .metric-card .metric-value{font-size:1.5rem;}
  .qr-image{width:180px;height:180px;}
}
.sidebar-toggle { display:none; position:fixed; top:1rem; left:1rem; z-index:200; background:var(--primary); border:none; border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center; font-size:1.2rem; color:#fff; cursor:pointer; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; }
.sidebar-backdrop.show { display:block; }
.divider { border:none; border-top:1px solid var(--border-glass); margin:1.5rem 0; }
.loading-spin { animation:spin 1s linear infinite; }
@keyframes spin{to{transform:rotate(360deg);}}
.fade-in { animation:fadeIn .4s ease forwards; }
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.text-gradient { background:linear-gradient(135deg,var(--primary-light),var(--secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 75%); background-size:400% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius-sm); }
@keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0% 50%;}}