Panel de Administración · LalelyCitas
Panel de Administración · LalelyCitas /* ===== Estilos específicos para el panel de administración ===== */ .admin-hero { padding: 2rem 0 1rem; } .admin-hero h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--color-texto); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .admin-hero h1 svg { width: 40px; height: 40px; color: var(--color-principal); } .admin-hero p { color: var(--color-gris); margin-top: 0.5rem; max-width: 60ch; } .admin-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem 0 3rem; } @media (min-width: 768px) { .admin-grid { grid-template-columns: 1fr 1fr; } } .admin-card { background-color: var(--color-blanco); border-radius: var(--radio); box-shadow: 0 4px 16px var(--color-sombra); padding: 1.5rem; border: 1px solid var(--color-gris-claro); } .admin-card h2 { font-size: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--color-texto); } .admin-card h2 svg { width: 24px; height: 24px; color: var(--color-principal); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .stat-item { background-color: var(--color-fondo); border-radius: var(--radio-pequeno); padding: 1rem; text-align: center; border: 1px solid var(--color-gris-claro); } .stat-item .stat-numero { font-size: 2rem; font-weight: bold; color: var(--color-principal); line-height: 1.2; } .stat-item .stat-etiqueta { font-size: 0.85rem; color: var(--color-gris); margin-top: 0.25rem; } .user-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .user-table th, .user-table td { padding: 0.75rem 0.5rem; text-align: left; border-bottom: 1px solid var(--color-gris-claro); } .user-table th { font-weight: bold; color: var(--color-texto); background-color: var(--color-fondo); } .user-table tr:last-child td { border-bottom: none; } .user-table .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-principal); color: var(--color-blanco); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; overflow: hidden; flex-shrink: 0; } .user-table .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-table .user-info { display: flex; align-items: center; gap: 0.75rem; } .user-table .user-nombre { font-weight: bold; color: var(--color-texto); } .user-table .user-email { font-size: 0.8rem; color: var(--color-gris); } .estado-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; } .estado-badge.activo { background-color: #d4edda; color: #155724; } .estado-badge.inactivo { background-color: #f8d7da; color: #721c24; } .admin-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } .admin-actions .btn-icono { min-height: 40px; min-width: 40px; font-size: 1rem; } .admin-actions .btn-icono:hover { background-color: var(--color-gris-claro); } .admin-actions .btn-icono.eliminar:hover { color: var(--color-principal); } .admin-actions .btn-icono.activar:hover { color: #2d8a4e; } .admin-actions .btn-icono.desactivar:hover { color: #b8860b; } .admin-actions .btn-icono.admin:hover { color: #6f42c1; } .admin-actions .btn-icono svg { width: 20px; height: 20px; } .admin-mensaje { padding: 1rem; border-radius: var(--radio-pequeno); margin-bottom: 1rem; font-weight: bold; text-align: center; } .admin-mensaje.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .admin-mensaje.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .admin-mensaje.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } .admin-cargando { display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--color-gris); gap: 0.5rem; } .admin-cargando .spinner { width: 20px; height: 20px; border: 3px solid var(--color-gris-claro); border-top-color: var(--color-principal); border-radius: 50%; animation: girar 0.8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .admin-vacio { text-align: center; padding: 2rem; color: var(--color-gris); } .admin-vacio svg { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--color-gris-claro); } .admin-vacio p { font-size: 0.95rem; } .admin-acciones-rapidas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .admin-acciones-rapidas .btn { flex: 1; min-width: 150px; } .admin-acciones-rapidas .btn svg { width: 18px; height: 18px; } .admin-acciones-rapidas .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .admin-acciones-rapidas .btn:disabled:hover { background-color: var(--color-principal); color: var(--color-blanco); box-shadow: none; } .admin-acciones-rapidas .btn-secundario:disabled:hover { background-color: transparent; color: var(--color-principal); } .admin-acciones-rapidas .btn-google:disabled:hover { background-color: var(--color-blanco); color: var(--color-texto); } .admin-acciones-rapidas .btn-google:disabled { border-color: var(--color-gris-claro); } .admin-acciones-rapidas .btn-google:disabled:hover { background-color: var(--color-blanco); color: var(--color-texto); transform: none; box-shadow: none; } .admin-acciones-rapidas .btn-google:disabled .spinner { border-color: var(--color-gris-claro); border-top-color: var(--color-principal); } .admin-acciones-rapidas .btn-google:disabled .spinner { width: 16px; height: 16px; border-width: 2px; } .admin-acciones-rapidas .btn-google:disabled .spinner { animation: girar 0.8s linear infinite; } .admin-acciones-rapidas .btn-google:disabled .spinner { display: inline-block; margin-right: 0.5rem; vertical-align: middle; } .admin-acciones-rapidas .btn-google:disabled .spinner { border: 2px solid var(--color-gris-claro); border-top-color: var(--color-principal); border-radius: 50%; } .admin-acciones-rapidas .btn-google:disabled .spinner { width: 16px; height: 16px;