/* =====================================================================
   Bogo AI CRM · Sidebar premium (marca + tarjeta de usuario + menú + riel)
   2026-10-08 · solo CSS (animaciones transform/opacity), respeta
   prefers-reduced-motion. Cargado después de arya-theme-azul-dorado.css
   ===================================================================== */
@property --av-crm-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --av-ring-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- MARCA ---------- */
.main-header .logo { overflow: visible !important; }
.main-header .logo .logo-lg.td-brand-head { display: flex !important; align-items: center; gap: 10px !important; padding-left: 14px !important; height: 100%; }
.av-wolf-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; }
.av-wolf-wrap::before { content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.55) 0%, rgba(37,99,235,.28) 42%, rgba(37,99,235,0) 70%);
  filter: blur(3px); opacity: .55; transform: scale(.85); animation: avWolfBreath 4s ease-in-out infinite; pointer-events: none; }
.av-wolf-wrap img, .av-wolf-wrap .av-wolf { position: relative; z-index: 1; height: 34px !important; width: auto !important; max-width: 38px !important;
  object-fit: contain; filter: drop-shadow(0 2px 4px rgba(30,58,138,.18)); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.main-header .logo:hover .av-wolf-wrap img { transform: rotate(-7deg) scale(1.07); }
@keyframes avWolfBreath { 0%,100% { opacity: .35; transform: scale(.82); } 50% { opacity: .8; transform: scale(1.08); } }

.td-brand-head .td-brand-txt { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; line-height: 1; }
.td-brand-head .av-wordmark, .main-header .logo .av-wordmark {
  font-size: 23px !important; font-weight: 800 !important; letter-spacing: -.035em !important; line-height: 1 !important;
  background: linear-gradient(100deg, #1E3A8A 0%, #2563EB 30%, #38BDF8 46%, #2563EB 60%, #1E3A8A 100%) !important;
  background-size: 260% 100% !important; background-position: 100% 0;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: avShimmer 6s ease-in-out infinite; padding-bottom: 1px; }
@keyframes avShimmer { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }

.td-brand-head .av-crm, .main-header .logo .av-crm {
  display: inline-flex !important; align-items: center; height: 18px; padding: 0 7px 0 8px !important; border-radius: 999px !important;
  font-size: 9px !important; font-weight: 700 !important; letter-spacing: .24em !important; text-transform: uppercase; line-height: 1 !important;
  color: #2563EB !important; -webkit-text-fill-color: #2563EB;
  border: 1px solid transparent !important; box-shadow: none !important;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--av-crm-a), #BFDBFE, #2563EB, #38BDF8, #BFDBFE) border-box !important;
  animation: avCrmSpin 6s linear infinite; margin-top: 2px; }
@keyframes avCrmSpin { to { --av-crm-a: 360deg; } }

/* ---------- TARJETA DE USUARIO ---------- */
.main-sidebar .user-panel.av-card {
  position: relative; overflow: hidden !important; display: flex !important; align-items: center; gap: 12px;
  margin: 14px 12px 10px !important; padding: 13px 12px !important; width: auto !important; min-height: 78px; box-sizing: border-box;
  border-radius: 16px !important; border: 1px solid #E1E9FB !important; cursor: pointer;
  background:
    radial-gradient(120% 140% at 0% 0%, #E6EEFF 0%, rgba(230,238,255,0) 55%),
    radial-gradient(90% 120% at 100% 100%, #EEF7FF 0%, rgba(238,247,255,0) 60%),
    linear-gradient(135deg, #EFF4FF 0%, #FFFFFF 70%) !important;
  box-shadow: 0 6px 18px rgba(37,99,235,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; outline: none; }
.main-sidebar .user-panel.av-card:hover, .main-sidebar .user-panel.av-card:focus-visible { transform: translateY(-1px); border-color: #C7D7FB !important; box-shadow: 0 10px 24px rgba(37,99,235,.14) !important; }
.av-card .av-sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.av-card .av-sheen::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-12deg); animation: avSheen 1.6s .35s ease-out 1 both; }
.av-card:hover .av-sheen::before { animation: avSheenHover 1.1s ease-out 1 both; }
@keyframes avSheen { to { transform: translateX(330%) skewX(-12deg); } }
@keyframes avSheenHover { from { transform: translateX(-160%) skewX(-12deg); } to { transform: translateX(330%) skewX(-12deg); } }

.av-card .av-ring { position: relative !important; flex: 0 0 50px; width: 50px !important; height: 50px !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; float: none !important; padding: 0 !important; }
.av-card .av-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #2563EB, #38BDF8, #93C5FD, #1E3A8A, #2563EB);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: avRingSpin 7s linear infinite; }
.av-card.av-sup .av-ring::before { background: conic-gradient(from 0deg, #C9A227, #F3D98B, #FBE9B7, #B8860B, #C9A227); }
@keyframes avRingSpin { to { transform: rotate(360deg); } }
.av-card .av-ring img { position: relative; z-index: 1; width: 42px !important; height: 42px !important; max-width: none !important; border-radius: 50% !important; object-fit: cover;
  border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(15,23,42,.12) !important; }
.av-card .av-dot { position: absolute; z-index: 2; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: #94A3B8; }
.av-card .av-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: inherit; opacity: 0; }
.av-card[data-pres="on"] .av-dot { background: #22C55E; }
.av-card[data-pres="aux"] .av-dot { background: #F59E0B; }
.av-card[data-pres="on"] .av-dot::after, .av-card[data-pres="aux"] .av-dot::after { animation: avPulse 2.2s ease-out infinite; }
@keyframes avPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }

.av-card .av-user-meta { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; padding: 0 !important; float: none !important; }
.av-card .av-user-name { margin: 0 !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: -.01em; color: #0F172A !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2 !important; }
.av-card .av-user-role { font-size: 11.5px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.av-card .av-user-role b { color: #2563EB; font-weight: 700; }
.av-card.av-sup .av-user-role b { color: #A16207; }
.av-card .av-user-pres { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #475569; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-card .av-user-pres::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; flex: 0 0 6px; }
.av-card[data-pres="on"] .av-user-pres { color: #15803D; } .av-card[data-pres="on"] .av-user-pres::before { background: #22C55E; }
.av-card[data-pres="aux"] .av-user-pres { color: #B45309; } .av-card[data-pres="aux"] .av-user-pres::before { background: #F59E0B; }

/* ---------- MENÚ (solo Bogo AI) ---------- */
body.arya-ui .main-sidebar { padding-top: 56px !important; background: #FFFFFF !important; border-right: 1px solid #E8EDF6 !important; box-shadow: none !important; }
body.arya-ui .main-sidebar .sidebar { padding-bottom: 16px; }
body.arya-ui .sidebar-menu { padding-top: 2px; }
body.arya-ui .sidebar-menu > li.td-nav-lab { display: flex !important; align-items: center; gap: 8px; padding: 14px 22px 6px !important; margin: 0 !important; background: none !important; height: auto; }
body.arya-ui .sidebar-menu > li.td-nav-lab > span { font-size: 10px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase; color: #94A3B8 !important; white-space: nowrap; }
body.arya-ui .sidebar-menu > li.td-nav-lab::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, #E5E9F2, rgba(229,233,242,0)); }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a {
  position: relative !important; display: flex !important; align-items: center; gap: 11px; margin: 2px 12px !important; padding: 7px 10px !important;
  border-radius: 11px !important; border-left: 0 !important; overflow: visible !important; color: #334155 !important; font-weight: 500; font-size: 13.5px;
  background: transparent !important; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a > .fa, body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a > i {
  display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px !important; height: 32px; margin: 0 !important;
  border-radius: 9px; font-size: 14px !important; color: #64748B !important; background: #F4F6FB; transition: background-color .2s ease, color .2s ease, transform .25s ease; }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a::before {
  content: '' !important; position: absolute !important; left: -12px !important; top: 9px !important; bottom: 9px !important; width: 3px !important; height: auto !important;
  border-radius: 0 4px 4px 0; background: #2563EB !important; transform: scaleY(0) !important; transform-origin: center; opacity: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease !important; display: block !important; }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a:hover { background: #F3F6FD !important; color: #1E3A8A !important; }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a:hover > .fa { color: #2563EB !important; background: #E8EFFE; transform: translateX(1px); }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a:hover::before { transform: scaleY(.55) !important; opacity: .55; }
body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a, body.arya-ui .sidebar-menu > li:not(.td-nav-lab) > a:hover { box-shadow: none !important; }
body.arya-ui .sidebar-menu > li.active > a { background: #EFF4FF !important; color: #1E3A8A !important; font-weight: 700; box-shadow: none !important; }
body.arya-ui .sidebar-menu > li.active > a > .fa { background: #2563EB !important; color: #fff !important; box-shadow: 0 4px 10px rgba(37,99,235,.28); }
body.arya-ui .sidebar-menu > li.active > a::before { transform: scaleY(1) !important; opacity: 1; }
body.arya-ui .sidebar-menu > li > a > span:not(.badge) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.arya-ui .sidebar-menu .badge, body.arya-ui .sidebar-menu .label { border-radius: 999px !important; padding: 3px 8px !important; min-width: 20px; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 !important; float: none !important; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
body.arya-ui .sidebar-menu .badge.bg-red { background: #EF4444 !important; } body.arya-ui .sidebar-menu .badge.bg-green { background: #E2E8F0 !important; color: #475569 !important; }

/* ---------- RIEL COLAPSADO (escritorio) ---------- */
@media (min-width: 768px) {
  body.arya-ui.sidebar-mini.sidebar-collapse .main-sidebar { width: 72px !important; transform: none !important; overflow: visible !important; z-index: 850; }
  body.arya-ui.sidebar-mini.sidebar-collapse .main-sidebar .sidebar { overflow: visible !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .content-wrapper, body.arya-ui.sidebar-mini.sidebar-collapse .main-footer, body.arya-ui.sidebar-mini.sidebar-collapse .right-side { margin-left: 72px !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .main-header .navbar { margin-left: 72px !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .main-header .logo { width: 72px !important; padding: 0 !important; border-right: 1px solid #E8EDF6; }
  body.arya-ui.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: flex !important; align-items: center; justify-content: center; width: 72px !important; height: 56px; margin: 0 !important; padding: 0 !important; overflow: visible; }
  body.arya-ui.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg { display: none !important; }
  /* tarjeta → avatar centrado */
  body.arya-ui.sidebar-mini.sidebar-collapse .main-sidebar .user-panel.av-card { margin: 12px 0 6px !important; padding: 8px 0 12px !important; min-height: 0; justify-content: center; gap: 0;
    background: none !important; border: 0 !important; border-bottom: 1px solid #EDF1F7 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .av-card .av-user-meta, body.arya-ui.sidebar-mini.sidebar-collapse .av-card .av-sheen { display: none !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .av-card .av-ring { flex-basis: 42px; width: 42px !important; height: 42px !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .av-card .av-ring img { width: 35px !important; height: 35px !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .av-card .av-dot { width: 11px; height: 11px; right: 0; bottom: 0; }
  /* separadores de sección */
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li.td-nav-lab { display: block !important; height: 1px; padding: 0 !important; margin: 10px 20px !important; background: #EDF1F7 !important; overflow: hidden; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li.td-nav-lab > span, body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li.td-nav-lab::after { display: none !important; }
  /* botones cuadrados 44px */
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu, body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li { overflow: visible !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab) { position: relative; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li.td-nav-lab:first-child { display: none !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab) > a { width: 44px !important; height: 44px !important; margin: 4px auto !important; padding: 0 !important; justify-content: center; gap: 0; border-radius: 12px !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab) > a > .fa { flex: 0 0 auto; width: 44px !important; height: 44px; border-radius: 12px; background: transparent !important; font-size: 16px !important; box-shadow: none !important; color: #64748B !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab) > a:hover { background: #F3F6FD !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab) > a:hover > .fa { color: #2563EB !important; transform: none; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a { background: #EFF4FF !important; box-shadow: inset 0 0 0 1px #DCE6FD !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a > .fa { color: #2563EB !important; background: transparent !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab) > a::before { left: -14px !important; top: 11px !important; bottom: 11px !important; }
  /* tooltips con el nombre del módulo */
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span:not(.badge):not(.pull-right-container) { display: none !important; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab):hover > a > span:not(.badge):not(.pull-right):not(.pull-right-container) {
    display: block !important; position: absolute !important; left: 54px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: auto !important; height: auto !important; margin: 0 !important; padding: 6px 11px !important; border-radius: 8px !important;
    background: #0F172A !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; line-height: 1.3 !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.22) !important; z-index: 1000; pointer-events: none; overflow: visible; animation: avTip .16s ease-out both; }
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.td-nav-lab):hover > a > span:not(.badge):not(.pull-right):not(.pull-right-container)::before {
    content: ''; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; background: #0F172A; transform: translateY(-50%) rotate(45deg); border-radius: 1px; }
  @keyframes avTip { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
  /* badge como punto numerado */
  body.arya-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .badge { display: block !important; position: absolute !important; top: -3px; right: -5px; left: auto !important; padding: 2px 5px !important; min-width: 17px; font-size: 9.5px !important; border: 2px solid #fff; }
}

/* ---------- OCP (cabecera/riel oscuros) ---------- */
.av-ocp .main-header .logo .av-wordmark, .main-header .logo.av-dark .av-wordmark {
  background: linear-gradient(100deg, #BFDBFE 0%, #FFFFFF 32%, #7DD3FC 48%, #FFFFFF 62%, #BFDBFE 100%) !important; background-size: 260% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; }
.main-header .logo.av-dark .av-crm { color: #E0F2FE !important; -webkit-text-fill-color: #E0F2FE;
  background: linear-gradient(rgba(15,23,42,.35), rgba(15,23,42,.35)) padding-box, conic-gradient(from var(--av-crm-a), #7DD3FC, #F3D98B, #38BDF8, #7DD3FC) border-box !important; }
.main-sidebar .user-panel.av-card.av-dark { border: 1px solid rgba(255,255,255,.14) !important;
  background: radial-gradient(120% 140% at 0% 0%, rgba(56,189,248,.20) 0%, rgba(56,189,248,0) 55%), linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; }
.av-card.av-dark .av-user-name { color: #fff !important; }
.av-card.av-dark .av-user-role { color: rgba(255,255,255,.7); }
.av-card.av-dark .av-user-role b { color: #F3D98B; }
.av-card.av-dark .av-user-pres, .av-card.av-dark[data-pres="on"] .av-user-pres { color: #86EFAC; }
.av-card.av-dark .av-dot { border-color: #0f3b3c; }
.av-card.av-dark .av-sheen::before { background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%); }
.av-card.av-dark .av-ring img { border-color: rgba(255,255,255,.85) !important; background: #fff; }
@media (min-width: 768px) {
  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel.av-card.av-dark { margin: 10px 0 6px !important; padding: 8px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; justify-content: center; min-height: 0; }
  .sidebar-mini.sidebar-collapse .av-card.av-dark .av-user-meta, .sidebar-mini.sidebar-collapse .av-card.av-dark .av-sheen { display: none !important; }
  .sidebar-mini.sidebar-collapse .av-card.av-dark .av-ring { flex-basis: 40px; width: 40px !important; height: 40px !important; }
  .sidebar-mini.sidebar-collapse .av-card.av-dark .av-ring img { width: 33px !important; height: 33px !important; }
  .sidebar-mini.sidebar-collapse .main-header .logo.av-dark > .logo-mini { display: flex !important; align-items: center; justify-content: center; height: 50px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .av-wolf-wrap::before, .av-wordmark, .av-crm, .av-card .av-ring::before, .av-card .av-dot::after, .av-card .av-sheen::before,
  body.arya-ui .sidebar-menu > li > a, body.arya-ui .sidebar-menu > li > a::before, body.arya-ui .sidebar-menu > li > a > .fa { animation: none !important; transition: none !important; }
  .av-card .av-sheen { display: none !important; }
  .main-header .logo:hover .av-wolf-wrap img { transform: none; }
}