/* ======================================================================
   Honeycomb Loader — adapted from Uiverse.io by Nawsome
   Usage: wrap <div class="socket">...hexagonal grid...</div> or use
   the helper function showHoneycombLoader() / HTML template below.
   ====================================================================== */

:root {
    --hc-color: var(--accent-primary, #04392C); /* forest en claro */
    --hc-size: 18px;     /* unified size across the app */
}

/* Se redeclara en body: el valor de :root ya quedo resuelto en forest */
body.dark-mode {
    --hc-color: var(--accent-primary, #9DD28B);
}

.hc-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 20px;
    min-height: 200px;
}

.hc-label {
    font-size: 13px;
    color: var(--text-secondary, #3D5248);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.hc-sublabel {
    font-size: 12px;
    color: var(--text-tertiary, #5E6B62);
    margin-top: -10px;
    letter-spacing: 0.2px;
}

/* Socket: container of all hexagons — sized so the grid always fits */
.socket {
    width: calc(var(--hc-size) * 7);
    height: calc(var(--hc-size) * 6);
    position: relative;
}

.hex-brick {
    background: var(--hc-color);
    width: var(--hc-size);
    height: calc(var(--hc-size) * 0.575);
    position: absolute;
    top: calc(var(--hc-size) * 0.28);
    opacity: 1;
    will-change: opacity;
}

.h2 { transform: rotate(60deg); }
.h3 { transform: rotate(-60deg); }

.gel {
    height: var(--hc-size);
    width: calc(var(--hc-size) * 1.15);
    transition: all var(--dur, 200ms) var(--ease, ease-out);
    position: absolute;
    top: 50%;
    left: 50%;
}

.center-gel {
    margin-left: calc(var(--hc-size) * -0.575);
    margin-top: calc(var(--hc-size) * -0.5);
}

.c1  { margin-left: calc(var(--hc-size) * -1.725); margin-top: calc(var(--hc-size) * -0.5); }
.c2  { margin-left: calc(var(--hc-size) * -1.15);  margin-top: calc(var(--hc-size) * -1.5); }
.c3  { margin-left: calc(var(--hc-size) * 0);      margin-top: calc(var(--hc-size) * -1.5); }
.c4  { margin-left: calc(var(--hc-size) * 0.575);  margin-top: calc(var(--hc-size) * -0.5); }
.c5  { margin-left: calc(var(--hc-size) * 0);      margin-top: calc(var(--hc-size) * 0.5);  }
.c6  { margin-left: calc(var(--hc-size) * -1.15);  margin-top: calc(var(--hc-size) * 0.5);  }

.c7  { margin-left: calc(var(--hc-size) * -2.875); margin-top: calc(var(--hc-size) * -0.5); }
.c8  { margin-left: calc(var(--hc-size) * -2.3);   margin-top: calc(var(--hc-size) * -1.5); }
.c9  { margin-left: calc(var(--hc-size) * -1.725); margin-top: calc(var(--hc-size) * -2.5); }
.c10 { margin-left: calc(var(--hc-size) * -0.575); margin-top: calc(var(--hc-size) * -2.5); }
.c11 { margin-left: calc(var(--hc-size) * 0.575);  margin-top: calc(var(--hc-size) * -2.5); }
.c12 { margin-left: calc(var(--hc-size) * 1.15);   margin-top: calc(var(--hc-size) * -1.5); }
.c13 { margin-left: calc(var(--hc-size) * 1.725);  margin-top: calc(var(--hc-size) * -0.5); }
.c14 { margin-left: calc(var(--hc-size) * 1.15);   margin-top: calc(var(--hc-size) * 0.5);  }
.c15 { margin-left: calc(var(--hc-size) * 0.575);  margin-top: calc(var(--hc-size) * 1.5);  }
.c16 { margin-left: calc(var(--hc-size) * -0.575); margin-top: calc(var(--hc-size) * 1.5);  }
.c17 { margin-left: calc(var(--hc-size) * -1.725); margin-top: calc(var(--hc-size) * 1.5);  }
.c18 { margin-left: calc(var(--hc-size) * -2.3);   margin-top: calc(var(--hc-size) * 0.5);  }

.gel {
    animation: hcPulse 1.4s ease-in-out infinite;
    transform: scale(1);
}
.gel.center-gel { animation-delay: 0s; }
.r1 { animation-delay: 0.15s; }
.r2 { animation-delay: 0.30s; }
.r3 { animation-delay: 0.45s; }

@keyframes hcPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.55); opacity: 0.35; }
}

/* Compact variant for inline loaders — same size, tighter padding */
.hc-compact {
    --hc-size: 18px;
    min-height: 120px;
    padding: 16px 12px;
}

/* Overlay variant — full screen/modal */
.hc-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-primary, #FEFDFB) 90%, transparent);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}