cards universidades con el mismo tamano

components/mapComp copy.vue

@@ -1,447 +0,0 @@
-<template>
-  <section class="relative">
-    <!-- Left Sidebar -->
-    <aside
-      v-if="showSidebar"
-      class="fixed left-0 top-0 w-80 h-screen bg-gradient-to-br from-purple-900 via-purple-950 to-indigo-950 text-white overflow-y-auto z-50 shadow-2xl sidebar-custom"
-    >
-      <div class="p-5 border-b border-white/10">
-        <img src="/LOGOBraviooB.png" alt="logo-bravio" class="h-10 md:h-14 object-cover" />
-      </div>
-
-      <div class="p-5">
-        <div class="flex justify-between items-center mb-3">
-          <h2 class="text-lg font-semibold">
-            {{ langcode === 'pt' ? 'Explorar instituições' : 'Explorar instituciones' }}
-          </h2>
-        </div>
-
-        <p class="text-sm opacity-80 mb-5 leading-relaxed">
-          {{ langcode === 'pt'
-            ? 'Busque por universidade, país e estado da Defensoria.'
-            : 'Busca por universidad, país y estado de Defensoría.' }}
-        </p>
-
-        <!-- Search -->
-        <div class="mb-4">
-          <label class="block text-sm mb-2 font-medium">
-            {{ langcode === 'pt' ? 'Buscar Universidade' : 'Buscar Universidad' }}
-          </label>
-          <div class="relative">
-            <input
-              v-model="searchQuery"
-              type="text"
-              :placeholder="langcode === 'pt' ? 'Buscar...' : 'Buscar...'"
-              class="w-full px-3 py-2.5 pr-10 bg-white/10 border border-white/20 rounded-md text-white text-sm placeholder-white/50 focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
-            />
-            <span class="absolute right-3 top-1/2 -translate-y-1/2 opacity-60">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
-            </span>
-          </div>
-        </div>
-
-        <!-- Country -->
-        <div class="mb-4">
-          <label class="block text-sm mb-2 font-medium">
-            {{ langcode === 'pt' ? 'País' : 'País' }}
-          </label>
-          <select
-            v-model="selectedCountry"
-            class="w-full px-3 py-2.5 bg-white/10 border border-white/20 rounded-md text-white text-sm appearance-none cursor-pointer focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
-          >
-            <option value="">{{ langcode === 'pt' ? 'Selecionar' : 'Seleccionar' }}</option>
-            <option v-for="c in countries" :key="c.value" :value="c.value">
-              {{ c[langcode] }}
-            </option>
-          </select>
-        </div>
-
-        <!-- Status -->
-        <div class="mb-4">
-          <label class="block text-sm mb-2 font-medium">
-            {{ langcode === 'pt' ? 'Estado da Defensoria' : 'Estado Defensoría' }}
-          </label>
-          <select
-            v-model="selectedStatus"
-            class="w-full px-3 py-2.5 bg-white/10 border border-white/20 rounded-md text-white text-sm appearance-none cursor-pointer focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
-          >
-            <option value="">{{ langcode === 'pt' ? 'Selecionar' : 'Seleccionar' }}</option>
-            <option value="activa">{{ langcode === 'pt' ? 'Ativa' : 'Activa' }}</option>
-            <option value="en-desarrollo">{{ langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo' }}</option>
-            <option value="en-estudio">{{ langcode === 'pt' ? 'Em estudo' : 'En estudio' }}</option>
-          </select>
-        </div>
-
-        <!-- Clear -->
-         <div class="w-full flex">
-           <button
-             class="w-fit p-2.5 ml-auto bg-transparent border border-white/30 text-white/90 rounded-md cursor-pointer text-xs"
-             @click="clearFilters"
-           >
-             {{ langcode === 'pt' ? 'LIMPAR' : 'LIMPIAR' }}
-           </button>
-         </div>
-
-        <!-- Counts -->
-        <div class="my-5 py-4 border-t border-b border-white/10">
-          <p class="text-sm mb-3">
-            {{ langcode === 'pt' ? 'Mostrando' : 'Mostrando' }}
-            {{ filteredResults.length }}
-            {{ langcode === 'pt' ? 'de' : 'de' }}
-            {{ universities.length }}
-            {{ langcode === 'pt' ? 'universidades' : 'universidades' }}
-          </p>
-          <div class="flex gap-2.5 text-surface">
-            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
-              <span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-cyan-400"></span>
-              {{ activaCount }}
-            </span>
-            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
-              <span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-orange-400"></span>
-              {{ desarrolloCount }}
-            </span>
-            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
-              <span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-rose-400"></span>
-              {{ estudioCount }}
-            </span>
-          </div>
-        </div>
-
-        <!-- Download -->
-        <button
-          class="w-full py-2.5 bg-transparent text-white/90 cursor-pointer text-xs mb-3 hover:underline flex items-end justify-end gap-2.5"
-          @click="downloadCSV"
-        >
-          {{ langcode === 'pt' ? 'Baixar CSV' : 'Descargar CSV' }}
-          <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg></span>
-        </button>
-
-        <!-- University List -->
-        <div class="flex flex-col gap-2.5">
-          <div
-            v-for="u in filteredResults"
-            :key="u.id"
-            class="university-item bg-white/90 text-bg p-4 rounded-lg cursor-pointer transition-all border-2 border-transparent hover:bg-white/70"
-            :class="{ 'border-white/30 bg-white/15': selectedUniversity?.id === u.id }"
-            @click="selectUniversity(u)"
-          >
-            <h3 class="text-base font-semibold mb-1">{{ u.university[langcode] }}</h3>
-            <p class="text-xs opacity-80 mb-2">{{ u.city[langcode] }}, {{ u.country[langcode] }}</p>
-            <span class="inline-flex items-center gap-1.5 text-xs font-medium">
-              <span
-                class="w-3.5 h-3.5 rounded-full border-2 border-white inline-block"
-                :class="{
-                  'bg-cyan-400': u.status === 'activa',
-                  'bg-orange-400': u.status === 'en-desarrollo',
-                  'bg-rose-400': u.status === 'en-estudio'
-                }"
-              ></span>
-              {{ getStatusLabel(u.status) }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </aside>
-
-    <!-- Botón de colapsar / expandir -->
-    <button
-      class="aside-colap-btn fixed top-5 z-50 bg-white hover:bg-white/80 hover:cursor-pointer text-surface w-8 h-8 rounded-l-none rounded-r-md flex items-center justify-center shadow-lg transition-all"
-      :class="[
-        showSidebar
-          ? 'left-80'
-          : 'left-0'
-      ]"
-      @click="showSidebar = !showSidebar"
-    >
-      <svg
-        v-if="showSidebar"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="m15 18-6-6 6-6" />
-      </svg>
-
-      <svg
-        v-else
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="m9 18 6-6-6-6" />
-      </svg>
-    </button>
-
-    <!-- Contenedor del mapa -->
-    <div id="mapContainer" class="map-container relative" style="width:100%;height:100vh;">
-      <!-- *** Overlay de marcadores gestionados por Vue (está dentro del mapContainer) *** -->
-      <div id="mapMarkers" class="absolute inset-0 pointer-events-none z-40">
-        <div
-          v-for="u in filteredResults"
-          :key="u.id"
-          class="marker pointer-events-auto"
-          :style="getMarkerStyle(u)"
-          @click="selectUniversity(u)"
-        >
-          <!-- elemento visual del punto — sin transform en hover -->
-          <div
-            class="marker-dot w-5 h-5 rounded-full border-[3px] border-white shadow-md"
-            :style="{ backgroundColor: getMarkerColor(u.status) }"
-            title="Click para ir"
-          ></div>
-        </div>
-      </div>
-      <!-- El mapa se inicializa en este div -->
-      <!-- Nota: el overlay está dentro, así las coordenadas proyectadas encajan exactamente -->
-    </div>
-
-    <!-- Leyenda de estados + selector de idioma -->
-    <div class="fixed bottom-5 right-5 text-sm text-bg z-[1000] min-w-44">
-      <div class="flex flex-col justify-between items-start gap-2 w-full">
-        <!-- Selector de idioma -->
-        <div class="w-full">
-          <select
-            v-model="selectedLanguage"
-            class="px-2 py-1 rounded-md border border-gray-300 bg-white/90 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"
-            @change="changeLanguage(selectedLanguage)"
-          >
-            <option value="es">Español</option>
-            <option value="pt">Português</option>
-          </select>
-        </div>
-
-        <!-- Columna de estados -->
-        <div class="bg-white/90 p-4 rounded-lg text-xs w-full">
-          <h3 class="font-semibold mb-1">
-            {{ langcode === 'pt' ? 'Estado' : 'Estado' }}
-          </h3>
-          <ul class="space-y-1">
-            <li class="flex items-center gap-2">
-              <span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-cyan-400"></span>
-              <span>{{ langcode === 'pt' ? 'Ativa' : 'Activa' }}</span>
-            </li>
-            <li class="flex items-center gap-2">
-              <span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-orange-400"></span>
-              <span>{{ langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo' }}</span>
-            </li>
-            <li class="flex items-center gap-2">
-              <span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-rose-400"></span>
-              <span>{{ langcode === 'pt' ? 'Sem defensoria' : 'Sin defensoría' }}</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import mapboxgl from 'mapbox-gl'
-import { mapGetters, mapActions } from 'vuex'
-import universitiesData from '@/data/universities.json'
-
-export default {
-  data() {
-    return {
-      accessToken: 'pk.eyJ1IjoibWFyaWFzYXNvIiwiYSI6ImNsYThnemI4bjAzYzEzdm52cG1jZnptbXQifQ.CK4LGjX7ZFCVr-unLdzUSQ',
-      map: null,
-      universities: universitiesData,
-      searchQuery: '',
-      selectedCountry: '',
-      selectedStatus: '',
-      selectedLanguage: 'es',
-      selectedUniversity: null,
-      showSidebar: true,
-      countries: [
-        { value: 'honduras', es: 'Honduras', pt: 'Honduras' },
-        { value: 'bolivia', es: 'Bolivia', pt: 'Bolívia' },
-        { value: 'argentina', es: 'Argentina', pt: 'Argentina' },
-        { value: 'chile', es: 'Chile', pt: 'Chile' },
-        { value: 'resto', es: 'Resto de países - Latinoamérica', pt: 'Resto de países - Latinoamérica' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters(['langcode']),
-    filteredResults() {
-      return this.universities.filter(u => {
-        const matchSearch =
-          !this.searchQuery ||
-          u.university[this.langcode].toLowerCase().includes(this.searchQuery.toLowerCase()) ||
-          u.city[this.langcode].toLowerCase().includes(this.searchQuery.toLowerCase())
-
-        // País
-        let matchCountry = true
-        if (this.selectedCountry) {
-          const countryLower = u.country[this.langcode].toLowerCase()
-          if (this.selectedCountry === 'resto') {
-            // Si selecciona "resto", solo mostramos los países que NO son estos cuatro
-            const principales = ['honduras', 'bolivia', 'argentina', 'chile']
-            matchCountry = !principales.includes(countryLower)
-          } else {
-            matchCountry = countryLower === this.selectedCountry.toLowerCase()
-          }
-        }
-
-        const matchStatus = !this.selectedStatus || u.status === this.selectedStatus
-
-        return matchSearch && matchCountry && matchStatus
-      })
-    },
-    activaCount() { return this.universities.filter(u => u.status === 'activa').length },
-    desarrolloCount() { return this.universities.filter(u => u.status === 'en-desarrollo').length },
-    estudioCount() { return this.universities.filter(u => u.status === 'en-estudio').length }
-  },
-
-  watch: {
-    // cuando cambian resultados, forzamos re-render para reposicionar overlays
-    filteredResults() {
-      // forzamos calculo de estilos (re-render)
-      this.$nextTick(() => this.$forceUpdate())
-    }
-  },
-
-  mounted() {
-    this.createMap()
-  },
-
-    
-  methods: {
-    ...mapActions(['setLangcode']),
-    createMap() {
-      mapboxgl.accessToken = this.accessToken
-      this.map = new mapboxgl.Map({
-        container: 'mapContainer',
-        style: 'mapbox://styles/mariasaso/cme8hxq2w00cb01sb3jd105ue',
-        center: [-60, -15],
-        zoom: 2.5
-      })
-
-      // controles Mapbox
-      this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
-      this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')
-
-      // Recalcula las posiciones de los overlays cuando el mapa se mueve/zoom/resiza
-      this.map.on('move', () => this.$forceUpdate())
-      this.map.on('zoom', () => this.$forceUpdate())
-      this.map.on('resize', () => this.$forceUpdate())
-
-      // al cargar, forzamos render
-      this.map.on('load', () => this.$forceUpdate())
-    },
-
-    getMarkerColor(status) {
-      return {
-        'activa': '#22c5c2',
-        'en-desarrollo': '#ffa500',
-        'en-estudio': '#ff4560'
-      }[status] || '#999'
-    },
-
-    getMarkerStyle(u) {
-      // Devuelve left/top en px relativos al contenedor del mapa (map.project funciona si map existe)
-      if (!this.map) return { left: '0px', top: '0px', transform: 'translate(-50%, -50%)' }
-
-      // u.coordinates está en formato [lng, lat]
-      const p = this.map.project(u.coordinates) // { x, y }
-      return {
-        left: `${Math.round(p.x)}px`,
-        top: `${Math.round(p.y)}px`,
-        transform: 'translate(-50%, -50%)',
-        position: 'absolute'
-      }
-    },
-
-    selectUniversity(u) {
-      this.selectedUniversity = u
-      // Solo flyTo/zoom: sin popups ni cambios visuales de marcador
-      if (this.map) {
-        this.map.flyTo({ center: u.coordinates, zoom: 12, duration: 1200 })
-      }
-    },
-
-    clearFilters() {
-      this.searchQuery = ''
-      this.selectedCountry = ''
-      this.selectedStatus = ''
-    },
-
-    getStatusLabel(status) {
-      const labels = {
-        'activa': this.langcode === 'pt' ? 'Ativa' : 'Activa',
-        'en-desarrollo': this.langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo',
-        'en-estudio': this.langcode === 'pt' ? 'Em estudo' : 'En estudio'
-      }
-      return labels[status] || status
-    },
-
-    downloadCSV() {
-      const headers = ['Universidad', 'Web', 'Defensor', 'Contacto', 'Ciudad', 'País', 'Estado']
-      const rows = this.filteredResults.map(u => [u.university[this.langcode], u.web, u.defensor[this.langcode], u.contact, u.city[this.langcode], u.country[this.langcode], u.status])
-      const csv = headers.join(',') + '\n' + rows.map(r => r.join(',')).join('\n')
-      const blob = new Blob([csv], { type: 'text/csv' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = 'universidades.csv'
-      a.click()
-      URL.revokeObjectURL(url)
-    },
-
-    changeLanguage(lang) {
-      this.setLangcode(lang)
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* Transición suave para el sidebar al mostrarse/ocultarse */
-.sidebar-custom, .aside-colap-btn {
-  transition: transform 0.4s ease-in-out;
-}
-
-.sidebar-custom[style*="display: none"] {
-  transform: translateX(-100%);
-}
-
-/* Aseguramos que el overlay y el mapa estén alineados exactamente */
-.map-container { position: relative; }
-
-/* Contenedor absoluto que centra cada marker por su propio translate(-50%, -50%) */
-.marker {
-  position: absolute;
-  transform-origin: center center;
-  /* translate aplicado desde getMarkerStyle (inline style) */
-  /* pointer-events-auto para permitir clicks */
-}
-
-/* Punto visual sin transformaciones en hover, para que no cambie su layout */
-.marker-dot {
-  width: 20px; height: 20px;
-  border-radius: 9999px;
-  border: 3px solid white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
-}
-
-/* Opcional: cursor pointer */
-.marker { cursor: pointer; }
-
-/* Scrollbar y controles (mantener tus estilos previos) */
-.sidebar-custom::-webkit-scrollbar { width: 6px; }
-.sidebar-custom::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
-.mapboxgl-ctrl-group { background: white !important; box-shadow: 0 0 0 2px rgba(0,0,0,.1) !important; }
-</style>

components/mapComp.vue

@@ -121,12 +121,14 @@
           <div
             v-for="u in filteredResults"
             :key="u.id"
-            class="university-item bg-white/90 text-bg p-4 rounded-lg cursor-pointer transition-all border-2 border-transparent hover:bg-white/70"
+            class="bg-white/90 text-bg p-4 rounded-lg cursor-pointer transition-all border-2 border-transparent hover:bg-white/70 min-h-32 max-h-32 flex flex-col justify-between"
             :class="{ 'border-white/30 bg-white/15': selectedUniversity?.id === u.id }"
             @click="selectUniversity(u)"
           >
-            <h3 class="text-base font-semibold mb-1">{{ u.university[langcode] }}</h3>
-            <p class="text-xs opacity-80 mb-2">{{ u.city[langcode] }}, {{ u.country[langcode] }}</p>
+            <div class="">
+              <h3 class="text-base font-semibold mb-1">{{ u.university[langcode] }}</h3>
+              <p class="text-xs opacity-80 mb-2">{{ u.city[langcode] }}, {{ u.country[langcode] }}</p>
+            </div>
             <span class="inline-flex items-center gap-1.5 text-xs font-medium">
               <span
                 class="w-3.5 h-3.5 rounded-full border-2 border-white inline-block"
@@ -253,6 +255,9 @@
       <!-- Header -->
       <div class="p-5 border-b border-white/10 flex justify-between items-start bg-bg">
         <div class="flex-1">
+          <div v-if="selectedUniversity.logo" class="">
+            <img :src="selectedUniversity.logo" :alt="`Logo ${selectedUniversity.university[langcode]}`" class="h-10 md:h-14 object-cover" />
+          </div>
           <h2 class="text-xl font-bold mb-2">{{ selectedUniversity.university[langcode] }}</h2>
           <p class="text-xs opacity-80">{{ selectedUniversity.city[langcode] }}, {{ selectedUniversity.country[langcode] }}</p>
           <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-white/90 text-surface mt-4">
@@ -344,7 +349,7 @@
         </div>
 
         <!-- Share Button -->
-        <div class="px-5 pb-5 border-t border-white/10 pt-5">
+        <!-- <div class="px-5 pb-5 border-t border-white/10 pt-5">
           <button
             class="w-full px-4 py-2.5 bg-transparent border border-white/30 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors flex items-center justify-center gap-2"
             @click="shareUniversity"
@@ -354,7 +359,7 @@
               <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
             </svg>
           </button>
-        </div>
+        </div> -->
       </aside>
 
   </section>

data/universities.json

@@ -5,6 +5,7 @@
       "es": "Universidad Carlos III De Madrid",
       "pt": "Universidade Carlos III De Madrid"
     },
+    "logo": "/logos/uc3m-logo.png",
     "web": "www.uc3m.es",
     "status": "activa",
     "defensor": {