/* =============================================================================
   SIT Captcha de colores — componente compartido
   =============================================================================
   Uso: {% include 'includes/_captcha.html' with captcha_refresh_url=... %}
   Requiere: Bootstrap Icons (ya en todos los base.html).
   ============================================================================= */

.sit-captcha {
    --sc-size: 52px;
    --sc-gap: 14px;
    text-align: center;
    margin: 0.75rem 0;
}

/* --- Label + mini chip del color objetivo --- */
.sit-captcha__label {
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
    color: #555;
    display: block;
    text-align: center;
    line-height: 1.5;
}

/* Fuerza que el strong + chip caigan a la segunda linea siempre, centrados */
.sit-captcha__label > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
}

.sit-captcha__target {
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sit-captcha__target-chip {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--target-hex, #ccc);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.10);
    vertical-align: middle;
    transition: background 0.2s, box-shadow 0.2s;
}

/* --- Contenedor de círculos --- */
.sit-captcha__circles {
    display: flex;
    justify-content: center;
    gap: var(--sc-gap);
    margin: 0.5rem 0;
}

/* --- Círculo estilo Material Design (plano + elevación) --- */
.sit-captcha__circle {
    position: relative;
    width: var(--sc-size);
    height: var(--sc-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: var(--circle-color);
    /* MD elevation-2 */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 3px 6px rgba(0, 0, 0, 0.10);
    transition:
        transform 0.2s cubic-bezier(.4,0,.2,1),
        box-shadow 0.2s cubic-bezier(.4,0,.2,1);
    outline: none;
}

.sit-captcha__circle:hover {
    transform: translateY(-2px);
    /* MD elevation-6 */
    box-shadow:
        0 6px 10px rgba(0, 0, 0, 0.22),
        0 10px 20px rgba(0, 0, 0, 0.14);
}

.sit-captcha__circle:active {
    transform: translateY(0);
    /* MD elevation-1 */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.12);
}

.sit-captcha__circle:focus-visible {
    box-shadow:
        0 0 0 3px #2196F3,
        0 3px 6px rgba(0, 0, 0, 0.18);
}

/* --- Check del selected --- */
.sit-captcha__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.18s, transform 0.25s cubic-bezier(.17,.67,.26,1.27);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.sit-captcha__circle.is-selected .sit-captcha__check {
    opacity: 1;
    transform: scale(1);
}

.sit-captcha__circle.is-selected {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 5px var(--circle-color),
        0 4px 10px rgba(0, 0, 0, 0.22),
        0 8px 16px rgba(0, 0, 0, 0.14);
}

/* --- Botón refresh --- */
.sit-captcha__refresh {
    margin-top: 0.5rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #1976D2;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sit-captcha__refresh:hover {
    background: rgba(33, 150, 243, 0.09);
    border-color: rgba(33, 150, 243, 0.3);
}

.sit-captcha__refresh:active {
    background: rgba(33, 150, 243, 0.16);
}

.sit-captcha__refresh i {
    transition: transform 0.5s cubic-bezier(.17,.67,.26,1.27);
    font-size: 1rem;
}

.sit-captcha__refresh.is-spinning i {
    transform: rotate(360deg);
}

/* --- Dark mode --- */
[data-theme="dark"] .sit-captcha__label,
[data-bs-theme="dark"] .sit-captcha__label {
    color: #B0BEC5;
}

[data-theme="dark"] .sit-captcha__refresh,
[data-bs-theme="dark"] .sit-captcha__refresh {
    color: #64B5F6;
}

/* --- Error card reutilizable (icono X grande + texto) ---
   Aplica a:
   - .sit-captcha__error-card   (errores inline del captcha)
   - .sit-login-error            (errores generales del form de login)
*/
.sit-captcha__error-card,
.sit-login-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #FEECEC;
    border: 1px solid #F5C6C6;
    color: #8A1F1F;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
    text-align: left;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.1);
}

.sit-captcha__error-icon,
.sit-login-error__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #DC3545;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.4);
}

.sit-captcha__error-text,
.sit-login-error__text {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Shake en la entrada, para que el login-error tambien "entre con gesto" */
.sit-login-error {
    animation: sit-captcha-shake 0.42s cubic-bezier(.36,.07,.19,.97) both;
}

[data-theme="dark"] .sit-captcha__error-card,
[data-bs-theme="dark"] .sit-captcha__error-card,
[data-theme="dark"] .sit-login-error,
[data-bs-theme="dark"] .sit-login-error {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #F8D7DA;
}

/* --- Estado de error: shake + pulso rojo en los circulos --- */
.sit-captcha.has-error .sit-captcha__circles {
    animation: sit-captcha-shake 0.42s cubic-bezier(.36,.07,.19,.97) both;
}

.sit-captcha.has-error .sit-captcha__circle {
    animation: sit-captcha-pulse-error 0.9s ease-in-out 2;
}

@keyframes sit-captcha-shake {
    10%, 90%  { transform: translateX(-2px); }
    20%, 80%  { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60%  { transform: translateX(7px); }
}

@keyframes sit-captcha-pulse-error {
    0%, 100% {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.18),
            0 3px 6px rgba(0, 0, 0, 0.10);
    }
    50% {
        box-shadow:
            0 0 0 3px #DC3545,
            0 0 0 6px rgba(220, 53, 69, 0.25),
            0 2px 4px rgba(0, 0, 0, 0.18);
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .sit-captcha__circle,
    .sit-captcha__check,
    .sit-captcha__target-chip,
    .sit-captcha__refresh i {
        transition: none;
    }
    .sit-captcha__refresh.is-spinning i {
        transform: none;
    }
    .sit-captcha.has-error .sit-captcha__circles,
    .sit-captcha.has-error .sit-captcha__circle,
    .sit-login-error {
        animation: none;
    }
}