/* ============================================================
   Adm Cloud CRM — estilos adicionales de la página del módulo CRM.
   Extiende site.css (misma paleta y tipografía).
   ============================================================ */

/* ---------- Mockup: tablero Kanban del hero ---------- */
.kanban-window {
    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;
}
.kanban-window:hover { transform: rotateY(0) rotateX(0); }

.kanban-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
    padding: 1rem;
}

.kanban-col {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-sm);
    padding: .6rem;
    min-width: 0;
}

.kanban-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    padding: .1rem .2rem .3rem;
}

.kanban-count {
    font-size: .64rem;
    font-weight: 700;
    color: var(--cyan);
    background: rgba(37, 170, 225, .14);
    border: 1px solid rgba(37, 170, 225, .35);
    border-radius: 999px;
    padding: 0 .5rem;
}

.kanban-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: .6rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: transform .2s ease, border-color .2s ease;
}
.kanban-card:hover { transform: translateY(-3px); border-color: rgba(37, 170, 225, .5); }

.kanban-card.dragging {
    border-style: dashed;
    border-color: rgba(254, 205, 8, .6);
    background: rgba(254, 205, 8, .06);
    transform: rotate(-2deg);
}

.kc-title {
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    line-height: 1.35;
}

.kc-amount {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--yellow);
}

.kc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.kc-prob {
    font-size: .62rem;
    font-weight: 700;
    color: var(--cyan);
    background: rgba(37, 170, 225, .12);
    border-radius: 999px;
    padding: .05rem .5rem;
}

.kc-avatar {
    width: 20px; height: 20px;
    display: grid;
    place-items: center;
    font-size: .56rem;
    font-weight: 700;
    color: var(--deep);
    background: linear-gradient(135deg, var(--yellow), #FFE066);
    border-radius: 50%;
}
.kc-avatar.alt { background: linear-gradient(135deg, var(--sky), var(--cyan)); color: #fff; }

.kanban-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    font-size: .68rem;
    color: rgba(255, 255, 255, .55);
}
.kanban-foot strong { color: var(--yellow); font-family: var(--mono); font-weight: 500; }

/* ---------- Etiquetas de características (tarjetas oscuras) ---------- */
.cap-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.cap-tags span {
    font-size: .64rem;
    font-weight: 600;
    color: var(--yellow);
    background: rgba(254, 205, 8, .08);
    border: 1px solid rgba(254, 205, 8, .22);
    border-radius: 6px;
    padding: .12rem .5rem;
}

/* ---------- Ciclo de venta ---------- */
.flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

.flow-step {
    flex: 1 1 170px;
    max-width: 210px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.3rem 1.1rem;
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: rgba(37, 170, 225, .5);
}

.flow-icon {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    margin: 0 auto .7rem;
    border-radius: 12px;
    background: rgba(37, 170, 225, .12);
    color: var(--cyan);
}
.flow-step:nth-child(1) .flow-icon { background: rgba(254, 205, 8, .16); color: #B78E00; }
.flow-step:nth-child(5) .flow-icon { background: rgba(40, 54, 141, .1); color: var(--blue); }
.flow-step:nth-child(9) .flow-icon { background: rgba(38, 34, 98, .1); color: var(--navy); }

.flow-step h3 { font-size: .92rem; margin-bottom: .35rem; }
.flow-step p { font-size: .76rem; color: var(--muted); }

.flow-arrow {
    align-self: center;
    flex: 0 0 auto;
    color: var(--cyan);
    display: grid;
    place-items: center;
    padding: 0 .1rem;
}

.flow-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    max-width: 720px;
    margin: 2.2rem auto 0;
    background: rgba(37, 170, 225, .07);
    border: 1px solid rgba(37, 170, 225, .3);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    font-size: .86rem;
    color: var(--ink);
}
.flow-note svg { flex-shrink: 0; color: var(--cyan); margin-top: .15rem; }
.flow-note strong { color: var(--blue); }

/* ---------- Tipos de actividades ---------- */
.activity-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 2.2rem;
}

.activity-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.activity-chip:hover { transform: translateY(-3px); border-color: rgba(37, 170, 225, .5); box-shadow: var(--shadow); }
.activity-chip svg { color: var(--cyan); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .flow-step { max-width: none; }
}

@media (max-width: 680px) {
    .kanban-body { grid-template-columns: repeat(2, 1fr); }
    .kanban-col:nth-child(3) { display: none; }
    .flow { flex-direction: column; align-items: stretch; }
    .flow-step { flex-basis: auto; }
    .flow-arrow { transform: rotate(90deg); padding: .1rem 0; }
}