/* compartidos3.css - Modificado para integración con Material Design */

/* CSS Reset básico - Mantener */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Considera usar 'Roboto' si es tu fuente principal de Material Design */
  font-family: 'Roboto', sans-serif;
}

::selection {
  color: #fff;
  background: #0288d1; /* Usando un color azul de Materialize */
}

/* ELIMINAR O COMENTAR: La regla .view-modal, .popup {} original está causando conflictos.
   Materialize maneja la posición del botón y queremos que el popup esté fijo.
*/
/*
.view-modal, .popup{
  position: absolute;
  left: 50%;
}
*/

/* ELIMINAR O COMENTAR: Las reglas específicas para .view-modal ya no son necesarias
   porque el botón ahora es un elemento de Materialize en la navbar.
*/
/*
button{
  outline: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}
.view-modal{
  top: 50%;
  left: 95%;
  color: #e8e4ee;
  font-weight: bold;
  font-size: 18px;
  padding: 10px 25px;
  background: rgb(46, 112, 123);
  transform: translate(-50%, -50%);
}
*/

/* Media query para el botón view-modal antiguo (ya no necesario) */
/*
@media only screen and (max-width: 456px) {
  .popup.show {top: 100%;}
  .view-modal.fas.fa-share-alt {position: relative;top: 50%;}
}
*/

/* Estilos para el popup (modal) */
.popup {
  background: #fff; /* Fondo blanco para Material Design */
  padding: 25px;
  border-radius: 8px; /* Un poco más suave que 15px para Material Design */
  max-width: 380px;
  width: 90%; /* Hace que sea más responsive en pantallas pequeñas */
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1); /* Sombra de Material Design */

  /* Posicionamiento y transformación para el popup (modal) */
  position: fixed; /* Importante: Posición fija en la pantalla */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2); /* Empieza un poco más grande */
  transition: top 0.2s ease-in-out, /* Transición suave para la entrada/salida */
              opacity 0.2s ease-in-out,
              transform 0.2s ease-in-out;
  z-index: 1003; /* Asegura que esté por encima de la navbar (z-index: 1002) */
}

/* Estado 'show' del popup */
.popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1); /* Vuelve al tamao normal */
  top: 50%; /* Asegura que se mantenga centrado verticalmente */
  left: 50%; /* Asegura que se mantenga centrado horizontalmente */
  /* No necesitamos transiciones de 'top 0s 0.2s' porque el top ya es fijo */
}

/* Capa de fondo oscura (overlay) cuando el popup está activo */
.popup.show::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 /* background-color: rgba(0, 0, 0, 0.5);  Fondo semitransparente oscuro */
  z-index: -1; /* Detrás del popup pero encima del resto del contenido */
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
.popup::before { /* Para que el overlay se oculte cuando el popup no está visible */
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Transparente */
  z-index: -1;
  pointer-events: none; /* No interactúa con el ratón */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}


/* Estilos internos del popup - Mantener la mayoría */
.popup :is(header, .icons, .field) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup header {
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0; /* Color de borde más suave */
}
header span {
  font-size: 20px; /* Un poco más pequeño para Material Design */
  font-weight: 500; /* Menos negrita */
  color: #424242; /* Color de texto estándar de Material Design */
}
header .close, .icons a {
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
header .close {
  color: #757575; /* Icono gris suave */
  font-size: 20px; /* Un poco más grande para Material Icons */
  background: #f5f5f5; /* Fondo más claro */
  height: 38px; /* Ajuste para un toque más grande */
  width: 38px; /* Ajuste para un toque más grande */
  cursor: pointer;
}
header .close:hover {
  background: #e0e0e0; /* Hover más suave */
}
.popup .content {
  margin: 20px 0;
}
.popup .icons {
  margin: 15px 0 20px 0;
}
.content p {
  font-size: 15px; /* Un poco más pequeño */
  color: #616161; /* Texto gris suave */
}
.content .icons a {
  height: 48px; /* Tamaño típico de iconos en Material Design */
  width: 48px;
  font-size: 22px; /* Tamaño del icono */
  text-decoration: none;
  border: 1px solid #e0e0e0; /* Borde más sutil */
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14); /* Sombra sutil para los iconos */
}

/* Colores de los iconos sociales - Mantener o ajustar */
.icons a:nth-child(1) { /* WhatsApp */
  color: #25D366;
  border-color: #bef4d2; /* Un poco más claro */
}
.icons a:nth-child(1):hover {
  background: #25D366;
}
.icons a:nth-child(2) { /* Facebook */
  color: #1877F2;
  border-color: #b7d4fb;
}
.icons a:nth-child(2):hover {
  background: #1877F2;
}
.icons a:nth-child(3) { /* Instagram */
  color: #e1306c;
  border-color: #f5bccf;
}
.icons a:nth-child(3):hover {
  background: #e1306c;
}
.icons a:nth-child(4) { /* Mail (envelope-square) */
  color: #D44638; /* Color de Gmail/Mail */
  border-color: #f2c7c4;
}
.icons a:nth-child(4):hover {
  background: #D44638;
}
.icons a:nth-child(5) { /* Telegram */
  color: #0088cc;
  border-color: #b3e6ff;
}
.icons a:nth-child(5):hover {
  background: #0088cc;
}
.icons a:hover {
  color: #fff;
  border-color: transparent;
}
.icons a:hover i {
  transform: scale(1.1); /* Menos exagerado que 1.2 */
}

/* Campo de copiar link */
.content .field {
  margin: 12px 0 -5px 0;
  height: 40px; /* Un poco más compacto */
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #bdbdbd; /* Borde gris suave */
  background-color: #f5f5f5; /* Fondo ligero */
}
.field.active {
  border-color: #0288d1; /* Borde azul de Materialize cuando activo */
}
.field i {
  width: 40px; /* Ajuste para el tamaño del campo */
  font-size: 20px;
  text-align: center;
  color: #757575; /* Icono gris */
}
.field.active i {
  color: #0288d1; /* Icono azul de Materialize cuando activo */
}
.field input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  background-color: transparent; /* Fondo transparente para que se vea el del field */
  color: #424242; /* Color de texto */
}
.field button {
  color: #fff;
  padding: 5px 15px; /* Ajuste de padding */
  background: #0288d1; /* Botón azul de Materialize */
  border: none; /* Elimina el borde redundante */
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14); /* Sombra de Material Design */
}
.field button:hover {
  background: #039be5; /* Tono más claro al hacer hover */
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14); /* Sombra más pronunciada al hover */
}

/* Responsive adjustments for popup on smaller screens */
@media only screen and (max-width: 600px) { /* Materialize 'small' breakpoint */
    .popup {
        width: 95%; /* Ocupa más ancho en móvil */
        padding: 15px; /* Menos padding */
    }
    .popup header {
        padding-bottom: 10px;
    }
    header span {
        font-size: 18px;
    }
    .content .icons {
        margin: 10px 0;
        justify-content: center; /* Centrar iconos en móvil si hay espacio */
        flex-wrap: wrap; /* Permitir que los iconos se envuelvan */
        gap: 10px; /* Espacio entre iconos */
    }
    .content .icons a {
        height: 40px;
        width: 40px;
        font-size: 18px;
    }
    .field input {
        font-size: 13px;
    }
}