/**
 * Tech Interface Button - Estilos con aislamiento total
 * Usa un enfoque de aislamiento con prefijos únicos y reset local
 */

/* Definimos un namespace único para evitar conflictos */
.techibtn-wrapper {
  /* Mini-reset local para evitar herencia de estilos del tema */
  all: initial;
  box-sizing: border-box;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Contenedor principal - solo afecta al bloque y nada más */
  &.wp-block-tech-interface-button {
    margin-bottom: 1.5em;
    text-align: center;
    
    &.has-text-align-left {
      text-align: left;
    }
    
    &.has-text-align-right {
      text-align: right;
    }
    
    &.has-text-align-center {
      text-align: center;
    }
      /* Cuando se usa lado a lado horizontal */
  &.techibtn-horizontal {
    align-items: center;
    
    .techibtn-button.techibtn-secondary {
      margin-left: 4px; /* Ajuste fino para compensar bordes más delgados */
    }
  }
     @media (max-width: 600px) {
    gap: 16px; /* Ajustar espacio en móvil */
    
    &:not(.techibtn-keep-horizontal) {
      flex-direction: column;
      width: 100%;
    }
    
    /* Opción para mantener los botones del mismo ancho en móvil */
    &.techibtn-full-width-mobile .techibtn-button {
      width: 100%;
      box-sizing: border-box;
    }
  }
}
    /* Contenedor de botones */
    .techibtn-container {
  display: inline-flex;
  flex-wrap: wrap; /* Permite envolver en pantallas más pequeñas */
  gap: 20px; /* Aumentar ligeramente el espacio en escritorio */
  &.techibtn-space-between {
    justify-content: space-between;
    width: 100%;
    max-width: 500px; /* Limitar el ancho máximo */
    margin: 0 auto;
  }
      
      @media (max-width: 600px) {
        flex-direction: column;
        gap: 12px;
      }
    }
    
    /* El botón en sí */
    .techibtn-button {
      /* Variables específicas para este componente usando atributos de datos */
      --techibtn-color: #22c55e;
      --techibtn-color-rgb: 34, 197, 94;
      --techibtn-bg-opacity: 0.1;
      --techibtn-hover-bg-opacity: 0.2;
      
      /* Estilos base del botón */
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 16px 40px;
      background-color: rgba(var(--techibtn-color-rgb), var(--techibtn-bg-opacity));
      border: none;
      color: var(--techibtn-color);
      font-family: inherit;
      text-decoration: none;
      overflow: hidden;
      border-left: 2px solid rgba(var(--techibtn-color-rgb), 0.7);
      border-right: 2px solid rgba(var(--techibtn-color-rgb), 0.7);
      transition: all 0.3s ease-in-out;
      cursor: pointer;
      transform: translateZ(0); /* Forzar rendering en GPU */
      
      /* Hover del botón */
      &:hover {
        background-color: rgba(var(--techibtn-color-rgb), var(--techibtn-hover-bg-opacity));
        box-shadow: 0 0 10px rgba(var(--techibtn-color-rgb), 0.4);
        color: var(--techibtn-color);
        text-decoration: none;
      }
      
      /* Active del botón */
      &:active {
        transform: scale(0.95) translateZ(0);
      }

      /* Esquinas del botón */
      .techibtn-corner {
        position: absolute;
        width: 12px;
        height: 12px;
        border-color: rgba(var(--techibtn-color-rgb), 0.7);
        pointer-events: none;
      }
      
      .techibtn-corner-tl {
        top: 0;
        left: 0;
        border-top: 2px solid;
        border-left: 2px solid;
      }
      
      .techibtn-corner-tr {
        top: 0;
        right: 0;
        border-top: 2px solid;
        border-right: 2px solid;
      }
      
      .techibtn-corner-bl {
        bottom: 0;
        left: 0;
        border-bottom: 2px solid;
        border-left: 2px solid;
      }
      
      .techibtn-corner-br {
        bottom: 0;
        right: 0;
        border-bottom: 2px solid;
        border-right: 2px solid;
      }
      
      /* Contenedor del contenido */
      .techibtn-content {
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 2;
      }
      
      /* Icono del botón */
      .techibtn-icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .techibtn-icon {
        width: 20px;
        height: 20px;
        position: relative;
        z-index: 2;
      }
      
      .techibtn-icon-aura {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(var(--techibtn-color-rgb), 0.7);
        border-radius: 50%;
        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
        opacity: 1;
        transform: scale(1) translateZ(0);
      }
      
      &:hover .techibtn-icon-aura {
        transform: scale(1.5) translateZ(0);
        opacity: 0;
      }
      
      /* Textos del botón */
      .techibtn-text-wrapper {
        display: flex;
        flex-direction: column;
      }
      
      .techibtn-subtext {
        font-size: 10px;
        opacity: 0.7;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .techibtn-text {
        font-size: 16px;
        font-family: monospace;
        letter-spacing: 1px;
      }
      
      /* Línea de escaneo */
      .techibtn-scan-line {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(to bottom, 
                                   transparent 0%, 
                                   rgba(var(--techibtn-color-rgb), 0.2) 50%, 
                                   transparent 100%);
        background-size: 100% 10px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        z-index: 1;
        pointer-events: none;
      }
      
      /* Animaciones cuando se hace hover */
      &:hover .techibtn-scan-line {
        opacity: 1;
        animation: techibtn-scan-line 1.5s linear infinite;
      }
      
      /* Flujo de datos al lado del botón */
      .techibtn-data-stream {
        position: absolute;
        left: -8px;
        top: 0;
        bottom: 0;
        width: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        pointer-events: none;
      }
      
      .techibtn-data-bit {
        height: 4px;
        width: 4px;
        background-color: var(--techibtn-color);
        border-radius: 50%;
        opacity: 0;
        margin-top: 2px;
        transition: opacity 0.3s;
      }
      
      &:hover .techibtn-data-bit {
        opacity: 1;
      }
      
      &:hover .techibtn-data-bit-0 {
        animation: techibtn-fall-0 1.5s linear infinite;
      }
      
      &:hover .techibtn-data-bit-1 {
        animation: techibtn-fall-1 1.5s linear infinite;
      }
      
      &:hover .techibtn-data-bit-2 {
        animation: techibtn-fall-2 1.5s linear infinite;
      }
      
      /* Estilos del botón secundario */
&.techibtn-secondary {
  --techibtn-bg-opacity: 0.05;
  --techibtn-hover-bg-opacity: 0.1;
  padding: 14px 32px; /* Ligeramente más compacto que el primario */
  border-width: 1px;
  min-width: 120px; /* Asegurar un ancho mínimo */
        
        /* Efectos de brillo más sutiles */
        &:hover {
          box-shadow: 0 0 5px rgba(var(--techibtn-color-rgb), 0.3);
        }
        
        /* Esquinas más pequeñas para el botón secundario */
        .techibtn-corner {
          width: 8px;
          height: 8px;
        }
        
        /* Texto un poco más pequeño */
        .techibtn-text {
          font-size: 14px;
        }
        
        /* Línea de escaneo con menos intensidad */
        .techibtn-scan-line {
          background: linear-gradient(to bottom, 
                                     transparent 0%, 
                                     rgba(var(--techibtn-color-rgb), 0.1) 50%, 
                                     transparent 100%);
        }
        
        /* Versión invertida del botón secundario */
        &.techibtn-inverted {
          background-color: rgba(var(--techibtn-color-rgb), 0.7);
          color: rgba(255, 255, 255, 0.9);
          
          &:hover {
            background-color: rgba(var(--techibtn-color-rgb), 0.8);
          }
          
          .techibtn-corner, .techibtn-data-bit {
            border-color: rgba(255, 255, 255, 0.7);
            background-color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }
  }
}

/* Efecto de ondas al hacer clic - Totalmente aislado */
.techibtn-wrapper .techibtn-button .techibtn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0) translateZ(0);
  animation: techibtn-ripple-effect 0.6s linear;
  pointer-events: none;
  z-index: 1;
}

/* Definición de animaciones con prefijo único */
@keyframes techibtn-scan-line {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes techibtn-fall-0 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(500%);
  }
}

@keyframes techibtn-fall-1 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(400%);
  }
}

@keyframes techibtn-fall-2 {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(600%);
  }
}

@keyframes techibtn-ripple-effect {
  to {
    transform: scale(20) translateZ(0);
    opacity: 0;
  }
}

/* Adaptaciones para móviles - con prefijos específicos */
@media (max-width: 600px) {
  .techibtn-wrapper .wp-block-tech-interface-button .techibtn-button {
    padding: 12px 24px;
    
    .techibtn-text {
      font-size: 14px;
    }
    
    .techibtn-icon {
      width: 16px;
      height: 16px;
    }
    
    &.techibtn-secondary {
      padding: 10px 20px;
      
      .techibtn-text {
        font-size: 12px;
      }
    }
  }
}