/* ------------------------------------------------------------------
   Pie de página (secured/footer.xhtml)
   Paleta y tipografía alineadas con frontend-reclutador.
   ------------------------------------------------------------------ */

.app-footer {
    --af-bg: #1c1c1e;
    --af-pill: #2c2c2e;
    --af-text: #e5e7eb;
    --af-muted: #a1a1aa;
    --af-primary: #f2a325;
    --af-green: #22c55e;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    flex-shrink: 0;
    min-height: 52px;
    margin: 0;
    padding: 6px 24px;
    box-sizing: border-box;
    border-radius: 0;
    background: var(--af-bg);
    color: var(--af-text);
    font-family: "Poppins", "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 12px;
    box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, .45);
}

.app-footer * {
    font-family: inherit;
}

/* Marca ARC */
.app-footer__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}

.app-footer__arc-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--af-primary);
}

.app-footer__arc-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #ffffff;
}

.app-footer__tagline {
    margin-left: 6px;
    color: var(--af-text);
    white-space: nowrap;
}

/* Píldora de la aplicación */
.app-footer__app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 34px;
    padding: 0 16px;
    border-radius: 9999px;
    background: #ffffff;
    color: #1e293b;
}

.app-footer__app-name {
    font-size: 12px;
    font-weight: 700;
}

.app-footer__by {
    margin: 0 2px;
    font-size: 11px;
    font-style: italic;
    color: #64748b;
}

.app-footer__app-logo {
    display: block;
    height: 20px;
    width: auto;
}

/* Versión y créditos */
.app-footer__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 auto;
}

.app-footer__version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 9999px;
    background: var(--af-pill);
    font-weight: 600;
    white-space: nowrap;
}

.app-footer__version strong {
    font-weight: 600;
    color: var(--af-muted);
}

.app-footer__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--af-green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

.app-footer__credits {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--af-text);
    white-space: nowrap;
}

.app-footer__heart {
    width: 14px;
    height: 14px;
    color: var(--af-primary);
}

.app-footer__team {
    font-weight: 600;
    color: var(--af-primary);
}

/* Responsive */
@media (max-width: 760px) {
    .app-footer__tagline,
    .app-footer__credits {
        display: none;
    }
}

@media (max-width: 600px) {
    .app-footer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .app-footer__brand,
    .app-footer__meta {
        flex: 0 0 auto;
    }
}

/* El iframe de contenido descuenta el encabezado (64px) y el pie (52px) */
.all-content .divApps {
    min-height: calc(100vh - 116px);
}

/* ------------------------------------------------------------------
   Integración con Empleos Activos y animaciones de la barra
   ------------------------------------------------------------------ */
.app-footer__app-divider {
    width: 1px;
    height: 20px;
    margin: 0 6px 0 4px;
    background: #e2e8f0;
}

.app-footer__integrado {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.app-footer__partner-logo {
    display: block;
    height: 26px;
    width: auto;
}

/* Brillo que recorre toda la barra */
.app-footer {
    overflow: hidden;
    isolation: isolate;
}

.app-footer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    z-index: -1;
    width: 40%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(242, 163, 37, .14) 30%,
            rgba(242, 163, 37, .32) 50%,
            rgba(242, 163, 37, .14) 70%,
            transparent 100%);
    pointer-events: none;
    animation: footer-brillo 7s ease-in-out infinite;
}

/* La palabra ARC se "pinta" de amarillo con un brillo que la recorre */
.app-footer__arc-name {
    background: linear-gradient(100deg,
            #ffffff 0%, #ffffff 40%,
            #f2a325 50%,
            #ffffff 60%, #ffffff 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: footer-pintar 7s ease-in-out infinite;
}

@keyframes footer-brillo {
    0%, 15% {
        left: -40%;
    }
    65%, 100% {
        left: 110%;
    }
}

@keyframes footer-girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes footer-pintar {
    0%, 10% {
        background-position: 100% 0;
    }
    35%, 100% {
        background-position: 0 0;
    }
}

@media (max-width: 960px) {
    .app-footer__integrado,
    .app-footer__partner-logo,
    .app-footer__app-divider {
        display: none;
    }
}

/* Ícono ARC: anillo base oscuro + arco naranja que se dibuja y se recoge
   mientras gira (circunferencia r=12 → 75.4) */
.app-footer__arc-icon {
    overflow: visible;
}

.app-footer__arc-track {
    fill: none;
    stroke: #3f3f46;
    stroke-width: 4;
}

.app-footer__arc-progress {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 75.4;
    stroke-dashoffset: 60;
    transform-box: view-box;
    transform-origin: 16px 16px;
    animation: footer-arco 2.8s ease-in-out infinite,
               footer-girar 2.8s linear infinite;
}

.app-footer__arc-dot {
    fill: currentColor;
}

@keyframes footer-arco {
    0% {
        stroke-dashoffset: 66;
    }
    50% {
        stroke-dashoffset: 8;
    }
    100% {
        stroke-dashoffset: 66;
    }
}

/* Separador fino entre "Vinculación" y el logo de activos */
.app-footer__by {
    width: 1px;
    height: 12px;
    margin: 0 2px;
    background: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
    .app-footer::after,
    .app-footer__arc-progress,
    .app-footer__arc-name {
        animation: none;
    }

    .app-footer__arc-progress {
        stroke-dashoffset: 14;
    }
}