/* css/patternlock.css */

/* Contenedor principal */
.patt-holder {
    background: #2b3e50;
    touch-action: none; /* Vital para móviles */
    -ms-touch-action: none;
    position: relative;
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden; /* Que nada se salga */
}

.patt-wrap {
    position: relative;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.patt-wrap ul, .patt-wrap li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Círculos */
.patt-circ {
    position: relative;
    float: left;
    box-sizing: border-box;
    z-index: 10; /* Los puntos SIEMPRE encima de las líneas */
}

/* Puntos centrales blancos */
.patt-dots {
    background: #FFF;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    transition: all 0.2s;
}

/* Efecto Hover (cuando pasas por encima) */
.patt-circ.hovered .patt-dots {
    background: #00d2ff;
    box-shadow: 0 0 10px #00d2ff;
    transform: scale(1.3);
}

.patt-circ.hovered {
    border: 2px solid rgba(0, 210, 255, 0.4);
}

/* --- LÍNEAS CONECTORAS --- */
.patt-lines {
    border-radius: 5px;
    height: 5px; /* Grosor */
    background: #00d2ff;
    position: absolute;
    transform-origin: 0 50%; /* IMPORTANTE: Gira desde la punta izquierda (centro del punto origen) */
    z-index: 1; /* Debajo de los puntos */
    box-shadow: 0 0 10px #00d2ff;
    pointer-events: none; /* CRUCIAL: La línea no bloquea el mouse */
}