/* Sección «CRM de redes» del inicio de la plataforma. Franja oscura propia: se ve igual en las 15 plantillas. */
.crm-redes {
    --crm-fondo: #0b1026;
    --crm-fondo-2: #161b45;
    --crm-texto: #e9ecff;
    --crm-suave: #aab1d6;
    --crm-borde: rgba(255, 255, 255, .12);
    --crm-vidrio: rgba(255, 255, 255, .06);
    --crm-acento: #7c5cff;
    --crm-acento-2: #22d3ee;
    --crm-wa: #25d366;
    --crm-ms: #0084ff;
    --crm-ig: #e1306c;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(56px, 8vw, 104px) 16px;
    background: linear-gradient(160deg, var(--crm-fondo) 0%, var(--crm-fondo-2) 100%);
    color: var(--crm-texto);
    font-family: inherit;
}
.crm-fondo {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(520px 320px at 85% 20%, rgba(124, 92, 255, .35), transparent 70%),
        radial-gradient(420px 300px at 10% 90%, rgba(34, 211, 238, .18), transparent 70%),
        radial-gradient(300px 220px at 60% 100%, rgba(225, 48, 108, .16), transparent 70%);
}
.crm-fondo::after {
    content: ""; position: absolute; inset: 0; opacity: .35;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.crm-contenedor {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}

/* Texto */
.crm-ceja {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--crm-borde); background: var(--crm-vidrio);
    font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: #d9d2ff;
}
.crm-ceja i { color: var(--crm-acento-2); }
.crm-redes h2 {
    margin: 1rem 0 .9rem; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff;
    text-wrap: balance;
}
.crm-bajada { margin: 0 0 1.6rem; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; color: var(--crm-suave); max-width: 34rem; }
.crm-lista { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.crm-lista li {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .85rem; border-radius: 14px; border: 1px solid var(--crm-borde); background: var(--crm-vidrio);
}
.crm-icono {
    flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--crm-acento), #4f46e5); color: #fff; font-size: 1rem;
    box-shadow: 0 6px 16px rgba(124, 92, 255, .35);
}
.crm-redes .crm-icono i, .crm-redes .crm-red i { color: #fff; opacity: 1; margin: 0; position: static; width: auto; height: auto; line-height: 1; place-self: center; transform: none; background: none; }
.crm-lista li:nth-child(2) .crm-icono { background: linear-gradient(135deg, #06b6d4, #2563eb); box-shadow: 0 6px 16px rgba(6, 182, 212, .3); }
.crm-lista li:nth-child(3) .crm-icono { background: linear-gradient(135deg, #22c55e, #059669); box-shadow: 0 6px 16px rgba(34, 197, 94, .3); }
.crm-lista li:nth-child(4) .crm-icono { background: linear-gradient(135deg, #f43f5e, #c026d3); box-shadow: 0 6px 16px rgba(244, 63, 94, .3); }
.crm-lista strong { display: block; font-size: .95rem; color: #fff; margin-bottom: .15rem; }
.crm-lista div > span { display: block; font-size: .85rem; line-height: 1.45; color: var(--crm-suave); }
.crm-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.crm-boton {
    display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 12px;
    font-weight: 700; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.crm-boton-principal { background: linear-gradient(135deg, var(--crm-acento), #4f46e5); color: #fff; box-shadow: 0 10px 26px rgba(124, 92, 255, .45); }
.crm-boton-principal:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124, 92, 255, .55); }
.crm-boton-suave { border: 1px solid var(--crm-borde); background: var(--crm-vidrio); color: #fff; }
.crm-boton-suave:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.crm-boton:focus-visible { outline: 3px solid var(--crm-acento-2); outline-offset: 3px; }

/* Banner: redes que llegan a la bandeja */
.crm-banner { position: relative; min-height: 440px; }
.crm-red {
    position: absolute; left: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: 1.6rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); z-index: 2;
    animation: crm-flotar 5s ease-in-out infinite;
}
.crm-red-wa { top: 42px; background: var(--crm-wa); }
.crm-red-ms { top: 192px; background: linear-gradient(135deg, #00b2ff, #006aff); animation-delay: -1.6s; }
.crm-red-ig { top: 342px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); animation-delay: -3.2s; }
.crm-lineas { position: absolute; left: 28px; top: 0; width: calc(100% - 28px); height: 440px; z-index: 1; overflow: visible; }
.crm-lineas path {
    fill: none; stroke: rgba(170, 177, 214, .55); stroke-width: 2; stroke-dasharray: 6 8;
    animation: crm-fluir 1.6s linear infinite;
}
.crm-ventana {
    position: relative; z-index: 3; margin-left: 116px; margin-top: 28px;
    border-radius: 18px; border: 1px solid var(--crm-borde); overflow: hidden;
    background: rgba(17, 22, 58, .82); backdrop-filter: blur(10px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(124, 92, 255, .15);
}
.crm-barra { display: flex; align-items: center; gap: 6px; padding: .7rem .9rem; border-bottom: 1px solid var(--crm-borde); background: rgba(255, 255, 255, .04); }
.crm-barra span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.crm-barra span:nth-child(2) { background: #febc2e; }
.crm-barra span:nth-child(3) { background: #28c840; }
.crm-barra b { margin-left: .6rem; font-size: .8rem; font-weight: 600; color: var(--crm-suave); }
.crm-cuerpo { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 300px; }
.crm-chats { list-style: none; margin: 0; padding: .5rem; border-right: 1px solid var(--crm-borde); display: grid; gap: 4px; align-content: start; }
.crm-chats li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; padding: .6rem; border-radius: 12px; }
.crm-chats li.crm-activo { background: rgba(124, 92, 255, .18); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .35); }
.crm-chats b { display: block; font-size: .82rem; color: #fff; }
.crm-chats small { display: block; font-size: .74rem; color: var(--crm-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-avatar {
    position: relative; grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; color: #fff;
}
.crm-av-1 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.crm-av-2 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.crm-av-3 { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.crm-avatar i {
    position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
    font-size: .62rem; border: 2px solid #11163a;
}
.crm-mini-wa { background: var(--crm-wa); }
.crm-mini-ig { background: var(--crm-ig); }
.crm-mini-ms { background: var(--crm-ms); }
.crm-etiqueta {
    grid-column: 2; justify-self: start; margin-top: .25rem; padding: .05rem .5rem; border-radius: 999px;
    font-size: .64rem; font-style: normal; font-weight: 700;
}
.crm-et-oportunidad { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.crm-et-cliente { background: rgba(34, 197, 94, .18); color: #86efac; }
.crm-conversacion { padding: .9rem; display: flex; flex-direction: column; gap: .55rem; }
.crm-burbuja { max-width: 92%; padding: .55rem .75rem; border-radius: 14px; font-size: .78rem; line-height: 1.4; }
.crm-entra { align-self: flex-start; background: rgba(255, 255, 255, .1); color: #fff; border-bottom-left-radius: 4px; }
.crm-sale { align-self: flex-end; background: linear-gradient(135deg, var(--crm-acento), #4f46e5); color: #fff; border-bottom-right-radius: 4px; }
.crm-sale i { margin-right: .25rem; opacity: .9; }
.crm-horas { align-self: flex-end; display: flex; gap: .35rem; }
.crm-horas span { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--crm-borde); font-size: .72rem; color: var(--crm-suave); }
.crm-horas .crm-elegida { border-color: var(--crm-acento-2); color: #fff; background: rgba(34, 211, 238, .16); }
.crm-confirmada {
    align-self: stretch; margin-top: auto; padding: .55rem .7rem; border-radius: 12px; font-size: .76rem; font-weight: 600;
    background: rgba(34, 197, 94, .14); color: #bbf7d0; border: 1px solid rgba(34, 197, 94, .3);
}
.crm-confirmada i { margin-right: .35rem; color: #4ade80; }
.crm-flotante {
    position: absolute; z-index: 4; left: 64px; bottom: -6px; display: flex; gap: .6rem; align-items: center;
    padding: .7rem .9rem; border-radius: 14px; background: #fff; color: #111827;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: crm-flotar 6s ease-in-out infinite;
}
.crm-flotante > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #16a34a; }
.crm-flotante b { display: block; font-size: .85rem; }
.crm-flotante small { display: block; font-size: .72rem; color: #6b7280; }

@keyframes crm-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes crm-fluir { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) {
    .crm-red, .crm-flotante, .crm-lineas path { animation: none; }
}

/* Tableta y celular */
@media (max-width: 991.98px) {
    .crm-contenedor { grid-template-columns: 1fr; }
    .crm-banner { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 575.98px) {
    .crm-lista { grid-template-columns: 1fr; }
    .crm-acciones .crm-boton { flex: 1 1 100%; justify-content: center; }
    .crm-banner { min-height: 0; padding: 64px 0 0; }
    .crm-red { top: 0; width: 46px; height: 46px; font-size: 1.3rem; border-radius: 50%; }
    .crm-red-wa { left: calc(50% - 86px); }
    .crm-red-ms { left: calc(50% - 23px); }
    .crm-red-ig { left: calc(50% + 40px); }
    .crm-lineas { display: none; }
    .crm-ventana { margin: 0; }
    .crm-cuerpo { grid-template-columns: 1fr; }
    .crm-chats { border-right: 0; border-bottom: 1px solid var(--crm-borde); }
    .crm-chats li:nth-child(3) { display: none; }
    .crm-flotante { position: relative; left: auto; bottom: auto; width: max-content; margin: 14px auto 0; animation: none; }
}