| 1 | /* MAPS Connect - Panel de inicio */ |
| 2 | |
| 3 | .inicio-container { max-width: 1100px; margin: 0 auto; } |
| 4 | .loading-message { color: var(--gray-600); } |
| 5 | .inicio-container .card, .inicio-container .btn, .inicio-container .badge, .inicio-container input, .inicio-container select { border-radius: 0; } |
| 6 | .maps-banner { border-left: 4px solid var(--sidebar-bg); } |
| 7 | .banner-content, .post-header, .post-footer, .create-post-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } |
| 8 | .banner-content { align-items: flex-start; flex-wrap: wrap; } |
| 9 | .banner-content h1 { color: var(--sidebar-bg); font-size: 1.3rem; } |
| 10 | .banner-content p, .post-body, .side-card p { color: var(--gray-600); } |
| 11 | .progress-container { margin-top: 1rem; } |
| 12 | .progress-labels { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.375rem; color: var(--gray-600); font-size: 0.8rem; font-weight: 600; } |
| 13 | .progress-bar { height: 0.5rem; background: var(--gray-200); } |
| 14 | .progress-fill { width: 50%; height: 100%; background: var(--sidebar-bg); } |
| 15 | .inicio-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.25rem; } |
| 16 | .create-post input, .create-post select { width: 100%; padding: 0.75rem; border: 1px solid var(--gray-300); background: white; font: inherit; } |
| 17 | .create-post input { margin-bottom: 0.75rem; } |
| 18 | .create-post-actions select { max-width: 60%; } |
| 19 | .btn-solid { display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--sidebar-bg); background: var(--sidebar-bg); color: white; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-align: center; } |
| 20 | .btn-solid:hover, .btn-solid:focus-visible { background: #043b10; color: white; text-decoration: none; } |
| 21 | .post-card { padding: 1.125rem; } |
| 22 | .post-header { align-items: flex-start; margin-bottom: 0.75rem; } |
| 23 | .user-block, .badges-wrap, .action-links { display: flex; align-items: center; gap: 0.625rem; } |
| 24 | .badges-wrap, .action-links { flex-wrap: wrap; } |
| 25 | .avatar { display: grid; width: 2.375rem; height: 2.375rem; place-items: center; background: var(--sidebar-bg); color: white; font-size: 0.85rem; font-weight: 700; } |
| 26 | .avatar.prof { background: #0284c7; } |
| 27 | .user-data strong, .user-data span { display: block; } |
| 28 | .user-data strong { font-size: 0.9rem; } |
| 29 | .user-data span, .post-status { color: var(--gray-600); font-size: 0.75rem; } |
| 30 | .badge-materia { border: 1px solid #c8e6c9; background: #e8f5e9; color: var(--sidebar-bg); } |
| 31 | .badge-interacted { border: 1px solid #fde68a; background: #fef3c7; color: #92400e; } |
| 32 | .badge-solved { border: 1px solid #bbf7d0; background: #dcfce7; color: #166534; } |
| 33 | .badge-verified { border: 1px solid #bae6fd; background: #e0f2fe; color: #0369a1; } |
| 34 | .post-title { font-size: 1.05rem; } |
| 35 | .post-body { margin-bottom: 0.75rem; font-size: 0.9rem; } |
| 36 | .embed-box { margin: 0.75rem 0; border-left: 3px solid var(--sidebar-bg); background: var(--gray-50); padding: 0.625rem 0.75rem; font-size: 0.85rem; } |
| 37 | .embed-box p { margin-top: 0.25rem; } |
| 38 | .prof-box { border-left-color: #0284c7; background: #f0f9ff; } |
| 39 | .post-footer { margin-top: 0.75rem; border-top: 1px solid var(--gray-200); padding-top: 0.625rem; } |
| 40 | .btn-action { border: 0; background: transparent; color: var(--gray-600); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; } |
| 41 | .btn-action:hover, .btn-action.is-active { color: var(--sidebar-bg); text-decoration: none; } |
| 42 | .side-card { border-top: 3px solid var(--sidebar-bg); } |
| 43 | .side-card.prof-card { border-top-color: #0284c7; } |
| 44 | .side-card h3 { margin-top: 0.5rem; font-size: 0.95rem; } |
| 45 | .side-card p { margin: 0.5rem 0 0.75rem; font-size: 0.85rem; } |
| 46 | .side-card .btn-solid, .btn-clean { width: 100%; } |
| 47 | .btn-clean { display: inline-block; border: 1px solid var(--sidebar-bg); background: transparent; padding: 0.45rem 0.75rem; color: var(--sidebar-bg); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: center; } |
| 48 | .side-link { color: var(--sidebar-bg); font-size: 0.85rem; font-weight: 700; } |
| 49 | .empty-state { border-left: 4px solid var(--gray-300); text-align: center; } |
| 50 | .empty-state h2 { font-size: 1.05rem; } |
| 51 | .empty-state p { margin: 0.5rem 0 1rem; color: var(--gray-600); } |
| 52 | |
| 53 | @media (max-width: 850px) { .inicio-layout { grid-template-columns: 1fr; } } |
| 54 | @media (max-width: 560px) { |
| 55 | .post-header, .post-footer, .create-post-actions { align-items: flex-start; flex-direction: column; } |
| 56 | .create-post-actions select, .create-post-actions .btn-solid { max-width: none; width: 100%; } |
| 57 | .progress-labels { flex-direction: column; gap: 0.125rem; } |
| 58 | } |