/* ============================================================ Motex Campus · estilos propios (heredan tokens.css y styles.css) ============================================================ */ /* El atributo hidden debe ganar a las reglas display del menú (incluso cuando el menú se mueve al como modal). */ .nav-menu [hidden] { display: none !important; } /* Menú del panel: modal centrado y oculto hasta abrirse. */ .nav-menu.dash-menu { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) scale(0.98) !important; width: min(420px, calc(100vw - 40px)) !important; max-height: 80vh; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease; } .nav-menu.dash-menu.open { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; visibility: visible; } .campus-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--border-strong); color: var(--accent); background: var(--accent-soft); } /* ---- Layout de autenticacion ---- */ .auth-wrap { min-height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; padding: clamp(40px, 8vw, 96px) var(--side-padding); } .auth-card { width: 100%; max-width: 460px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(28px, 4vw, 40px); box-shadow: var(--shadow-soft); } .auth-card.wide { max-width: 640px; } .auth-card h1 { font-size: 1.7rem; margin: 6px 0 6px; } .auth-card .sub { color: var(--text-secondary); margin-bottom: 24px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 7px; color: var(--text-primary); } .field .hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } } select { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--bg-elevated); padding: 12px; color: var(--text-primary); } .btn.full { width: 100%; } .auth-alt { margin-top: 18px; text-align: center; color: var(--text-secondary); font-size: var(--fs-small); } .auth-alt a { color: var(--accent); } .form-msg { border-radius: var(--radius-button); padding: 12px 14px; font-size: var(--fs-small); margin-bottom: 18px; border: 1px solid var(--border-strong); } .form-msg[hidden] { display: none; } .form-msg.error { border-color: var(--error); color: #ffd9d9; background: rgba(224,107,107,0.12); } .form-msg.ok { border-color: var(--success); color: #d6f5e6; background: rgba(70,194,138,0.12); } .form-msg.info { color: var(--text-secondary); } /* ---- Medidor de contrasena ---- */ .pw-rules { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; } .pw-rules li { font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .pw-rules li::before { content: "○"; color: var(--text-muted); } .pw-rules li.ok { color: var(--success); } .pw-rules li.ok::before { content: "●"; color: var(--success); } /* ---- Pasos del registro ---- */ .steps { display: flex; gap: 10px; margin-bottom: 24px; } .steps .step { flex: 1; text-align: center; font-size: 0.78rem; color: var(--text-muted); padding-bottom: 8px; border-bottom: 2px solid var(--border); } .steps .step.active { color: var(--accent); border-color: var(--accent); } .step-panel[hidden] { display: none; } /* ---- Panel / dashboard ---- */ .campus-hero { padding: clamp(60px,8vw,110px) 0 40px; } .greeting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .course-card { display: flex; flex-direction: column; gap: 14px; } .course-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .course-card .price-tag { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); } .course-card .owned { color: var(--success); font-weight: 600; font-size: var(--fs-small); } .course-card .actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; } .pay-cta-bar { position: sticky; bottom: 0; z-index: 30; background: linear-gradient(0deg, var(--bg-ink), rgba(5,10,8,0.92)); border-top: 1px solid var(--border-strong); padding: 14px var(--side-padding); display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .pay-cta-bar p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); } .pay-cta-bar[hidden] { display: none; } /* ---- Temario / clases ---- */ .lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .lesson-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--bg-elevated); transition: border-color var(--transition), transform var(--transition); } .lesson-item:hover { border-color: var(--border-strong); transform: translateX(4px); } .lesson-item .idx { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--bg-base); border: 1px solid var(--border-strong); font-size: var(--fs-small); color: var(--text-secondary); } .lesson-item .body { flex: 1; } .lesson-item .body h3 { font-size: 1.05rem; margin: 0 0 3px; } .lesson-item .body p { margin: 0; font-size: var(--fs-small); color: var(--text-muted); } .lesson-item .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .lesson-item .tag.free { color: var(--success); } .lesson-item .tag.locked { color: var(--text-muted); } .lesson-item.locked { opacity: 0.78; } .player { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-ink); overflow: hidden; } .player iframe, .player video { width: 100%; height: 100%; border: 0; } .locked-panel { text-align: center; padding: clamp(40px,6vw,72px) 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--bg-surface); } /* ---- Pago ---- */ .pay-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: start; } @media (max-width: 820px) { .pay-grid { grid-template-columns: 1fr; } } .pay-methods { display: grid; gap: 12px; margin: 8px 0 24px; } .pay-method { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); cursor: pointer; transition: border-color var(--transition), background var(--transition); } .pay-method:hover { border-color: var(--accent); } .pay-method input { width: auto; margin: 0; } .pay-method .label { font-weight: 600; } .pay-method .desc { font-size: 0.82rem; color: var(--text-muted); } .pay-method.selected { border-color: var(--accent); background: var(--accent-soft); } .summary-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; } .summary-card .line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); } .summary-card .line.total { border-bottom: 0; font-size: 1.3rem; font-weight: 700; padding-top: 16px; } .secure-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; } /* ============================================================ App shell del alumno · barra lateral + contenido ============================================================ */ .campus-app { background: radial-gradient(1200px 600px at 100% -10%, rgba(33,199,182,0.06), transparent 60%), var(--bg-base); } .app-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 14px 22px; background: rgba(8,15,12,0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .app-topbar .brand { font-size: 1.25rem; } .app-topbar .spacer { flex: 1; } .app-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; } .app-burger span { display: block; width: 22px; height: 2px; background: var(--text-primary); margin: 4px 0; border-radius: 2px; } .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #04110d; font-weight: 700; font-size: 0.95rem; border: 1px solid var(--border-strong); flex: none; overflow: hidden; } .avatar.lg { width: 72px; height: 72px; font-size: 1.6rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .app-layout { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - 67px); } .app-sidebar { border-right: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 67px; height: calc(100vh - 67px); } .app-sidebar .side-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 6px 12px; margin-top: 10px; } .app-sidebar a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; transition: background var(--transition), color var(--transition); } .app-sidebar a:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); } .app-sidebar a.active { background: var(--accent-soft); color: var(--accent); } .app-sidebar [hidden] { display: none !important; } .app-sidebar a .ico { width: 20px; text-align: center; } /* ---- Tablas del panel de moderación ---- */ .admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--border); } .admin-tabs button { background: none; border: 0; cursor: pointer; padding: 10px 14px; color: var(--text-secondary); font-weight: 600; font-size: var(--fs-small); border-bottom: 2px solid transparent; } .admin-tabs button.active { color: var(--accent); border-color: var(--accent); } .admin-panel[hidden] { display: none; } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); } table.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); } .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table td.wrap { white-space: normal; min-width: 240px; } .admin-table select { padding: 6px 8px; font-size: var(--fs-small); } .role-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary); } .role-badge.admin { color: var(--accent); border-color: var(--accent); } .role-badge.moderator { color: var(--accent-3); border-color: var(--accent-3); } .app-sidebar .side-bottom { margin-top: auto; } .app-content { padding: clamp(24px, 4vw, 44px); max-width: 1080px; } .app-content h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); } .page-intro { color: var(--text-secondary); margin: 4px 0 28px; } .app-backdrop { position: fixed; inset: 0; background: rgba(4,8,6,0.6); z-index: 35; opacity: 0; visibility: hidden; transition: opacity .2s; } .app-backdrop.open { opacity: 1; visibility: visible; } @media (max-width: 860px) { .app-layout { grid-template-columns: 1fr; } .app-burger { display: block; } .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 256px; z-index: 45; background: var(--bg-ink-2); transform: translateX(-100%); transition: transform .25s var(--ease); } .app-sidebar.open { transform: translateX(0); } } /* ---- Tarjetas de estadísticas ---- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 30px; } .stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; } .stat .num { font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .stat .lbl { color: var(--text-muted); font-size: var(--fs-small); margin-top: 6px; } /* ---- Barra de progreso ---- */ .progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .progress > span { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .4s var(--ease); } .progress-row { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--text-secondary); margin-bottom: 8px; } /* ---- Tarjeta "continúa aprendiendo" ---- */ .resume-card { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background: linear-gradient(115deg, var(--bg-elevated), rgba(33,199,182,0.08)); border: 1px solid var(--accent); border-radius: var(--radius-card); padding: 26px; margin-bottom: 34px; } .resume-card .grow { flex: 1; min-width: 220px; } .resume-card .eyebrow { color: var(--accent); } .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 16px; } .section-title h2 { font-size: 1.3rem; } .section-title a { color: var(--accent); font-size: var(--fs-small); } /* ---- Formularios del espacio privado ---- */ .panel-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: clamp(22px, 3vw, 32px); margin-bottom: 22px; } .panel-card h2 { font-size: 1.2rem; margin-bottom: 4px; } .panel-card .muted { color: var(--text-muted); font-size: var(--fs-small); margin-bottom: 18px; } /* ---- Lista de ejercicios / entregas ---- */ .sub-item { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; margin-bottom: 14px; background: var(--bg-elevated); } .sub-item .top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; } .sub-item .top h3 { font-size: 1.05rem; } .sub-item .answer { color: var(--text-secondary); font-size: var(--fs-small); white-space: pre-wrap; } .pill { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); } .pill.ok { color: var(--success); border-color: var(--success); } .pill.wait { color: var(--warning); border-color: var(--warning); } .pill.confirmed { color: var(--accent); border-color: var(--accent); } .empty-state { text-align: center; padding: clamp(36px,6vw,64px); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); color: var(--text-secondary); } .empty-state .ico { font-size: 2.2rem; margin-bottom: 10px; } /* ---- Ejercicio dentro de la clase ---- */ .exercise-box { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-card); padding: 22px; margin-top: 24px; } .exercise-box h3 { font-size: 1.1rem; margin-bottom: 6px; } .lesson-item.done .idx { background: var(--accent); color: #04110d; border-color: var(--accent); } /* ---- Botón flotante de tema claro/oscuro ---- */ .theme-fab, .theme-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: transform var(--transition), border-color var(--transition); } .theme-fab:hover, .theme-btn:hover { transform: translateY(-2px); border-color: var(--accent); } .theme-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; box-shadow: var(--shadow-soft); } /* ---- Protección de vídeo: marca de agua dinámica ---- */ .player { position: relative; } .player .watermark { position: absolute; z-index: 3; pointer-events: none; font-size: 0.8rem; color: rgba(255,255,255,0.5); text-shadow: 0 1px 3px rgba(0,0,0,0.7); background: rgba(0,0,0,0.18); padding: 3px 8px; border-radius: 6px; transition: top .9s linear, left .9s linear; white-space: nowrap; } :root[data-theme="light"] .player .watermark { color: rgba(255,255,255,0.7); } /* ============================================================ Movimiento · animaciones de entrada y vida en la interfaz ============================================================ */ .mc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .mc-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mc-reveal { opacity: 1 !important; transform: none !important; transition: none; } } @keyframes mcGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .resume-card { background-size: 220% 220%; animation: mcGradient 10s ease infinite; } .stat { transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .stat:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); } .card.course-card { transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .card.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); border-color: var(--border-strong); } @keyframes mcPop { 0% { transform: scale(.96); opacity: .4; } 100% { transform: scale(1); opacity: 1; } } .stat .num { display: inline-block; animation: mcPop .5s var(--ease) both; } .app-content h1 { animation: mcFadeUp .5s var(--ease) both; } @keyframes mcFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .avatar.sm { width: 30px; height: 30px; font-size: 0.78rem; } /* ============================================================ Comunidad / foro ============================================================ */ .composer textarea { min-height: 70px; } .post-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 22px; margin-bottom: 16px; transition: border-color var(--transition), transform var(--transition); } .post-card:hover { border-color: var(--border-strong); } .post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .post-head .who { font-weight: 600; font-size: var(--fs-small); } .post-head .date { color: var(--text-muted); font-size: 0.78rem; } .post-card h3 { font-size: 1.15rem; margin: 0 0 6px; } .post-card .body { color: var(--text-secondary); white-space: pre-wrap; margin: 0 0 12px; } .file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--accent); font-size: var(--fs-small); font-weight: 600; } .file-chip:hover { border-color: var(--accent); background: var(--accent-soft); } .post-actions { display: flex; gap: 14px; align-items: center; margin-top: 14px; font-size: var(--fs-small); color: var(--text-muted); } .post-actions button { background: none; border: 0; color: var(--text-secondary); cursor: pointer; font-size: var(--fs-small); } .post-actions button:hover { color: var(--accent); } .comments { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; display: grid; gap: 12px; } .comments[hidden] { display: none; } .comment { display: flex; gap: 10px; } .comment .c-body { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 13px; font-size: var(--fs-small); flex: 1; } .comment .c-body .who { font-weight: 600; } .comment-form { display: flex; gap: 10px; margin-top: 6px; } .comment-form input { flex: 1; } /* Entrada suave de los bloques de contenido (también al insertarse por JS) */ .app-content .stat, .app-content .panel-card, .app-content .card, .app-content .sub-item, .app-content .post-card, .app-content .resume-card, .app-content .admin-table tbody tr { animation: mcFadeUp .5s var(--ease) both; } .app-content .stat:nth-child(2), .app-content .card:nth-child(2), .app-content .post-card:nth-child(2) { animation-delay: .07s; } .app-content .stat:nth-child(3), .app-content .card:nth-child(3), .app-content .post-card:nth-child(3) { animation-delay: .14s; } .app-content .stat:nth-child(4), .app-content .card:nth-child(4), .app-content .post-card:nth-child(4) { animation-delay: .21s; } @media (prefers-reduced-motion: reduce) { .app-content .stat, .app-content .panel-card, .app-content .card, .app-content .sub-item, .app-content .post-card, .app-content .resume-card, .app-content .admin-table tbody tr, .stat .num, .app-content h1 { animation: none !important; } } /* Ajustes para el tema claro (la web usa claro por defecto) */ :root[data-theme="light"] .app-topbar { background: rgba(255,255,255,0.85); } :root[data-theme="light"] .pay-cta-bar { background: linear-gradient(0deg, var(--bg-surface), rgba(255,255,255,0.94)); } :root[data-theme="light"] .campus-app { background: radial-gradient(1200px 600px at 100% -10%, rgba(33,199,182,0.10), transparent 60%), var(--bg-base); }