/* ═══════════════════════════════════════════════════════════════════════════════
   Cobranza Gestores — piel Finalco UI v1 (se publica en /ui/v1/cobranza-gestores-piel.css)
   Mismo esquema que Fondeo y PQRS, en tema claro y oscuro:
   · Barra azul marino a todo el ancho: logo · "Cobranza Administrativa" · búsqueda … estado ·
     alertas · cambio de tema.
   · Menú lateral a toda la altura y, abajo, el usuario (nombre y rol) y "Regresar al inicio".
   No quita reglas originales. Lo único que deja de verse: el logo de color de la barra (se usa
   la versión para fondo oscuro).
   ═══════════════════════════════════════════════════════════════════════════════ */
/* 2026-10-16: las reglas de la barra se limitan a .app>.top. Antes ".top" también tomaba los encabezados
   del historial de gestiones (.body>.top "DEUDOR · …"), que se fijaban encima de la barra y tapaban la búsqueda. */

/* ── Barra superior azul marino ── */
.app>.top{background:#0D1F3C!important;border:0!important;border-radius:0!important;color:#fff;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)}
.app>.top::before{content:"";flex:none;width:100px;height:30px;background:url("/ui/v1/marca/logo_barra.png") 0 50%/100px 30px no-repeat}
.app>.top .brand-logo{display:none}
.app>.top .brand-sub{color:#fff!important;border-left:1px solid rgba(255,255,255,.18)!important;margin-left:0;padding-left:16px;text-transform:none;letter-spacing:-.005em;font:600 15px/1 'DM Sans',sans-serif}
.app>.top .sep{background:rgba(255,255,255,.18)!important}
.app>.top .search{background:rgba(255,255,255,.1)!important;border-radius:10px}
.app>.top .search i{color:rgba(255,255,255,.7)!important}
.app>.top .search input{color:#fff!important;background:transparent}
.app>.top .search input::placeholder{color:rgba(255,255,255,.6)}
.app>.top .search span{color:rgba(255,255,255,.55)!important}
.app>.top #search-status{color:#00C896!important}
.app>.top #campana-btn,.app>.top #theme-toggle{background:transparent!important;border:1px solid rgba(255,255,255,.22)!important;color:rgba(255,255,255,.88)!important;border-radius:999px!important}
.app>.top #campana-btn:hover,.app>.top #theme-toggle:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
.app>.top #theme-toggle i,.app>.top #theme-toggle span,.app>.top #campana-btn i{color:inherit!important}
.app>.top .userpill{color:rgba(255,255,255,.8)}
.app>.top .userpill .gestor-select{color:#fff}

/* ── Celular (768 px o menos): la barra crece a dos líneas para que todo quede dentro del azul ── */
@media (max-width:768px){
  .app>.top{flex-wrap:wrap;row-gap:10px;padding:10px 14px!important}
  .app>.top .search{order:5;flex:1 1 100%!important;margin-left:0!important}
  .app>.top .search input{width:100%!important}
  .app>.top .userpill .gestor-select,.app>.top .userpill #fc-identity-name{color:#fff!important}
  .app>.top .userpill .user-role{color:rgba(255,255,255,.7)!important}
}

/* ── Pantallas con menú lateral (más de 768 px): el esquema de Fondeo ── */
@media (min-width:769px){
  .app{max-width:none!important;margin:0!important;padding:56px 0 26px!important;gap:0!important}
  .app>.top{position:fixed;top:0;left:0;right:0;height:56px;z-index:60;padding:0 20px!important;gap:14px}
  #banner-gestor{top:56px!important}
  .shell{grid-template-columns:228px minmax(0,1fr)!important;gap:0!important}
  .nav{position:sticky!important;top:56px!important;height:calc(100vh - 82px);max-height:none!important;border:0!important;border-right:1px solid var(--border-1)!important;
    border-radius:0!important;padding:16px 12px 150px!important;background:var(--bg-card)}
  .nav-item{min-height:38px;border-radius:10px!important;font-size:14px!important}
  .nav-h{font-size:11px!important;font-weight:700;letter-spacing:.1em!important;padding:12px 12px 6px!important}
  .workspace{padding:16px 24px 24px}

  /* Abajo del menú: usuario (nombre y rol) y "Regresar al inicio", como en Fondeo */
  .app>.top .userpill{position:fixed;left:0;bottom:70px;width:228px;z-index:61;padding:14px 16px 6px;background:var(--bg-card);border-top:1px solid var(--border-1);color:var(--text-2)}
  .app>.top .userpill .av{width:32px;height:32px}
  .app>.top .userpill .gestor-select{color:var(--text-1)}
  #fc-logout{left:12px!important;right:auto!important;bottom:30px!important;width:204px;text-align:left;border:0!important;box-shadow:none!important;background:transparent!important;
    color:var(--text-2)!important;font:500 13px Inter,sans-serif!important;padding:9px 10px 9px 32px!important;border-radius:10px!important}
  #fc-logout::before{content:"\ea19";font-family:'tabler-icons';font-size:16px;position:absolute;left:10px;top:50%;transform:translateY(-50%)}
  #fc-logout:hover{background:var(--bg-soft)!important;color:var(--text-1)!important}
}

/* ── Tema claro ── */
html:not([data-theme="dark"]) body{background:#F4F6F8;caret-color:#006850;accent-color:#006850}
html:not([data-theme="dark"]) .nav-item.active{background:#E5EEF5!important;color:#0D1F3C!important;font-weight:600}
html:not([data-theme="dark"]) .nav-item.active i{color:#006850}
html:not([data-theme="dark"]) .nav-item:hover:not(.active){background:#F4F6F8}
html:not([data-theme="dark"]) .card{border-radius:16px}

/* ── Acceso ── */
#fc-auth-gate button[type=submit]{background:#006850!important;border-radius:10px!important}
#fc-auth-gate button[type=submit]:hover{background:#005A44!important}