:root{
    --bar-bg:#0f1620;
    --slot-on:#00a8fc;
    --slot-off:#1e2a36;
    --text:#eaf6ff;

    /* Variables fluidas */
    --panel-radius: 16px;
    --panel-padding-x: clamp(12px, 2.5vw, 20px);
    --panel-padding-y: clamp(12px, 2.2vw, 18px);

    --bar-padding: clamp(8px, 1.4vw, 12px);
    --bar-radius: 12px;
    --gap: clamp(4px, 0.9vw, 6px);

    --slot-h: clamp(12px, 1.4vw, 18px);
    --slot-radius: clamp(4px, 0.8vw, 6px);

    /* El JS puede leer/usar estos mínimos */
    --slot-min-px: 12; /* mínimo ancho deseable por slot en px (JS) */
}

/* Panel exterior con glow */
.reg-panel{
    display:block;
    box-sizing:border-box;
    width:min(980px, 100%);
    margin:0 auto clamp(12px, 2vw, 24px);
    padding:var(--panel-padding-y) var(--panel-padding-x);
    border-radius:var(--panel-radius);
    background:rgba(0,168,252,0.08);
    box-shadow:0 0 25px rgba(0,168,252,0.30), inset 0 0 0 1px rgba(0,168,252,0.35);
    text-align:center;
}

.reg-title{
    font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size:clamp(16px, 1.8vw, 18px);
    font-weight:600;
    color:var(--text);
    margin:0 0 clamp(8px, 1.2vw, 12px) 0;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

/* Barra */
.reg-bar{
    position:relative;
    background:var(--bar-bg);
    border-radius:var(--bar-radius);
    padding:var(--bar-padding);
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;   /* columnas iguales */
    gap:var(--gap);
    box-shadow:0 0 0 1px rgba(0,168,252,0.18), 0 6px 14px rgba(8,40,54,0.55);
    overflow:hidden;
    margin:0 auto;
}

/* Brillo */
.reg-bar::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%);
    pointer-events:none;
}

.slot{
    height:var(--slot-h);
    border-radius:var(--slot-radius);
    background:var(--slot-off);
    transition:background-color .4s ease, opacity .4s ease;
}

.slot.filled{
    background:linear-gradient(180deg, var(--slot-on), #37baff);
    box-shadow:0 0 8px rgba(0,168,252,0.45), inset 0 -1px 0 rgba(255,255,255,0.25);
}

.slot.flash{
    background:var(--slot-on);
    animation:fadeflash 1.8s infinite ease-in-out;
    box-shadow:0 0 14px rgba(0,168,252,0.75), 0 0 26px rgba(0,168,252,0.35);
}

@keyframes fadeflash{
    0%,100%{
        opacity:.25;
    }
    50%{
        opacity:1;
    }
}

/* Respeta preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce){
    .slot.flash{
        animation:none;
        opacity:.7;
    }
    .slot{
        transition:none;
    }
}
.slot.flash {
    animation: flashBlink 1.2s infinite ease-in-out;
}

@keyframes flashBlink {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}