From 5dc11c4e1b0a549cbf9aa0b56919855e41252422 Mon Sep 17 00:00:00 2001
From: Emiliano Gandini Outeda <emiliano.gandini@protonmail.com>
Date: Tue, 12 May 2026 15:56:29 -0300
Subject: [PATCH 1/6] test: empty PR to test workflow


From 2f51a81a0766bb8ac20cc44844bc81224b1e1bb5 Mon Sep 17 00:00:00 2001
From: Emiliano Gandini Outeda <emiliano.gandini@protonmail.com>
Date: Tue, 12 May 2026 16:22:40 -0300
Subject: [PATCH 2/6] Fix workflow ref: main -> master

---
 .github/workflows/pr-check.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml
index 3184c70..e186fa7 100644
--- a/.github/workflows/pr-check.yml
+++ b/.github/workflows/pr-check.yml
@@ -5,4 +5,4 @@ on:
 
 jobs:
   central:
-    uses: librecourseuy/.github/.github/workflows/central-checks.yml@main
+    uses: librecourseuy/.github/.github/workflows/central-checks.yml@master

From e9b4daea77e0e12736fe7406d870e83c0f65dc72 Mon Sep 17 00:00:00 2001
From: Emiliano Gandini Outeda <emiliano.gandini@protonmail.com>
Date: Tue, 12 May 2026 17:09:54 -0300
Subject: [PATCH 3/6] Remove workflows

---
 .github/workflows/deploy.yml   | 32 --------------------------------
 .github/workflows/pr-check.yml |  8 --------
 2 files changed, 40 deletions(-)
 delete mode 100644 .github/workflows/deploy.yml
 delete mode 100644 .github/workflows/pr-check.yml

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index d128bf3..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,32 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          provenance: false
-          tags: ghcr.io/librecourseuy/${{ github.event.repository.name }}:latest
-
-      
-
-      
diff --git a/.github/workflows/pr-check.yml b/.github/workflows/pr-check.yml
deleted file mode 100644
index e186fa7..0000000
--- a/.github/workflows/pr-check.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-name: PR Checks
-
-on:
-  pull_request:
-
-jobs:
-  central:
-    uses: librecourseuy/.github/.github/workflows/central-checks.yml@master

From b42416271361b4e24a1e7b42860b979e2edbbe94 Mon Sep 17 00:00:00 2001
From: Emiliano Gandini Outeda <emiliano.gandini@protonmail.com>
Date: Wed, 13 May 2026 01:09:11 -0300
Subject: [PATCH 4/6] Restore deploy workflow

---
 .github/workflows/deploy.yml | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 .github/workflows/deploy.yml

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 0000000..d128bf3
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,32 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          provenance: false
+          tags: ghcr.io/librecourseuy/${{ github.event.repository.name }}:latest
+
+      
+
+      

From 63860925733c049edbbdc85ff188ee815bdb3ff9 Mon Sep 17 00:00:00 2001
From: Emiliano Gandini Outeda <emiliano.gandini@protonmail.com>
Date: Mon, 1 Jun 2026 19:07:42 -0300
Subject: [PATCH 5/6] bump fastapi to 0.136.3

---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index 15dab9d..0652ac9 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,4 @@
-fastapi
+fastapi>=0.136.3
 uvicorn
 python-dotenv
 sqlalchemy

From d11eee9a6fae4e8558c0953da53892eeb0cd34e5 Mon Sep 17 00:00:00 2001
From: Emiliano Gandini Outeda <emiliano.gandini@protonmail.com>
Date: Mon, 29 Jun 2026 19:22:47 -0300
Subject: [PATCH 6/6] feat: security fixes + UI/UX overhaul

Security fixes:
- Fix CRITICAL async/sync DB session mismatch in DEV mode (add aiosqlite)
- Make ADMIN_PASSWORD required in PROD, warn in DEV
- Wire up CSRF protection (verify_admin_origin) on all admin endpoints
- Add 24h token expiry mechanism
- Remove token/Auth header leakage from DEBUG logs
- Add input size limits on Pydantic models
- Improve directory traversal check
- Reuse httpx.AsyncClient for metrics
- Remove unnecessary global statements

UI/UX improvements:
- Add glassmorphism header (backdrop-filter blur)
- Add card entrance animation with staggered delays
- Add purple accent border on group cards
- Fix green shadow bug on search focus
- Add custom dark scrollbar styling
- Add prefers-reduced-motion support
- Add :focus-visible styles for keyboard navigation
- Add aria-label to all icon buttons and form inputs
- Wire <label for> to all form fields
- Improve empty state with contextual suggestions
- Add search result count pill
- Add pinned badge to public group cards
- Add error/success icons to toast notifications
- Add spinner to loading state
- Fix layout shift with fixed-height error container
- Add box-shadow glow to active admin tab
---
 database.py       |  36 +++------
 main.py           | 192 ++++++++++++++++++----------------------------
 requirements.txt  |   1 +
 static/admin.html | 151 ++++++++++++++++++++++++++----------
 static/index.html | 157 +++++++++++++++++++++++++++++--------
 5 files changed, 323 insertions(+), 214 deletions(-)

diff --git a/database.py b/database.py
index 626afcb..765672a 100644
--- a/database.py
+++ b/database.py
@@ -20,17 +20,15 @@
 
 ENVIRONMENT = os.getenv("ENVIRONMENT", "DEV")
 
+_db_url = os.getenv("DATABASE_URL")
 if ENVIRONMENT == "PROD":
-    _db_url = os.getenv("DATABASE_URL")
     if not _db_url:
         raise RuntimeError("DATABASE_URL is required when ENVIRONMENT=PROD")
-    # Sync URL for dbwarden migrations
     _sync_db_url = _db_url.replace("postgresql+asyncpg://", "postgresql://", 1)
-    # Async URL for the app
     DATABASE_URL = _db_url.replace("postgresql://", "postgresql+asyncpg://", 1)
 else:
-    DATABASE_URL = os.getenv("DATABASE_URL", "sqlite:///./groups.db")
-    _sync_db_url = DATABASE_URL
+    DATABASE_URL = _db_url if _db_url else "sqlite+aiosqlite:///./groups.db"
+    _sync_db_url = DATABASE_URL.replace("sqlite+aiosqlite:///", "sqlite:///", 1)
 
 from dbwarden import database_config
 
@@ -38,19 +36,17 @@
     database_name="primary",
     default=True,
     database_type="postgresql" if ENVIRONMENT == "PROD" else "sqlite",
-    database_url=_sync_db_url,
+    database_url_sync=_sync_db_url,
     dev_database_type="sqlite",
     dev_database_url="sqlite:///./groups.db",
     migrations_dir="migrations",
 )
 
-if ENVIRONMENT == "PROD":
-    engine = create_async_engine(DATABASE_URL, echo=False, future=True)
-    AsyncSessionLocal = async_sessionmaker(bind=engine, class_=AsyncSession, expire_on_commit=False)
-else:
-    engine = create_engine(DATABASE_URL, echo=False, future=True)
+engine = create_async_engine(DATABASE_URL, echo=False, future=True)
+AsyncSessionLocal = async_sessionmaker(bind=engine, class_=AsyncSession, expire_on_commit=False)
 
-SessionLocal = sessionmaker(bind=engine, expire_on_commit=False)
+_sync_engine = create_engine(_sync_db_url, echo=False, future=True)
+SessionLocal = sessionmaker(bind=_sync_engine, expire_on_commit=False)
 
 
 # ============================================================================
@@ -118,18 +114,8 @@ class ImportantLink(Base):
 
 
 async def get_db():
-    """
-    FastAPI dependency that provides an async database session for each request.
-    """
-    if ENVIRONMENT == "PROD":
-        async with AsyncSessionLocal() as session:
-            try:
-                yield session
-            finally:
-                await session.close()
-    else:
-        db = SessionLocal()
+    async with AsyncSessionLocal() as session:
         try:
-            yield db
+            yield session
         finally:
-            db.close()
+            await session.close()
diff --git a/main.py b/main.py
index 11e4823..5bc14a7 100644
--- a/main.py
+++ b/main.py
@@ -12,11 +12,15 @@
 - Static file serving for the Vue.js frontend
 """
 
+from dotenv import load_dotenv
+
+load_dotenv()
+
 from fastapi import FastAPI, HTTPException, Request, Depends
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse, RedirectResponse
 from fastapi.middleware.cors import CORSMiddleware
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 from typing import Optional, List
 import os
 import logging
@@ -29,7 +33,7 @@
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select
 
-from database import SessionLocal, AsyncSessionLocal, Group, ImportantLink, get_db
+from database import ENVIRONMENT, SessionLocal, AsyncSessionLocal, Group, ImportantLink, get_db
 
 # ============================================================================
 # APPLICATION SETUP
@@ -39,6 +43,14 @@
 
 logger = logging.getLogger(__name__)
 
+_metrics_client: httpx.AsyncClient | None = None
+
+
+@app.on_event("shutdown")
+async def shutdown():
+    if _metrics_client is not None:
+        await _metrics_client.aclose()
+
 
 @app.middleware("http")
 async def log_requests(request: Request, call_next):
@@ -53,13 +65,20 @@ async def log_requests(request: Request, call_next):
 # ============================================================================
 
 # In production, use a strong password from environment variables
-# Default "admin123" is only for development/testing
-ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD", "admin123")
+_ADMIN_PASSWORD_ENV = os.getenv("ADMIN_PASSWORD")
+if _ADMIN_PASSWORD_ENV:
+    ADMIN_PASSWORD = _ADMIN_PASSWORD_ENV
+elif ENVIRONMENT == "PROD":
+    raise RuntimeError("ADMIN_PASSWORD environment variable is required when ENVIRONMENT=PROD")
+else:
+    ADMIN_PASSWORD = "admin123"
+    logger.warning("Using default admin password 'admin123'. Set ADMIN_PASSWORD env var for production.")
 
 # In-memory storage for admin sessions (tokens) and IP lockout data
 # Note: In production, consider using Redis or a database for session management
 lockout_data = {}
-admin_tokens = set()
+admin_tokens: dict[str, datetime] = {}
+TOKEN_EXPIRY_HOURS = 24
 
 
 def get_client_ip(request: Request) -> str:
@@ -74,32 +93,29 @@ def get_client_ip(request: Request) -> str:
 
 
 def verify_admin(request: Request):
-    """
-    Verify that the request comes from an authenticated admin.
-    Checks the Authorization header for a valid admin token.
-    Raises HTTP 401 if not authenticated.
-    """
     auth_header = request.headers.get("Authorization", "")
-    logger.debug("VERIFY_ADMIN - Authorization header: %s", auth_header)
     token = auth_header.replace("Bearer ", "").strip()
-    logger.debug("VERIFY_ADMIN - token: %s, admin_tokens: %s", token, admin_tokens)
-
-    if token not in admin_tokens:
+    expiry = admin_tokens.get(token)
+    if expiry is None:
         raise HTTPException(status_code=401, detail="Not authenticated")
-
+    if datetime.now() > expiry:
+        del admin_tokens[token]
+        raise HTTPException(status_code=401, detail="Token expired")
     return True
 
 
 def verify_admin_origin(request: Request):
-    """
-    Additional security check: verify the request originated from the admin page.
-    This prevents CSRF attacks where external sites try to admin actions.
-    """
     referer = request.headers.get("Referer", "")
-    if "/admin" not in referer and "/admin.html" not in referer:
+    if referer and "/admin" not in referer and "/admin.html" not in referer:
         raise HTTPException(status_code=403, detail="Access denied")
 
 
+def verify_admin_dependency(request: Request):
+    verify_admin(request)
+    verify_admin_origin(request)
+    return True
+
+
 # ============================================================================
 # METRICS CONFIGURATION
 # ============================================================================
@@ -112,6 +128,8 @@ def verify_admin_origin(request: Request):
 )
 METRICS_API_KEY = os.getenv("METRICS_API_KEY", "")
 
+_metrics_client = httpx.AsyncClient(timeout=10.0)
+
 
 class MetricsEvent(BaseModel):
     event_type: str
@@ -223,16 +241,16 @@ def fuzzy_search(query: str, groups: List, threshold: float = 0.3):
 
 
 class GroupCreate(BaseModel):
-    name: str
-    description: str = ""
-    url: str = ""
+    name: str = Field(..., min_length=3, max_length=255)
+    description: str = Field("", max_length=500)
+    url: str = Field("", max_length=500)
 
 
 class GroupUpdate(BaseModel):
     id: int
-    name: str
-    description: str
-    url: str
+    name: str = Field(..., min_length=3, max_length=255)
+    description: str = Field("", max_length=500)
+    url: str = Field("", max_length=500)
 
 
 class PinGroup(BaseModel):
@@ -282,15 +300,7 @@ def group_to_dict(group: Group):
 
 
 @app.post("/api/groups")
-async def create_group(group: GroupCreate, request: Request, db: AsyncSession = Depends(get_db)):
-    """Create a new group. Requires admin authentication."""
-    verify_admin(request)
-
-    if len(group.name) < 3:
-        raise HTTPException(
-            status_code=400, detail="El nombre debe tener al menos 3 caracteres"
-        )
-
+async def create_group(group: GroupCreate, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)):
     new_group = Group(
         name=group.name, description=group.description, url=group.url, pinned=False
     )
@@ -301,10 +311,7 @@ async def create_group(group: GroupCreate, request: Request, db: AsyncSession =
 
 
 @app.put("/api/groups")
-async def update_group(group: GroupUpdate, request: Request, db: AsyncSession = Depends(get_db)):
-    """Update an existing group. Requires admin authentication."""
-    verify_admin(request)
-
+async def update_group(group: GroupUpdate, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)):
     result = await db.execute(select(Group).filter(Group.id == group.id))
     db_group = result.scalar_one_or_none()
     if not db_group:
@@ -319,10 +326,7 @@ async def update_group(group: GroupUpdate, request: Request, db: AsyncSession =
 
 
 @app.delete("/api/groups/{group_id}")
-async def delete_group(group_id: int, request: Request, db: AsyncSession = Depends(get_db)):
-    """Delete a group. Requires admin authentication."""
-    verify_admin(request)
-
+async def delete_group(group_id: int, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)):
     result = await db.execute(select(Group).filter(Group.id == group_id))
     db_group = result.scalar_one_or_none()
     if not db_group:
@@ -334,14 +338,7 @@ async def delete_group(group_id: int, request: Request, db: AsyncSession = Depen
 
 
 @app.post("/api/groups/pin")
-async def pin_group(pin_data: PinGroup, request: Request, db: AsyncSession = Depends(get_db)):
-    """
-    Pin or unpin a group.
-    Pinned groups appear at the top of the list.
-    Requires admin authentication.
-    """
-    verify_admin(request)
-
+async def pin_group(pin_data: PinGroup, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)):
     result = await db.execute(select(Group).filter(Group.id == pin_data.group_id))
     db_group = result.scalar_one_or_none()
     if not db_group:
@@ -360,17 +357,6 @@ async def pin_group(pin_data: PinGroup, request: Request, db: AsyncSession = Dep
 
 @app.post("/api/admin/login")
 def admin_login(login: AdminLogin, request: Request):
-    """
-    Admin login endpoint with IP-based lockout protection.
-
-    Security features:
-    - Password verification
-    - IP-based rate limiting (3 attempts max)
-    - 24-hour lockout after failed attempts
-    - Token-based session management
-    """
-    global lockout_data
-
     client_ip = get_client_ip(request)
 
     if client_ip not in lockout_data:
@@ -392,13 +378,11 @@ def admin_login(login: AdminLogin, request: Request):
             detail=detail,
         )
 
-    # Verify password
     if login.password == ADMIN_PASSWORD:
-        global admin_tokens
         lockout_data[client_ip] = {"attempts": 0, "locked_until": None}
         token = secrets.token_hex(32)
-        admin_tokens.add(token)
-        logger.debug("LOGIN SUCCESS - token added: %s", token)
+        admin_tokens[token] = datetime.now() + timedelta(hours=TOKEN_EXPIRY_HOURS)
+        logger.debug("LOGIN SUCCESS - token: %s...", token[:8])
         return {"success": True, "message": "Admin autenticado", "token": token}
 
     # Failed attempt - increment counter and lock if too many attempts
@@ -443,16 +427,16 @@ def admin_status(request: Request):
 
 
 class ImportantLinkCreate(BaseModel):
-    title: str
-    description: str = ""
-    url: str
+    title: str = Field(..., min_length=3, max_length=255)
+    description: str = Field("", max_length=500)
+    url: str = Field(..., max_length=500)
 
 
 class ImportantLinkUpdate(BaseModel):
     id: int
-    title: str
-    description: str
-    url: str
+    title: str = Field(..., min_length=3, max_length=255)
+    description: str = Field("", max_length=500)
+    url: str = Field(..., max_length=500)
 
 
 def link_to_dict(link: ImportantLink):
@@ -476,18 +460,8 @@ async def get_important_links(db: AsyncSession = Depends(get_db)):
 
 @app.post("/api/important-links")
 async def create_important_link(
-    link: ImportantLinkCreate, request: Request, db: AsyncSession = Depends(get_db)
+    link: ImportantLinkCreate, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)
 ):
-    """Create a new important link. Requires admin authentication."""
-    verify_admin(request)
-
-    if len(link.title) < 3:
-        raise HTTPException(
-            status_code=400, detail="El título debe tener al menos 3 caracteres"
-        )
-    if not link.url:
-        raise HTTPException(status_code=400, detail="La URL es requerida")
-
     new_link = ImportantLink(
         title=link.title, description=link.description, url=link.url
     )
@@ -499,11 +473,8 @@ async def create_important_link(
 
 @app.put("/api/important-links")
 async def update_important_link(
-    link: ImportantLinkUpdate, request: Request, db: AsyncSession = Depends(get_db)
+    link: ImportantLinkUpdate, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)
 ):
-    """Update an existing important link. Requires admin authentication."""
-    verify_admin(request)
-
     result = await db.execute(select(ImportantLink).filter(ImportantLink.id == link.id))
     db_link = result.scalar_one_or_none()
     if not db_link:
@@ -519,11 +490,8 @@ async def update_important_link(
 
 @app.delete("/api/important-links/{link_id}")
 async def delete_important_link(
-    link_id: int, request: Request, db: AsyncSession = Depends(get_db)
+    link_id: int, request: Request, db: AsyncSession = Depends(get_db), _=Depends(verify_admin_dependency)
 ):
-    """Delete an important link. Requires admin authentication."""
-    verify_admin(request)
-
     result = await db.execute(select(ImportantLink).filter(ImportantLink.id == link_id))
     db_link = result.scalar_one_or_none()
     if not db_link:
@@ -541,20 +509,18 @@ async def delete_important_link(
 
 @app.post("/api/metrics/event")
 async def track_event(event: MetricsEvent):
-    """Track click events by forwarding to the metrics API."""
     if not METRICS_API_KEY:
         return {"status": "skipped", "reason": "Metrics not configured"}
 
     try:
-        async with httpx.AsyncClient(timeout=10.0) as client:
-            response = await client.post(
-                METRICS_EVENTS_URL,
-                json={"event_type": event.event_type, "metadata": event.metadata or {}},
-                headers={"X-API-Key": METRICS_API_KEY},
-            )
-            if response.status_code == 200:
-                return {"status": "ok"}
-            return {"status": "error", "detail": response.text}
+        response = await _metrics_client.post(
+            METRICS_EVENTS_URL,
+            json={"event_type": event.event_type, "metadata": event.metadata or {}},
+            headers={"X-API-Key": METRICS_API_KEY},
+        )
+        if response.status_code == 200:
+            return {"status": "ok"}
+        return {"status": "error", "detail": response.text}
     except Exception as e:
         logger.error(f"Metrics tracking failed: {e}")
         return {"status": "error", "detail": str(e)}
@@ -562,20 +528,18 @@ async def track_event(event: MetricsEvent):
 
 @app.post("/api/metrics/views")
 async def track_view(view: ViewEvent):
-    """Track page views by forwarding to the metrics API."""
     if not METRICS_API_KEY:
         return {"status": "skipped", "reason": "Metrics not configured"}
 
     try:
-        async with httpx.AsyncClient(timeout=10.0) as client:
-            response = await client.post(
-                METRICS_VIEWS_URL,
-                json=view.model_dump(exclude_none=True),
-                headers={"X-API-Key": METRICS_API_KEY},
-            )
-            if response.status_code == 200:
-                return {"status": "ok"}
-            return {"status": "error", "detail": response.text}
+        response = await _metrics_client.post(
+            METRICS_VIEWS_URL,
+            json=view.model_dump(exclude_none=True),
+            headers={"X-API-Key": METRICS_API_KEY},
+        )
+        if response.status_code == 200:
+            return {"status": "ok"}
+        return {"status": "error", "detail": response.text}
     except Exception as e:
         logger.error(f"View tracking failed: {e}")
         return {"status": "error", "detail": str(e)}
@@ -609,7 +573,7 @@ def serve_catch_all(path: str):
     logger.debug("CATCH-ALL REQUEST - path: %s, root_path: %s", path, app.root_path)
 
     # Security: prevent directory traversal
-    if ".." in path:
+    if ".." in path or path.startswith("/") or "\x00" in path:
         raise HTTPException(status_code=404, detail="Not found")
 
     # Don't serve API routes through SPA handler
@@ -621,10 +585,6 @@ def serve_catch_all(path: str):
         logger.debug("FAVICON MATCH in catch-all!")
         return FileResponse("static/favicon.svg", media_type="image/svg+xml")
 
-    # Serve static files directly
-    if path.startswith("static/"):
-        return FileResponse(path)
-
     # Admin routes
     if path == "admin" or path.startswith("admin/"):
         return FileResponse("static/admin.html")
diff --git a/requirements.txt b/requirements.txt
index 0652ac9..056e226 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,3 +6,4 @@ psycopg2-binary
 dbwarden>=0.7
 httpx
 asyncpg
+aiosqlite
diff --git a/static/admin.html b/static/admin.html
index e169ce0..72f08e7 100644
--- a/static/admin.html
+++ b/static/admin.html
@@ -35,7 +35,9 @@
             left: 0;
             right: 0;
             height: 60px;
-            background-color: #161b22;
+            background-color: rgba(22, 27, 34, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -123,6 +125,11 @@
             border-color: #957dcd;
         }
 
+        .form-input:focus-visible {
+            outline: 2px solid #957dcd;
+            outline-offset: 2px;
+        }
+
         .btn {
             width: 100%;
             padding: 14px;
@@ -149,10 +156,14 @@
             margin-top: 12px;
         }
 
+        .error-container {
+            min-height: 22px;
+            margin-top: 8px;
+        }
+
         .error-text {
             color: #f85149;
             font-size: 13px;
-            margin-top: 8px;
         }
 
         .lockout-info {
@@ -166,6 +177,24 @@
             font-size: 14px;
         }
 
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #161b22;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #3d444d;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #545d68;
+        }
+
         .toast {
             position: fixed;
             bottom: 24px;
@@ -177,6 +206,14 @@
             border-radius: 8px;
             font-weight: 500;
             z-index: 300;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            white-space: nowrap;
+        }
+
+        .toast.toast-error {
+            background-color: #f85149;
         }
 
         .admin-panel {
@@ -290,6 +327,7 @@
             background-color: #957dcd;
             border-color: #957dcd;
             color: #ffffff;
+            box-shadow: 0 2px 12px rgba(149, 125, 205, 0.3);
         }
 
         .group-list-url {
@@ -382,6 +420,14 @@
         .modal-actions .btn {
             flex: 1;
         }
+
+        @media (prefers-reduced-motion: reduce) {
+            *, *::before, *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
     </style>
 </head>
 <body>
@@ -410,16 +456,20 @@ <h2 class="login-title">Acceso Admin</h2>
                 </div>
 
                 <div class="form-group">
-                    <label class="form-label">Contraseña de Admin</label>
+                    <label class="form-label" for="admin-password">Contraseña de Admin</label>
                     <input 
+                        id="admin-password"
                         type="password" 
                         class="form-input" 
                         placeholder="Ingresa la contraseña"
                         v-model="password"
                         @keyup.enter="login"
                         :disabled="lockoutRemaining"
+                        autocomplete="current-password"
                     >
-                    <p class="error-text" v-if="error">{{ error }}</p>
+                    <div class="error-container">
+                        <p class="error-text" v-if="error">{{ error }}</p>
+                    </div>
                 </div>
 
                 <button class="btn btn-primary" @click="login" :disabled="lockoutRemaining">
@@ -451,6 +501,7 @@ <h3 class="panel-title">Administrar Grupos</h3>
                             type="text" 
                             class="form-input" 
                             placeholder="Buscar grupos..." 
+                            aria-label="Buscar grupos"
                             v-model="searchQuery"
                         >
                     </div>
@@ -467,13 +518,14 @@ <h3 class="panel-title">Administrar Grupos</h3>
                                     :class="{ pinned: group.pinned }"
                                     @click="togglePin(group)"
                                     :title="group.pinned ? 'Desfijar' : 'Fijar'"
+                                    :aria-label="group.pinned ? 'Desfijar grupo' : 'Fijar grupo'"
                                 >
                                     <i class="fas fa-thumbtack"></i>
                                 </button>
-                                <button class="action-btn edit-btn" @click="editGroup(group)" title="Editar">
+                                <button class="action-btn edit-btn" @click="editGroup(group)" title="Editar" aria-label="Editar grupo">
                                     <i class="fas fa-edit"></i>
                                 </button>
-                                <button class="action-btn delete-btn" @click="confirmDelete(group)" title="Eliminar">
+                                <button class="action-btn delete-btn" @click="confirmDelete(group)" title="Eliminar" aria-label="Eliminar grupo">
                                     <i class="fas fa-trash"></i>
                                 </button>
                             </div>
@@ -485,29 +537,34 @@ <h3 class="panel-title">Administrar Grupos</h3>
                     <h3 class="panel-title">{{ editingGroup ? 'Editar Grupo' : 'Crear Nuevo Grupo' }}</h3>
                     <div class="create-group-form">
                         <div class="form-group">
-                            <label class="form-label">Nombre del Grupo</label>
+                            <label class="form-label" for="group-name">Nombre del Grupo</label>
                             <input 
+                                id="group-name"
                                 type="text" 
                                 class="form-input" 
                                 placeholder="Ej: Desarrolladores Web"
                                 v-model="newGroup.name"
+                                autocomplete="off"
                             >
                         </div>
                         <div class="form-group">
-                            <label class="form-label">Descripción</label>
+                            <label class="form-label" for="group-desc">Descripción</label>
                             <textarea 
+                                id="group-desc"
                                 class="form-input" 
                                 placeholder="Describe el propósito del grupo"
                                 v-model="newGroup.description"
                             ></textarea>
                         </div>
                         <div class="form-group">
-                            <label class="form-label">URL del Grupo</label>
+                            <label class="form-label" for="group-url">URL del Grupo</label>
                             <input 
+                                id="group-url"
                                 type="url" 
                                 class="form-input" 
                                 placeholder="https://chat.example.com/grupo"
                                 v-model="newGroup.url"
+                                autocomplete="url"
                             >
                         </div>
                         <div class="form-actions">
@@ -531,10 +588,10 @@ <h3 class="panel-title">Links Importantes</h3>
                                 <div class="group-list-url">{{ link.url }}</div>
                             </div>
                             <div class="group-actions">
-                                <button class="action-btn edit-btn" @click="editLink(link)" title="Editar">
+                                <button class="action-btn edit-btn" @click="editLink(link)" title="Editar" aria-label="Editar link">
                                     <i class="fas fa-edit"></i>
                                 </button>
-                                <button class="action-btn delete-btn" @click="confirmDeleteLink(link)" title="Eliminar">
+                                <button class="action-btn delete-btn" @click="confirmDeleteLink(link)" title="Eliminar" aria-label="Eliminar link">
                                     <i class="fas fa-trash"></i>
                                 </button>
                             </div>
@@ -545,16 +602,16 @@ <h3 class="panel-title">Links Importantes</h3>
                         <h4 style="font-size: 14px; color: #8b949e; margin-bottom: 12px;">{{ editingLink ? 'Editar Link' : 'Nuevo Link' }}</h4>
                         <div class="create-group-form">
                             <div class="form-group">
-                                <label class="form-label">Título</label>
-                                <input type="text" class="form-input" placeholder="Ej: Reglamento" v-model="newLink.title">
+                                <label class="form-label" for="link-title">Título</label>
+                                <input id="link-title" type="text" class="form-input" placeholder="Ej: Reglamento" v-model="newLink.title" autocomplete="off">
                             </div>
                             <div class="form-group">
-                                <label class="form-label">Descripción</label>
-                                <textarea class="form-input" placeholder="Descripción breve" v-model="newLink.description"></textarea>
+                                <label class="form-label" for="link-desc">Descripción</label>
+                                <textarea id="link-desc" class="form-input" placeholder="Descripción breve" v-model="newLink.description"></textarea>
                             </div>
                             <div class="form-group">
-                                <label class="form-label">URL</label>
-                                <input type="url" class="form-input" placeholder="https://docs.example.com/reglamento" v-model="newLink.url">
+                                <label class="form-label" for="link-url">URL</label>
+                                <input id="link-url" type="url" class="form-input" placeholder="https://docs.example.com/reglamento" v-model="newLink.url" autocomplete="url">
                             </div>
                             <div class="form-actions">
                                 <button class="btn btn-secondary" @click="cancelLinkEdit" v-if="editingLink">Cancelar</button>
@@ -594,13 +651,14 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
             </div>
         </main>
 
-        <div class="toast" v-if="showToast">
+        <div class="toast" v-if="showToast" :class="{ 'toast-error': toastType === 'error' }">
+            <i :class="toastType === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
             {{ toastMessage }}
         </div>
     </div>
 
     <script>
-        const { createApp, ref, onMounted, computed } = Vue;
+        const { createApp, ref, onMounted, onUnmounted, computed } = Vue;
 
         createApp({
             setup() {
@@ -613,6 +671,7 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                 const activeTab = ref('manage');
                 const showToast = ref(false);
                 const toastMessage = ref('');
+                const toastType = ref('success');
                 const editingGroup = ref(null);
                 const groupToDelete = ref(null);
                 const showDeleteConfirm = ref(false);
@@ -622,6 +681,7 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                 const showDeleteLinkConfirm = ref(false);
                 const token = ref('');
                 const searchQuery = ref('');
+                const lockoutInterval = ref(null);
 
                 const baseUrl = window.location.pathname.split('/').slice(0, -1).join('/') || '';
                 const apiUrl = (path) => `${baseUrl}${path}`;
@@ -643,7 +703,8 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                     url: ''
                 });
 
-                const showToastMessage = (message) => {
+                const showToastMessage = (message, type = 'success') => {
+                    toastType.value = type;
                     toastMessage.value = message;
                     showToast.value = true;
                     setTimeout(() => {
@@ -660,11 +721,11 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             let tiempo = data.remaining_seconds;
                             lockoutTimeRemaining.value = timeToText(tiempo);
                             let updateTime = 1000;
-                            let lockoutInterval = setInterval(()=>{
+                            lockoutInterval.value = setInterval(()=>{
                                 lockoutTimeRemaining.value = timeToText(tiempo);
                                 if(tiempo < 0){
                                     window.location.reload();
-                                    clearInterval(lockoutInterval);
+                                    clearInterval(lockoutInterval.value);
                                 }
                                 tiempo -= updateTime / 1000;
                             }, updateTime)
@@ -757,16 +818,16 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
 
                         if (response.ok) {
                             group.pinned = !group.pinned;
-                            showToastMessage(group.pinned ? ` "${group.name}" fijado` : ` "${group.name}" desfijado`);
+                            showToastMessage(`"${group.name}" ${group.pinned ? 'fijado' : 'desfijado'}`);
                         }
                     } catch (e) {
-                        showToastMessage('Error al actualizar');
+                        showToastMessage('Error al actualizar', 'error');
                     }
                 };
 
                 const createGroup = async () => {
                     if (newGroup.value.name.length < 3) {
-                        showToastMessage('El nombre debe tener al menos 3 caracteres');
+                        showToastMessage('El nombre debe tener al menos 3 caracteres', 'error');
                         return;
                     }
 
@@ -784,10 +845,10 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             newGroup.value = { name: '', description: '', url: '' };
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al crear grupo');
+                            showToastMessage(data.detail || 'Error al crear grupo', 'error');
                         }
                     } catch (e) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
                 };
 
@@ -803,7 +864,7 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
 
                 const updateGroup = async () => {
                     if (newGroup.value.name.length < 3) {
-                        showToastMessage('El nombre debe tener al menos 3 caracteres');
+                        showToastMessage('El nombre debe tener al menos 3 caracteres', 'error');
                         return;
                     }
 
@@ -829,10 +890,10 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             cancelEdit();
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al actualizar');
+                            showToastMessage(data.detail || 'Error al actualizar', 'error');
                         }
                     } catch (e) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
                 };
 
@@ -861,10 +922,10 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             showToastMessage('Grupo eliminado');
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al eliminar');
+                            showToastMessage(data.detail || 'Error al eliminar', 'error');
                         }
                     } catch (e) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
 
                     showDeleteConfirm.value = false;
@@ -882,11 +943,11 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
 
                 const createLink = async () => {
                     if (newLink.value.title.length < 3) {
-                        showToastMessage('El título debe tener al menos 3 caracteres');
+                        showToastMessage('El título debe tener al menos 3 caracteres', 'error');
                         return;
                     }
                     if (!newLink.value.url) {
-                        showToastMessage('La URL es requerida');
+                        showToastMessage('La URL es requerida', 'error');
                         return;
                     }
 
@@ -904,10 +965,10 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             newLink.value = { title: '', description: '', url: '' };
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al crear');
+                            showToastMessage(data.detail || 'Error al crear', 'error');
                         }
                     } catch (e) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
                 };
 
@@ -922,7 +983,7 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
 
                 const updateLink = async () => {
                     if (newLink.value.title.length < 3) {
-                        showToastMessage('El título debe tener al menos 3 caracteres');
+                        showToastMessage('El título debe tener al menos 3 caracteres', 'error');
                         return;
                     }
 
@@ -948,10 +1009,10 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             cancelLinkEdit();
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al actualizar');
+                            showToastMessage(data.detail || 'Error al actualizar', 'error');
                         }
                     } catch (e) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
                 };
 
@@ -979,10 +1040,10 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                             showToastMessage('Link eliminado');
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al eliminar');
+                            showToastMessage(data.detail || 'Error al eliminar', 'error');
                         }
                     } catch (e) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
 
                     showDeleteLinkConfirm.value = false;
@@ -994,6 +1055,12 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                     fetchImportantLinks();
                 });
 
+                onUnmounted(() => {
+                    if (lockoutInterval.value) {
+                        clearInterval(lockoutInterval.value);
+                    }
+                });
+
                 return {
                     password,
                     isAdmin,
@@ -1008,6 +1075,7 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                     newGroup,
                     showToast,
                     toastMessage,
+                    toastType,
                     editingGroup,
                     groupToDelete,
                     showDeleteConfirm,
@@ -1027,6 +1095,7 @@ <h3 class="modal-title">Confirmar Eliminación</h3>
                     confirmDelete,
                     deleteGroup,
                     fetchImportantLinks,
+                    lockoutInterval,
                     createLink,
                     editLink,
                     updateLink,
diff --git a/static/index.html b/static/index.html
index a326628..18ede99 100644
--- a/static/index.html
+++ b/static/index.html
@@ -39,7 +39,9 @@
             left: 0;
             right: 0;
             height: 60px;
-            background-color: #161b22;
+            background-color: rgba(22, 27, 34, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -240,7 +242,13 @@
 
         .search-input:focus {
             border-color: #a388f3;
-            box-shadow: 0 0 0 3px rgba(33, 188, 98, 0.15);
+            box-shadow: 0 0 0 3px rgba(163, 136, 243, 0.2);
+        }
+
+        .search-input:focus-visible,
+        .form-input:focus-visible {
+            outline: 2px solid #957dcd;
+            outline-offset: 2px;
         }
 
         .search-input::placeholder {
@@ -280,23 +288,32 @@
         .groups-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
         .groups-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
 
+        @keyframes cardFadeIn {
+            from { opacity: 0; transform: translateY(16px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
         .group-card {
             background-color: #2d333b;
             border-radius: 16px;
             padding: 16px 20px;
             transition: all 0.3s ease;
             border: 1px solid #3d444d;
+            border-left: 3px solid #957dcd;
             display: flex;
             flex-direction: column;
             min-height: 120px;
             width: 100%;
             box-sizing: border-box;
+            animation: cardFadeIn 0.4s ease both;
+            cursor: pointer;
         }
 
         .group-card:hover {
             background-color: #373e47;
             transform: translateY(-4px);
             border-color: #545d68;
+            border-left-color: #a388f0;
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
         }
 
@@ -363,6 +380,21 @@
         .no-results-icon {
             font-size: 48px;
             margin-bottom: 16px;
+            color: #545d68;
+        }
+
+        .no-results-suggestion {
+            font-size: 13px;
+            color: #6e7681;
+            margin-top: 8px;
+        }
+
+        .search-results-count {
+            text-align: center;
+            font-size: 13px;
+            color: #6e7681;
+            margin-top: -32px;
+            margin-bottom: 16px;
         }
 
         .modal-overlay {
@@ -494,6 +526,18 @@
             font-weight: 500;
             z-index: 300;
             animation: toastIn 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            white-space: nowrap;
+        }
+
+        .toast.toast-error {
+            background-color: #f85149;
+        }
+
+        .toast.fade-out {
+            animation: toastOut 0.3s ease forwards;
         }
 
         @keyframes toastIn {
@@ -607,6 +651,24 @@
             margin-right: 8px;
         }
 
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #161b22;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #3d444d;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #545d68;
+        }
+
         .manage-btn {
             background-color: #30363d;
             color: #ffffff;
@@ -676,6 +738,14 @@
             color: #ffffff;
         }
 
+        @media (prefers-reduced-motion: reduce) {
+            *, *::before, *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+
         @media (max-width: 768px) {
             .header {
                 padding: 0 16px;
@@ -766,8 +836,9 @@ <h4 class="important-link-title">{{ link.title }}</h4>
                     <i class="fas fa-search search-icon"></i>
                     <input 
                         type="text" 
-                        class="search-input" 
-                        placeholder="Buscar grupos..." 
+                        class="search-input"
+                        placeholder="Buscar grupos..."
+                        aria-label="Buscar grupos"
                         v-model="searchQuery"
                         @input="debounceSearch"
                     >
@@ -776,33 +847,50 @@ <h4 class="important-link-title">{{ link.title }}</h4>
             </div>
 
             <div v-if="!loading">
-                <div class="groups-grid" v-for="(row, index) in groupRows" :key="index" :class="'cols-' + row.cols">
-                    <div class="group-card" v-for="group in row.items" :key="group.id">
-                    <div class="card-content">
-                        <h3 class="group-name">{{ group.name }}</h3>
-                        <p class="group-description">{{ group.description }}</p>
-                    </div>
-                    <div class="join-btn-wrapper">
-                        <a :href="group.url" target="_blank" class="join-btn" v-if="group.url">
-                            Unirse al Grupo
-                        </a>
-                        <button class="join-btn" @click="joinGroup(group)" v-else>
-                            Unirse al Grupo
-                        </button>
-                    </div>
+            <div class="groups-grid" v-for="(row, index) in groupRows" :key="index" :class="'cols-' + row.cols">
+                <div class="group-card" v-for="(group, i) in row.items" :key="group.id"
+                     :style="{ animationDelay: `${0.06 * (i + 1) + 0.1 * index}s` }">
+                <div class="card-content">
+                    <h3 class="group-name">
+                        <span class="pinned-badge" v-if="group.pinned" aria-label="Grupo fijado">
+                            <i class="fas fa-thumbtack"></i>
+                        </span>
+                        {{ group.name }}
+                    </h3>
+                    <p class="group-description">{{ group.description }}</p>
+                </div>
+                <div class="join-btn-wrapper">
+                    <a :href="group.url" target="_blank" class="join-btn" v-if="group.url"
+                       aria-label="Unirse al grupo {{ group.name }}">
+                        Unirse al Grupo
+                    </a>
+                    <button class="join-btn" @click="joinGroup(group)" v-else
+                            aria-label="Unirse al grupo {{ group.name }}">
+                        Unirse al Grupo
+                    </button>
                 </div>
             </div>
+            </div>
+
+            <div class="search-results-count" v-if="searchQuery && !loading && filteredGroups.length > 0">
+                {{ filteredGroups.length }} resultado{{ filteredGroups.length !== 1 ? 's' : '' }}
+            </div>
 
             <div class="loading" v-if="loading">
-                Cargando grupos...
+                <i class="fas fa-spinner fa-pulse"></i> Cargando grupos...
             </div>
 
-            <div class="no-results" v-if="!loading && filteredGroups.length === 0"> 
-                <p>No se encontraron grupos</p>
+            <div class="no-results" v-if="!loading && filteredGroups.length === 0">
+                <div class="no-results-icon"><i class="fas fa-search"></i></div>
+                <p v-if="searchQuery">No hay grupos que coincidan con "{{ searchQuery }}"</p>
+                <p v-else>Aún no hay grupos en Fingcomms</p>
+                <p class="no-results-suggestion" v-if="searchQuery">Intenta con otro término de búsqueda</p>
+                <p class="no-results-suggestion" v-else>¿Eres administrador? Crea el primer grupo desde el panel</p>
             </div>
         </main>
 
-        <div class="toast" v-if="showToast" :class="{ 'fade-out': toastFading }">
+        <div class="toast" v-if="showToast" :class="{ 'fade-out': toastFading, 'toast-error': toastType === 'error' }">
+            <i :class="toastType === 'error' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
             {{ toastMessage }}
         </div>
     </div>
@@ -830,6 +918,7 @@ <h3 class="group-name">{{ group.name }}</h3>
                 const showToast = ref(false);
                 const toastMessage = ref('');
                 const toastFading = ref(false);
+                const toastType = ref('success');
 
                 const newGroup = ref({
                     name: '',
@@ -1002,7 +1091,9 @@ <h3 class="group-name">{{ group.name }}</h3>
                     showToastMessage(`Te has unido a "${group.name}"`);
                 };
 
-                const showToastMessage = (message) => {
+
+                const showToastMessage = (message, type = 'success') => {
+                    toastType.value = type;
                     toastMessage.value = message;
                     showToast.value = true;
                     toastFading.value = false;
@@ -1053,13 +1144,13 @@ <h3 class="group-name">{{ group.name }}</h3>
                             body: JSON.stringify({ group_id: group.id, pinned: !group.pinned })
                         });
 
-                        if (response.ok) {
-                            group.pinned = !group.pinned;
-                            showToastMessage(group.pinned ? ` "${group.name}" fijado` : ` "${group.name}" desfijado`);
-                        }
-                    } catch (error) {
-                        showToastMessage('Error al actualizar');
+                    if (response.ok) {
+                        group.pinned = !group.pinned;
+                        showToastMessage(`"${group.name}" ${group.pinned ? 'fijado' : 'desfijado'}`);
                     }
+                } catch (error) {
+                    showToastMessage('Error al actualizar', 'error');
+                }
                 };
 
                 const verifyAdmin = async () => {
@@ -1078,6 +1169,7 @@ <h3 class="group-name">{{ group.name }}</h3>
                         } else {
                             const data = await response.json();
                             loginError.value = data.detail;
+                            showToastMessage(data.detail || 'Error de autenticación', 'error');
                             if (data.detail.includes('bloqueada')) {
                                 lockoutRemaining.value = true;
                                 checkAdminStatus();
@@ -1090,7 +1182,7 @@ <h3 class="group-name">{{ group.name }}</h3>
 
                 const createGroup = async () => {
                     if (newGroup.value.name.length < 3) {
-                        showToastMessage('El nombre debe tener al menos 3 caracteres');
+                        showToastMessage('El nombre debe tener al menos 3 caracteres', 'error');
                         return;
                     }
 
@@ -1109,10 +1201,10 @@ <h3 class="group-name">{{ group.name }}</h3>
                             newGroup.value = { name: '', description: '' };
                         } else {
                             const data = await response.json();
-                            showToastMessage(data.detail || 'Error al crear grupo');
+                            showToastMessage(data.detail || 'Error al crear grupo', 'error');
                         }
                     } catch (error) {
-                        showToastMessage('Error de conexión');
+                        showToastMessage('Error de conexión', 'error');
                     }
                 };
 
@@ -1160,6 +1252,7 @@ <h3 class="group-name">{{ group.name }}</h3>
                     showToast,
                     toastMessage,
                     toastFading,
+                    toastType,
                     debounceSearch,
                     clearSearch,
                     joinGroup,