/* ARES - vivo.css · bordes animados de colores + estilos de "Bajas del equipo" */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes girarBorde { to { --giro: 360deg; } }

html .contenido .panel, .bloque-r, .kpi, .tarjeta-ind, .acceso, .meta-r, .franja-anillos, .carril-q, .carril-sla, .premio,
.escalera-com, .caja-com, .heroe-com, .persona-eq { position: relative; isolation: isolate; }

/* Borde que gira: un gradiente cónico recortado con máscara (solo se ve el contorno) */
html .contenido .panel::after, .bloque-r::after, .kpi::after, .tarjeta-ind::after, .acceso::after, .meta-r::after, .franja-anillos::after,
.carril-q::after, .carril-sla::after, .premio::after, .escalera-com::after, .caja-com::after, .heroe-com::after {
    content: "" !important; display: block !important; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none; z-index: 1;
    background: conic-gradient(from var(--giro), transparent 0 55%, #22d3ee 66%, #a78bfa 76%, #f472b6 86%, #facc15 94%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: girarBorde 6s linear infinite; opacity: 0.85; transition: opacity 0.3s;
}
/* Cada tarjeta arranca en un punto distinto para que no giren todas sincronizadas */
.kpi:nth-child(2n)::after, .acceso:nth-child(2n)::after, .tarjeta-ind:nth-child(2n)::after, .bloque-r:nth-child(2n)::after { animation-duration: 7.5s; animation-direction: reverse; }
.kpi:nth-child(3n)::after, .acceso:nth-child(3n)::after, .tarjeta-ind:nth-child(3n)::after, .bloque-r:nth-child(3n)::after { animation-duration: 9s; }
html .contenido .panel:hover::after, .bloque-r:hover::after, .kpi:hover::after, .acceso:hover::after, .tarjeta-ind:hover::after, .caja-com:hover::after { opacity: 1; animation-duration: 2.5s; }
/* Leve brillo de fondo que respira */
.kpi, .acceso, .tarjeta-ind { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); animation: respirar 5s ease-in-out infinite; }
@keyframes respirar { 50% { box-shadow: 0 12px 34px -16px rgba(34, 211, 238, 0.55); } }
html.claro .contenido .panel::after, html.claro .bloque-r::after, html.claro .kpi::after, html.claro .acceso::after, html.claro .tarjeta-ind::after,
html.claro .caja-com::after, html.claro .escalera-com::after, html.claro .heroe-com::after, html.claro .meta-r::after, html.claro .premio::after {
    background: conic-gradient(from var(--giro), transparent 0 55%, #0891b2 66%, #7c3aed 76%, #db2777 86%, #d97706 94%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { *::after { animation: none !important; } .kpi, .acceso, .tarjeta-ind { animation: none !important; } }

/* ---------- 🚪 Bajas del equipo ---------- */
.lista-equipo { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.persona-eq { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.ini-eq { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 15px 'Inter', sans-serif; color: #fff;
    background: linear-gradient(135deg, #7c3aed, #22d3ee); }
.info-eq { flex: 1; min-width: 0; } .info-eq b { display: block; color: var(--texto); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-eq small { display: block; color: var(--texto-suave); font-size: 12px; }
.persona-eq.de-baja { opacity: 0.6; } .persona-eq.de-baja .ini-eq { background: #64748b; }
.persona-eq .boton { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
.boton.peligro { background: linear-gradient(135deg, #e11d48, #f97316); box-shadow: 0 8px 22px -10px #e11d48; }
.modal-baja { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 25, 0.7); backdrop-filter: blur(6px); }
.form-baja { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.form-baja h3 { margin: 0; color: var(--texto); }
.form-baja label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.form-baja input, .form-baja select { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(10, 15, 50, 0.6); color: var(--texto); font-size: 14px; }
.acciones-baja { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
html.claro .persona-eq { background: #ffffff; border-color: rgba(15, 23, 42, 0.1); }
html.claro .form-baja input, html.claro .form-baja select { background: #f8fafc; color: #1f2335; border-color: rgba(15, 23, 42, 0.18); }

/* ---------- Menú minimizado: todo centrado y en una sola columna ---------- */
.sidebar.cerrado .colab-sidebar, .sidebar.cerrado .submenu, .sidebar.cerrado .flecha { display: none !important; }
.sidebar.cerrado #btnMenu { align-self: center; margin: 0 auto 14px !important; }
.sidebar.cerrado .quien { justify-content: center !important; margin: 0 auto 10px !important; }
.sidebar.cerrado .opcion { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; width: 48px; margin-left: auto !important; margin-right: auto !important; }
.sidebar.cerrado .opcion .ico { margin: 0 !important; }
.sidebar.cerrado .grupo-menu { display: flex; flex-direction: column; align-items: center; }
.sidebar.cerrado .tema-sidebar { margin-left: auto !important; margin-right: auto !important; }
.sidebar.cerrado h1 { writing-mode: horizontal-tb !important; display: block; width: 100%; margin: 0 0 14px !important; padding: 0; text-align: center; font-size: 15px !important; letter-spacing: 2px; line-height: 1; }
.sidebar.cerrado .quien { margin-top: 4px !important; }
/* La barra de desplazamiento del menú no se ve (se sigue pudiendo bajar con la rueda) */
.sidebar { scrollbar-width: none !important; }
.sidebar::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

/* ---------- Selector con buscador (asesores, líderes…) ---------- */
.selector-ares { position: fixed; z-index: 2000; display: flex; flex-direction: column; max-height: 340px; border-radius: 16px; overflow: hidden;
    background: #16142c; border: 1px solid rgba(167, 139, 250, 0.35); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.2); animation: abrirSel 0.14s ease-out; }
.selector-ares.arriba { animation-name: abrirSelArriba; }
@keyframes abrirSel { from { opacity: 0; transform: translateY(-6px); } }
@keyframes abrirSelArriba { from { opacity: 0; transform: translateY(6px); } }
.busca-sel { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.busca-sel span { font-size: 13px; opacity: 0.7; }
.busca-sel input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texto); font: 500 14px 'Inter', 'Poppins', sans-serif; }
.lista-sel { overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.4) transparent; }
.op-sel { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--texto); font-size: 14px; }
.op-sel.marcada { background: rgba(124, 58, 237, 0.25); }
.op-sel.elegida { color: #c4b5fd; font-weight: 700; }
.op-sel.elegida b { color: #a78bfa; }
.op-sel.apagada { opacity: 0.4; cursor: not-allowed; }
.grupo-sel { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--texto-suave); }
.vacio-sel { padding: 14px; text-align: center; color: var(--texto-suave); font-size: 13px; }
select.select-abierto { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25) !important; }
html.claro .selector-ares { background: #ffffff; border-color: rgba(124, 58, 237, 0.25); box-shadow: 0 24px 50px -20px rgba(15, 23, 42, 0.35); }
html.claro .busca-sel { border-bottom-color: rgba(15, 23, 42, 0.08); }
html.claro .op-sel { color: #1f2335; } html.claro .op-sel.marcada { background: #ede9fe; } html.claro .op-sel.elegida { color: #6d28d9; }

/* ---------- Barras de desplazamiento oscuras en todo ARES (nada de barras blancas) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.3); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.55); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html.claro * { scrollbar-color: rgba(124, 58, 237, 0.3) transparent; }
html.claro *::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.25); }
.sidebar { scrollbar-width: none !important; }
.sidebar::-webkit-scrollbar { width: 0 !important; }
.fechas-sla { display: flex; gap: 8px; flex-wrap: wrap; }
td.validable { cursor: pointer; position: relative; }
td.validable:hover { outline: 2px solid #a78bfa; outline-offset: -2px; background: rgba(124, 58, 237, 0.18) !important; }

/* ---------- 📆 Calendario del mes de logeo (asesor) ---------- */
.calendario-logeo { margin-top: 18px; }
.cab-cal-logeo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nav-cal { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.nav-cal button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: var(--texto); font-size: 18px; cursor: pointer; }
.nav-cal b { min-width: 150px; text-align: center; }
.grilla-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cab-dia { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--texto-suave); text-transform: uppercase; padding-bottom: 2px; }
.dia-cal { position: relative; min-height: 68px; padding: 8px 10px; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
.dia-cal.vacio { background: transparent; border: 0; }
.dia-cal .num-dia { font-size: 12.5px; font-weight: 700; color: var(--texto-suave); }
.dia-cal b { font: 800 14px 'Inter', sans-serif; color: var(--texto); }
.dia-cal.c-ok { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); } .dia-cal.c-ok b { color: #34d399; }
.dia-cal.c-falta { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); } .dia-cal.c-falta b { color: #fbbf24; }
.dia-cal.c-no { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.4); } .dia-cal.c-no b { color: #fb7185; }
.dia-cal.c-val { background: rgba(139, 92, 246, 0.16); border-color: rgba(167, 139, 250, 0.5); } .dia-cal.c-val b { color: #c4b5fd; }
.dia-cal.c-futuro { opacity: 0.35; }
.dia-cal.hoy { box-shadow: 0 0 0 2px #22d3ee; }
.chulo-val { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 12px; color: #c4b5fd; }
.leyenda-cal { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--texto-suave); }
.leyenda-cal i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.leyenda-cal .c-ok { background: #10b981; } .leyenda-cal .c-falta { background: #f59e0b; } .leyenda-cal .c-no { background: #f43f5e; } .leyenda-cal .c-val { background: #8b5cf6; } .leyenda-cal .c-sin { background: #475569; }
html.claro .dia-cal { background: #ffffff; border-color: rgba(15, 23, 42, 0.1); } html.claro .nav-cal button { color: #1f2335; background: #fff; border-color: rgba(15, 23, 42, 0.15); }
@media (max-width: 600px) { .grilla-cal { gap: 4px; } .dia-cal { min-height: 52px; padding: 5px; } .dia-cal b { font-size: 11px; } }