} /* Botón volver */ .btn-back { background: var(--dark-lighter); padding: 12px 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); } .btn-back:hover { background: var(--primary-dark); border-color: var(--primary); transition: 0.25s; } /* Header con glow */ header { backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } /* Grid más fluido */ .button-grid { gap: 20px; } /* Mejoras tipográficas */ h2, h3, h4 { letter-spacing: 0.4px; } /* Vista principal suave */ #mainView { transition: opacity 0.3s ease; } /* ───────────────────────────────────────────── */ /* MEJORAS ADICIONALES */ /* ───────────────────────────────────────────── */ /* Navegación en header */ header nav { display: flex; gap: 10px; align-items: center; } header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; } header nav a { color: var(--primary); text-decoration: none; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; display: inline-block; transition: 0.25s; font-weight: 500; } header nav a:hover { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); transform: translateY(-2px); } /* Botón en login screen */ .login-link-container { text-align: center; margin-top: 15px; } .btn-panel-link { display: inline-block; text-decoration: none; color: var(--primary); padding: 10px 18px; border: 1px solid var(--border); border-radius: 10px; font-weight: 500; transition: 0.25s; } .btn-panel-link:hover { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); transform: translateY(-2px); } /* Footer mejorado */ footer { background: var(--dark-light); border-top: 1px solid var(--border); padding: 20px; text-align: center; margin-top: 40px; } footer p { margin: 0; color: var(--text-muted); } footer a { color: var(--primary); text-decoration: none; font-weight: 500; transition: 0.25s; } footer a:hover { color: var(--secondary); text-decoration: underline; } /* Accesibilidad - mejores estados de foco */ button:focus, input:focus, a:focus { outline: 2px solid var(--primary); outline-offset: 2px; } /* Loading state para vistas */ .detail-view.loading { opacity: 0.6; pointer-events: none; } /* Responsive Design */ @media (max-width: 768px) { header { flex-direction: column; gap: 16px; align-items: flex-start; } header nav { width: 100%; } header nav ul { flex-direction: column; width: 100%; } header nav a { width: 100%; text-align: center; } .button-grid { grid-template-columns: 1fr; } .login-card { padding: 24px; } } @media (max-width: 480px) { header h2 { font-size: 20px; } .logo-title h1 { font-size: 24px; } }