@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

#smartcards-form {
  background: #fafafa;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto; /* Centrar */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: sans-serif;
}

#smartcards-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
}

#smartcards-form input[type="text"],
#smartcards-form input[type="email"],
#smartcards-form input[type="url"],
#smartcards-form textarea,
#smartcards-form input[type="file"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#smartcards-form button {
  background: #216fed; /* color del botón */
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#smartcards-form button:hover {
  background: #1c5ac1;
}

.login-button {
  background: #216fed;
  color: #fff !important;
  padding: 8px 16px;
  margin-left: 10px;
  border-radius: 5px;
  text-decoration: none;
}
.login-button:hover {
  background: #1c5ac1;
}

.dashboard-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.dashboard-container h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.dashboard-container button {
  padding: 10px 20px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.dashboard-container button:hover {
  background: #005177;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

.form-container h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.form-button {
  display: block;
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.form-button:hover {
  background: #0056b3;
}

.form-button.loading {
  pointer-events: none;
  opacity: 0.7;
  color: #ffffff;
}

.form-button.loading .spinner {
  display: inline-block;
}

.spinner {
  display: none; /* oculto por defecto, solo visible en estado loading */
  vertical-align: middle;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

.loading-text {
  display: inline-block;
  font-size: 12px;
  margin-left: 8px;
  color: #ffffff;
  vertical-align: middle;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Contenedor de los botones de redes sociales */
.redes-sociales {
  display: flex;       /* Usa flexbox para organizar los botones en una fila */
  gap: 10px;           /* Agrega un espacio de 10px entre cada icono */
  flex-wrap: wrap;     /* Permite que los iconos se ajusten a la siguiente línea si no caben */
  justify-content: center; /* Centra los botones horizontalmente */
  align-items: center; /* Asegura que todos los iconos estén alineados verticalmente */
  margin-top: 20px;    /* Agrega un margen superior para separar los iconos del contenido anterior */
}

/* Contenedor individual para cada botón de red social */
.btn-red-social {
  display: flex;       /* Hace que los iconos sean flexibles dentro del contenedor */
  align-items: center; /* Asegura que el contenido dentro del botón esté centrado verticalmente */
  justify-content: center; /* Centra el icono dentro del botón */
  width: 55px;         /* Establece un tamaño fijo de 55px de ancho */
  height: 55px;        /* Establece un tamaño fijo de 55px de alto */
}

/* Estilos para los íconos de redes sociales */
.btn-red-social img {
  width: 55px;         /* Define un ancho fijo de 55px para los íconos */
  height: 55px;        /* Define una altura fija de 55px para los íconos */
  transition: transform 0.2s ease-in-out; /* Agrega una animación suave cuando el usuario pasa el cursor */
}

/* Efecto de zoom al pasar el cursor sobre los íconos */
.btn-red-social img:hover {
  transform: scale(1.1); /* Aumenta el tamaño del ícono un 10% al hacer hover */
}

/* Estilos para el formulario de Smart Cards */
#smartcards-form {
  /* Color de fondo del formulario */
  background: #fafafa;

  /* Espaciado interno */
  padding: 20px;

  /* Ancho máximo (en pixeles) */
  max-width: 600px;

  /* Centrado horizontal mediante margin auto */
  margin: 0 auto;

  /* Bordes redondeados */
  border-radius: 10px;

  /* Sombra sutil alrededor del contenedor */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

  /* Fuente por defecto */
  font-family: sans-serif;
}

#smartcards-form h3 {
  /* Tamaño de fuente para subtítulos */
  font-size: 18px;

  /* Espacio inferior */
  margin-bottom: 10px;

  /* Color de texto */
  color: #333;
}

#smartcards-form p {
  /* Tamaño de fuente para párrafos */
  font-size: 14px;

  /* Margen inferior */
  margin-bottom: 15px;

  /* Color de texto secundario */
  color: #666;
}

#smartcards-form label {
  /* Hacer que el label ocupe todo el ancho disponible */
  display: block;

  /* Espacio debajo del label */
  margin-bottom: 6px;

  /* Negrita */
  font-weight: bold;

  /* Color de texto */
  color: #333;
}

#smartcards-form input[type="file"] {
  /* Ocupa todo el ancho */
  width: 100%;

  /* Espaciado interno */
  padding: 5px;

  /* Separación inferior */
  margin-bottom: 15px;

  /* Borde delgado */
  border: 1px solid #ccc;

  /* Bordes redondeados */
  border-radius: 5px;
}

#smartcards-form button {
  /* Color de fondo */
  background: #216fed;

  /* Color del texto */
  color: #fff;

  /* Espaciado en el botón */
  padding: 10px 20px;

  /* Quitar borde por defecto */
  border: none;

  /* Bordes redondeados */
  border-radius: 5px;

  /* Cambiar el puntero al pasar sobre el botón */
  cursor: pointer;
}

#smartcards-form button:hover {
  /* Cambiar color de fondo al pasar el ratón */
  background: #1c5ac1;
}

/* ---------------------------------------------
   Estilos para la vista del perfil público Foto del perfil - Foto de la portada
--------------------------------------------- */

/* Contenedor principal de la portada (cover) */
.profile-cover-wrapper {
  position: relative;
  width: 100%;            /* Toma todo el ancho disponible */
  max-width: 1200px;    /* Límites en pantallas grandes */
  margin: 0 auto;         /* Centra en pantallas grandes */
  overflow: visible;      /* deja que la foto de perfil sobresalga */
  position: relative;     /* Para superponer la foto de perfil */
  margin-bottom: 90px; /* Empuja el contenedor siguiente hacia abajo */
}

/* En pantallas <=1024px 
   forzamos la portada a full width real 
*/
@media (max-width: 1024px) {
  .profile-cover-wrapper {
    /* Rompe la caja limitada del tema */
    max-width: none;         /* Elimina el límite de 1200px */
    width: 100vw;            /* Ocupar todo el ancho de la ventana */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* Imagen de portada ajustada */
.cover-image {
  width: 100%;            /* Ocupa todo el ancho del contenedor */
  height: auto;           /* Ajuste de altura proporcional */
  display: block;
  object-fit: cover;      /* Recorta la imagen si sobra */
  /* Opcionalmente, altura fija si quieres forzar la proporción 1250x481:
     height: calc(100vw * (481 / 1250)); // Esto mantiene proporción en móviles
  */
}

/* Envoltorio de la foto de perfil para superponer */
.profile-image-wrapper {
  position: absolute;
  /* Ajusta según quieras que se superponga a la portada */
  bottom: -65px;               /* Ajustado para que quede más grande */
  left: 50%;
  transform: translateX(-50%);
  
  z-index: 10;                 /* Para que quede delante del nombre y cargo */
}

/* Foto de perfil circular */
.profile-image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Contenedor de los detalles del perfil (nombre, etc.) */
.perfil-publico {
  text-align: center;      /* Centra todos los textos y el botón */
  margin-top: 120px;       /* Deja espacio para la imagen más grande */
  font-family: 'Montserrat', sans-serif; /* Usamos Montserrat en general */
}

.perfil-publico h2 {
  font-size: 24px;
  font-weight: 700; /* Ajusta el grosor como gustes (400, 700, etc.) */
  margin-bottom: 5px;
  text-align: center;
}

.perfil-publico p {
  margin: 0 0 10px;
}

/* Cargo (18px) */
.perfil-publico h4 {
  font-size: 18px;
  font-weight: 400; /* o el que gustes */
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
}

/* Contenedor para el enlace del botón de contacto */
.btn-contacto-link {
  display: inline-block; 
  /* Establece un ancho fijo (200px), pero puedes ajustar según necesidad */
  width: 350px; 
  
  /* max-width: 100% permite que el elemento se reduzca en pantallas pequeñas 
     sin salirse del contenedor padre */
  max-width: 100%;
}

/* Estilos para la imagen SVG dentro del botón de contacto */
.btn-contacto-link img {
  /* Ocupa todo el ancho asignado al contenedor (.btn-contacto-link) */
  width: 100%;
  
  /* Mantiene la proporción original de la imagen al redimensionarla */
  height: auto;
  
  /* Hace que la imagen se comporte como un elemento de bloque, 
     eliminando espacios en blanco generados por el modo inline */
  display: block;
}

#qr-container {
  max-width: 300px; /* Máximo ancho deseado en móviles */
  margin: 0 auto;   /* Centrado automático */
  padding: 15px;    /* Espacio interno alrededor del QR */
  box-sizing: border-box;
}

#qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25px auto; /* margen arriba y abajo y centrado */
  padding: 15px;
  width: fit-content;
  border: 2px solid #000; /* contorno negro */
  border-radius: 15px;    /* bordes redondeados */
  background: #ffffff;    /* fondo blanco */
  box-sizing: border-box;
}

@media (max-width: 480px) {
  #qr-container {
      max-width: 80%; /* Asegura que no llegue de punta a punta en pantallas pequeñas */
  }
}

#qr-container + div,
#qr-container + button,
#qr-container + span,
#qr-container + a {
    display: none !important;
}

/* Oculta QR dinámico solo en la página del formulario (post=11) "Cambiar el ID para otros wordpress */
body.postid-11 #qr-container {
  display: none !important;
}

/* Ocultar completamente QR-container y elementos internos en formulario (postid-11) */
body.postid-11 #qr-container, 
body.postid-11 #qr-container * {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* Estilos del popup personalizado */
.smart-popup {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  padding: 20px;
  width: 500px; /* ✅ Mayor ancho para solucionar el desbordamiento */
  max-width: 90%; /* Adaptativo en pantallas pequeñas */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;
  font-family: 'Montserrat', sans-serif;
}

.smart-popup h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  line-height: 1.4;
}

.smart-popup-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Espacio entre botones */
}

.smart-popup-buttons button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

.smart-popup-buttons .btn-approve {
  background-color: #216fed;
}

.smart-popup-buttons .btn-error {
  background-color: #e74c3c;
}

.smart-popup-buttons button:hover {
  opacity: 0.9;
}

.mi-smartcards {
  margin-top: 20px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.mi-smartcards button {
  background-color: #216fed;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px; /* Añadir separación entre botones */
}

.mi-smartcards button:hover {
  background-color: #1c5ac1;
}

/* ----------------------------------
   Slider visual para Smart Cards
---------------------------------- */

/* Contenedor principal que permite deslizar tarjetas horizontalmente */
.smartcards-slider {
  display: flex;
  flex-wrap: nowrap; /* evita que salten a una nueva línea */
  overflow-x: auto; /* habilita desplazamiento horizontal */
  gap: 15px;
  padding: 10px;
  margin-top: 20px;
  -webkit-overflow-scrolling: touch; /* desplazamiento suave en móviles */
}

/* Estilos individuales para cada tarjeta */
.smartcard-item {
  flex: 0 0 280px; /* Ancho aumentado para alojar más botones */
  background-color: #fff;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-align: center;
}

/* Imagen circular del perfil */
.smartcard-photo img {
  width: 90px;
  height: 90px;
  border-radius: 50%;       /* Foto circular */
  object-fit: cover;        /* Ajuste perfecto dentro del círculo */
  border: 3px solid #f1f1f1; /* Borde sutil */
  margin-bottom: 10px;
}

/* Nombre completo del perfil */
.smartcard-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* Botón para ver perfil */
.smartcard-btn {
  padding: 8px 15px;
  background-color: #216fed;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; /* ligeramente más pequeño para mejor ajuste */
  flex: 1;
  white-space: nowrap; /* evita saltos de texto en botones */
}

/* Efecto hover en el botón */
.smartcard-btn:hover {
  opacity: 0.9;
  background-color: #1c5ac1;
}

/* Ocultar la barra de desplazamiento para un mejor aspecto visual */
.smartcards-slider::-webkit-scrollbar {
  display: none;            /* Chrome, Safari, Opera */
}

.smartcards-slider {
  -ms-overflow-style: none; /* IE y Edge */
  scrollbar-width: none;    /* Firefox */
}

/* Contenedor flexible para botones (más limpio visualmente) */
.smartcard-buttons {
  display: flex;
  justify-content: space-between; /* Distribuye botones uniformemente */
  align-items: center;
  gap: 5px;
  margin-top: 15px;
}

.smartcard-btn.share-btn {
  background-color: #01a350;
  color: #fff;
}

.smartcard-btn.share-btn:hover {
  background-color: #018940;
}

/* Popup visual de compartir */
.share-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.share-popup {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  width: 90%;
  max-width: 300px;
}

.share-popup h3 {
  margin-bottom: 20px;
}

.share-popup button {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.share-option.whatsapp {
  background-color: #25D366;
  color: #fff;
}

.share-option.copiar {
  background-color: #007bff;
  color: #fff;
}

.share-option.email {
  background-color: #f39c12;
  color: #fff;
}

.close-popup {
  background-color: #dc3545;
  color: #fff;
}

/* Estilos para el botón de los tres puntitos */
.smartcard-btn.options-btn {
  background-color: #f0f0f0;
  color: #333;
}

.smartcard-btn.options-btn:hover {
  background-color: #ddd;
}

/* Popup de opciones adicionales */
.options-popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.options-popup {
  background: #fff;
  border-radius: 10px;
  width: 90%; max-width: 300px;
  text-align: center;
}

.options-popup button {
  padding: 15px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  cursor: pointer;
  background-color: transparent;
}

.options-popup button.delete {
  color: #ff3b30; /* rojo para eliminar */
}

.options-popup button.cancel {
  color: #007aff; /* azul para cancelar */
  font-weight: bold;
}

.options-popup button:last-child {
  border-bottom: none;
}