/* v180.6.12 - REAL Logout Visibility Audit + Mobile Final QA
   Global final layer for every active legacy/SaaS header.
   Purpose: make logout/salir action unmistakably visible on desktop and mobile,
   without changing routes, CSRF, tenancy, branding variables or role logic. */

:root{
  --saas-logout-bg-1:#ef4444;
  --saas-logout-bg-2:#b91c1c;
  --saas-logout-border:rgba(254,202,202,.78);
  --saas-logout-shadow:0 10px 24px rgba(220,38,38,.36), inset 0 1px 0 rgba(255,255,255,.22);
  --saas-logout-text:#ffffff;
}

.smart-nav-v18061 .smart-nav-logout,
.smart-nav .smart-nav-logout,
.header-actions .logout,
.campus-header-actions .logout,
.topbar .logout,
.nav-actions .logout{
  flex:0 0 auto!important;
}

.smart-nav-v18061 .smart-nav-logout-btn,
.smart-nav .smart-nav-logout button,
.smart-nav .smart-nav-logout .btn-secondary,
form.smart-nav-logout button,
form[action*="logout"] button,
a[href$="/logout"],
a[href*="/logout"],
a[href*="salir"],
.logout,
.logout-btn,
.btn-logout,
.cerrar-sesion,
.btn-cerrar,
.header-logout,
.campus-logout,
.topbar-logout,
.sa-exit a[href$="/logout"],
.eoe-side a.logout{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:38px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  border:1px solid var(--saas-logout-border)!important;
  background:linear-gradient(135deg,var(--saas-logout-bg-1),var(--saas-logout-bg-2))!important;
  color:var(--saas-logout-text)!important;
  -webkit-text-fill-color:var(--saas-logout-text)!important;
  box-shadow:var(--saas-logout-shadow)!important;
  text-decoration:none!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  line-height:1!important;
  text-shadow:0 1px 1px rgba(0,0,0,.22)!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

.smart-nav-v18061 .smart-nav-logout-btn *,
.smart-nav .smart-nav-logout button *,
form[action*="logout"] button *,
a[href$="/logout"] *,
a[href*="/logout"] *,
a[href*="salir"] *,
.logout *,
.logout-btn *,
.btn-logout *,
.cerrar-sesion *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.smart-nav-v18061 .smart-nav-logout-btn::before,
.smart-nav .smart-nav-logout button::before,
form[action*="logout"] button::before,
a[href$="/logout"]::before,
a[href*="/logout"]::before,
a[href*="salir"]::before,
.logout::before,
.logout-btn::before,
.btn-logout::before,
.cerrar-sesion::before,
.sa-exit a[href$="/logout"]::before,
.eoe-side a.logout::before{
  content:"↪";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff!important;
  font-size:14px;
  font-weight:950;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.smart-nav-v18061 .smart-nav-logout-btn:hover,
.smart-nav .smart-nav-logout button:hover,
form[action*="logout"] button:hover,
a[href$="/logout"]:hover,
a[href*="/logout"]:hover,
a[href*="salir"]:hover,
.logout:hover,
.logout-btn:hover,
.btn-logout:hover,
.cerrar-sesion:hover{
  background:linear-gradient(135deg,#f87171,#991b1b)!important;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(220,38,38,.44), inset 0 1px 0 rgba(255,255,255,.25)!important;
}

.smart-nav-v18061 .smart-nav-logout-btn:focus-visible,
.smart-nav .smart-nav-logout button:focus-visible,
form[action*="logout"] button:focus-visible,
a[href$="/logout"]:focus-visible,
a[href*="/logout"]:focus-visible,
a[href*="salir"]:focus-visible,
.logout:focus-visible,
.logout-btn:focus-visible,
.btn-logout:focus-visible,
.cerrar-sesion:focus-visible{
  outline:3px solid rgba(252,165,165,.92)!important;
  outline-offset:2px!important;
}

@media (max-width:768px){
  .smart-nav-v18061 .smart-nav-logout,
  .smart-nav .smart-nav-logout{
    display:block!important;
    width:100%!important;
    margin:0!important;
  }

  .smart-nav-v18061 .smart-nav-logout-btn,
  .smart-nav .smart-nav-logout button,
  form.smart-nav-logout button,
  form[action*="logout"] button,
  a[href$="/logout"],
  a[href*="/logout"],
  a[href*="salir"],
  .logout,
  .logout-btn,
  .btn-logout,
  .cerrar-sesion,
  .btn-cerrar,
  .header-logout,
  .campus-logout,
  .topbar-logout{
    width:100%!important;
    min-height:42px!important;
    padding:0 12px!important;
    border-radius:12px!important;
    font-size:12px!important;
  }

  .smart-nav-v18061 .smart-nav-mobile-row{
    gap:6px!important;
  }

  .smart-nav-v18061 .smart-nav-card{
    padding:6px!important;
  }

  .smart-nav-v18061 .smart-nav-link,
  .smart-nav-v18061 .smart-nav-actions .smart-nav-badge{
    min-height:34px!important;
    height:34px!important;
  }

  .dashboard-kpis,.dashboard-stats,.stats-grid,.metrics-grid,.kpi-grid,
  .summary-grid,.indicadores-grid,.quick-stats,.cards-resumen,.resumen-cards{
    gap:7px!important;
  }
}

@media (max-width:380px){
  .smart-nav-v18061 .smart-nav-logout-btn,
  .smart-nav .smart-nav-logout button,
  form.smart-nav-logout button,
  a[href$="/logout"],
  a[href*="/logout"]{
    min-height:40px!important;
    font-size:11px!important;
  }
}