/* ═══════════════════════════════════════════════════════════════════════════════
   Panel de Cobranza — piel Finalco UI v1 (se publica en /ui/v1/panel-cobranza-piel.css)
   Mismo esquema que Fondeo, PQRS y Cobranza Gestores, en tema claro y oscuro:
   · Barra azul marino a todo el ancho (la barra de sincronización): logo · "Panel de Cobranza" ·
     estado de conexión … hora · "Sincronizar cartera desde Excel" · cambio de tema.
   · Menú lateral claro con las secciones y, abajo, el usuario y "Regresar al inicio".
   No quita reglas originales. Lo único que deja de verse: el logo del menú lateral (pasa a la barra).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Barra azul marino ── */
.sync-bar{background:#0D1F3C!important;border:0!important;border-radius:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06)!important;color:rgba(255,255,255,.72)!important;font-size:12px!important}
.sync-bar::before{content:"Panel de Cobranza";flex:none;height:30px;display:flex;align-items:center;padding-left:130px;margin-right:6px;white-space:nowrap;
  font:600 15px/1 'DM Sans',Inter,sans-serif;color:#fff;letter-spacing:-.005em;
  background:url("/ui/v1/marca/logo_barra.png") 0 50%/100px 30px no-repeat,linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 114px 50%/1px 22px no-repeat}
.sync-bar #sync-time{color:rgba(255,255,255,.6)!important}
.sync-bar .btn-blue{background:#006850!important;border-radius:10px!important;padding:8px 14px!important;font-size:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.sync-bar .btn-blue:hover{background:#005A44!important}
#theme-toggle{border-radius:999px!important}

/* ── Menú lateral claro (en oscuro usa la tarjeta oscura del tema) ── */
.side{background:var(--bg-card)!important;color:var(--t1)!important;border-right:1px solid var(--b1)}
.side-brand{display:none!important}
.side-h{color:var(--t3)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.1em!important;padding:12px 10px 6px!important}
.side-item{color:var(--t2)!important;font-size:14px!important;border-radius:10px!important;min-height:38px}
.side-item:hover{background:var(--bg-soft)!important;color:var(--t1)!important}
.side-item.active{background:var(--fnavy-soft,#E5EEF5)!important;color:var(--t1)!important;font-weight:600}
:root:not([data-theme="dark"]) .side-item.active{background:#E5EEF5!important;color:#0D1F3C!important}
:root:not([data-theme="dark"]) .side-item.active i{color:#006850}
[data-theme="dark"] .side-item.active{background:rgba(255,255,255,.08)!important;color:#fff!important}
.side-foot{border-top:1px solid var(--b1)!important}
#fc-profile-name{color:var(--t1)!important;font-size:13px!important;font-weight:600!important}
#side-status{color:var(--t3)!important}
#fc-logout{background:transparent!important;border:0!important;color:var(--t2)!important;font-size:13px!important;font-weight:500!important;padding:9px 10px!important;border-radius:10px!important;width:calc(100% - 4px)!important;margin:0 2px 4px!important}
#fc-logout:hover{background:var(--bg-soft)!important;color:var(--t1)!important}

/* ── Botón principal verde, como en los demás ── */
.btn-primary{background:#006850!important;border-color:#006850!important;border-radius:10px!important}
.btn-primary:hover{background:#005A44!important}
.btn{border-radius:10px!important}

/* ── Celular y tableta (900 px o menos): el menú va arriba y el contenido debajo ── */
@media (max-width:900px){
  /* La barra crece a dos líneas: logo y nombre arriba; estado, hora y botones debajo, todo dentro del azul */
  .sync-bar{flex-wrap:wrap;row-gap:10px;padding:12px 14px!important;margin-left:0!important;margin-right:0!important}
  .sync-bar::before{flex:1 1 100%;margin-right:0}
  .sync-bar #sync-txt{flex:1 1 0;min-width:0}
  /* En el original los botones Noche · Exportar · Actualizar se salen de la pantalla */
  .dash-head{flex-wrap:wrap;row-gap:12px}
  .head-actions{flex-wrap:wrap;gap:8px}
  /* En el original el menú queda fijo (sticky) a toda la altura y tapa el contenido al bajar */
  .side{position:static!important;height:auto!important}
}

/* ── Pantallas con menú lateral (más de 900 px): el esquema de Fondeo ── */
@media (min-width:901px){
  .sync-bar{position:fixed;top:0;left:0;right:0;height:56px;z-index:50;margin:0!important;padding:0 128px 0 20px!important}
  #theme-toggle{position:fixed;top:12px;right:20px;z-index:51;height:32px;background:transparent!important;border:1px solid rgba(255,255,255,.22)!important;color:rgba(255,255,255,.88)!important}
  #theme-toggle:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
  .app{padding-top:56px}
  .side{top:56px!important;height:calc(100vh - 56px)!important}
}