/* =============================================== */
/*           VARIABLES Y ESTILOS BASE              */
/* =============================================== */
:root {
  /* --- Variables de color y diseño (no tocar) --- */
  --background: 0 0% 100%;
  --foreground: 206 11% 15%;
  --card: 0 0% 100%;
  --card-foreground: 206 11% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 206 11% 15%;
  --primary: 211 100% 72%;
  --primary-foreground: 206 11% 15%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 203 95% 79%;
  --accent-foreground: 206 11% 15%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 211 100% 72%;
  --radius: 0.5rem;
  --success: 142 71% 45%;
  --success-foreground: 142 71% 95%;
}
.dark {
  --background: 210 11% 14%;
  --foreground: 210 15% 98%;
  --card: 210 11% 19%;
  --card-foreground: 210 15% 98%;
  --popover: 210 11% 12%;
  --popover-foreground: 210 15% 98%;
  --primary: 211 100% 72%;
  --primary-foreground: 211 100% 15%;
  --secondary: 210 11% 22%;
  --secondary-foreground: 210 15% 98%;
  --muted: 210 11% 22%;
  --muted-foreground: 210 10% 65%;
  --accent: 203 95% 79%;
  --accent-foreground: 203 95% 15%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 15% 98%;
  --border: 210 11% 22%;
  --input: 210 11% 22%;
  --ring: 211 100% 72%;
  --success: 142 71% 45%;
  --success-foreground: 210 15% 98%;
}
* { box-sizing: border-box; border-color: hsl(var(--border)); margin: 0; padding: 0; }
body { font-family: 'Inter', Arial, Helvetica, sans-serif; background-color: hsl(var(--background)); color: hsl(var(--foreground)); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main { flex-grow: 1; }
/* =============================================== */
/*                 CLASES DE UTILIDAD              */
/* =============================================== */
.container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.sticky { position: sticky; } .top-0 { top: 0; } .z-50 { z-index: 50; } .w-full { width: 100%; } .border-b { border-bottom-width: 1px; } .border-t { border-top-width: 1px; } .border { border-width: 1px; } .border-border-40 { border-color: hsla(var(--border), 0.4); }
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-grow { flex-grow: 1; } .flex-1 { flex: 1 1 0%; } .flex-shrink-0 { flex-shrink: 0; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-x-8 { column-gap: 2rem; } .gap-y-6 { row-gap: 1.5rem; } .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; } .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }
.h-14 { height: 3.5rem; } .mr-4 { margin-right: 1rem; } .mr-6 { margin-right: 1.5rem; } .ml-3 { margin-left: 0.75rem; } .ml-4 { margin-left: 1rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mt-4 { margin-top: 1rem; } .mt-12 { margin-top: 3rem; } .mx-auto { margin-left: auto; margin-right: auto; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .pt-0-5 { padding-top: 0.125rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .text-center { text-align: center; } .text-primary { color: hsl(var(--primary)); } .text-muted-foreground { color: hsl(var(--muted-foreground)); } .text-card-foreground { color: hsl(var(--card-foreground)); }
.rounded-lg { border-radius: var(--radius); } .bg-card { background-color: hsl(var(--card)); } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.hidden { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
a { color: inherit; text-decoration: none; } a.hover-underline:hover { text-decoration: underline; }

/* =============================================== */
/*               COMPONENTES ESPECÍFICOS           */
/* =============================================== */

/* *** SOLUCIÓN DEFINITIVA PARA APILADO VERTICAL *** */
.project-grid {
  display: grid;
  justify-items: center; /* Centra las tarjetas horizontalmente */
  gap: 1.5rem; /* Espacio vertical entre las tarjetas */
}

#navbar {
  background-color: hsla(202, 12%, 18%, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: none !important;
}
.container {
  border-bottom: none !important;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 0.6rem 2rem; }
.btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; }
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s;
}
.btn-primary:hover {
  background-color: hsl(var(--primary));
  filter: brightness(1.1);
  text-decoration: none;
}
.btn-outline { border-color: hsl(var(--input)); background-color: hsl(var(--background)); }
.btn-outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-ghost { background-color: transparent; }
.btn-ghost:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn:disabled { pointer-events: none; opacity: 0.5; }
.select-container { position: relative; }
.select-container::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid hsl(var(--foreground));
  opacity: 0.5;
  pointer-events: none;
}
#category-filter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}
#category-filter:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

/* ===== TARJETAS DE PROYECTO (PÁGINA PRINCIPAL) ===== */
.project-card {
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  text-decoration: none;
  
  width: 100%;
  max-width: 585px; /* Ancho máximo para que no sea gigante en pantallas grandes */
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px hsla(var(--primary), 0.15), 0 3px 6px hsla(var(--primary), 0.1);
  border-color: hsl(var(--primary));
}
.project-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex-grow: 1; }
.project-card-header { display: flex; align-items: center; padding: 1rem; gap: 0.75rem; }
.project-card-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: hsl(var(--secondary)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.project-card-avatar svg { width: 1.5rem; height: 1.5rem; color: hsl(var(--secondary-foreground)); }
.project-card-header-text { flex-grow: 1; }
.project-card-title { font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: hsl(var(--card-foreground)); margin: 0; }
.project-card-author { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.project-card-category-tag { background-color: hsla(var(--primary), 0.15); color: hsl(var(--primary)); padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.project-card-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000; }
.project-card-media img, .project-card-media iframe { width: 100%; height: 100%; object-fit: cover; border: none; }
.project-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-top: 1px solid hsl(var(--border)); margin-top: auto; }
.project-card-actions { display: flex; align-items: center; gap: 0.5rem; }
.action-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.action-btn:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--accent)); }
.action-btn svg { width: 1rem; height: 1rem; }
.sale-tag, .free-tag { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: 1.05rem; font-weight: 700; }
.sale-tag { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.free-tag { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); }

/* ===== PÁGINA DE DETALLE DEL PROYECTO ===== */
.project-detail-header h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; color: hsl(var(--card-foreground)); text-align: center; margin-bottom: 2rem; }
.card { border-radius: var(--radius); border: 1px solid hsl(var(--border)); background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); margin-bottom: 2rem; }
.card-header { padding: 1.5rem; border-bottom: 1px solid hsl(var(--border)); }
.card-content { padding: 1.5rem; }
.card-title { font-size: 1.5rem; font-weight: 700; }
.card h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: hsl(var(--card-foreground)); }
.card p { color: hsl(var(--muted-foreground)); white-space: pre-wrap; margin-bottom: 1.5rem; line-height: 1.6; }
.card .separator { height: 1px; background-color: hsl(var(--border)); margin: 2rem 0; }
.card h3 { font-weight: 600; color: hsl(var(--card-foreground)); margin-bottom: 0.5rem; }
.card .info-grid p { margin-bottom: 0; }
.card ul, .card ol { list-style-position: inside; padding-left: 0; }
.card ul li, .card ol li { margin-bottom: 0.5rem; color: hsl(var(--muted-foreground)); }

/* ===== ACORDEONES (ESTILO ORIGINAL RESTAURADO) ===== */
.accordion-item { border-bottom: 1px solid hsl(var(--border)); }
.accordion-item:last-child { border-bottom: none; }
.accordion-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 500; cursor: pointer; background: none; border: none; color: inherit; text-align: left; font-size: 1rem; }
.accordion-trigger:hover { color: hsl(var(--primary)); }
.accordion-trigger .trigger-content { display: flex; align-items: center; gap: 1rem; font-size: 1.125rem; }
.accordion-trigger .version { font-weight: 700; }
.accordion-trigger .date { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.accordion-trigger .icon { transition: transform 0.2s; }
.accordion-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.accordion-content { overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out; }
.accordion-content .content-inner { padding: 0.5rem 0 1.5rem 0; }
.accordion-content p { white-space: pre-wrap; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.accordion-content .update-image { aspect-ratio: 16 / 9; width: 100%; max-width: 48rem; margin: auto; overflow: hidden; border-radius: 0.375rem; border: 1px solid hsl(var(--border)); position: relative; }
.accordion-content .update-image img { width: 100%; height: 100%; object-fit: cover; }

/* ===== BOTONES DE CONTACTO Y DESCARGA ===== */
.btn-discord, .btn-telegram, .btn-success {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 6px !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  user-select: none !important;
}
.btn-discord:before, .btn-telegram:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: left 0.5s ease !important;
  z-index: 1 !important;
}
.btn-discord:hover:before, .btn-telegram:hover:before { left: 100% !important; }
.btn-discord:hover, .btn-telegram:hover, .btn-success:hover { transform: translateY(-2px) scale(1.02) !important; }
.btn-discord:active, .btn-telegram:active, .btn-success:active { transform: translateY(0) scale(0.98) !important; }
.btn-discord { background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%) !important; box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3) !important; }
.btn-discord:hover { background: linear-gradient(135deg, #4752C4 0%, #5B6EAE 100%) !important; box-shadow: 0 8px 25px rgba(88, 101, 242, 0.4) !important; }
.btn-telegram { background: linear-gradient(135deg, #2AABEE 0%, #0088CC 100%) !important; box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3) !important; }
.btn-telegram:hover { background: linear-gradient(135deg, #1f9ad8 0%, #007ab8 100%) !important; box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4) !important; }
.btn-success { background-color: hsl(var(--success)) !important; box-shadow: 0 4px 15px hsla(var(--success), 0.3) !important; }
.btn-success:hover { background-color: hsl(var(--success)) !important; filter: brightness(1.15); box-shadow: 0 8px 25px hsla(var(--success), 0.4) !important; }
.btn-discord .discord-icon, .btn-telegram .telegram-icon { width: 18px !important; height: 18px !important; transition: transform 0.3s ease !important; z-index: 2 !important; position: relative !important; }
.btn-discord .discord-icon { fill: currentColor !important; }
.btn-telegram .telegram-icon { stroke: currentColor !important; }
.btn-discord:hover .discord-icon, .btn-telegram:hover .telegram-icon { transform: scale(1.1) rotate(5deg) !important; }
.btn-discord .btn-text, .btn-telegram .btn-text { z-index: 2 !important; position: relative !important; font-weight: 600 !important; }
.btn-discord.large, .btn-telegram.large, .btn-success.large { padding: 12px 24px !important; font-size: 1rem !important; border-radius: 8px !important; }

/* ===== GALERÍA DE PROYECTOS ===== */
.project-gallery-container { position: relative; width: 100%; margin-bottom: 2rem; }
.gallery-scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background-color: #000; }
.gallery-scroller { scrollbar-width: none; -ms-overflow-style: none; }
.gallery-scroller::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; scroll-snap-align: start; position: relative; }
.gallery-item img, .gallery-item iframe { width: 100%; height: 100%; object-fit: cover; border: none; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% - 1rem); left: 0.5rem; display: flex; justify-content: space-between; pointer-events: none; }
.gallery-nav-btn { pointer-events: all; background-color: hsla(0, 0%, 0%, 0.5); color: white; border: none; border-radius: 50%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; opacity: 0; transition: opacity 0.3s; }
.project-gallery-container:hover .gallery-nav-btn { opacity: 1; }
.gallery-nav-btn:hover { background-color: hsla(0, 0%, 0%, 0.8); }
.gallery-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.gallery-nav-btn svg { width: 1.5rem; height: 1.5rem; }
.view-count-overlay { position: absolute; bottom: 0.5rem; left: 0.5rem; display: flex; align-items: center; gap: 0.5rem; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; z-index: 10; }
.view-count-overlay svg { width: 1rem; height: 1rem; }

/* ===== NOTIFICACIÓN DE TELEGRAM FLOTANTE (RESTAURADO) ===== */
#telegram-notification {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 50;
  width: 100%;
  max-width: 24rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  padding: 1rem;
  color: hsl(var(--card-foreground));
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
#telegram-notification.hidden { display: none; }
.animate-in { animation: slide-in-from-bottom 0.5s ease-out; }
@keyframes slide-in-from-bottom { from { transform: translateY(2rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#telegram-notification button { background: none; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; }
#telegram-notification button:hover { color: hsl(var(--foreground)); }

/* Estilos para el dropdown de idiomas */
.dropdown {
    position: relative;
    display: inline-block;
    text-align: left;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    padding: 0.5rem 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.lang-toggle:hover {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--accent));
}

.lang-toggle .icon {
    margin-left: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s;
}

.lang-toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 8rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    z-index: 100;
    display: none; /* Asegurarse de que esté cerrado por defecto */
}

.dropdown-content.active {
    display: block; /* Mostrar solo cuando esté activo */
    max-height: 15rem;
    overflow-y: auto;
}

.lang-switcher-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    color: hsl(var(--card-foreground));
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    width: 100%;
    text-align: left;
}

.lang-switcher-item:hover,
.lang-switcher-item.active {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.lang-switcher-item .flag {
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* Media query para móviles */
@media (max-width: 767px) {
    .container { padding-left: 1rem; padding-right: 1rem; }

    #navbar .container {
        flex-direction: column;
        height: auto;
        padding: 0.5rem 0;
    }

    #navbar .flex {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #navbar a { margin: 0.5rem 0; }

    .btn-discord, .btn-telegram {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }

    .btn-discord .discord-icon,
    .btn-telegram .telegram-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .dropdown {
        width: 100%;
        margin-top: 0.5rem;
    }

    .lang-toggle {
        width: 80px;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .dropdown-content {
        min-width: 6rem;
        right: auto;
        left: 0;
        width: 100%;
    }

    .lang-switcher-item .flag {
        font-size: 1rem;
    }

    .project-card {
        margin-bottom: 1rem;
    }

    .project-card-media { aspect-ratio: 1 / 1; }

    .gallery-scroller { aspect-ratio: 1 / 1; }
    
    .action-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}