/* ============================================================
   Adm Cloud — Recursos Humanos (página informativa)
   Complementa site.css reutilizando su paleta y tipografía.
   Solo agrega los componentes propios de esta página huérfana.
   ============================================================ */

/* Etiqueta de marca en el header */
.brand-tag-rrhh {
    color: var(--deep);
    background: linear-gradient(120deg, var(--cyan), var(--sky));
    color: #fff;
}

/* ---------- Hero: tarjeta de expediente del empleado ---------- */
.hr-panel {
    background: rgba(16, 20, 58, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(37, 170, 225, .08), 0 0 60px rgba(37, 170, 225, .12);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transform: rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}
.hr-panel:hover { transform: rotateY(0) rotateX(0); }

.hr-panel-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1rem;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hr-panel-title {
    margin-left: .6rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
}

.hr-panel-body { padding: 1.3rem 1.4rem; }

.hr-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.hr-avatar {
    flex-shrink: 0;
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    box-shadow: 0 6px 20px rgba(40, 54, 141, .45);
}

.hr-profile-info { min-width: 0; }
.hr-profile-info .hr-name { font-size: 1.02rem; font-weight: 700; color: #fff; }
.hr-profile-info .hr-role { font-size: .8rem; color: var(--cyan); }
.hr-profile-info .hr-dept { font-size: .74rem; color: rgba(255, 255, 255, .5); }

.hr-ring {
    margin-left: auto;
    flex-shrink: 0;
    width: 62px; height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, rgba(16,20,58,.95) 74%, transparent 76% 100%),
        conic-gradient(var(--cyan) 92%, rgba(255,255,255,.12) 0);
    position: relative;
}
.hr-ring span { font-size: .95rem; font-weight: 800; color: #fff; }
.hr-ring small {
    position: absolute;
    bottom: 4px;
    font-size: .5rem;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .5);
    text-transform: uppercase;
}

.hr-section-label {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin: 1.1rem 0 .55rem;
}

.hr-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hr-chips span {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(37, 170, 225, .3);
    background: rgba(37, 170, 225, .1);
    border-radius: 999px;
    padding: .22rem .7rem;
}

/* Mini pipeline de reclutamiento dentro del panel */
.hr-flow { display: flex; align-items: center; gap: .35rem; }
.hr-flow-step {
    flex: 1;
    text-align: center;
    font-size: .6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
}
.hr-flow-dot {
    width: 22px; height: 22px;
    margin: 0 auto .3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .7);
}
.hr-flow-step.done .hr-flow-dot {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border-color: transparent;
    color: #fff;
}
.hr-flow-step.done { color: #fff; }
.hr-flow-line {
    flex-shrink: 0;
    width: 14px; height: 2px;
    background: rgba(255, 255, 255, .18);
}
.hr-flow-line.done { background: var(--cyan); }

/* ---------- Ciclo de vida del empleado (timeline) ---------- */
.lifecycle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}
.lifecycle::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--cyan), var(--yellow));
    opacity: .5;
    z-index: 0;
}
.lifecycle-step { position: relative; z-index: 1; text-align: center; }
.lifecycle-node {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    box-shadow: 0 10px 26px rgba(40, 54, 141, .35);
    transition: transform .22s ease;
}
.lifecycle-step:hover .lifecycle-node { transform: translateY(-5px) scale(1.05); }
.lifecycle-step:nth-child(even) .lifecycle-node { background: linear-gradient(135deg, var(--cyan), var(--sky)); }
.lifecycle-step h4 { font-size: .92rem; margin-bottom: .35rem; }
.lifecycle-step p { font-size: .78rem; color: var(--muted); }

/* ---------- Tira de módulos/áreas ---------- */
.area-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 2.4rem;
}
.area-tags .chip { color: rgba(255,255,255,.9); }

/* ---------- Bloque de reportes ---------- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.report-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.report-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(37,170,225,.5); }
.report-item svg { flex-shrink: 0; color: var(--cyan); }

@media (max-width: 900px) {
    .lifecycle { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1rem; }
    .lifecycle::before { display: none; }
    .report-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .lifecycle { grid-template-columns: repeat(2, 1fr); }
    .report-grid { grid-template-columns: 1fr; }
}