/* ============================================================================ Campus Virtual - Camaras Inst. Univ. Hoja de estilos compartida. Variables de color por rol inyectadas via clase en : role-alumno | role-docente | role-admin | role-auth ============================================================================ */ :root { --accent: #5b4b8a; /* violeta por defecto (paginas de auth / compartidas) */ --accent-dark: #46396d; --bg: #f4f5f7; --surface: #ffffff; --border: #e1e3e8; --text: #23262b; --text-muted: #6b7280; --sidebar-bg: #2f3237; --sidebar-text: #d7d9dd; --topbar-bg: #26282c; --success: #2f7a52; --danger: #c0453a; --warning: #c0813a; --radius: 10px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } body.role-alumno { --accent: #2f7fa3; --accent-dark: #24647f; } body.role-docente { --accent: #2f7a52; --accent-dark: #235f40; } body.role-admin { --accent: #c0553a; --accent-dark: #9c422c; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Layout con sesion (topbar + sidebar + main) ---------- */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .topbar { background: var(--topbar-bg); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; position: sticky; top: 0; z-index: 20; } .topbar .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; } .sidebar-toggle { display: none; } .topbar .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .topbar .user-info { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; } .topbar .user-info .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; } .topbar .bell { position: relative; font-size: 1.15rem; color: #d7d9dd; } .topbar .bell .badge-count { position: absolute; top: -6px; right: -10px; background: var(--danger); color: #fff; font-size: 0.65rem; padding: 1px 5px; border-radius: 10px; font-weight: 700; } .topbar .logout-link { color: #d7d9dd; font-size: 0.85rem; } .body-wrap { display: flex; flex: 1; min-height: 0; } .sidebar { width: 230px; flex-shrink: 0; background: var(--sidebar-bg); padding: 18px 12px; } .sidebar nav a { display: block; color: var(--sidebar-text); padding: 11px 14px; border-radius: 8px; margin-bottom: 4px; font-size: 0.92rem; text-decoration: none; } .sidebar nav a:hover { background: rgba(255,255,255,0.06); } .sidebar nav a.active { background: var(--accent); color: #fff; font-weight: 600; } .sidebar-external { margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); } .sidebar-external a { color: #9aa0a8; font-size: 0.82rem; } .sidebar-external a:hover { color: var(--sidebar-text); background: rgba(255,255,255,0.06); } .main-content { flex: 1; padding: 28px 32px; min-width: 0; } .page-title { margin: 0 0 20px; font-size: 1.5rem; font-weight: 700; } .page-subtitle { color: var(--text-muted); margin: -14px 0 20px; font-size: 0.95rem; } /* ---------- Componentes ---------- */ .cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .card .card-label { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 6px; } .card .card-value { font-size: 1.6rem; font-weight: 700; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; box-shadow: var(--shadow); } .panel h2, .panel h3 { margin-top: 0; } table.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } table.data-table th, table.data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); } table.data-table th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } table.data-table tr:last-child td { border-bottom: none; } .btn { display: inline-block; background: var(--accent); color: #fff; border: none; padding: 9px 16px; border-radius: 7px; font-size: 0.88rem; cursor: pointer; font-weight: 600; } .btn:hover { background: var(--accent-dark); text-decoration: none; color: #fff; } .btn-sm { padding: 6px 12px; font-size: 0.8rem; } .btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-outline:hover { background: var(--accent); color: #fff; } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #9c342b; } .btn-secondary { background: #6b7280; } .btn-secondary:hover { background: #565b64; } .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; } .badge-success { background: #e5f3ea; color: var(--success); } .badge-danger { background: #fbe9e7; color: var(--danger); } .badge-warning { background: #fbf1e2; color: var(--warning); } .badge-muted { background: #eceef1; color: var(--text-muted); } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 600; } .form-group .hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 4px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.92rem; font-family: inherit; background: #fff; color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; } .alert-success { background: #e5f3ea; color: #205c3a; } .alert-error { background: #fbe9e7; color: #8f2c22; } .alert-info { background: #e6effa; color: #1f4e80; } .alert-warning { background: #fbf1e2; color: #7a5116; } .checklist-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--border); } .checklist-item:last-child { border-bottom: none; } .checklist-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--success); } .video-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #1c1e21; } .video-wrap iframe { width: 100%; height: 480px; border: 0; display: block; } .video-placeholder { height: 320px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #9aa0a8; font-size: 1.3rem; font-weight: 700; gap: 6px; } .video-placeholder small { font-weight: 400; font-size: 0.85rem; } .two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; } .empty-state { color: var(--text-muted); text-align: center; padding: 30px 10px; } .filters-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; align-items: end; } .filters-bar .form-group { margin-bottom: 0; min-width: 160px; } /* ---------- Paginas de autenticacion ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #5b4b8a 0%, #2f3247 100%); padding: 20px; } .auth-card { background: #fff; border-radius: 14px; padding: 36px 34px; width: 100%; max-width: 400px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); } .auth-card h1 { font-size: 1.3rem; margin: 0 0 4px; } .auth-card .auth-sub { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 22px; } .auth-card .btn { width: 100%; text-align: center; margin-top: 6px; } .auth-card .switch-link { text-align: center; margin-top: 18px; font-size: 0.88rem; } .error-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 20px; } .error-shell h1 { font-size: 4rem; margin: 0; color: var(--accent); } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .sidebar-toggle { display: inline-block; } .sidebar { position: fixed; left: -240px; top: 64px; bottom: 0; z-index: 30; transition: left 0.2s; } .sidebar.open { left: 0; box-shadow: 4px 0 16px rgba(0,0,0,0.25); } .sidebar-overlay { display: none; position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,0.35); z-index: 25; } .sidebar-overlay.open { display: block; } .main-content { padding: 20px; } .two-col { grid-template-columns: 1fr; } .topbar .user-info span.hide-mobile { display: none; } }