/**
 * jkhive-elements.css — ÚNICA FUENTE DE ESTILOS DE ELEMENTOS JKHIVE
 *
 * Botones, badges, botón cerrar modal, etc. viven TODOS aquí. Los demás CSS
 * (modals.css, product-gallery.css, etc.) solo definen estructura/layout de
 * contenedores y referencian estas clases; NO deben redefinir apariencia de
 * elementos jkhive.
 *
 * ELEMENTOS INCLUIDOS:
 * - Botones hex: jkhive-bttn-sm, jkhive-bttn-med, jkhive-bttn-big, jkhive-bttn-item, jkhive-bttn-tbl, toggles
 * - Toggle hex desplegable: jkhive-toggle-hex-wrap, jkhive-toggle-hex-group, jkhive-toggle-hex-trigger, jkhive-toggle-hex-panel, jkhive-toggle-hex-panel-row (sin animaciones; ver doc 14)
 * - Badge (jkhive-badge), variantes red/green/blue
 * - Botón cerrar modal (jkhive-modal-close, jkhive-cart-empty-close)
 * - Hexagonal Buttons, Select, Table Buttons, Tables (base, inline, toggles)
 */

/* ========================================
   VARIABLES CSS (si no están definidas)
   ======================================== */
:root {
  --jk-tech-darker: #0f172a;
  --jk-tech-dark: #1e293b;
  --jk-tech-medium: #334155;
  --jk-tech-light: #475569;
  --jk-primary-blue: #0ea5e9;
  --jk-primary-blue-dark: #0284c7;
  --jk-primary-blue-darker: #075985;
  --jk-primary-blue-light: #38bdf8;
  --jk-accent-cyan: #06b6d4;
  --jk-accent-honey: #d4a017;
  --jk-accent-honey-dark: #b8860b;
  --jk-accent-honey-light: #f4c430;
  --jk-white: #ffffff;
}

/* ========================================
   BADGE CONTADOR DE VISIBILIDAD
   FORMA HEXAGONAL HORIZONTAL
   ======================================== */

/* ESTILOS BASE COMUNES PARA AMBOS TIPOS DE BADGE */
html body .visibility-counter-badge,
html body .section-title-editor-right .visibility-counter-badge,
body .visibility-counter-badge,
body .section-title-editor-right .visibility-counter-badge {
  position: absolute !important;
  top: -8px !important; /* Gap superior restaurado */
  right: -2px !important; /* Gap del lado derecho */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  width: auto !important;
  height: 1.5rem !important; /* Altura fija para el hexágono */
  padding: 0.315rem 0.75rem !important; /* Padding horizontal ajustado para el hexágono */
  font-size: 0.63rem !important; /* Reducido 10%: 0.7 * 0.9 = 0.63 */
  font-weight: 600 !important;
  color: var(--jk-accent-cyan, #06b6d4) !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0.45px !important; /* Reducido 10%: 0.5 * 0.9 = 0.45 */
  font-family: 'Courier New', monospace !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  cursor: default !important;
  pointer-events: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%) !important; /* Hexágono horizontal con puntas a los lados */
}

/* Fondo externo con color del borde (método como book-gallery.css) */
html body .visibility-counter-badge::before,
html body .section-title-editor-right .visibility-counter-badge::before,
body .visibility-counter-badge::before,
body .section-title-editor-right .visibility-counter-badge::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%) !important; /* Hexágono horizontal con puntas a los lados */
  background: rgba(6, 182, 212, 0.6) !important; /* Color del borde - se verá como borde */
  z-index: -2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3),
              0 0 8px rgba(6, 182, 212, 0.3) !important;
}

/* Hexágono interno para crear el borde visible (método como book-gallery.css) */
html body .visibility-counter-badge::after,
html body .section-title-editor-right .visibility-counter-badge::after,
body .visibility-counter-badge::after,
body .section-title-editor-right .visibility-counter-badge::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.92, 0.88) !important; /* Escala para crear el borde visible */
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.95) 0%, 
    rgba(30, 41, 59, 0.95) 100%) !important; /* Fondo del badge */
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%) !important;
  z-index: -1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   BADGE CON LÍMITE (why-me, commitment)
   ======================================== */

/* Badge con límite - Estado normal */
html body .visibility-counter-badge:not(.no-limit),
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit),
body .visibility-counter-badge:not(.no-limit),
body .section-title-editor-right .visibility-counter-badge:not(.no-limit) {
  /* Estilos base ya aplicados arriba */
}

/* Badge con límite - Estado límite alcanzado (rojo metálico brillante) */
html body .visibility-counter-badge:not(.no-limit).limit-reached,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached,
body .visibility-counter-badge:not(.no-limit).limit-reached,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached {
  color: var(--jk-white, #ffffff) !important;
}

/* Fondo externo rojo para el borde cuando alcanza el límite */
html body .visibility-counter-badge:not(.no-limit).limit-reached::before,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached::before,
body .visibility-counter-badge:not(.no-limit).limit-reached::before,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached::before {
  background: rgba(255, 51, 102, 0.8) !important; /* Color del borde rojo - se verá como borde */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(255, 51, 102, 0.6),
              0 0 20px rgba(255, 51, 102, 0.4) !important;
  animation: jkhive-anmtn-pulse-red 2s ease-in-out infinite !important;
}

/* Hexágono interno rojo cuando alcanza el límite */
html body .visibility-counter-badge:not(.no-limit).limit-reached::after,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached::after,
body .visibility-counter-badge:not(.no-limit).limit-reached::after,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached::after {
  background: linear-gradient(135deg, 
    rgba(255, 51, 102, 0.95) 0%, 
    rgba(204, 0, 51, 0.95) 50%,
    rgba(255, 51, 102, 0.95) 100%) !important; /* Fondo rojo del badge */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Animación de pulso para estado límite alcanzado */
@keyframes jkhive-anmtn-pulse-red {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
                0 0 12px rgba(255, 51, 102, 0.6),
                0 0 20px rgba(255, 51, 102, 0.4);
  }
  50% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
                0 0 16px rgba(255, 51, 102, 0.8),
                0 0 30px rgba(255, 51, 102, 0.6);
  }
}

/* Hover en badge con límite - normal */
html body .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover,
body .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover {
  transform: translateY(-1px) !important;
}

html body .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover::before,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover::before,
body .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover::before,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit):not(.limit-reached):hover::before {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(6, 182, 212, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Hover en badge con límite - límite alcanzado */
html body .visibility-counter-badge:not(.no-limit).limit-reached:hover,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached:hover,
body .visibility-counter-badge:not(.no-limit).limit-reached:hover,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached:hover {
  transform: translateY(-1px) scale(1.05) !important;
}

html body .visibility-counter-badge:not(.no-limit).limit-reached:hover::before,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached:hover::before,
body .visibility-counter-badge:not(.no-limit).limit-reached:hover::before,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached:hover::before {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
              0 0 18px rgba(255, 51, 102, 0.8),
              0 0 35px rgba(255, 51, 102, 0.6) !important;
}

html body .visibility-counter-badge:not(.no-limit).limit-reached:hover::after,
html body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached:hover::after,
body .visibility-counter-badge:not(.no-limit).limit-reached:hover::after,
body .section-title-editor-right .visibility-counter-badge:not(.no-limit).limit-reached:hover::after {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   BADGE SIN LÍMITE (otras secciones)
   ======================================== */

/* Badge sin límite - siempre mantiene el estilo normal, nunca se vuelve rojo */
html body .visibility-counter-badge.no-limit,
html body .section-title-editor-right .visibility-counter-badge.no-limit,
body .visibility-counter-badge.no-limit,
body .section-title-editor-right .visibility-counter-badge.no-limit {
  /* Estilos base ya aplicados arriba */
  /* Nunca cambia de color, siempre mantiene el estilo cyan */
}

/* Hover en badge sin límite */
html body .visibility-counter-badge.no-limit:hover,
html body .section-title-editor-right .visibility-counter-badge.no-limit:hover,
body .visibility-counter-badge.no-limit:hover,
body .section-title-editor-right .visibility-counter-badge.no-limit:hover {
  transform: translateY(-1px) !important;
}

html body .visibility-counter-badge.no-limit:hover::before,
html body .section-title-editor-right .visibility-counter-badge.no-limit:hover::before,
body .visibility-counter-badge.no-limit:hover::before,
body .section-title-editor-right .visibility-counter-badge.no-limit:hover::before {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
              0 0 12px rgba(6, 182, 212, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}


/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  html body .visibility-counter-badge,
  html body .section-title-editor-right .visibility-counter-badge,
  body .visibility-counter-badge,
  body .section-title-editor-right .visibility-counter-badge {
    font-size: 0.55rem !important;
    padding: 0.25rem 0.5rem !important;
    top: -10px !important;
    right: -1px !important;
    height: 1.3rem !important; /* Ajustar altura para responsive */
  }

  /* jkhive-bttn-big — contenedor legacy .jkhive-hex (paridad jkhive-style + jkhive-hex-svg.css móvil) */
  html body .jkhive-bttn-big,
  html body #jkhive-system-modal-container .jkhive-bttn-big,
  body .jkhive-bttn-big,
  .jkhive-bttn-big {
    width: 55.39px !important;
    height: calc(55.39px * 1.1547) !important;
  }

  html body .jkhive-bttn-big > a,
  html body .jkhive-bttn-big > button,
  html body #jkhive-system-modal-container .jkhive-bttn-big > a,
  html body #jkhive-system-modal-container .jkhive-bttn-big > button,
  body .jkhive-bttn-big > a,
  body .jkhive-bttn-big > button,
  .jkhive-bttn-big > a,
  .jkhive-bttn-big > button {
    width: 100% !important;
    height: 100% !important;
  }

  html body .jkhive-bttn-big .jkhive-hex,
  html body #jkhive-system-modal-container .jkhive-bttn-big .jkhive-hex,
  body .jkhive-bttn-big .jkhive-hex,
  .jkhive-bttn-big .jkhive-hex {
    width: 55.39px !important;
    height: calc(55.39px * 1.1547) !important;
  }

  html body .jkhive-bttn-big .jkhive-hex-icon,
  html body #jkhive-system-modal-container .jkhive-bttn-big .jkhive-hex-icon,
  body .jkhive-bttn-big .jkhive-hex-icon,
  .jkhive-bttn-big .jkhive-hex-icon {
    font-size: 1.35rem !important;
  }
}

/* ========================================
   ADMIN BUTTONS
   (Desde jkhive-admin-buttons.css del sitio web)
   ======================================== */

/**
 * Botones admin
 * 
 * Estilos específicos e inmunes para botones de administración
 * Estos estilos tienen máxima especificidad para no ser afectados por otros estilos generales
 * 
 * USO:
 * 1. Botones de opciones (Referencias, Categorías, etc.): jkhive-bttn-med
 * 2. Botones de opciones grandes (25% más grande): jkhive-bttn-big
 * 3. Botones de tabla/mantenedores (Eliminar, etc.): jkhive-bttn-tbl (variante roja: jkhive-bttn-cart-delete)
 * 4. Toggles ON/OFF: jkhive-bttn-table-toggle
 *
 * REGLA OBLIGATORIA — ÍCONO SIEMPRE DEL MISMO COLOR QUE EL BORDE/HEX:
 * En todos los botones jkhive (sm, med, big, item, tbl, table): el ícono interno SIEMPRE
 * tiene el mismo color que el borde/hex. Sin excepción. En estado normal y en hover.
 * Por defecto: amarillo miel metálico. Hover: cyan neón. Variantes (ej. eliminar): mismo
 * color para hex e ícono (ej. rojo). Documentar en 04-botones-y-ctas y GALERIA-PRODUCTOS.
 *
 * TOOLTIP: Todos los botones llevan data-tooltip; el tooltip usa siempre estilo JK Hive
 * (tooltip.js + .jkhive-tooltip-following). Estilos autosuficientes en jk-hive.css (base + mobile).
 */

/* ========================================
   VARIABLES CSS (si no están definidas)
   ======================================== */
:root {
  --jk-accent-honey-light: #f4c430;
  --jk-accent-honey: #d4a017;
  --jk-accent-honey-dark: #b8860b;
  --jk-primary-blue: #0ea5e9;
  --jk-primary-blue-light: #38bdf8;
  --jk-primary-blue-dark: #0284c7;
  --jk-accent-cyan: #06b6d4;
  --jk-secondary-green: #14b8a6;
  --jk-secondary-green-light: #34d399;
  --jk-tech-dark: #0a0e27;
  --jk-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ========================================
   BOTONES DE OPCIONES DE ADMINISTRACIÓN
   jkhive-bttn-med

   INVARIANTE JK HIVE (no romper en temas):
   - Borde hexagonal visible = background de .jkhive-hex (shell / anillo).
   - Ícono (.jkhive-hex-icon) = mismo color que el shell SIEMPRE.
   - Token único: --jkhive-bttn-hex-face (reposo: --jk-accent-honey-light en :root).
   - Hover: en .jkhive-hex:hover asignar --jkhive-bttn-hex-face := --jkhive-bttn-hex-face-hover
     y background + color del ícono deben usar var(--jkhive-bttn-hex-face).
   - Interior (::after): --jkhive-bttn-hex-inner-bg (no --jk-tech-dark del tema).
   ======================================== */

/* MÁXIMA ESPECIFICIDAD - INMUNE A OTROS ESTILOS */
html body .jkhive-bttn-med,
html body #jkhive-system-modal-container .jkhive-bttn-med,
body .jkhive-bttn-med,
.jkhive-bttn-med {
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  width: 52.136px !important;
  height: calc(52.136px * 1.1547) !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
}

html body .jkhive-bttn-med > a,
html body .jkhive-bttn-med > button,
html body #jkhive-system-modal-container .jkhive-bttn-med > a,
html body #jkhive-system-modal-container .jkhive-bttn-med > button,
body .jkhive-bttn-med > a,
body .jkhive-bttn-med > button,
.jkhive-bttn-med > a,
.jkhive-bttn-med > button {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html body .jkhive-bttn-med:hover,
html body #jkhive-system-modal-container .jkhive-bttn-med:hover,
body .jkhive-bttn-med:hover,
.jkhive-bttn-med:hover {
  z-index: 10 !important;
}

/* Hexágono del botón - COLOR INICIAL: AMARILLO MIEL METÁLICO */
html body .jkhive-bttn-med .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-med .jkhive-hex,
body .jkhive-bttn-med .jkhive-hex,
.jkhive-bttn-med .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background: var(--jkhive-bttn-hex-face, var(--jk-accent-honey-light, #f4c430)) !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
}

/* Icono SIEMPRE mismo color que borde: miel por defecto. Incluye hex-content y svg. */
html body .jkhive-bttn-med .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-med .jkhive-hex-icon,
body .jkhive-bttn-med .jkhive-hex-icon,
.jkhive-bttn-med .jkhive-hex-icon,
html body .jkhive-bttn-med .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-med .jkhive-hex-content,
body .jkhive-bttn-med .jkhive-hex-content,
.jkhive-bttn-med .jkhive-hex-content,
html body .jkhive-bttn-med .jkhive-hex-content svg,
body .jkhive-bttn-med .jkhive-hex-content svg,
.jkhive-bttn-med .jkhive-hex-content svg {
  font-size: 1.275rem !important;
  color: var(--jkhive-bttn-hex-face, var(--jk-accent-honey-light, #f4c430)) !important;
  fill: currentColor !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Contenido del botón */
/* Icono centrado verticalmente en el hex: ligero desplazamiento hacia abajo (óptica del icono) */
html body .jkhive-bttn-med .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-med .jkhive-hex-content,
body .jkhive-bttn-med .jkhive-hex-content,
.jkhive-bttn-med .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  padding: 0 !important;
}

/* Efecto ::after para el hexágono interno */
html body .jkhive-bttn-med .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-med .jkhive-hex::after,
body .jkhive-bttn-med .jkhive-hex::after,
.jkhive-bttn-med .jkhive-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}

html body .jkhive-bttn-med:hover .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-med:hover .jkhive-hex::after,
body .jkhive-bttn-med:hover .jkhive-hex::after,
.jkhive-bttn-med:hover .jkhive-hex::after {
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  transform: translate(-50%, -50%) scale(0.75) !important;
}

/* HOVER por defecto (ver categoría, pasos): azul + animaciones de icono (igual que bttn-big) */
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex,
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):focus-within .jkhive-hex,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):focus-within .jkhive-hex {
  --jkhive-bttn-hex-face: var(--jkhive-bttn-hex-face-hover, var(--jk-accent-cyan, #06b6d4));
  background: var(--jkhive-bttn-hex-face) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex-icon,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex-icon,
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):focus-within .jkhive-hex-icon,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):focus-within .jkhive-hex-icon,
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex-content,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex-content,
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):focus-within .jkhive-hex-content,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):focus-within .jkhive-hex-content,
html body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex-content svg,
body .jkhive-bttn-med:not(.jkhive-bttn-new):not(.jkhive-bttn-cat):hover .jkhive-hex-content svg {
  color: var(--jkhive-bttn-hex-face) !important;
  fill: currentColor !important;
  opacity: 1 !important;
  transition: color 0.3s ease !important;
}
/* Animaciones por icono para .jkhive-bttn-med (ver categoría, pasos) */
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-oil-can,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-oil-can {
  animation: jkhive-anmtn-globe 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-user,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-user,
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-chart-line,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-chart-line {
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-user-plus,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-user-plus {
  animation: jkhive-anmtn-briefcase 0.8s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-envelope,
  body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-envelope,
  html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-paper-plane,
  body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-paper-plane,
  html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-download,
  body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-download,
  html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-upload,
  body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-upload {
  animation: jkhive-anmtn-envelope 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-info-circle,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-info-circle {
  animation: jkhive-anmtn-handshake 0.8s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-th-list,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-th-list,
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-th-large,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-th-large {
  animation: jkhive-anmtn-graduation 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-shopping-cart,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-shopping-cart {
  animation: jkhive-anmtn-envelope 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-times,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-times {
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
/* Recargar / sync: giro en el plano (eje Z, como rueda), no flip tipo moneda (rotateY) */
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-rotate,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-rotate,
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-sync,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-sync,
html body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-sync-alt,
body .jkhive-bttn-med:hover .jkhive-hex-icon.fa-sync-alt {
  animation: jkhive-anmtn-envelope 0.65s ease-in-out forwards !important;
  transform-origin: center center !important;
  display: inline-block !important;
}

/* HOVER: Nuevo - CYAN METÁLICO BRILLANTE */
html body .jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex,
body .jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex,
.jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex-icon,
body .jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex-icon,
.jkhive-bttn-med.jkhive-bttn-new:hover .jkhive-hex-icon {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  transform: rotate(180deg) !important;
}

/* HOVER: Categorías - VERDE METÁLICO BRILLANTE */
html body .jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex,
body .jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex,
.jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex {
  background: var(--jk-secondary-green, #14b8a6) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(20, 184, 166, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex-icon,
body .jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex-icon,
.jkhive-bttn-med.jkhive-bttn-cat:hover .jkhive-hex-icon {
  color: var(--jk-secondary-green, #14b8a6) !important;
  transform: rotate(180deg) !important;
}

/* ========================================
   BOTÓN AGREGAR DENTRO DE MODAL (admin)
   jkhive-bttn-modal-add — 75% del tamaño bttn-med (52.136px → ~39.1px).
   Reutilizable para cualquier botón de administración dentro de un modal.
   Usar junto a .jkhive-bttn-med (estructura) + animación deseada.
   ======================================== */
html body .jkhive-bttn-med.jkhive-bttn-modal-add,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-modal-add,
body .jkhive-bttn-med.jkhive-bttn-modal-add,
.jkhive-bttn-med.jkhive-bttn-modal-add {
  width: 39.1px !important;
  height: calc(39.1px * 1.1547) !important;
}
html body .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-icon,
body .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-icon,
.jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-icon,
html body .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content,
body .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content,
.jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content,
html body .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content svg,
body .jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content svg,
.jkhive-bttn-med.jkhive-bttn-modal-add .jkhive-hex-content svg {
  font-size: 0.95625rem !important;
}

/* ========================================
   BOTONES SEMANTICOS GENERICOS JK HIVE
   La clase semantica define la accion; la estructura/tamano la aporta
   la variante base usada en cada contexto.
   ======================================== */

/* Agregar nuevo: reutilizable en toolbar, modales, galerias o listas. */
.jkhive-bttn-add-new .jkhive-hex {
  perspective: 520px;
  transform-style: preserve-3d;
}
.jkhive-bttn-add-new:hover .jkhive-hex-icon,
.jkhive-bttn-add-new:hover .jkhive-hex-content,
.jkhive-bttn-add-new:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-coin720 0.65s ease-in-out;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Guardar / pagar / aceptar: familia generica de confirmacion en modal. */
.jkhive-bttn-modal-save .jkhive-hex,
.jkhive-bttn-modal-pay .jkhive-hex,
.jkhive-bttn-modal-accept .jkhive-hex {
  perspective: 520px;
  transform-style: preserve-3d;
}
.jkhive-bttn-modal-save:hover .jkhive-hex-icon,
.jkhive-bttn-modal-save:hover .jkhive-hex-content,
.jkhive-bttn-modal-save:hover .jkhive-hex-content svg,
.jkhive-bttn-modal-pay:hover .jkhive-hex-icon,
.jkhive-bttn-modal-pay:hover .jkhive-hex-content,
.jkhive-bttn-modal-pay:hover .jkhive-hex-content svg,
.jkhive-bttn-modal-accept:hover .jkhive-hex-icon,
.jkhive-bttn-modal-accept:hover .jkhive-hex-content,
.jkhive-bttn-modal-accept:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-coin720 0.65s ease-in-out;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Limpiar formulario: shake generico para limpiar o resetear. */
.jkhive-bttn-modal-clear:hover .jkhive-hex-icon,
.jkhive-bttn-modal-clear:hover .jkhive-btn-cambiar-icon,
.jkhive-bttn-modal-clear:hover .jkhive-hex-content svg {
  display: inline-block;
  animation: jkhive-anmtn-shake 0.42s ease-in-out;
  transform-origin: center center;
}

/* Salir modal: clase semantica generica, misma animacion inverseclock. */
.jkhive-bttn-modal-exit:hover .jkhive-hex-icon,
.jkhive-bttn-modal-exit:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-inverseclock 0.38s ease-in-out;
  transform-origin: center center;
}

/* Descargar: trigger simple y opciones desplegables reutilizables. */
.jkhive-bttn-download-trigger {
  perspective: 520px;
}
.jkhive-bttn-download-trigger .jkhive-hex,
.jkhive-bttn-download-option-left .jkhive-hex,
.jkhive-bttn-download-option-right .jkhive-hex {
  transform-style: preserve-3d;
}
.jkhive-bttn-download-trigger:hover .jkhive-hex-icon {
  animation: jkhive-anmtn-envelope-reverse 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
}
.jkhive-bttn-download-option-left:hover .jkhive-hex {
  animation: jkhive-anmtn-coin180 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
}
.jkhive-bttn-download-option-right:hover .jkhive-hex {
  animation: jkhive-anmtn-coin180-reverse 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
}

/* ========================================
   BOTONES HEX MÁS PEQUEÑOS QUE CTA (filtros, acciones secundarias)
   jkhive-bttn-sm — desktop: 40px (más chico que bttn 52px y bttn-big 65px)
   ======================================== */
html body .jkhive-bttn-sm,
body .jkhive-bttn-sm,
.jkhive-bttn-sm {
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  width: 40px !important;
  height: calc(40px * 1.1547) !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
}
html body .jkhive-bttn-sm > a,
html body .jkhive-bttn-sm > button,
body .jkhive-bttn-sm > a,
body .jkhive-bttn-sm > button {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
html body .jkhive-bttn-sm .jkhive-hex,
body .jkhive-bttn-sm .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  margin: 0 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}
/* Icono mismo color que borde (honey por defecto) */
html body .jkhive-bttn-sm .jkhive-hex-icon,
body .jkhive-bttn-sm .jkhive-hex-icon,
html body .jkhive-bttn-sm .jkhive-hex-content,
body .jkhive-bttn-sm .jkhive-hex-content,
html body .jkhive-bttn-sm .jkhive-hex-content svg,
body .jkhive-bttn-sm .jkhive-hex-content svg {
  font-size: 0.95rem !important;
  color: var(--jk-accent-honey-light, #f4c430) !important;
  fill: currentColor !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Icono centrado verticalmente en el hex: ligero desplazamiento hacia abajo (óptica del icono) */
html body .jkhive-bttn-sm .jkhive-hex-content,
body .jkhive-bttn-sm .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}
html body .jkhive-bttn-sm:hover .jkhive-hex,
body .jkhive-bttn-sm:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.6) !important;
}
html body .jkhive-bttn-sm:hover .jkhive-hex-icon,
body .jkhive-bttn-sm:hover .jkhive-hex-icon,
html body .jkhive-bttn-sm:hover .jkhive-hex-content,
body .jkhive-bttn-sm:hover .jkhive-hex-content,
html body .jkhive-bttn-sm:hover .jkhive-hex-content svg,
body .jkhive-bttn-sm:hover .jkhive-hex-content svg {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  fill: currentColor !important;
  transition: color 0.3s ease !important;
}
/* Animaciones de icono para bttn-sm (Filtrar / Limpiar) */
html body .jkhive-bttn-sm:hover .jkhive-hex-icon.fa-filter,
body .jkhive-bttn-sm:hover .jkhive-hex-icon.fa-filter {
  animation: jkhive-anmtn-globe 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}
html body .jkhive-bttn-sm:hover .jkhive-hex-icon.fa-times,
body .jkhive-bttn-sm:hover .jkhive-hex-icon.fa-times {
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* ========================================
   jkhive-bttn-item — Mismo estilo que jkhive-bttn-sm (hex relleno, sombra, icono). Color azul. 10% más pequeño. Hover: heartbeat.
   ======================================== */
@keyframes jkhive-anmtn-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.35); }
  30% { transform: scale(1); }
  45% { transform: scale(1.35); }
  60% { transform: scale(1); }
  75% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

html body .jkhive-bttn-item,
body .jkhive-bttn-item,
.jkhive-bttn-item {
  --jkhive-bttn-item-size: 36px;
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  width: var(--jkhive-bttn-item-size) !important;
  height: calc(var(--jkhive-bttn-item-size) * 1.1547) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  overflow: visible !important;
  clip-path: none !important;
}

html body .jkhive-bttn-item .jkhive-hex,
body .jkhive-bttn-item .jkhive-hex,
.jkhive-bttn-item .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  position: relative !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

html body .jkhive-bttn-item .jkhive-hex::before,
body .jkhive-bttn-item .jkhive-hex::before {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 0 !important;
}

html body .jkhive-bttn-item .jkhive-hex-content,
body .jkhive-bttn-item .jkhive-hex-content,
.jkhive-bttn-item .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}

/* Ícono mismo color que borde: miel por defecto */
html body .jkhive-bttn-item .jkhive-hex-icon,
body .jkhive-bttn-item .jkhive-hex-icon,
.jkhive-bttn-item .jkhive-hex-icon,
html body .jkhive-bttn-item .jkhive-hex-content,
body .jkhive-bttn-item .jkhive-hex-content,
.jkhive-bttn-item .jkhive-hex-content,
html body .jkhive-bttn-item .jkhive-hex-content svg,
body .jkhive-bttn-item .jkhive-hex-content svg,
.jkhive-bttn-item .jkhive-hex-content svg {
  font-size: calc(var(--jkhive-bttn-item-size) * 0.42) !important;
  color: var(--jk-accent-honey-light, #f4c430) !important;
  fill: currentColor !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .jkhive-bttn-item:hover .jkhive-hex,
body .jkhive-bttn-item:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.6) !important;
}

html body .jkhive-bttn-item:hover .jkhive-hex-icon,
body .jkhive-bttn-item:hover .jkhive-hex-icon,
html body .jkhive-bttn-item:hover .jkhive-hex-content,
body .jkhive-bttn-item:hover .jkhive-hex-content,
html body .jkhive-bttn-item:hover .jkhive-hex-content svg,
body .jkhive-bttn-item:hover .jkhive-hex-content svg {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  fill: currentColor !important;
  animation: jkhive-anmtn-heartbeat 1.1s ease-in-out forwards !important;
}

html body .jkhive-bttn-item:active .jkhive-hex,
body .jkhive-bttn-item:active .jkhive-hex {
  transform: scale(1.02) !important;
}

/* ========================================
   jkhive-bttn-tbl — Botón para tablas y mantenedores (eliminar, etc.)
   10% más pequeño que jkhive-bttn-item (32.4px). Ícono mismo tamaño que bttn-item, centrado.
   Por defecto: miel. Hover: cyan. Variante .jkhive-bttn-cart-delete: rojo (ícono mismo color que borde).
   ======================================== */
html body .jkhive-bttn-tbl,
body .jkhive-bttn-tbl,
.jkhive-bttn-tbl {
  --jkhive-bttn-tbl-size: 32.4px;
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  width: var(--jkhive-bttn-tbl-size) !important;
  height: calc(var(--jkhive-bttn-tbl-size) * 1.1547) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  overflow: visible !important;
  clip-path: none !important;
}
html body .jkhive-bttn-tbl .jkhive-hex,
body .jkhive-bttn-tbl .jkhive-hex,
.jkhive-bttn-tbl .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  position: relative !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
  transition: all 0.3s ease !important;
}
html body .jkhive-bttn-tbl .jkhive-hex::before,
body .jkhive-bttn-tbl .jkhive-hex::before,
.jkhive-bttn-tbl .jkhive-hex::before {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 0 !important;
}
html body .jkhive-bttn-tbl .jkhive-hex-content,
body .jkhive-bttn-tbl .jkhive-hex-content,
.jkhive-bttn-tbl .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}
/* Ícono mismo tamaño que bttn-item (36*0.42 ≈ 15px), mismo color que borde */
html body .jkhive-bttn-tbl .jkhive-hex-icon,
body .jkhive-bttn-tbl .jkhive-hex-icon,
html body .jkhive-bttn-tbl .jkhive-hex-content,
body .jkhive-bttn-tbl .jkhive-hex-content,
html body .jkhive-bttn-tbl .jkhive-hex-content svg,
body .jkhive-bttn-tbl .jkhive-hex-content svg,
.jkhive-bttn-tbl .jkhive-hex-icon,
.jkhive-bttn-tbl .jkhive-hex-content,
.jkhive-bttn-tbl .jkhive-hex-content svg {
  font-size: 0.95rem !important;
  color: var(--jk-accent-honey-light, #f4c430) !important;
  fill: currentColor !important;
  transition: color 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .jkhive-bttn-tbl:hover .jkhive-hex,
body .jkhive-bttn-tbl:hover .jkhive-hex,
.jkhive-bttn-tbl:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.6) !important;
}
html body .jkhive-bttn-tbl:hover .jkhive-hex-icon,
body .jkhive-bttn-tbl:hover .jkhive-hex-icon,
html body .jkhive-bttn-tbl:hover .jkhive-hex-content,
body .jkhive-bttn-tbl:hover .jkhive-hex-content,
html body .jkhive-bttn-tbl:hover .jkhive-hex-content svg,
body .jkhive-bttn-tbl:hover .jkhive-hex-content svg,
.jkhive-bttn-tbl:hover .jkhive-hex-icon,
.jkhive-bttn-tbl:hover .jkhive-hex-content,
.jkhive-bttn-tbl:hover .jkhive-hex-content svg {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  fill: currentColor !important;
}

/* Variante roja para eliminar (modal carrito, tablas): ícono SIEMPRE mismo color que borde */
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex,
html body .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex,
body .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex,
.jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex {
  background: var(--jkhive-error-red, #ff0000) !important;
  box-shadow: 0 0 0 1.5px rgba(255, 0, 0, 0.5), 0 0 16px rgba(255, 0, 0, 0.5) !important;
}
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex::before,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex::before,
html body .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex::before,
body .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex::before,
.jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex::before,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex::before {
  background: linear-gradient(135deg, var(--jk-tech-dark) 0%, var(--jk-tech-darker) 100%) !important;
}
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-icon,
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-content,
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-content svg,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-icon,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-content,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-content svg,
.jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-icon,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-content,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete .jkhive-hex-content svg {
  color: var(--jkhive-error-red, #ff0000) !important;
  fill: currentColor !important;
}
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex,
html body .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex,
body .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex,
.jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex {
  background: var(--jkhive-error-red, #ff0000) !important;
  box-shadow: 0 0 0 1.5px rgba(255, 0, 0, 0.6), 0 0 22px rgba(255, 0, 0, 0.7) !important;
}
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-icon,
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-content,
html body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-content svg,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-icon,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-content,
body .jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-content svg,
.jkhive-modal-cart .jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-icon,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-content,
.jkhive-bttn-tbl.jkhive-bttn-cart-delete:hover .jkhive-hex-content svg {
  color: var(--jkhive-error-red, #ff0000) !important;
  fill: currentColor !important;
  animation: jkhive-anmtn-shake 0.42s ease-in-out !important;
}

/* jkhive-bttn-tbl en fila de listado (carrito, tablas): no comprimir */
.cart-item .jkhive-bttn-tbl,
.jkhive-modal-cart .cart-item .jkhive-bttn-tbl.jkhive-bttn-cart-delete {
  flex-shrink: 0 !important;
}

/* ========================================
   ELEMENTOS DE MODAL: botón cerrar (jkhive-modal-close)
   Todo el estilo del elemento vive aquí; los modales solo usan estructura/layout.
   ======================================== */
.jkhive-modal-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: rgba(239, 68, 68, 0.2) !important;
  border: 2px solid rgb(239, 68, 68) !important;
  color: rgb(239, 68, 68) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jkhive-modal-close:hover {
  background: rgb(239, 68, 68) !important;
  color: white !important;
  transform: rotate(90deg) !important;
}

/* Variante más pequeña (ej. mensaje carrito vacío) */
.jkhive-cart-empty-close {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  background: rgba(239, 68, 68, 0.2) !important;
  border: 2px solid rgb(239, 68, 68) !important;
  color: rgb(239, 68, 68) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jkhive-cart-empty-close:hover {
  background: rgb(239, 68, 68) !important;
  color: white !important;
  transform: rotate(90deg) !important;
}

/* Visibilidad según contexto: hex por defecto oculto, carrito visible, tablas oculto */
.jkhive-modal-content.jkhive-modal-hex .jkhive-modal-close {
  display: none !important;
}
.jkhive-modal-content.jkhive-modal-hex.jkhive-modal-cart .jkhive-modal-close,
#cartModal .jkhive-modal-close {
  display: flex !important;
}
.jkhive-tables-modal .jkhive-modal-close {
  display: none !important;
}

@media (max-width: 768px) {
  .jkhive-modal-close {
    width: 35px !important;
    height: 35px !important;
    font-size: 1.3rem !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
  }
}
@media (max-width: 480px) {
  .jkhive-modal-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
}

/* ========================================
   BOTONES DE OPCIONES DE ADMINISTRACIÓN GRANDES (25% más grande)
   jkhive-bttn-big
   ======================================== */

/* MÁXIMA ESPECIFICIDAD - INMUNE A OTROS ESTILOS */
html body .jkhive-bttn-big,
html body #jkhive-system-modal-container .jkhive-bttn-big,
body .jkhive-bttn-big,
.jkhive-bttn-big {
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  /* 25% más grande que jkhive-bttn-med: 52.136px * 1.25 = 65.17px */
  width: 65.17px !important;
  height: calc(65.17px * 1.1547) !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
}

html body .jkhive-bttn-big > a,
html body .jkhive-bttn-big > button,
html body #jkhive-system-modal-container .jkhive-bttn-big > a,
html body #jkhive-system-modal-container .jkhive-bttn-big > button,
body .jkhive-bttn-big > a,
body .jkhive-bttn-big > button,
.jkhive-bttn-big > a,
.jkhive-bttn-big > button {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html body .jkhive-bttn-big:hover,
html body #jkhive-system-modal-container .jkhive-bttn-big:hover,
body .jkhive-bttn-big:hover,
.jkhive-bttn-big:hover {
  z-index: 10 !important;
}

/* Hexágono del botón - COLOR INICIAL: AMARILLO MIEL METÁLICO */
html body .jkhive-bttn-big .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-big .jkhive-hex,
body .jkhive-bttn-big .jkhive-hex,
.jkhive-bttn-big .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background: var(--jkhive-bttn-hex-face, var(--jk-accent-honey-light, #f4c430)) !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
}

/* Icono mismo color que borde: miel por defecto; incluye hex-content y svg. */
html body .jkhive-bttn-big .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-big .jkhive-hex-icon,
body .jkhive-bttn-big .jkhive-hex-icon,
.jkhive-bttn-big .jkhive-hex-icon,
html body .jkhive-bttn-big .jkhive-hex-content,
body .jkhive-bttn-big .jkhive-hex-content,
.jkhive-bttn-big .jkhive-hex-content,
html body .jkhive-bttn-big .jkhive-hex-content svg,
body .jkhive-bttn-big .jkhive-hex-content svg,
.jkhive-bttn-big .jkhive-hex-content svg {
  font-size: 1.59375rem !important;
  color: var(--jkhive-bttn-hex-face, var(--jk-accent-honey-light, #f4c430)) !important;
  fill: currentColor !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Contenido del botón */
/* Icono centrado verticalmente en el hex: ligero desplazamiento hacia abajo (óptica del icono) */
html body .jkhive-bttn-big .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-big .jkhive-hex-content,
body .jkhive-bttn-big .jkhive-hex-content,
.jkhive-bttn-big .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  padding: 0 !important;
}

/* Efecto ::after para el hexágono interno */
html body .jkhive-bttn-big .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-big .jkhive-hex::after,
body .jkhive-bttn-big .jkhive-hex::after,
.jkhive-bttn-big .jkhive-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}

html body .jkhive-bttn-big:hover .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-big:hover .jkhive-hex::after,
body .jkhive-bttn-big:hover .jkhive-hex::after,
.jkhive-bttn-big:hover .jkhive-hex::after {
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  transform: translate(-50%, -50%) scale(0.75) !important;
}

/* Hover: cyan neón — shell e ícono comparten --jkhive-bttn-hex-face */
html body .jkhive-bttn-big:hover .jkhive-hex,
html body .jkhive-bttn-big:focus-within .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-big:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-big:focus-within .jkhive-hex,
body .jkhive-bttn-big:hover .jkhive-hex,
body .jkhive-bttn-big:focus-within .jkhive-hex,
.jkhive-bttn-big:hover .jkhive-hex,
.jkhive-bttn-big:focus-within .jkhive-hex {
  --jkhive-bttn-hex-face: var(--jkhive-bttn-hex-face-hover, var(--jk-accent-cyan, #06b6d4));
  background: var(--jkhive-bttn-hex-face) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover icon: mismo color que borde (cyan); por defecto giro 360° */
html body .jkhive-bttn-big:hover .jkhive-hex-icon,
html body .jkhive-bttn-big:focus-within .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-big:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-big:focus-within .jkhive-hex-icon,
body .jkhive-bttn-big:hover .jkhive-hex-icon,
body .jkhive-bttn-big:focus-within .jkhive-hex-icon,
.jkhive-bttn-big:hover .jkhive-hex-icon,
.jkhive-bttn-big:focus-within .jkhive-hex-icon,
html body .jkhive-bttn-big:hover .jkhive-hex-content,
html body .jkhive-bttn-big:focus-within .jkhive-hex-content,
body .jkhive-bttn-big:hover .jkhive-hex-content,
body .jkhive-bttn-big:focus-within .jkhive-hex-content,
.jkhive-bttn-big:hover .jkhive-hex-content,
.jkhive-bttn-big:focus-within .jkhive-hex-content,
html body .jkhive-bttn-big:hover .jkhive-hex-content svg,
html body .jkhive-bttn-big:focus-within .jkhive-hex-content svg,
body .jkhive-bttn-big:hover .jkhive-hex-content svg,
body .jkhive-bttn-big:focus-within .jkhive-hex-content svg,
.jkhive-bttn-big:hover .jkhive-hex-content svg,
.jkhive-bttn-big:focus-within .jkhive-hex-content svg {
  color: var(--jkhive-bttn-hex-face) !important;
  fill: currentColor !important;
  opacity: 1 !important;
  transform: rotate(360deg);
}

/* CTA #cta: quitar el giro genérico del wrapper y del ícono — About/Contact usan solo @keyframes envelope ±Z */
html body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-icon,
body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-icon,
html body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-icon,
body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-icon,
html body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-content,
body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-content,
html body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-content,
body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-content,
html body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-content svg,
body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-content svg,
html body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-content svg,
body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-content svg {
  transform: none;
}

/* ========================================
   jkhive-bttn-big: animación por tipo de icono
   Regla: botones uno al lado del otro NUNCA comparten la misma animación.
   Hero: Catálogo (oil-can) ≠ Ingresar (user). CTA #cta y sidebar landing (About / Contacto): mismo giro envelope en Z; Contacto en sentido inverso.
   Barra: Catálogo, Ingresar, About, Contact, FAQ, Políticas = 6 distintas.
   ======================================== */
/* Todas las reglas con animation: quitar transición en transform para que la animación se vea */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-oil-can,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-oil-can,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-chart-line,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-chart-line,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user-plus,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user-plus,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-briefcase,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-briefcase,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-envelope,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-envelope,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-paper-plane,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-paper-plane,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-info-circle,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-info-circle,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-list,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-list,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-large,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-large,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-shield-halved,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-shield-halved {
  transition: color 0.3s ease !important;
}

/* Catálogo (hero/barra) - fa-oil-can → globe */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-oil-can,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-oil-can {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-globe 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Ingresar (hero/barra) - fa-user, fa-chart-line → linkedin 180° */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-chart-line,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-chart-line {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Crear cuenta gratuita - fa-user-plus → briefcase */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user-plus,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-user-plus {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-briefcase 0.8s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Contactar vendedor / Contáctanos / Enviar - fa-envelope, fa-paper-plane → envelope */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-envelope,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-envelope,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-paper-plane,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-paper-plane {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-envelope 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* CTA (#cta): About (fa-briefcase) y Contacto (fa-envelope) — mismo keyframe envelope en Z; Contacto en sentido inverso. */
html body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-icon.fa-briefcase,
body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-icon.fa-briefcase,
html body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-icon.fa-briefcase,
body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-icon.fa-briefcase {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-envelope 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

html body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-icon.fa-envelope,
body #cta.cta-section-hex .jkhive-bttn-big:hover .jkhive-hex-icon.fa-envelope,
html body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-icon.fa-envelope,
body #cta.cta-section-hex .jkhive-bttn-big:focus-within .jkhive-hex-icon.fa-envelope {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-envelope-reverse 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Información / Conoce más / About - fa-info-circle → handshake */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-info-circle,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-info-circle {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-handshake 0.8s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Ver categoría / Ir al Catálogo / Ver productos / Ir a panel - fa-th-list, fa-th-large → graduation-cap */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-list,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-list,
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-large,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-th-large {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-graduation 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* FAQ (barra) - fa-circle-question → 360deg (default) */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-circle-question,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-circle-question {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  transform: rotate(360deg);
}

/* Políticas / Privacidad (barra) - fa-shield-halved → linkedin */
html body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-shield-halved,
body .jkhive-bttn-big:hover .jkhive-hex-icon.fa-shield-halved {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* ========================================
   BOTONES DE ACCIÓN EN TABLAS
   jkhive-bttn-table
   ======================================== */

/* MÁXIMA ESPECIFICIDAD - INMUNE A OTROS ESTILOS */
html body .jkhive-bttn-table,
html body #jkhive-system-modal-container .jkhive-bttn-table,
body .jkhive-bttn-table,
.jkhive-bttn-table {
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  width: 32.58px !important;
  height: calc(32.58px * 1.1547) !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
}

html body .jkhive-bttn-table > a,
html body .jkhive-bttn-table > button,
html body #jkhive-system-modal-container .jkhive-bttn-table > a,
html body #jkhive-system-modal-container .jkhive-bttn-table > button,
body .jkhive-bttn-table > a,
body .jkhive-bttn-table > button,
.jkhive-bttn-table > a,
.jkhive-bttn-table > button {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html body .jkhive-bttn-table:hover,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover,
body .jkhive-bttn-table:hover,
.jkhive-bttn-table:hover {
  z-index: 10 !important;
}

/* Hexágono del botón - COLOR INICIAL: AMARILLO MIEL METÁLICO */
html body .jkhive-bttn-table .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table .jkhive-hex,
body .jkhive-bttn-table .jkhive-hex,
.jkhive-bttn-table .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
}

/* Icono - COLOR INICIAL: AMARILLO MIEL METÁLICO. Centrado en el hex (solo botones). */
html body .jkhive-bttn-table .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table .jkhive-hex-icon,
body .jkhive-bttn-table .jkhive-hex-icon,
.jkhive-bttn-table .jkhive-hex-icon {
  font-size: 0.9rem !important;
  color: var(--jk-accent-honey-light, #f4c430) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Contenido del botón - centrado horizontal y vertical */
/* Icono centrado verticalmente en el hex: ligero desplazamiento hacia abajo (óptica del icono) */
html body .jkhive-bttn-table .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-table .jkhive-hex-content,
body .jkhive-bttn-table .jkhive-hex-content,
.jkhive-bttn-table .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  padding: 0 !important;
}

/* Efecto ::after para el hexágono interno */
html body .jkhive-bttn-table .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-table .jkhive-hex::after,
body .jkhive-bttn-table .jkhive-hex::after,
.jkhive-bttn-table .jkhive-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}

html body .jkhive-bttn-table:hover .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex::after,
body .jkhive-bttn-table:hover .jkhive-hex::after,
.jkhive-bttn-table:hover .jkhive-hex::after {
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  transform: translate(-50%, -50%) scale(0.75) !important;
}

/* HOVER: General - CELESTE METÁLICO BRILLANTE (cuando no tiene clase específica) */
html body .jkhive-bttn-table:hover .jkhive-hex:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green),
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green),
body .jkhive-bttn-table:hover .jkhive-hex:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green),
.jkhive-bttn-table:hover .jkhive-hex:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green) {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(56, 189, 248, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   Perfil de hover «editorial» (landing canónica): sin scale; anillo vía box-shadow en ::after + swap azul/miel.
   Contrato: clase en la raíz del bloque (p. ej. carrusel servicios, strips, noticias) = .jkfw-canon-hover--editorial; alias .jkhive-itemgallery-small-hover-v2.
   Documentación: docs/JKFW_CANON_LANDING_ITEM_CONTRACT.md (pieles .jkhive-hex-* vs perfiles de hover).
   Ítems bajo ese prefijo: :is(.jkhive-itemgallery-small, .jkhive-hex-item-small), .jkhive-carouselitem-big, .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med) (noticias).
   ======================================== */
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within {
  z-index: 10;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover > .jkhive-hex,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within > .jkhive-hex {
  background: var(--jk-accent-honey-light) !important;
  transform: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 5;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover > .jkhive-hex::after,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within > .jkhive-hex::after {
  background: var(--jk-tech-dark) !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 2px var(--jk-primary-blue-light), 0 0 18px rgba(14, 165, 233, 0.45);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover > .jkhive-hex .jkhive-hex-gallery-title,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within > .jkhive-hex .jkhive-hex-gallery-title {
  color: var(--jk-primary-blue-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover > .jkhive-hex .jkhive-hex-gallery-icon,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within > .jkhive-hex .jkhive-hex-gallery-icon {
  color: var(--jk-metal-light) !important;
  filter: none !important;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover > .jkhive-hex .jkhive-hex-gallery-subtitle,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) :is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within > .jkhive-hex .jkhive-hex-gallery-subtitle {
  color: var(--jk-metal-light) !important;
  opacity: 1 !important;
}

/* Carrusel «Servicios destacados»: .jkfw-carousel-hex-big + .jkhive-carouselitem-big + .service-* */
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within {
  z-index: 10;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .jkhive-hex,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .jkhive-hex {
  background: var(--jk-accent-honey-light) !important;
  transform: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 5;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .jkhive-hex::after,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .jkhive-hex::after {
  background: var(--jk-tech-dark) !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 2px var(--jk-primary-blue-light), 0 0 18px rgba(14, 165, 233, 0.45);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .service-title,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .service-title {
  color: var(--jk-primary-blue-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .service-icon,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .service-icon {
  color: var(--jk-metal-light) !important;
  filter: none !important;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .service-description,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .service-description {
  color: var(--jk-metal-light) !important;
  opacity: 1 !important;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .jkhive-hex-gallery-title,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .jkhive-hex-gallery-title {
  color: var(--jk-primary-blue-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .jkhive-hex-gallery-icon,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .jkhive-hex-gallery-icon {
  color: var(--jk-metal-light) !important;
  filter: none !important;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:hover .jkhive-hex-gallery-subtitle,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2) .jkhive-carouselitem-big:focus-within .jkhive-hex-gallery-subtitle {
  color: var(--jk-metal-light) !important;
  opacity: 1 !important;
}

/* ========================================
   HEX ITEM STYLE: CYAN CANÓNICO (galería itemgallery / carrusel index)
   Piel canónica: .jkhive-hex-cyan-item o alias .jkhive-hex-skin-canonical-cyan (mismo aspecto).
   Tercera piel en itemgallery: .jkhive-hex-blue-item (azul oscuro). Ver docs/JKFW_CANON_LANDING_ITEM_CONTRACT.md
   (pieles vs perfiles de hover; landing básica: editorial en carrusel servicios + strips + noticias cuando la raíz declara la clase).
   Borde celeste (--jk-primary-blue-light), relleno miel interior (::after). Hover: borde miel,
   relleno oscuro. Ver HEX-ITEM-CANONICAL-SKINS.md.

   NO confundir con .jkhive-hex-blue-item: es borde azul oscuro (itemgallery), distinto del
   «blue» tipo portfolio (.jkhive-services-hex + tokens --jkhive-canonical-blue-* en jk-hive.css).

   REQUISITOS para que se vea y funcione igual (incl. mobile/responsive) en otra página:
   1) Cargar jkhive-elements.css (después de jk-hive.css).
   2) Estructura: :is(.jkhive-itemgallery-small, .jkhive-hex-item-small)|med|big > .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan)
      o .jkhive-hex-blue-item > .jkhive-hex-content con icon/título/subtítulo galería.

   Responsive compacto (768/480/360): solo small + med. big (carrusel hub) conserva tipografía grande.
   Ver 11-DASHBOARD-Y-LOGIN.md §4.1.
   ======================================== */
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan),
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan),
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan) {
  background: var(--jk-primary-blue-light) !important;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex.jkhive-hex-blue-item,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex.jkhive-hex-blue-item,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big) .jkhive-hex.jkhive-hex-blue-item {
  background: var(--jk-primary-blue-dark) !important;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) {
  border: none !important;
  box-shadow: none !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::before,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::before,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::before {
  display: none !important;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc((100% - 4px) * 1.1547);
  background: var(--jk-accent-honey-light) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s ease, transform 0.3s ease;
}
/* Hover y focus-within (touch/mobile): mismo efecto para que funcione en responsive */
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item),
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) {
  background: var(--jk-accent-honey-light) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(244, 196, 48, 0.8) !important;
  position: relative !important;
  z-index: 5 !important;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item)::after {
  background: var(--jk-tech-dark) !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Título e icono en hover/focus (cyan-item / blue-item) */
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title {
  color: var(--jk-primary-blue-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6) !important;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon {
  color: var(--jk-metal-light) !important;
}
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):hover .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
:is(.jkhive-itemgallery-small, .jkhive-hex-item-small):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):not(.jkfw-home-news-spot):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
:is(.jkhive-itemgallery-big, .jkhive-hex-item-big):focus-within .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle {
  color: var(--jk-metal-light) !important;
  opacity: 1 !important;
}

/*
 * Noticias destacadas: contenedor .jkfw-home-news-spotlight + perfil :is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).
 * Hover editorial en .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med). El hover cyan con scale en `med` no aplica a ese enlace (selectores :not(.jkfw-home-news-spot) arriba).
 */
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within {
  z-index: 10;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover > .jkhive-hex,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within > .jkhive-hex {
  background: var(--jk-accent-honey-light) !important;
  transform: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 5;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover > .jkhive-hex::after,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within > .jkhive-hex::after {
  background: var(--jk-tech-dark) !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 2px var(--jk-primary-blue-light), 0 0 18px rgba(14, 165, 233, 0.45);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover > .jkhive-hex .jkhive-hex-gallery-title,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within > .jkhive-hex .jkhive-hex-gallery-title {
  color: var(--jk-primary-blue-light) !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.6);
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover > .jkhive-hex .jkhive-hex-gallery-icon,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within > .jkhive-hex .jkhive-hex-gallery-icon {
  color: var(--jk-metal-light) !important;
  filter: none !important;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover > .jkhive-hex .jkhive-hex-gallery-subtitle,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within > .jkhive-hex .jkhive-hex-gallery-subtitle {
  color: var(--jk-metal-light) !important;
  opacity: 1 !important;
}

:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):hover .jkfw-home-news-spot-meta,
:is(.jkfw-canon-hover--editorial, .jkhive-itemgallery-small-hover-v2).jkfw-home-news-spotlight .jkfw-home-news-spot:is(.jkhive-itemgallery-med, .jkhive-hex-item-med):focus-within .jkfw-home-news-spot-meta {
  color: var(--jk-metal-light) !important;
  opacity: 1 !important;
}

/* --- jkhive-hex-cyan-item / jkhive-hex-blue-item: responsive compacto (solo small + med) --- */
@media (max-width: 768px) {
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-content,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-content {
    padding: 0.12rem 0.3rem !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon {
    font-size: 18px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle {
    font-size: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
}
@media (max-width: 480px) {
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-content,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-content {
    padding: 0.1rem 0.25rem !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon {
    font-size: 21px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle {
    font-size: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
}
@media (max-width: 360px) {
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-content,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-content {
    padding: 0.08rem 0.2rem !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-icon {
    font-size: 17px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-title {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
  :is(.jkhive-itemgallery-small, .jkhive-hex-item-small) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle,
  :is(.jkhive-itemgallery-med, .jkhive-hex-item-med) .jkhive-hex:is(.jkhive-hex-cyan-item, .jkhive-hex-skin-canonical-cyan, .jkhive-hex-blue-item) .jkhive-hex-gallery-subtitle {
    font-size: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }
}

/* ========================================
   ANIMACIONES PERSONALIZADAS POR ICONO
   ======================================== */

/* Animación para LinkedIn: giro 180° sobre su eje */
@keyframes jkhive-anmtn-linkedin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

/* Flip simple 180° visible en todo el recorrido: izquierda / derecha. */
@keyframes jkhive-anmtn-flip180-left {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}

@keyframes jkhive-anmtn-flip180-right {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-180deg);
  }
}

@keyframes jkhive-anmtn-flip180-up {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(180deg);
  }
}

@keyframes jkhive-anmtn-flip180-down {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-180deg);
  }
}

/* Animación para Briefcase: doble giro (30° izquierda, centro, 30° derecha) */
@keyframes jkhive-anmtn-briefcase {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(-30deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  75% {
    transform: rotateZ(30deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

/* Animación para Handshake: doble giro (30° izquierda, centro, 30° derecha) */
@keyframes jkhive-anmtn-handshake {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(-30deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  75% {
    transform: rotateZ(30deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}

/* Animación para Envelope: giro 360° sobre eje Z */
@keyframes jkhive-anmtn-envelope {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

/* Envelope inversa: giro -360° sobre eje Z (misma animación que envelope pero dirección opuesta) */
@keyframes jkhive-anmtn-envelope-reverse {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-360deg);
  }
}

/* ========================================
   ANIMACIONES REUTILIZABLES (Housesitting)
   Shake, Coin180, Coin540 - configuradas y documentadas
   ======================================== */

/* Shake: 4 remecidas ±30° sobre eje Z. Duración 0.42s. Uso: .jkhive-btn-anim-shake en contenedor */
@keyframes jkhive-anmtn-shake {
  0%     { transform: rotateZ(0deg); }
  12.5%  { transform: rotateZ(30deg); }
  25%    { transform: rotateZ(-30deg); }
  37.5%  { transform: rotateZ(30deg); }
  50%    { transform: rotateZ(-30deg); }
  62.5%  { transform: rotateZ(30deg); }
  75%    { transform: rotateZ(-30deg); }
  87.5%  { transform: rotateZ(30deg); }
  100%   { transform: rotateZ(0deg); }
}

/* Inverse clock: doble vuelta (720°) en sentido antihorario (para icono refresh/vaciar). Más rápido. */
@keyframes jkhive-anmtn-inverseclock {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-720deg); }
}

/* Coin180: giro 360° sobre eje Y (una vuelta completa; como logo JK Hive). Duración 0.6s. Requiere perspective + preserve-3d */
@keyframes jkhive-anmtn-coin180 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Coin180-X: misma moneda, pero girando sobre eje horizontal. */
@keyframes jkhive-anmtn-coin180-x {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}

/* Coin540: giro 540° (1,5 vueltas) sobre eje Y. Duración 0.8s. Requiere perspective + preserve-3d */
@keyframes jkhive-anmtn-coin540 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(540deg); }
}

/* Coin540-X: 540° sobre eje X. */
@keyframes jkhive-anmtn-coin540-x {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(540deg); }
}

/* Coin720: doble vuelta de moneda (720° sobre eje Y). Para botón pagar/proceder al pago */
@keyframes jkhive-anmtn-coin720 {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(720deg); }
}

/* Coin720-X: doble vuelta de moneda sobre eje X. */
@keyframes jkhive-anmtn-coin720-x {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(720deg); }
}

/* Coin180-reverse: giro 360° sobre eje Y en sentido inverso (-360°, una vuelta al otro lado). Uso: par de botones (uno coin180, otro coin180-reverse). */
@keyframes jkhive-anmtn-coin180-reverse {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-360deg); }
}

/* Clases utilitarias: aplicar al elemento (contenedor con perspective para coin) */
.jkhive-anim-coin180 {
  animation: jkhive-anmtn-coin180 0.6s ease-in-out forwards;
}
.jkhive-anim-coin180-x {
  animation: jkhive-anmtn-coin180-x 0.6s ease-in-out forwards;
}
.jkhive-anim-coin540 {
  animation: jkhive-anmtn-coin540 0.8s ease-in-out forwards;
}
.jkhive-anim-coin540-x {
  animation: jkhive-anmtn-coin540-x 0.8s ease-in-out forwards;
}
.jkhive-anim-coin720-x {
  animation: jkhive-anmtn-coin720-x 0.65s ease-in-out forwards;
}
.jkhive-anim-coin180-reverse {
  animation: jkhive-anmtn-coin180-reverse 0.6s ease-in-out forwards;
}

/* Coin360-X: implementación actual con doble giro 360° (720°) sobre eje X para botones gestionar/mantenedor. */
@keyframes jkhive-anmtn-coin360-x {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(720deg); }
}

.jkhive-anim-coin360-x {
  animation: jkhive-anmtn-coin360-x 0.62s ease-in-out forwards;
}

/* Flip moneda en hover: una vuelta 360° Y y una vuelta -360° Y. Para pares de opciones (ej. Descargar CSV / Descargar XLSX). */
.jkhive-btn-anim-coinleft .jkhive-hex,
.jkhive-btn-anim-coinright .jkhive-hex {
  perspective: 520px;
  transform-style: preserve-3d;
}
.jkhive-btn-anim-coinleft:hover .jkhive-hex-icon,
.jkhive-btn-anim-coinleft:hover .jkhive-hex-content,
.jkhive-btn-anim-coinleft:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-coin180 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
  transform-origin: center center;
}
.jkhive-btn-anim-coinright:hover .jkhive-hex-icon,
.jkhive-btn-anim-coinright:hover .jkhive-hex-content,
.jkhive-btn-anim-coinright:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-coin180-reverse 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Giro 360° sobre eje X para botones que "abren/gestionan" un mantenedor relacionado. */
.jkhive-btn-anim-coinx .jkhive-hex {
  perspective: 520px;
  transform-style: preserve-3d;
}
.jkhive-btn-anim-coinx:hover .jkhive-hex-icon {
  display: inline-block;
  animation: jkhive-anmtn-coin360-x 0.62s ease-in-out forwards;
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Coin horizontal genérico en hover: una vuelta completa sobre eje X. */
.jkhive-btn-anim-coinhorizontal .jkhive-hex {
  perspective: 520px;
  transform-style: preserve-3d;
}
.jkhive-btn-anim-coinhorizontal:hover .jkhive-hex-icon,
.jkhive-btn-anim-coinhorizontal:hover .jkhive-hex-content,
.jkhive-btn-anim-coinhorizontal:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-coin180-x 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
  transform-origin: center center !important;
}

/* Shake en hover: añadir .jkhive-btn-anim-shake al contenedor del botón */
.jkhive-btn-anim-shake:hover .jkhive-hex-icon,
.jkhive-btn-anim-shake:hover .jkhive-btn-cambiar-icon,
.jkhive-btn-anim-shake:hover .jkhive-hex-content svg {
  display: inline-block;
  animation: jkhive-anmtn-shake 0.42s ease-in-out;
  transform-origin: center center;
}

/* LinkedIn genérico en hover: giro 180° sobre eje Y. */
.jkhive-btn-anim-linkedin:hover .jkhive-hex-icon,
.jkhive-btn-anim-linkedin:hover .jkhive-hex-content,
.jkhive-btn-anim-linkedin:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
  transform-origin: center center;
}

/* Flip180 genérico visible: izquierda / derecha. */
.jkhive-btn-anim-flip180-left:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-left:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-left:hover .jkhive-hex-content svg,
.jkhive-btn-anim-flip180-right:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-right:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-right:hover .jkhive-hex-content svg,
.jkhive-btn-anim-flip180-up:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-up:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-up:hover .jkhive-hex-content svg,
.jkhive-btn-anim-flip180-down:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-down:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-down:hover .jkhive-hex-content svg {
  display: inline-block;
  transform-style: preserve-3d !important;
  transform-origin: center center;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.jkhive-btn-anim-flip180-left:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-left:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-left:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-flip180-left 0.5s ease-in-out forwards !important;
}
.jkhive-btn-anim-flip180-right:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-right:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-right:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-flip180-right 0.5s ease-in-out forwards !important;
}
.jkhive-btn-anim-flip180-up:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-up:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-up:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-flip180-up 0.5s ease-in-out forwards !important;
}
.jkhive-btn-anim-flip180-down:hover .jkhive-hex-icon,
.jkhive-btn-anim-flip180-down:hover .jkhive-hex-content,
.jkhive-btn-anim-flip180-down:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-flip180-down 0.5s ease-in-out forwards !important;
}

/* Briefcase genérico en hover: balanceo doble sobre eje Z. */
.jkhive-btn-anim-briefcase:hover .jkhive-hex-icon,
.jkhive-btn-anim-briefcase:hover .jkhive-hex-content,
.jkhive-btn-anim-briefcase:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-briefcase 0.8s ease-in-out forwards !important;
  transform-origin: center center;
}

/* Graduation genérico en hover: giro 360° sobre eje Z. */
.jkhive-btn-anim-graduation:hover .jkhive-hex-icon,
.jkhive-btn-anim-graduation:hover .jkhive-hex-content,
.jkhive-btn-anim-graduation:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-graduation 0.6s ease-in-out forwards !important;
  transform-origin: center center;
}

/* Inverse clock en hover: para botón vaciar/refresh (doble vuelta, más rápido) */
.jkhive-btn-anim-inverseclock:hover .jkhive-hex-icon,
.jkhive-btn-anim-inverseclock:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-inverseclock 0.38s ease-in-out;
  transform-origin: center center;
}

/* Doble vuelta de moneda en hover: para botón proceder al pago / pagar */
.jkhive-btn-anim-coindouble .jkhive-hex {
  perspective: 520px;
  transform-style: preserve-3d;
}
.jkhive-btn-anim-coindouble:hover .jkhive-hex-icon,
.jkhive-btn-anim-coindouble:hover .jkhive-hex-content,
.jkhive-btn-anim-coindouble:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-coin720 0.65s ease-in-out;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Heartbeat genérico en hover: para cualquier botón que necesite latido del ícono. */
.jkhive-btn-anim-heartbeat:hover .jkhive-hex-icon,
.jkhive-btn-anim-heartbeat:hover .jkhive-hex-content,
.jkhive-btn-anim-heartbeat:hover .jkhive-hex-content svg {
  animation: jkhive-anmtn-heartbeat 1.1s ease-in-out forwards !important;
  transform-origin: center center;
}

/* Reproducción genérica de coin180 para acciones no-hover (p. ej. toggle ON/OFF al hacer clic). */
.jkhive-btn-play-coin180 .jkhive-hex {
  animation: jkhive-anmtn-coin180 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
  transform-origin: center center !important;
}
.jkhive-btn-play-coin180 .jkhive-hex-content {
  transition: none !important;
}
.jkhive-btn-play-coin180 .jkhive-toggle-text {
  animation: none !important;
}

/* Animación para Globe: giro 360° sobre su eje Y (como una moneda) */
@keyframes jkhive-anmtn-globe {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/* LinkedIn: giro 180° sobre su eje Y */
html body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="linkedin"],
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex-icon[class*="linkedin"],
body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="linkedin"],
.jkhive-bttn-table:hover .jkhive-hex-icon[class*="linkedin"],
html body .jkhive-bttn-table:hover .fa-linkedin,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .fa-linkedin,
body .jkhive-bttn-table:hover .fa-linkedin,
.jkhive-bttn-table:hover .fa-linkedin {
  color: #38bdf8 !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-linkedin 0.5s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Briefcase: doble giro */
html body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="briefcase"],
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex-icon[class*="briefcase"],
body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="briefcase"],
.jkhive-bttn-table:hover .jkhive-hex-icon[class*="briefcase"],
html body .jkhive-bttn-table:hover .fa-briefcase,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .fa-briefcase,
body .jkhive-bttn-table:hover .fa-briefcase,
.jkhive-bttn-table:hover .fa-briefcase {
  color: #38bdf8 !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-briefcase 0.8s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Globe: giro 360° sobre su eje Y (como una moneda) */
html body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="globe"],
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex-icon[class*="globe"],
body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="globe"],
.jkhive-bttn-table:hover .jkhive-hex-icon[class*="globe"],
html body .jkhive-bttn-table:hover .fa-globe,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .fa-globe,
body .jkhive-bttn-table:hover .fa-globe,
.jkhive-bttn-table:hover .fa-globe {
  color: #38bdf8 !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-globe 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Envelope: giro 360° */
html body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="envelope"],
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex-icon[class*="envelope"],
body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="envelope"],
.jkhive-bttn-table:hover .jkhive-hex-icon[class*="envelope"],
html body .jkhive-bttn-table:hover .fa-envelope,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .fa-envelope,
body .jkhive-bttn-table:hover .fa-envelope,
.jkhive-bttn-table:hover .fa-envelope {
  color: #38bdf8 !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-envelope 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Certificate: giro 360° sobre su propio eje Z */
@keyframes jkhive-anmtn-graduation {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

/* Certificate badge link hover - animación 360° sobre cualquier parte del link */
/* Graduation Cap badge link hover - solo animación 360° del ícono, sin cambio de color */
html body .jkhive-cert-badge-link:hover .jkhive-hex-badge i,
html body #jkhive-system-modal-container .jkhive-cert-badge-link:hover .jkhive-hex-badge i,
body .jkhive-cert-badge-link:hover .jkhive-hex-badge i,
.jkhive-cert-badge-link:hover .jkhive-hex-badge i,
html body .jkhive-cert-badge-link:hover .fa-graduation-cap,
html body #jkhive-system-modal-container .jkhive-cert-badge-link:hover .fa-graduation-cap,
body .jkhive-cert-badge-link:hover .fa-graduation-cap,
.jkhive-cert-badge-link:hover .fa-graduation-cap,
html body a.jkhive-cert-badge-link:hover .jkhive-hex-badge i,
html body #jkhive-system-modal-container a.jkhive-cert-badge-link:hover .jkhive-hex-badge i,
body a.jkhive-cert-badge-link:hover .jkhive-hex-badge i,
a.jkhive-cert-badge-link:hover .jkhive-hex-badge i {
  animation: jkhive-anmtn-graduation 0.6s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Hover effect en el badge completo - solo escala, sin cambio de color */
html body .jkhive-cert-badge-link:hover .jkhive-hex-badge,
html body #jkhive-system-modal-container .jkhive-cert-badge-link:hover .jkhive-hex-badge,
body .jkhive-cert-badge-link:hover .jkhive-hex-badge,
.jkhive-cert-badge-link:hover .jkhive-hex-badge {
  transform: scale(1.1) !important;
}

/* Hover effect en el texto del certificado - azul intenso con efecto luminoso */
html body .jkhive-cert-badge-link:hover span:not(.jkhive-hex-badge),
html body #jkhive-system-modal-container .jkhive-cert-badge-link:hover span:not(.jkhive-hex-badge),
body .jkhive-cert-badge-link:hover span:not(.jkhive-hex-badge),
.jkhive-cert-badge-link:hover span:not(.jkhive-hex-badge) {
  color: #0ea5e9 !important;
  text-shadow: 0 0 15px rgba(14, 165, 233, 1), 0 0 25px rgba(14, 165, 233, 0.8) !important;
}

/* Fila credencial (vitrina / About): hex badge + texto; enlaces combinan con .jkhive-cert-badge-link (hover ya arriba). */
.jkhive-credential-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  outline: none;
}
a.jkhive-credential-entry.jkhive-cert-badge-link:focus-visible {
  outline: 2px solid var(--jk-primary-blue-light, #38bdf8);
  outline-offset: 3px;
}
.jkhive-credential-entry .jkhive-hex-badge {
  flex-shrink: 0;
  margin-top: 0.12em;
}
.jkhive-credential-entry-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}
.jkhive-credential-entry-title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--jk-metal-light, rgba(255, 255, 255, 0.9));
}
a.jkhive-credential-entry.jkhive-cert-badge-link .jkhive-credential-entry-title {
  color: var(--jk-primary-blue-light, #38bdf8);
  transition: color 0.2s ease;
}
.jkhive-credential-entry-meta {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--jk-metal-medium, rgba(255, 255, 255, 0.55));
}
.jkhive-credential-entry--static .jkhive-credential-entry-badge--static {
  cursor: default;
}

/* Handshake: doble giro (30° izquierda, centro, 30° derecha) - para JK OutSrcIT */
html body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="handshake"],
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .jkhive-hex-icon[class*="handshake"],
body .jkhive-bttn-table:hover .jkhive-hex-icon[class*="handshake"],
.jkhive-bttn-table:hover .jkhive-hex-icon[class*="handshake"],
html body .jkhive-bttn-table:hover .fa-handshake,
html body #jkhive-system-modal-container .jkhive-bttn-table:hover .fa-handshake,
body .jkhive-bttn-table:hover .fa-handshake,
.jkhive-bttn-table:hover .fa-handshake {
  color: #38bdf8 !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-handshake 0.8s ease-in-out forwards !important;
  transform-style: preserve-3d !important;
}

/* Animación genérica para otros iconos (mantener compatibilidad) - EXCLUIR envelope, linkedin, briefcase, globe, handshake, manage, hs-btn-ingresar, hs-btn-registro */
html body .jkhive-bttn-table:not(.hs-btn-ingresar):not(.hs-btn-registro):not(.jkhive-bttn-table-manage):not(.jkhive-btn-anim-shake):not(.jkhive-btn-anim-heartbeat):not(.jkhive-btn-anim-flip180-left):not(.jkhive-btn-anim-flip180-right):not(.jkhive-btn-anim-flip180-up):not(.jkhive-btn-anim-flip180-down):hover .jkhive-hex-icon:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green):not([class*="linkedin"]):not([class*="briefcase"]):not([class*="envelope"]):not([class*="globe"]):not([class*="handshake"]):not(.fa-envelope):not(.fa-linkedin):not(.fa-briefcase):not(.fa-globe):not(.fa-handshake),
html body #jkhive-system-modal-container .jkhive-bttn-table:not(.hs-btn-ingresar):not(.hs-btn-registro):not(.jkhive-bttn-table-manage):not(.jkhive-btn-anim-shake):not(.jkhive-btn-anim-heartbeat):not(.jkhive-btn-anim-flip180-left):not(.jkhive-btn-anim-flip180-right):not(.jkhive-btn-anim-flip180-up):not(.jkhive-btn-anim-flip180-down):hover .jkhive-hex-icon:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green):not([class*="linkedin"]):not([class*="briefcase"]):not([class*="envelope"]):not([class*="globe"]):not([class*="handshake"]):not(.fa-envelope):not(.fa-linkedin):not(.fa-briefcase):not(.fa-globe):not(.fa-handshake),
body .jkhive-bttn-table:not(.hs-btn-ingresar):not(.hs-btn-registro):not(.jkhive-bttn-table-manage):not(.jkhive-btn-anim-shake):not(.jkhive-btn-anim-heartbeat):not(.jkhive-btn-anim-flip180-left):not(.jkhive-btn-anim-flip180-right):not(.jkhive-btn-anim-flip180-up):not(.jkhive-btn-anim-flip180-down):hover .jkhive-hex-icon:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green):not([class*="linkedin"]):not([class*="briefcase"]):not([class*="envelope"]):not([class*="globe"]):not([class*="handshake"]):not(.fa-envelope):not(.fa-linkedin):not(.fa-briefcase):not(.fa-globe):not(.fa-handshake),
.jkhive-bttn-table:not(.hs-btn-ingresar):not(.hs-btn-registro):not(.jkhive-bttn-table-manage):not(.jkhive-btn-anim-shake):not(.jkhive-btn-anim-heartbeat):not(.jkhive-btn-anim-flip180-left):not(.jkhive-btn-anim-flip180-right):not(.jkhive-btn-anim-flip180-up):not(.jkhive-btn-anim-flip180-down):hover .jkhive-hex-icon:not(.jkhive-hex-honey):not(.jkhive-hex-cyan):not(.jkhive-hex-red):not(.jkhive-hex-green):not([class*="linkedin"]):not([class*="briefcase"]):not([class*="envelope"]):not([class*="globe"]):not([class*="handshake"]):not(.fa-envelope):not(.fa-linkedin):not(.fa-briefcase):not(.fa-globe):not(.fa-handshake) {
  color: #38bdf8 !important;
  opacity: 1 !important;
  transform: rotateY(180deg) !important;
  transform-style: preserve-3d !important;
}

/* ========================================
   BOTONES DE TABLA — ESTILOS INDIVIDUALIZADOS Y AUTOSUFICIENTES
   Cada bloque contiene todo lo necesario para ese botón. Regla 04-botones-y-ctas: ícono y borde mismo color.
   Requieren clase base .jkhive-bttn-table (tamaño, wrapper, .jkhive-hex-content, .jkhive-hex::after).
   ======================================== */

/* --------------------------------------------------
   BOTÓN TABLA EDITAR — .jkhive-bttn-table-edit
   Normal: azul neon. Hover: cyan neon. Ícono y borde siempre mismo color.
   Estilos autosuficientes; usar en todas las tablas para acción Editar.
   -------------------------------------------------- */
html body .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: var(--jk-primary-blue, #0ea5e9) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), var(--jk-glow-blue, 0 0 20px rgba(14, 165, 233, 0.6)) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
body .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
.jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon {
  color: var(--jk-primary-blue, #0ea5e9) !important;
  font-size: 0.9rem !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(56, 189, 248, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-icon,
body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-icon,
.jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-icon,
html body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content,
body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content,
.jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content,
html body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content svg,
body .jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content svg,
.jkhive-bttn-table.jkhive-bttn-table-edit:hover .jkhive-hex-content svg {
  color: var(--jk-primary-blue-light, #38bdf8) !important;
  opacity: 1 !important;
  animation: jkhive-anmtn-heartbeat 1.1s ease-in-out forwards !important;
  transform-origin: center center;
}

/* --------------------------------------------------
   BOTÓN TABLA GESTIONAR CATÁLOGO — .jkhive-bttn-table-manage
   Tamaño de toggle modal. Normal: amarillo miel. Hover: cyan neon.
   Uso: abrir mantenedores relacionados desde selects en formularios.
   -------------------------------------------------- */
html body .jkhive-bttn-table.jkhive-bttn-table-manage,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-manage,
body .jkhive-bttn-table.jkhive-bttn-table-manage,
.jkhive-bttn-table.jkhive-bttn-table-manage {
  width: 42px !important;
  height: calc(42px * 1.1547) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon,
body .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon,
.jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon {
  color: var(--jk-accent-honey-light, #f4c430) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex-icon,
body .jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex-icon,
.jkhive-bttn-table.jkhive-bttn-table-manage:hover .jkhive-hex-icon {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------
   BOTÓN FORMULARIO — .jkhive-bttn-form
   Variante genérica, autosuficiente e independiente para formularios.
   Normal: amarillo miel. Hover: cyan neon. Ícono y borde/hex siempre mismo color.
   Tamaño base: 15% menor que el manage anterior, con reducción homogénea.
   -------------------------------------------------- */
html body .jkhive-bttn-form,
html body #jkhive-system-modal-container .jkhive-bttn-form,
body .jkhive-bttn-form,
.jkhive-bttn-form {
  --jkhive-bttn-form-width: 27.32px;
  --jkhive-bttn-form-height: calc(27.32px * 1.1547);
  position: relative !important;
  margin: 0 !important;
  z-index: 1 !important;
  display: inline-block !important;
  width: var(--jkhive-bttn-form-width) !important;
  height: var(--jkhive-bttn-form-height) !important;
  min-width: var(--jkhive-bttn-form-width) !important;
  min-height: var(--jkhive-bttn-form-height) !important;
  max-width: var(--jkhive-bttn-form-width) !important;
  max-height: var(--jkhive-bttn-form-height) !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: none !important;
  flex: 0 0 auto !important;
}
html body .jkhive-bttn-form > a,
html body .jkhive-bttn-form > button,
html body #jkhive-system-modal-container .jkhive-bttn-form > a,
html body #jkhive-system-modal-container .jkhive-bttn-form > button,
body .jkhive-bttn-form > a,
body .jkhive-bttn-form > button,
.jkhive-bttn-form > a,
.jkhive-bttn-form > button {
  text-decoration: none !important;
  display: block !important;
  width: var(--jkhive-bttn-form-width) !important;
  height: var(--jkhive-bttn-form-height) !important;
  min-width: var(--jkhive-bttn-form-width) !important;
  min-height: var(--jkhive-bttn-form-height) !important;
  max-width: var(--jkhive-bttn-form-width) !important;
  max-height: var(--jkhive-bttn-form-height) !important;
  position: relative !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
html body .jkhive-bttn-form:hover,
html body #jkhive-system-modal-container .jkhive-bttn-form:hover,
body .jkhive-bttn-form:hover,
.jkhive-bttn-form:hover {
  z-index: 10 !important;
}
html body .jkhive-bttn-form .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex,
body .jkhive-bttn-form .jkhive-hex,
.jkhive-bttn-form .jkhive-hex {
  width: var(--jkhive-bttn-form-width) !important;
  height: var(--jkhive-bttn-form-height) !important;
  min-width: var(--jkhive-bttn-form-width) !important;
  min-height: var(--jkhive-bttn-form-height) !important;
  max-width: var(--jkhive-bttn-form-width) !important;
  max-height: var(--jkhive-bttn-form-height) !important;
  position: relative !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 20px rgba(244, 196, 48, 0.6) !important;
  border: none !important;
}
html body .jkhive-bttn-form .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex::after,
body .jkhive-bttn-form .jkhive-hex::after,
.jkhive-bttn-form .jkhive-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
}
html body .jkhive-bttn-form .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex-content,
body .jkhive-bttn-form .jkhive-hex-content,
.jkhive-bttn-form .jkhive-hex-content {
  position: absolute !important;
  top: 52% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  padding: 0 !important;
}
html body .jkhive-bttn-form .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex-icon,
body .jkhive-bttn-form .jkhive-hex-icon,
.jkhive-bttn-form .jkhive-hex-icon,
html body .jkhive-bttn-form .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex-content,
body .jkhive-bttn-form .jkhive-hex-content,
.jkhive-bttn-form .jkhive-hex-content,
html body .jkhive-bttn-form .jkhive-hex-content svg,
body .jkhive-bttn-form .jkhive-hex-content svg,
.jkhive-bttn-form .jkhive-hex-content svg {
  color: var(--jk-accent-honey-light, #f4c430) !important;
  fill: currentColor !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}
html body .jkhive-bttn-form .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex-icon,
body .jkhive-bttn-form .jkhive-hex-icon,
.jkhive-bttn-form .jkhive-hex-icon {
  font-size: 0.813rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .jkhive-bttn-form:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-form:hover .jkhive-hex,
body .jkhive-bttn-form:hover .jkhive-hex,
.jkhive-bttn-form:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .jkhive-bttn-form:hover .jkhive-hex::after,
html body #jkhive-system-modal-container .jkhive-bttn-form:hover .jkhive-hex::after,
body .jkhive-bttn-form:hover .jkhive-hex::after,
.jkhive-bttn-form:hover .jkhive-hex::after {
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  transform: translate(-50%, -50%) scale(0.75) !important;
}
html body .jkhive-bttn-form:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-form:hover .jkhive-hex-icon,
body .jkhive-bttn-form:hover .jkhive-hex-icon,
.jkhive-bttn-form:hover .jkhive-hex-icon,
html body .jkhive-bttn-form:hover .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-form:hover .jkhive-hex-content,
body .jkhive-bttn-form:hover .jkhive-hex-content,
.jkhive-bttn-form:hover .jkhive-hex-content,
html body .jkhive-bttn-form:hover .jkhive-hex-content svg,
body .jkhive-bttn-form:hover .jkhive-hex-content svg,
.jkhive-bttn-form:hover .jkhive-hex-content svg {
  color: var(--jk-accent-cyan, #06b6d4) !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* --------------------------------------------------
   BOTÓN TABLA ELIMINAR — .jkhive-bttn-table-delete
   Normal: rojo neon. Hover: cyan neon. Ícono y borde siempre mismo color.
   Estilos autosuficientes; usar en todas las tablas para acción Eliminar.
   -------------------------------------------------- */
html body .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: var(--jk-accent-red-neon, #ef4444) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), var(--jk-glow-red-neon, 0 0 20px rgba(239, 68, 68, 0.6)) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon,
body .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon,
.jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon {
  color: var(--jk-accent-red-neon, #ef4444) !important;
  font-size: 0.9rem !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(56, 189, 248, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-icon,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-icon,
body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-icon,
.jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-icon,
html body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content,
body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content,
.jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content,
html body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content svg,
body .jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content svg,
.jkhive-bttn-table.jkhive-bttn-table-delete:hover .jkhive-hex-content svg {
  color: var(--jk-primary-blue-light, #38bdf8) !important;
  display: inline-block;
  animation: jkhive-anmtn-shake 0.42s ease-in-out !important;
  transform-origin: center center;
}

/* Mobile: variantes tabla con ajuste óptico de ícono */
@media (max-width: 768px) {
  html body .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
  html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
  body .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
  .jkhive-bttn-table.jkhive-bttn-table-edit .jkhive-hex-icon,
  html body .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon,
  html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon,
  body .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon,
  .jkhive-bttn-table.jkhive-bttn-table-delete .jkhive-hex-icon {
    font-size: 0.688rem !important; /* 0.9rem × 0.85 × 0.9 ≈ 25% menos (15% + 10%) */
  }
  html body .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon,
  html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon,
  body .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon,
  .jkhive-bttn-table.jkhive-bttn-table-manage .jkhive-hex-icon {
    font-size: 1.06rem !important;
  }
  html body .jkhive-bttn-form,
  html body #jkhive-system-modal-container .jkhive-bttn-form,
  body .jkhive-bttn-form,
  .jkhive-bttn-form {
    --jkhive-bttn-form-width: 25.25px;
    --jkhive-bttn-form-height: calc(25.25px * 1.1547);
  }
  html body .jkhive-bttn-form .jkhive-hex-icon,
  html body #jkhive-system-modal-container .jkhive-bttn-form .jkhive-hex-icon,
  body .jkhive-bttn-form .jkhive-hex-icon,
  .jkhive-bttn-form .jkhive-hex-icon {
    font-size: 0.719rem !important;
  }
}

/* ========================================
   BOTÓN TABLA TOGGLE ON/OFF — .jkhive-bttn-table-toggle
   Estilos autosuficientes. OFF = rojo neon, ON = verde neon. Hover = cyan neon.
   Texto (ON/OFF) mismo color que borde/hex. Variables en jk-hive.css :root.
   ======================================== */

/* Estado OFF: ROJO NEON TECH (hex y texto mismo color — regla 04) */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: linear-gradient(135deg, var(--jk-accent-red-neon) 0%, #b91c1c 100%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), var(--jk-glow-red-neon) !important;
  filter: brightness(1.15) !important;
}

/* Texto OFF - ROJO NEON */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--jk-accent-red-neon) !important;
  text-shadow: var(--jk-glow-red-neon) !important;
  letter-spacing: 0.05em !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  display: inline-block !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  transform: rotateY(0deg) !important;
}

/* Texto ON - VERDE NEON TECH */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--jk-accent-green-neon) !important;
  text-shadow: var(--jk-glow-green-neon) !important;
  letter-spacing: 0.05em !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  display: inline-block !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  transform: rotateY(0deg) !important;
}

/* HOVER OFF: cyan neon tech — texto mismo color que el borde/hex */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-hex {
  background: linear-gradient(135deg, var(--jk-primary-blue-light, #38bdf8) 0%, #0ea5e9 100%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), var(--jk-glow-blue, 0 0 20px rgba(14, 165, 233, 0.7)) !important;
  filter: brightness(1.05) !important;
  transform: scale(1.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off:hover .jkhive-toggle-text {
  color: var(--jk-primary-blue-light, #38bdf8) !important;
  text-shadow: var(--jk-glow-blue, 0 0 20px rgba(14, 165, 233, 0.9)) !important;
}

/* Estado ON: VERDE NEON TECH (hex y texto mismo color — regla 04) */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: linear-gradient(135deg, var(--jk-accent-green-neon) 0%, #16a34a 100%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), var(--jk-glow-green-neon) !important;
  filter: brightness(1.15) !important;
}

/* HOVER ON: cyan neon tech — texto mismo color que el borde/hex */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-hex,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-hex,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-hex,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-hex {
  background: linear-gradient(135deg, var(--jk-primary-blue-light, #38bdf8) 0%, #0ea5e9 100%) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), var(--jk-glow-blue, 0 0 20px rgba(14, 165, 233, 0.7)) !important;
  filter: brightness(1.05) !important;
  transform: scale(1.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on:hover .jkhive-toggle-text {
  color: var(--jk-primary-blue-light, #38bdf8) !important;
  text-shadow: var(--jk-glow-blue, 0 0 20px rgba(14, 165, 233, 0.9)) !important;
}

/* Contenido del toggle - centrado verticalmente */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex-content,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex-content,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-hex-content {
  transform: translate(-50%, -50%) !important;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex-content,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex-content,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-hex-content {
  transform: translate(-50%, -50%) !important;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Animaciones de rotación del texto */
@keyframes jkhive-anmtn-rotate-text-on {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes jkhive-anmtn-rotate-text-off {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-on .jkhive-toggle-text {
  transform: rotateY(0deg) !important;
  animation: jkhive-anmtn-rotate-text-on 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
}

html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-off .jkhive-toggle-text {
  transform: rotateY(0deg) !important;
  animation: jkhive-anmtn-rotate-text-off 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
}

/* Tamaño del toggle en modal - tamaño medio */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size {
  width: 42px !important;
  height: calc(42px * 1.1547) !important;
}

/* Contenido del toggle en modal - centrado verticalmente */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-hex-content,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-hex-content,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-hex-content,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-hex-content {
  transform: translate(-50%, -50%) !important;
}

/* Texto del toggle en modal - tamaño apropiado */
html body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-toggle-text,
html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-toggle-text,
body .jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-toggle-text,
.jkhive-bttn-table.jkhive-bttn-table-toggle.jkhive-toggle-modal-size .jkhive-toggle-text {
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
}

/* Wrapper del toggle en modal */
.jkhive-hex-toggle-modal-wrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* ========================================
   TOGGLE Y BOTONES DE TABLA — RESPONSIVE / MOBILE (768px)
   Mismo criterio que CRM y HouseSitting: área táctil mínima y proporción legible.
   ======================================== */
@media (max-width: 768px) {
  html body .jkhive-bttn-table.jkhive-bttn-table-toggle,
  html body #jkhive-system-modal-container .jkhive-bttn-table.jkhive-bttn-table-toggle,
  body .jkhive-bttn-table.jkhive-bttn-table-toggle,
  .jkhive-bttn-table.jkhive-bttn-table-toggle {
    width: 42px !important;
    height: calc(42px * 1.1547) !important;
    min-width: 42px !important;
    min-height: calc(42px * 1.1547) !important;
  }
  html body .jkhive-bttn-table.jkhive-bttn-table-toggle .jkhive-toggle-text,
  body .jkhive-bttn-table.jkhive-bttn-table-toggle .jkhive-toggle-text {
    font-size: 0.65rem !important;
    letter-spacing: 0.04em !important;
  }
  html body .jkhive-bttn-table,
  html body #jkhive-system-modal-container .jkhive-bttn-table,
  body .jkhive-bttn-table,
  .jkhive-bttn-table {
    width: 32px !important;
    height: calc(32px * 1.1547) !important;
    min-width: 32px !important;
    min-height: calc(32px * 1.1547) !important;
  }
  html body .jkhive-bttn-table .jkhive-hex-icon,
  body .jkhive-bttn-table .jkhive-hex-icon {
    font-size: 0.75rem !important;
  }
}

/* ========================================
   HEXAGONAL SELECT COMPONENT (GALERÍA)
   (Estilo de ebooks.html - Galería hexagonal expandible)
   
   Componente completamente independiente, individualizado, inmune y autosuficiente.
   Todos los estilos usan máxima especificidad (html body .class) y !important
   para garantizar inmunidad total a interferencias de otros estilos.
   
   CARACTERÍSTICAS:
   - Toggle inicial: Amarillo miel metálico cuando cerrado, Cyan cuando abierto
   - Items: Cyan por defecto, Amarillo miel metálico en hover
   - Posicionamiento: Items aparecen horizontalmente al lado del toggle
   - Gap lateral: 1.5px entre toggle y primer item, y entre cada item
   - Variante pequeña: .jkhive-hex-select-small (45px en lugar de 60px)
   - Select nativo: Completamente oculto e inaccesible
   
   USO:
   - Agregar clases: jkhive-hex-select-gallery jkhive-hex-select-small al <select>
   - Inicializar con: initHexGallerySelect(selectElement)
   ======================================== */

/* OCULTAR SELECT NATIVO COMPLETAMENTE */
html body select.jkhive-hex-select-gallery,
html body .gallery-size-selector select.jkhive-hex-select-gallery,
html body .section-title-editor select.jkhive-hex-select-gallery,
html body .section-title-editor .gallery-size-selector select,
body select.jkhive-hex-select-gallery,
body .gallery-size-selector select.jkhive-hex-select-gallery,
body .section-title-editor select.jkhive-hex-select-gallery,
body .section-title-editor .gallery-size-selector select,
select.jkhive-hex-select-gallery {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
}

/* CONTENEDOR GALLERY-SIZE-SELECTOR - Asegurar que no interfiera */
html body .gallery-size-selector,
html body .section-title-editor .gallery-size-selector,
body .gallery-size-selector,
body .section-title-editor .gallery-size-selector,
.gallery-size-selector {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  gap: 0.1rem !important;
}

/* Label dentro del gallery-size-selector - alineación correcta */
html body .gallery-size-selector label,
html body .section-title-editor .gallery-size-selector label,
body .gallery-size-selector label,
body .section-title-editor .gallery-size-selector label,
.gallery-size-selector label {
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Botón de unlock dentro del gallery-size-selector - alineación correcta */
html body .gallery-size-selector .size-unlock-btn,
html body .section-title-editor .gallery-size-selector .size-unlock-btn,
body .gallery-size-selector .size-unlock-btn,
body .section-title-editor .gallery-size-selector .size-unlock-btn,
.gallery-size-selector .size-unlock-btn {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  line-height: normal !important;
  margin: 0 !important;
}

/* CONTENEDOR PRINCIPAL */
html body .jkhive-hex-select,
html body .gallery-size-selector .jkhive-hex-select,
html body .section-title-editor .jkhive-hex-select,
body .jkhive-hex-select,
body .gallery-size-selector .jkhive-hex-select,
body .section-title-editor .jkhive-hex-select,
.jkhive-hex-select {
  position: relative !important;
  display: inline-block !important;
  z-index: 100 !important;
  overflow: visible !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

html body .jkhive-hex-select *,
html body .gallery-size-selector .jkhive-hex-select *,
html body .section-title-editor .jkhive-hex-select *,
body .jkhive-hex-select *,
body .gallery-size-selector .jkhive-hex-select *,
body .section-title-editor .jkhive-hex-select *,
.jkhive-hex-select * {
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body .jkhive-hex-select.open,
html body .gallery-size-selector .jkhive-hex-select.open,
html body .section-title-editor .jkhive-hex-select.open,
body .jkhive-hex-select.open,
body .gallery-size-selector .jkhive-hex-select.open,
body .section-title-editor .jkhive-hex-select.open,
.jkhive-hex-select.open {
  z-index: 9999 !important;
  overflow: visible !important;
}

/* ESTADO DESHABILITADO - MÁXIMA ESPECIFICIDAD */
html body .jkhive-hex-select.disabled,
html body .gallery-size-selector .jkhive-hex-select.disabled,
html body .section-title-editor .jkhive-hex-select.disabled,
html body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled,
body .jkhive-hex-select.disabled,
body .gallery-size-selector .jkhive-hex-select.disabled,
body .section-title-editor .jkhive-hex-select.disabled,
body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled,
.jkhive-hex-select.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

html body .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
html body .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
html body .section-title-editor .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
html body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
body .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
body .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
body .section-title-editor .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-trigger,
.jkhive-hex-select.disabled .jkhive-hex-select-trigger {
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
}

html body .jkhive-hex-select.disabled .jkhive-hex-select-hex,
html body .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-hex,
html body .section-title-editor .jkhive-hex-select.disabled .jkhive-hex-select-hex,
html body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-hex,
body .jkhive-hex-select.disabled .jkhive-hex-select-hex,
body .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-hex,
body .section-title-editor .jkhive-hex-select.disabled .jkhive-hex-select-hex,
body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled .jkhive-hex-select-hex,
.jkhive-hex-select.disabled .jkhive-hex-select-hex {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Prevenir que se abra cuando está deshabilitado */
html body .jkhive-hex-select.disabled.open,
html body .gallery-size-selector .jkhive-hex-select.disabled.open,
html body .section-title-editor .jkhive-hex-select.disabled.open,
html body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled.open,
body .jkhive-hex-select.disabled.open,
body .gallery-size-selector .jkhive-hex-select.disabled.open,
body .section-title-editor .jkhive-hex-select.disabled.open,
body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled.open,
.jkhive-hex-select.disabled.open {
  z-index: 100 !important;
}

html body .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
html body .gallery-size-selector .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
html body .section-title-editor .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
html body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
body .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
body .gallery-size-selector .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
body .section-title-editor .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
body .section-title-editor .gallery-size-selector .jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown,
.jkhive-hex-select.disabled.open .jkhive-hex-select-dropdown {
  pointer-events: none !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* TRIGGER (HEXÁGONO INICIAL) */
html body .jkhive-hex-select-trigger,
html body .gallery-size-selector .jkhive-hex-select-trigger,
html body .section-title-editor .jkhive-hex-select-trigger,
body .jkhive-hex-select-trigger,
body .gallery-size-selector .jkhive-hex-select-trigger,
body .section-title-editor .jkhive-hex-select-trigger,
.jkhive-hex-select-trigger {
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  vertical-align: middle !important;
  line-height: normal !important;
}

html body .jkhive-hex-select-hex,
html body .gallery-size-selector .jkhive-hex-select-hex,
html body .section-title-editor .jkhive-hex-select-hex,
body .jkhive-hex-select-hex,
body .gallery-size-selector .jkhive-hex-select-hex,
body .section-title-editor .jkhive-hex-select-hex,
.jkhive-hex-select-hex {
  width: 60px !important;
  height: calc(60px * 1.1547) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: linear-gradient(135deg, #f4c430 0%, #d4a017 100%) !important;
  box-shadow: 0 4px 16px rgba(244, 196, 48, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

html body .jkhive-hex-select-hex::after,
body .jkhive-hex-select-hex::after,
.jkhive-hex-select-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(60px - 4px) !important;
  height: calc((60px - 4px) * 1.1547) !important;
  background: #1e293b !important;
  opacity: 1 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

html body .jkhive-hex-select-content,
body .jkhive-hex-select-content,
.jkhive-hex-select-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 0.5rem !important;
  margin: 0 !important;
}

html body .jkhive-hex-select-text,
body .jkhive-hex-select-text,
.jkhive-hex-select-text {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  color: #f4c430 !important;
  text-shadow: 0 0 8px rgba(244, 196, 48, 0.6) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  padding: 0 0.3rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* ESTADO ABIERTO - Trigger se vuelve cyan (igual que las opciones) */
html body .jkhive-hex-select.open .jkhive-hex-select-trigger .jkhive-hex-select-hex,
body .jkhive-hex-select.open .jkhive-hex-select-trigger .jkhive-hex-select-hex,
.jkhive-hex-select.open .jkhive-hex-select-trigger .jkhive-hex-select-hex {
  background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%) !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-trigger .jkhive-hex-select-text,
body .jkhive-hex-select.open .jkhive-hex-select-trigger .jkhive-hex-select-text,
.jkhive-hex-select.open .jkhive-hex-select-trigger .jkhive-hex-select-text {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  opacity: 1 !important;
}

/* ESTADO CERRADO - Trigger vuelve a amarillo miel (solo cuando NO está abierto) */
html body .jkhive-hex-select:not(.open) .jkhive-hex-select-trigger .jkhive-hex-select-hex,
body .jkhive-hex-select:not(.open) .jkhive-hex-select-trigger .jkhive-hex-select-hex,
.jkhive-hex-select:not(.open) .jkhive-hex-select-trigger .jkhive-hex-select-hex {
  background: linear-gradient(135deg, #f4c430 0%, #d4a017 100%) !important;
  box-shadow: 0 4px 16px rgba(244, 196, 48, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select:not(.open) .jkhive-hex-select-trigger .jkhive-hex-select-text,
body .jkhive-hex-select:not(.open) .jkhive-hex-select-trigger .jkhive-hex-select-text,
.jkhive-hex-select:not(.open) .jkhive-hex-select-trigger .jkhive-hex-select-text {
  color: #f4c430 !important;
  text-shadow: 0 0 8px rgba(244, 196, 48, 0.6) !important;
  opacity: 1 !important;
}

/* Hover normal cuando está cerrado */
html body .jkhive-hex-select:not(.open) .jkhive-hex-select-trigger:hover .jkhive-hex-select-hex,
body .jkhive-hex-select:not(.open) .jkhive-hex-select-trigger:hover .jkhive-hex-select-hex,
.jkhive-hex-select:not(.open) .jkhive-hex-select-trigger:hover .jkhive-hex-select-hex {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(244, 196, 48, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.3) !important;
}

/* Hover sobre el trigger cuando está abierto: mantiene cyan (igual que las opciones) */
html body .jkhive-hex-select.open .jkhive-hex-select-trigger:hover .jkhive-hex-select-hex,
body .jkhive-hex-select.open .jkhive-hex-select-trigger:hover .jkhive-hex-select-hex,
.jkhive-hex-select.open .jkhive-hex-select-trigger:hover .jkhive-hex-select-hex {
  background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%) !important;
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-trigger:hover .jkhive-hex-select-text,
body .jkhive-hex-select.open .jkhive-hex-select-trigger:hover .jkhive-hex-select-text,
.jkhive-hex-select.open .jkhive-hex-select-trigger:hover .jkhive-hex-select-text {
  color: #38bdf8 !important;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.8) !important;
  opacity: 1 !important;
}

/* DROPDOWN (GALERÍA HEXAGONAL) */
html body .jkhive-hex-select-dropdown,
html body .gallery-size-selector .jkhive-hex-select-dropdown,
html body .section-title-editor .jkhive-hex-select-dropdown,
body .jkhive-hex-select-dropdown,
body .gallery-size-selector .jkhive-hex-select-dropdown,
body .section-title-editor .jkhive-hex-select-dropdown,
.jkhive-hex-select-dropdown {
  position: absolute !important;
  top: 0 !important;
  left: calc(60px + 1.5px) !important;
  z-index: 9999 !important;
  overflow: visible !important;
  pointer-events: none !important;
  width: 0 !important;
  height: calc(60px * 1.1547) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  transform: translateY(0) !important;
  vertical-align: top !important;
}

html body .jkhive-hex-select-small .jkhive-hex-select-dropdown,
html body .gallery-size-selector .jkhive-hex-select-small .jkhive-hex-select-dropdown,
html body .section-title-editor .jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .gallery-size-selector .jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .section-title-editor .jkhive-hex-select-small .jkhive-hex-select-dropdown,
.jkhive-hex-select-small .jkhive-hex-select-dropdown {
  left: calc(45px + 1.5px) !important;
  height: calc(45px * 1.1547) !important;
  top: 0 !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-dropdown,
html body .gallery-size-selector .jkhive-hex-select.open .jkhive-hex-select-dropdown,
html body .section-title-editor .jkhive-hex-select.open .jkhive-hex-select-dropdown,
body .jkhive-hex-select.open .jkhive-hex-select-dropdown,
body .gallery-size-selector .jkhive-hex-select.open .jkhive-hex-select-dropdown,
body .section-title-editor .jkhive-hex-select.open .jkhive-hex-select-dropdown,
.jkhive-hex-select.open .jkhive-hex-select-dropdown {
  pointer-events: all !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 700px !important;
  height: calc(60px * 1.1547) !important;
  min-height: calc(60px * 1.1547) !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  position: absolute !important;
  top: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* Ocultar scrollbars completamente */
html body .jkhive-hex-select-dropdown::-webkit-scrollbar,
body .jkhive-hex-select-dropdown::-webkit-scrollbar,
.jkhive-hex-select-dropdown::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body .jkhive-hex-select-dropdown,
body .jkhive-hex-select-dropdown,
.jkhive-hex-select-dropdown {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

html body .jkhive-hex-select-small.open .jkhive-hex-select-dropdown,
html body .gallery-size-selector .jkhive-hex-select-small.open .jkhive-hex-select-dropdown,
html body .section-title-editor .jkhive-hex-select-small.open .jkhive-hex-select-dropdown,
body .jkhive-hex-select-small.open .jkhive-hex-select-dropdown,
body .gallery-size-selector .jkhive-hex-select-small.open .jkhive-hex-select-dropdown,
body .section-title-editor .jkhive-hex-select-small.open .jkhive-hex-select-dropdown,
.jkhive-hex-select-small.open .jkhive-hex-select-dropdown {
  min-width: 150px !important;
  height: calc(45px * 1.1547) !important;
  min-height: calc(45px * 1.1547) !important;
  top: 0 !important;
}

/* Scrollbars completamente ocultos - no se necesitan porque el overflow es visible */

html body .jkhive-hex-select-gallery,
html body .gallery-size-selector .jkhive-hex-select-gallery,
html body .section-title-editor .jkhive-hex-select-gallery,
body .jkhive-hex-select-gallery,
body .gallery-size-selector .jkhive-hex-select-gallery,
body .section-title-editor .jkhive-hex-select-gallery,
.jkhive-hex-select-gallery {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  height: calc(60px * 1.1547) !important;
  min-height: calc(60px * 1.1547) !important;
  display: block !important;
  overflow: visible !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

/* ITEMS HEXAGONALES */
html body .jkhive-hex-select-item,
body .jkhive-hex-select-item,
.jkhive-hex-select-item {
  width: 60px !important;
  height: calc(60px * 1.1547) !important;
  position: absolute !important;
  top: 0 !important;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: scale(0) translateZ(0) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  will-change: transform, opacity !important;
  vertical-align: top !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-item,
body .jkhive-hex-select.open .jkhive-hex-select-item,
.jkhive-hex-select.open .jkhive-hex-select-item {
  opacity: 1 !important;
  transform: scale(1) rotateY(0deg) translateZ(0) !important;
  pointer-events: all !important;
  visibility: visible !important;
  animation: jkhive-anmtn-snake-appear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  will-change: transform, opacity !important;
}

@keyframes jkhive-anmtn-snake-appear {
  0% {
    opacity: 0 !important;
    transform: scale(0) rotateY(90deg) !important;
    filter: brightness(0.3) drop-shadow(0 0 5px rgba(244, 196, 48, 0.3)) !important;
  }
  30% {
    opacity: 1 !important;
    transform: scale(1) rotateY(0deg) !important;
    filter: brightness(2.5) drop-shadow(0 0 25px rgba(244, 196, 48, 1)) drop-shadow(0 0 50px rgba(6, 182, 212, 0.8)) !important;
  }
  60% {
    opacity: 1 !important;
    transform: scale(1) rotateY(0deg) !important;
    filter: brightness(1.5) drop-shadow(0 0 15px rgba(244, 196, 48, 0.6)) !important;
  }
  100% {
    opacity: 1 !important;
    transform: scale(1) rotateY(0deg) !important;
    filter: brightness(1) !important;
  }
}

html body .jkhive-hex-select-item-hex,
body .jkhive-hex-select-item-hex,
.jkhive-hex-select-item-hex {
  width: 100% !important;
  height: 100% !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%) !important;
  opacity: 1 !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

html body .jkhive-hex-select-item-hex::after,
body .jkhive-hex-select-item-hex::after,
.jkhive-hex-select-item-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(60px - 4px) !important;
  height: calc((60px - 4px) * 1.1547) !important;
  background: #1e293b !important;
  opacity: 1 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

html body .jkhive-hex-select-item-content,
body .jkhive-hex-select-item-content,
.jkhive-hex-select-item-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 0.4rem !important;
  margin: 0 !important;
}

html body .jkhive-hex-select-item-text,
body .jkhive-hex-select-item-text,
.jkhive-hex-select-item-text {
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  padding: 0 0.25rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-item:hover .jkhive-hex-select-item-hex,
body .jkhive-hex-select.open .jkhive-hex-select-item:hover .jkhive-hex-select-item-hex,
.jkhive-hex-select.open .jkhive-hex-select-item:hover .jkhive-hex-select-item-hex {
  background: linear-gradient(135deg, #f4c430 0%, #d4a017 100%) !important;
  box-shadow: 0 6px 20px rgba(244, 196, 48, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-item:hover .jkhive-hex-select-item-text,
body .jkhive-hex-select.open .jkhive-hex-select-item:hover .jkhive-hex-select-item-text,
.jkhive-hex-select.open .jkhive-hex-select-item:hover .jkhive-hex-select-item-text {
  color: #f4c430 !important;
  text-shadow: 0 0 12px rgba(244, 196, 48, 0.8) !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-item .jkhive-hex-select-item-hex,
body .jkhive-hex-select.open .jkhive-hex-select-item .jkhive-hex-select-item-hex,
.jkhive-hex-select.open .jkhive-hex-select-item .jkhive-hex-select-item-hex {
  background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%) !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select.open .jkhive-hex-select-item .jkhive-hex-select-item-text,
body .jkhive-hex-select.open .jkhive-hex-select-item .jkhive-hex-select-item-text,
.jkhive-hex-select.open .jkhive-hex-select-item .jkhive-hex-select-item-text {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
  opacity: 1 !important;
}

/* VARIANTE PEQUEÑA (para select de tamaño) */
html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-hex,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-hex,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-hex {
  width: 45px !important;
  height: calc(45px * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-hex::after,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-hex::after,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-hex::after {
  width: calc(45px - 4px) !important;
  height: calc((45px - 4px) * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown {
  left: calc(45px + 2.5px) !important;
  height: calc(45px * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery,
html body .gallery-size-selector .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery,
html body .section-title-editor .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery,
body .gallery-size-selector .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery,
body .section-title-editor .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-gallery {
  height: calc(45px * 1.1547) !important;
  min-height: calc(45px * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
html body .gallery-size-selector .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
html body .section-title-editor .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .gallery-size-selector .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
body .section-title-editor .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-dropdown {
  min-height: calc(45px * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item {
  width: 45px !important;
  height: calc(45px * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item-hex::after,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item-hex::after,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item-hex::after {
  width: calc(45px - 4px) !important;
  height: calc((45px - 4px) * 1.1547) !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-text,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-text,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-text {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

html body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item-text,
body .jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item-text,
.jkhive-hex-select.jkhive-hex-select-small .jkhive-hex-select-item-text {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  html body .jkhive-hex-select-hex,
  body .jkhive-hex-select-hex,
  .jkhive-hex-select-hex {
    width: 50px !important;
    height: calc(50px * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-hex::after,
  body .jkhive-hex-select-hex::after,
  .jkhive-hex-select-hex::after {
    width: calc(50px - 4px) !important;
    height: calc((50px - 4px) * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-dropdown,
  body .jkhive-hex-select-dropdown,
  .jkhive-hex-select-dropdown {
    left: calc(50px + 2.5px) !important;
  }
  
  html body .jkhive-hex-select-item,
  body .jkhive-hex-select-item,
  .jkhive-hex-select-item {
    width: 50px !important;
    height: calc(50px * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-item-hex::after,
  body .jkhive-hex-select-item-hex::after,
  .jkhive-hex-select-item-hex::after {
    width: calc(50px - 4px) !important;
    height: calc((50px - 4px) * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-text,
  body .jkhive-hex-select-text,
  .jkhive-hex-select-text {
    font-size: 0.5rem !important;
  }
  
  html body .jkhive-hex-select-item-text,
  body .jkhive-hex-select-item-text,
  .jkhive-hex-select-item-text {
    font-size: 0.45rem !important;
  }
}

@media (max-width: 768px) {
  html body .jkhive-hex-select-hex,
  body .jkhive-hex-select-hex,
  .jkhive-hex-select-hex {
    width: 45px !important;
    height: calc(45px * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-hex::after,
  body .jkhive-hex-select-hex::after,
  .jkhive-hex-select-hex::after {
    width: calc(45px - 4px) !important;
    height: calc((45px - 4px) * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-dropdown,
  body .jkhive-hex-select-dropdown,
  .jkhive-hex-select-dropdown {
    left: calc(45px + 2.5px) !important;
    max-width: calc(100vw - 45px - 2.5px - 20px) !important;
  }
  
  html body .jkhive-hex-select.open .jkhive-hex-select-dropdown,
  body .jkhive-hex-select.open .jkhive-hex-select-dropdown,
  .jkhive-hex-select.open .jkhive-hex-select-dropdown {
    min-width: auto !important;
    width: auto !important;
  }
  
  html body .jkhive-hex-select-item,
  body .jkhive-hex-select-item,
  .jkhive-hex-select-item {
    width: 45px !important;
    height: calc(45px * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-item-hex::after,
  body .jkhive-hex-select-item-hex::after,
  .jkhive-hex-select-item-hex::after {
    width: calc(45px - 4px) !important;
    height: calc((45px - 4px) * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-text,
  body .jkhive-hex-select-text,
  .jkhive-hex-select-text {
    font-size: 0.45rem !important;
  }
  
  html body .jkhive-hex-select-item-text,
  body .jkhive-hex-select-item-text,
  .jkhive-hex-select-item-text {
    font-size: 0.4rem !important;
  }
}

@media (max-width: 576px) {
  html body .jkhive-hex-select-hex,
  body .jkhive-hex-select-hex,
  .jkhive-hex-select-hex {
    width: 40px !important;
    height: calc(40px * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-hex::after,
  body .jkhive-hex-select-hex::after,
  .jkhive-hex-select-hex::after {
    width: calc(40px - 4px) !important;
    height: calc((40px - 4px) * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-dropdown,
  body .jkhive-hex-select-dropdown,
  .jkhive-hex-select-dropdown {
    left: calc(40px + 2.5px) !important;
    max-width: calc(100vw - 40px - 2.5px - 20px) !important;
  }
  
  html body .jkhive-hex-select.open .jkhive-hex-select-dropdown,
  body .jkhive-hex-select.open .jkhive-hex-select-dropdown,
  .jkhive-hex-select.open .jkhive-hex-select-dropdown {
    min-width: auto !important;
    width: auto !important;
  }
  
  html body .jkhive-hex-select-item,
  body .jkhive-hex-select-item,
  .jkhive-hex-select-item {
    width: 40px !important;
    height: calc(40px * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-item-hex::after,
  body .jkhive-hex-select-item-hex::after,
  .jkhive-hex-select-item-hex::after {
    width: calc(40px - 4px) !important;
    height: calc((40px - 4px) * 1.1547) !important;
  }
  
  html body .jkhive-hex-select-text,
  body .jkhive-hex-select-text,
  .jkhive-hex-select-text {
    font-size: 0.4rem !important;
    padding: 0 0.2rem !important;
  }
  
  html body .jkhive-hex-select-item-text,
  body .jkhive-hex-select-item-text,
  .jkhive-hex-select-item-text {
    font-size: 0.35rem !important;
    padding: 0 0.15rem !important;
  }
}

/* ========================================
   SELECT HEXAGONAL NATIVO (estilo anterior - mantener para compatibilidad)
   ======================================== */

/* Select hexagonal - estilo aplicado directamente al select */
html body select.jkhive-hex-select,
body select.jkhive-hex-select,
select.jkhive-hex-select {
  width: 100% !important;
  max-width: 400px !important;
  padding: 0.5rem 2.5rem 0.5rem 1rem !important;
  background: linear-gradient(135deg, var(--jk-tech-dark, #1e293b) 0%, var(--jk-tech-medium, #334155) 50%, var(--jk-tech-dark, #1e293b) 100%) !important;
  border: none !important;
  color: var(--jk-white, #ffffff) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    inset 0 0 15px rgba(14, 165, 233, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative !important;
  overflow: visible !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23d4a017' d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px 16px !important;
}

html body select.jkhive-hex-select::before,
body select.jkhive-hex-select::before,
select.jkhive-hex-select::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  background: var(--jk-primary-blue, #0ea5e9) !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body select.jkhive-hex-select:hover:not(:disabled),
body select.jkhive-hex-select:hover:not(:disabled),
select.jkhive-hex-select:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--jk-tech-medium, #334155) 0%, var(--jk-primary-blue-dark, #0284c7) 50%, var(--jk-tech-medium, #334155) 100%) !important;
  box-shadow: 
    inset 0 0 20px rgba(14, 165, 233, 0.25),
    0 0 20px rgba(14, 165, 233, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

html body select.jkhive-hex-select:hover:not(:disabled)::before,
body select.jkhive-hex-select:hover:not(:disabled)::before,
select.jkhive-hex-select:hover:not(:disabled)::before {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6) !important;
}

html body select.jkhive-hex-select:focus:not(:disabled),
body select.jkhive-hex-select:focus:not(:disabled),
select.jkhive-hex-select:focus:not(:disabled) {
  outline: none !important;
  background: linear-gradient(135deg, var(--jk-primary-blue-dark, #0284c7) 0%, var(--jk-primary-blue, #0ea5e9) 50%, var(--jk-primary-blue-dark, #0284c7) 100%) !important;
  box-shadow: 
    inset 0 0 25px rgba(212, 160, 23, 0.2),
    0 0 25px rgba(212, 160, 23, 0.5),
    0 0 40px rgba(14, 165, 233, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

html body select.jkhive-hex-select:focus:not(:disabled)::before,
body select.jkhive-hex-select:focus:not(:disabled)::before,
select.jkhive-hex-select:focus:not(:disabled)::before {
  background: var(--jk-accent-honey, #d4a017) !important;
  box-shadow: 
    0 0 20px rgba(212, 160, 23, 0.8),
    0 0 40px rgba(212, 160, 23, 0.4) !important;
}

html body select.jkhive-hex-select:disabled,
body select.jkhive-hex-select:disabled,
select.jkhive-hex-select:disabled {
  background: var(--jk-tech-darker, #0f172a) !important;
  color: var(--jk-tech-light, #475569) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

html body select.jkhive-hex-select:disabled::before,
body select.jkhive-hex-select:disabled::before,
select.jkhive-hex-select:disabled::before {
  background: var(--jk-tech-light, #475569) !important;
  opacity: 0.5 !important;
}

/* Opciones del select hexagonal */
html body select.jkhive-hex-select option,
body select.jkhive-hex-select option,
select.jkhive-hex-select option {
  background: #1e293b !important;
  opacity: 1 !important;
  color: var(--jk-white, #ffffff) !important;
  padding: 0.5rem 1rem !important;
  margin: 0.15rem 0 !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
}

/* Wrapper del select hexagonal (para cuando se usa JavaScript) */
html body .jkhive-hex-select-wrapper,
body .jkhive-hex-select-wrapper,
.jkhive-hex-select-wrapper {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  z-index: 100 !important;
}

html body .jkhive-hex-select-wrapper.open,
body .jkhive-hex-select-wrapper.open,
.jkhive-hex-select-wrapper.open {
  z-index: 9999 !important;
}

/* Botón del select hexagonal */
html body .jkhive-hex-select-button,
body .jkhive-hex-select-button,
.jkhive-hex-select-button {
  width: 100% !important;
  min-width: 150px !important;
  padding: 0.875rem 3rem 0.875rem 1.25rem !important;
  background: linear-gradient(135deg, var(--jk-tech-dark, #1e293b) 0%, var(--jk-tech-medium, #334155) 50%, var(--jk-tech-dark, #1e293b) 100%) !important;
  border: none !important;
  color: var(--jk-white, #ffffff) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    inset 0 0 15px rgba(14, 165, 233, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
  border-radius: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23d4a017' d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 16px 16px !important;
  overflow: visible !important;
}

html body .jkhive-hex-select-button::before,
body .jkhive-hex-select-button::before,
.jkhive-hex-select-button::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  background: var(--jk-primary-blue, #0ea5e9) !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body .jkhive-hex-select-button:hover:not(:disabled),
body .jkhive-hex-select-button:hover:not(:disabled),
.jkhive-hex-select-button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--jk-tech-medium, #334155) 0%, var(--jk-primary-blue-dark, #0284c7) 50%, var(--jk-tech-medium, #334155) 100%) !important;
  box-shadow: 
    inset 0 0 20px rgba(14, 165, 233, 0.25),
    0 0 20px rgba(14, 165, 233, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

html body .jkhive-hex-select-button:hover:not(:disabled)::before,
body .jkhive-hex-select-button:hover:not(:disabled)::before,
.jkhive-hex-select-button:hover:not(:disabled)::before {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.6) !important;
}

html body .jkhive-hex-select-button.open,
body .jkhive-hex-select-button.open,
.jkhive-hex-select-button.open {
  background: linear-gradient(135deg, var(--jk-primary-blue-dark, #0284c7) 0%, var(--jk-primary-blue, #0ea5e9) 50%, var(--jk-primary-blue-dark, #0284c7) 100%) !important;
  box-shadow: 
    inset 0 0 25px rgba(212, 160, 23, 0.2),
    0 0 25px rgba(212, 160, 23, 0.5),
    0 0 40px rgba(14, 165, 233, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

html body .jkhive-hex-select-button.open::before,
body .jkhive-hex-select-button.open::before,
.jkhive-hex-select-button.open::before {
  background: var(--jk-accent-honey, #d4a017) !important;
  box-shadow: 
    0 0 20px rgba(212, 160, 23, 0.8),
    0 0 40px rgba(212, 160, 23, 0.4) !important;
}

html body .jkhive-hex-select-button:disabled,
body .jkhive-hex-select-button:disabled,
.jkhive-hex-select-button:disabled {
  background: var(--jk-tech-darker, #0f172a) !important;
  color: var(--jk-tech-light, #475569) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

html body .jkhive-hex-select-button:disabled::before,
body .jkhive-hex-select-button:disabled::before,
.jkhive-hex-select-button:disabled::before {
  background: var(--jk-tech-light, #475569) !important;
  opacity: 0.5 !important;
}

/* Dropdown del select hexagonal */
html body .jkhive-hex-select-dropdown,
body .jkhive-hex-select-dropdown,
.jkhive-hex-select-dropdown {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  min-width: 100% !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #1e293b !important;
  opacity: 1 !important;
  border: 2px solid var(--jk-primary-blue, #0ea5e9) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(14, 165, 233, 0.3) !important;
  z-index: 10000 !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
  clip-path: polygon(
    0% 3%,
    3% 0%,
    97% 0%,
    100% 3%,
    100% 97%,
    97% 100%,
    3% 100%,
    0% 97%
  ) !important;
  border-radius: 0 !important;
}

/* Scrollbars completamente ocultos - eliminados estilos duplicados que los mostraban */

/* Opciones del select hexagonal */
html body .jkhive-hex-select-option,
body .jkhive-hex-select-option,
.jkhive-hex-select-option {
  padding: 0.75rem 1rem !important;
  color: var(--jk-white, #ffffff) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  margin: 0.25rem 0.5rem !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
  border-radius: 0 !important;
  position: relative !important;
}

html body .jkhive-hex-select-option::before,
body .jkhive-hex-select-option::before,
.jkhive-hex-select-option::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
  clip-path: polygon(
    0% 25%,
    3% 0%,
    97% 0%,
    100% 25%,
    100% 75%,
    97% 100%,
    3% 100%,
    0% 75%
  ) !important;
  z-index: -1 !important;
  transition: all 0.2s ease !important;
}

html body .jkhive-hex-select-option:hover,
body .jkhive-hex-select-option:hover,
.jkhive-hex-select-option:hover {
  background: var(--jk-tech-medium, #334155) !important;
  color: #38bdf8 !important;
  opacity: 1 !important;
}

html body .jkhive-hex-select-option:hover::before,
body .jkhive-hex-select-option:hover::before,
.jkhive-hex-select-option:hover::before {
  background: var(--jk-primary-blue, #0ea5e9) !important;
  opacity: 0.3 !important;
}

html body .jkhive-hex-select-option.focused,
body .jkhive-hex-select-option.focused,
.jkhive-hex-select-option.focused {
  background: var(--jk-primary-blue-dark, #0284c7) !important;
  color: var(--jk-white, #ffffff) !important;
  box-shadow: 
    inset 0 0 15px rgba(14, 165, 233, 0.3),
    0 0 10px rgba(14, 165, 233, 0.4) !important;
}

html body .jkhive-hex-select-option.focused::before,
body .jkhive-hex-select-option.focused::before,
.jkhive-hex-select-option.focused::before {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  opacity: 0.4 !important;
}

/* ========================================
   BOTONES SECUNDARIOS - ESTILO Y ANIMACIÓN
   (btn-marcar, btn-icon: mismo tema y hover)
   ======================================== */
.btn-marcar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--jk-metal-light);
  background: linear-gradient(135deg, var(--jk-primary-blue-dark) 0%, var(--jk-primary-blue) 100%);
  border: 1px solid var(--jk-primary-blue-light);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.25);
}
.btn-marcar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 18px rgba(14, 165, 233, 0.4);
  filter: brightness(1.1);
}
.btn-marcar:active {
  transform: scale(0.98);
}

/* Botones de icono en tablas (editar, eliminar) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1rem;
  color: var(--jk-primary-blue-light);
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid var(--jk-primary-blue);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn-icon:hover {
  transform: scale(1.1);
  background: rgba(14, 165, 233, 0.3);
  color: var(--jk-accent-honey);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}
.btn-icon.delete {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
}
.btn-icon.delete:hover {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* ========================================
   jkhive-badge — Badge hexagonal tech (replicable en plantilla jkhive)
   Mismo estilo visual que toasts: hex horizontal 6%/94%, compactado verticalmente.
   Tres variantes de color: rojo (stock 0), verde (stock ≥1), azul (uso futuro).
   Ver docs/BADGE-JKHIVE.md y GALERIA-PRODUCTOS.md.
   ======================================== */
.jkhive-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  clip-path: var(--jkhive-hex-horizontal, polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%));
  border: none;
  pointer-events: none;
  z-index: 15;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.jkhive-badge::after {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: var(--jkhive-hex-horizontal, polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%));
  background: var(--jk-tech-darker, #0f172a);
  z-index: 0;
}
.jkhive-badge .jkhive-badge-text {
  position: relative;
  z-index: 1;
}
/* Rojo: stock 0 / error */
.jkhive-badge.jkhive-badge-red {
  background: var(--jkhive-error-red, #ff0000);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
  color: var(--jkhive-error-red, #ff0000);
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
}
/* Verde: stock ≥1 / éxito */
.jkhive-badge.jkhive-badge-green {
  background: var(--jkhive-success-green, #00ff00);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  color: var(--jkhive-success-green, #00ff00);
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
}
/* Azul: uso futuro (info) */
.jkhive-badge.jkhive-badge-blue {
  background: var(--jkhive-info-blue, #0000ff);
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
  color: var(--jkhive-info-blue, #0000ff);
  text-shadow: 0 0 8px rgba(0, 0, 255, 0.8);
}

/* ========================================
   BOTONES DE OPCIONES ADMIN (barra tipo CRM Libros/Demi)
   jkhive-admoptions-bttn — hexágonos con icono para admin/productos.php.
   Variantes: -envase, -vehiculo, -familia, -new. Rutas y uso: docs/ADMIN-PRODUCTOS-MANTENEDORES.md.
   ======================================== */
html body .jkhive-admoptions-bttn,
body .jkhive-admoptions-bttn {
  position: relative !important;
  margin: 0 !important;
  display: inline-block !important;
  width: 52.136px !important;
  height: calc(52.136px * 1.1547) !important;
  overflow: visible !important;
}

html body .jkhive-admoptions-bttn > a,
html body .jkhive-admoptions-bttn > button,
body .jkhive-admoptions-bttn > a,
body .jkhive-admoptions-bttn > button {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html body .jkhive-admoptions-bttn .jkhive-hex,
body .jkhive-admoptions-bttn .jkhive-hex {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background: var(--jk-accent-honey-light, #f4c430) !important;
  margin: 0 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px rgba(244,196,48,0.6) !important;
  border: none !important;
}

html body .jkhive-admoptions-bttn .jkhive-hex-icon,
body .jkhive-admoptions-bttn .jkhive-hex-icon {
  font-size: 1.275rem !important;
  color: var(--jk-accent-honey-light, #f4c430) !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

html body .jkhive-admoptions-bttn .jkhive-hex-content,
body .jkhive-admoptions-bttn .jkhive-hex-content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

html body .jkhive-admoptions-bttn .jkhive-hex::after,
body .jkhive-admoptions-bttn .jkhive-hex::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--jkhive-bttn-hex-inner-bg, #0a0e27) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  z-index: 1 !important;
}

/* Hover: Nuevo producto — cyan */
html body .jkhive-admoptions-bttn.jkhive-admoptions-new:hover .jkhive-hex,
body .jkhive-admoptions-bttn.jkhive-admoptions-new:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 30px rgba(6,182,212,0.8) !important;
}
html body .jkhive-admoptions-bttn.jkhive-admoptions-new:hover .jkhive-hex-icon,
body .jkhive-admoptions-bttn.jkhive-admoptions-new:hover .jkhive-hex-icon { color: var(--jk-accent-cyan, #06b6d4) !important; }

/* Hover: Familia de producto — verde */
html body .jkhive-admoptions-bttn.jkhive-admoptions-familia:hover .jkhive-hex,
body .jkhive-admoptions-bttn.jkhive-admoptions-familia:hover .jkhive-hex {
  background: var(--jk-secondary-green, #14b8a6) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 30px rgba(20,184,166,0.8) !important;
}
html body .jkhive-admoptions-bttn.jkhive-admoptions-familia:hover .jkhive-hex-icon,
body .jkhive-admoptions-bttn.jkhive-admoptions-familia:hover .jkhive-hex-icon { color: var(--jk-secondary-green, #14b8a6) !important; }

/* Hover: Tipos vehículo — teal */
html body .jkhive-admoptions-bttn.jkhive-admoptions-vehiculo:hover .jkhive-hex,
body .jkhive-admoptions-bttn.jkhive-admoptions-vehiculo:hover .jkhive-hex {
  background: var(--jk-primary-blue-light, #38bdf8) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 30px rgba(56,189,248,0.8) !important;
}
html body .jkhive-admoptions-bttn.jkhive-admoptions-vehiculo:hover .jkhive-hex-icon,
body .jkhive-admoptions-bttn.jkhive-admoptions-vehiculo:hover .jkhive-hex-icon { color: var(--jk-primary-blue-light, #38bdf8) !important; }

/* Hover: Tipos envase — honey */
html body .jkhive-admoptions-bttn.jkhive-admoptions-envase:hover .jkhive-hex,
body .jkhive-admoptions-bttn.jkhive-admoptions-envase:hover .jkhive-hex {
  background: var(--jk-accent-honey, #d4a017) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 30px rgba(212,160,23,0.8) !important;
}
html body .jkhive-admoptions-bttn.jkhive-admoptions-envase:hover .jkhive-hex-icon,
body .jkhive-admoptions-bttn.jkhive-admoptions-envase:hover .jkhive-hex-icon { color: var(--jk-accent-honey, #d4a017) !important; }

/* Badge “+” para abrir formulario dentro del modal mantenedor */
.jkhive-mantenedor-add-badge {
  position: absolute !important;
  top: 0.5rem !important;
  right: 1rem !important;
  z-index: 5 !important;
  cursor: pointer !important;
}
.jkhive-mantenedor-add-badge .jkhive-hex-badge {
  width: 36px !important;
  height: calc(36px * 1.1547) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  background: var(--jk-accent-cyan, #06b6d4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--jk-tech-dark) !important;
  font-size: 1.1rem !important;
}
.jkhive-mantenedor-add-badge .jkhive-hex-badge:hover { background: var(--jk-primary-blue-light, #38bdf8) !important; color: #fff !important; }

/* ========================================
   TOGGLE HEX (desplegable honeycomb)
   Componente replicable. Sin animaciones.
   El ícono + borde hex son un mismo elemento,
   un mismo color por defecto.
   ======================================== */

/* Contenedor de uno o más grupos toggle (fila de toggles) */
html body .jkhive-toggle-hex-wrap,
body .jkhive-toggle-hex-wrap,
.jkhive-toggle-hex-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2rem !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

/* Grupo: botón trigger + panel desplegable (1 hex arriba, 2 abajo en honeycomb) */
html body .jkhive-toggle-hex-group,
body .jkhive-toggle-hex-group,
.jkhive-toggle-hex-group {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  --jkhive-toggle-panel-overlap: 11px;
  --jkhive-toggle-panel-row-gap: 5px;
  --jkhive-toggle-panel-row-nudge: 0.5px;
}

html body .jkhive-toggle-hex-group .jkhive-bttn-med,
body .jkhive-toggle-hex-group .jkhive-bttn-med,
.jkhive-toggle-hex-group .jkhive-bttn-med { margin: 0 !important; }

html body .jkhive-toggle-hex-group form,
body .jkhive-toggle-hex-group form,
.jkhive-toggle-hex-group form {
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html body .jkhive-toggle-hex-group button.jkhive-toggle-hex-trigger,
html body .jkhive-toggle-hex-group button,
body .jkhive-toggle-hex-group button.jkhive-toggle-hex-trigger,
body .jkhive-toggle-hex-group button,
.jkhive-toggle-hex-group button.jkhive-toggle-hex-trigger,
.jkhive-toggle-hex-group button {
  display: inline-block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font: inherit !important;
  color: inherit !important;
}

html body .jkhive-toggle-hex-group button .jkhive-hex,
body .jkhive-toggle-hex-group button .jkhive-hex,
.jkhive-toggle-hex-group button .jkhive-hex {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Panel desplegable: oculto por defecto; visible cuando el grupo tiene .is-open */
html body .jkhive-toggle-hex-panel,
body .jkhive-toggle-hex-panel,
.jkhive-toggle-hex-panel {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-top: calc(-1 * var(--jkhive-toggle-panel-overlap, 11px)) !important;
  position: relative !important;
  z-index: 5 !important;
}

html body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-panel,
body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-panel,
.jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-panel {
  display: flex !important;
}

/* Estado iluminado del trigger cuando el panel está abierto (un solo color por defecto) */
html body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex,
body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex,
.jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
}

html body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex-icon,
html body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex-content,
body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex-icon,
body .jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex-content,
.jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex-icon,
.jkhive-toggle-hex-group.is-open .jkhive-toggle-hex-trigger .jkhive-hex-content {
  color: var(--jk-accent-cyan, #06b6d4) !important;
}

/* Fila de opciones (2 hex en honeycomb) */
html body .jkhive-toggle-hex-panel-row,
body .jkhive-toggle-hex-panel-row,
.jkhive-toggle-hex-panel-row {
  display: flex !important;
  gap: var(--jkhive-toggle-panel-row-gap, 5px) !important;
  transform: translateX(var(--jkhive-toggle-panel-row-nudge, 0.5px)) !important;
  justify-content: center !important;
}

/* Variante overlay: el panel aparece debajo del trigger sin deformar la fila exterior. */
html body .jkhive-toggle-hex-group.jkhive-toggle-hex-group-overlay .jkhive-toggle-hex-panel,
body .jkhive-toggle-hex-group.jkhive-toggle-hex-group-overlay .jkhive-toggle-hex-panel,
.jkhive-toggle-hex-group.jkhive-toggle-hex-group-overlay .jkhive-toggle-hex-panel {
  display: flex !important;
  position: absolute !important;
  top: calc(100% - var(--jkhive-toggle-panel-overlap, 11px)) !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  margin-top: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -4px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

html body .jkhive-toggle-hex-group.jkhive-toggle-hex-group-overlay.is-open .jkhive-toggle-hex-panel,
body .jkhive-toggle-hex-group.jkhive-toggle-hex-group-overlay.is-open .jkhive-toggle-hex-panel,
.jkhive-toggle-hex-group.jkhive-toggle-hex-group-overlay.is-open .jkhive-toggle-hex-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

html body .jkhive-toggle-hex-panel-row .jkhive-bttn-med,
body .jkhive-toggle-hex-panel-row .jkhive-bttn-med,
.jkhive-toggle-hex-panel-row .jkhive-bttn-med { margin: 0 !important; }

/* Enlace hex dentro del panel (mismo tamaño que el botón) */
html body .jkhive-toggle-hex-panel .jkhive-hex-link,
body .jkhive-toggle-hex-panel .jkhive-hex-link,
.jkhive-toggle-hex-panel .jkhive-hex-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

html body .jkhive-toggle-hex-panel .jkhive-hex-link .jkhive-hex,
body .jkhive-toggle-hex-panel .jkhive-hex-link .jkhive-hex,
.jkhive-toggle-hex-panel .jkhive-hex-link .jkhive-hex {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Hover opciones del panel: mismo color por defecto (ícono + borde = mismo elemento) */
html body .jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex,
body .jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex,
.jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex {
  background: var(--jk-accent-cyan, #06b6d4) !important;
  transform: scale(1.05) !important;
  box-shadow: var(--jk-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.3)), 0 0 30px rgba(6, 182, 212, 0.8) !important;
}

html body .jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex-icon,
html body .jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex-content,
body .jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex-icon,
body .jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex-content,
.jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex-icon,
.jkhive-toggle-hex-panel .jkhive-bttn-med:hover .jkhive-hex-content {
  color: var(--jk-accent-cyan, #06b6d4) !important;
}

/* Responsive: tamaños ya optimizados para mobile */
@media (max-width: 480px) {
  html body .jkhive-toggle-hex-wrap,
  body .jkhive-toggle-hex-wrap,
  .jkhive-toggle-hex-wrap {
    gap: 1rem !important;
  }
  html body .jkhive-toggle-hex-group,
  body .jkhive-toggle-hex-group,
  .jkhive-toggle-hex-group {
    --jkhive-toggle-panel-overlap: 10.5px;
  }
  html body .jkhive-toggle-hex-panel,
  body .jkhive-toggle-hex-panel,
  .jkhive-toggle-hex-panel {
    margin-top: calc(-1 * var(--jkhive-toggle-panel-overlap, 10.5px)) !important;
  }
}

/* ========================================
   Chips de habilidad (modales experiencia, reutilizable en admin)
   ======================================== */
.jkhive-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
}

.jkhive-skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jk-metal-light);
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid var(--jk-primary-blue-light, #38bdf8);
  border-radius: 4px;
  line-height: 1.2;
}

.jkhive-modal-description--html p {
  margin: 0 0 0.75rem;
}

.jkhive-modal-description--html p:last-child {
  margin-bottom: 0;
}