/**
* Theme Name: BuddyxPro Child
* Description: This is a child theme of BuddyxPro, generated by Merlin WP.
* Author: <a href="https://wbcomdesigns.com">wbcomdesigns</a>
* Template: buddyx-pro
* Version: 3.8.7
*/
/*
 * Estilos para el campo "Habilidades" en las tarjetas de miembros
 */

.user-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.user-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #222;
}

.user-card p {
  font-size: 15px;
  color: #555;
  margin: 0;
}

.user-card p strong {
  color: #333;
}

@media (max-width: 600px) {
  .user-card {
    padding: 14px;
  }

  .user-card h3 {
    font-size: 18px;
  }

  .user-card p {
    font-size: 14px;
  }
}


.member-skills-display {
    margin-top: 10px; /* Espacio superior para separar de otros elementos de la tarjeta */
    font-size: 0.9em; /* Tamaño de fuente ligeramente más pequeño para el bloque de habilidades */
    color: #555; /* Color de texto gris suave para el bloque general */
    padding: 0 15px; /* Añadir un poco de padding horizontal para alinear con el contenido */
}

.member-skills-display p {
    margin-bottom: 5px; /* Espacio inferior si el párrafo se rompe en varias líneas (aunque aquí solo habrá una) */
    line-height: 1.4; /* Altura de línea para mejor legibilidad */
}

.member-skills-display strong {
    color: #333; /* Color más oscuro para el texto "Habilidades:" */
    margin-right: 5px; /* Pequeño espacio entre "Habilidades:" y los tags */
}

.member-skill-tag {
    background-color: #e6f7ff; /* Un fondo azul claro para que parezca un "tag" (color BuddyX like) */
    border: 1px solid #cceeff; /* Un borde sutil para definir el tag */
    padding: 4px 8px; /* Relleno interno para el tag */
    border-radius: 20px; /* Bordes redondeados para el estilo de píldora/tag */
    display: inline-block; /* Permite aplicar padding y margin como un bloque, pero se mantiene en línea */
    margin-right: 6px; /* Espacio a la derecha de cada tag */
    margin-bottom: 6px; /* Espacio inferior (útil si los tags se rompen en varias líneas) */
    font-size: 0.8em; /* Tamaño de fuente un poco más pequeño para los tags */
    color: #0056b3; /* Color de texto para los tags (azul oscuro) */
    line-height: 1; /* Altura de línea para evitar espacio extra dentro del tag */
    text-decoration: none; /* Asegura que no haya subrayado por defecto si lo convertimos en enlace */
    white-space: nowrap; /* Evita que el texto del tag se rompa en varias líneas */
}

/* Estilo al pasar el ratón por encima (opcional, para cuando sean clicables) */
.member-skill-tag:hover {
    background-color: #cceeff;
    cursor: pointer;
}