/* ════════════════════════════════════════════════════════════════════
   21 OCEAN BUILDERS · desktop.css · d62a26
   Receta aprobada: layout D (contexto fijo) + pills P3 (gold) +
   menú M2 (sidebar anclada) + maestro-detalle en Invoices/Estimates.

   GARANTÍA MÓVIL: cargado con <link media="(min-width: 900px)">.
   Bajo 900px el navegador no aplica NINGUNA regla. Cinturón y
   tirantes: el contenido va envuelto en la misma media query.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ── M2 · Sidebar anclada ──────────────────────────────────────────
     El drawer móvil (#sidebar) ya vive en el DOM; aquí solo se ancla
     abierto. El ☰ y el overlay se ocultan; el contenido se corre. */
  .sidebar {
    transform: none;
    width: 230px;
    max-width: 230px;
    box-shadow: none;
    border-right: 1px solid var(--border-soft, var(--border));
  }
  .sidebar-close { display: none; }
  .sidebar-overlay,
  .sidebar-overlay.visible { display: none; }
  .app-shell { margin-left: 230px; }
  .icon-btn[aria-label="Open menu"] { display: none; }

  /* ── Lienzo ──────────────────────────────────────────────────────── */
  #panelHost {
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 28px;
    padding-right: 28px;
  }
  .navy-band {
    padding-left: 28px;
    padding-right: 28px;
  }

  /* ── P3 · Pills de proyectos (solo Overview/proyectos; los paneles
     ya las ocultan vía JS, igual que en móvil) ─────────────────────── */
  .proj-tab {
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 16px;
    font-size: 13px;
  }
  .proj-tab:hover { color: rgba(255, 255, 255, 0.92); }
  .proj-tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--accent);
    font-weight: 600;
  }
  .proj-tab.active::before { display: none; }

  /* ── D · Overview: contenido 2 col + columna de contexto 380px ──── */
  #panelHost:has(> .overview-widget) {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 380px;
    gap: 16px;
    align-items: start;
  }
  #panelHost > .overview-widget { grid-column: auto; min-width: 0; }
  /* ancho completo del área principal (cols 1-2) */
  #panelHost > .overview-widget[data-key="attention"],
  #panelHost > .overview-widget[data-key="moneyIn"],
  #panelHost > .overview-widget[data-key="financials"],
  #panelHost > .overview-widget[data-key="liveMap"],
  #panelHost > .overview-widget[data-key="cfby"] { grid-column: 1 / 3; }
  /* columna de contexto (derecha) */
  #panelHost > .overview-widget[data-key="team"],
  #panelHost > .overview-widget[data-key="appts"],
  #panelHost > .overview-widget[data-key="recent"] { grid-column: 3; }

  /* ── Proyecto: widgets 2 col (jd-card fuera = ancho completo) ───── */
  .pi-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .pi-widgets > * { min-width: 0; }

  /* ── Maestro-detalle · Invoices y Estimates ─────────────────────── */
  .inv-md {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 18px;
    align-items: start;
  }
  .inv-md > :first-child { min-width: 0; }

  .inv-detail {
    display: block;
    position: sticky;
    top: 16px;
    background: var(--surface);
    border: 1px solid rgba(201, 165, 87, 0.25);
    border-radius: 18px;
    padding: 24px;
    min-width: 0;
  }
  .inv-detail-empty {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 30px 0;
  }
  .inv-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .inv-detail-title {
    font-family: var(--font-serif);
    font-size: 21px;
    font-weight: 500;
    min-width: 0;
  }
  .inv-detail-no {
    color: var(--gold-deep);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
  }
  html[data-theme="dark"] .inv-detail-no { color: var(--gold-soft, #d8bd7e); }
  .inv-detail-amt {
    font-family: var(--font-serif);
    font-size: 34px;
    font-weight: 700;
    margin: 9px 0 4px;
    color: var(--gold-deep);
  }
  html[data-theme="dark"] .inv-detail-amt { color: var(--gold-soft, #d8bd7e); }
  .inv-detail-meta {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.9;
  }
  .inv-detail-out { color: var(--ink); font-weight: 700; }
  .inv-detail-items {
    margin-top: 14px;
    border-top: 1px solid var(--border-soft, var(--border));
  }
  .inv-detail-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft, var(--border));
  }
  .inv-detail-item-desc { min-width: 0; }
  .inv-detail-item-amt {
    font-family: var(--font-mono);
    color: var(--gold-deep);
    flex: none;
  }
  html[data-theme="dark"] .inv-detail-item-amt { color: var(--gold-soft, #d8bd7e); }
  .inv-detail-acts {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }
  .inv-detail-btn {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: 1px solid var(--border-soft, var(--border));
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: transform 120ms var(--ease-out-expo), background 160ms ease;
  }
  .inv-detail-btn:active { transform: scale(0.97); }
  .inv-detail-btn--pay { color: var(--green); }

  @media (prefers-reduced-motion: reduce) {
    .inv-detail-btn:active { transform: none; }
  }
}

/* ════ d62a27 · Sidebar navy + colapsable, banda de proyecto compacta ════ */
@media (min-width: 900px) {

  /* ── Sidebar en navy (M2 como el preview) ───────────────────────── */
  .sidebar {
    background: var(--accent);
    border-right: 1px solid rgba(201, 165, 87, 0.18);
  }
  .sidebar-title { color: var(--on-navy); }
  .sidebar-title em { color: var(--gold-soft, #d8bd7e); }
  .sidebar-tag { color: rgba(255, 255, 255, 0.45); }
  .sidebar .sb-group-label { color: rgba(255, 255, 255, 0.42); }
  .sidebar .sb-group-chevron { color: rgba(255, 255, 255, 0.45); }
  .sidebar .sb-item { color: rgba(255, 255, 255, 0.74); }
  .sidebar .sb-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .sidebar .sb-item-icon { color: rgba(255, 255, 255, 0.55); }
  .sidebar .sb-label { color: inherit; }
  .sidebar .sb-theme-segmented {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.10);
  }
  .sidebar .sb-theme-opt { color: rgba(255, 255, 255, 0.6); }
  .sidebar .sb-theme-opt.is-active {
    background: var(--gold);
    color: var(--accent);
  }
  .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .sidebar-signout { color: rgba(255, 255, 255, 0.78); }
  .sidebar-signout:hover { color: #fff; }
  .sidebar-version { color: rgba(255, 255, 255, 0.35); }

  /* ── Colapsable ─────────────────────────────────────────────────── */
  .sb-pin-toggle {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    cursor: pointer;
    flex: none;
  }
  .sb-pin-toggle:hover { background: rgba(255, 255, 255, 0.12); }
  /* el × del drawer móvil sobra cuando está anclada */
  .sidebar-close { display: none; }

  html.sb-collapsed .sidebar { transform: translateX(-100%); }
  html.sb-collapsed .sidebar.open { transform: none; } /* reabierta como drawer */
  html.sb-collapsed .app-shell { margin-left: 0; }
  html.sb-collapsed .icon-btn[aria-label="Open menu"] { display: inline-flex; }
  html.sb-collapsed .sidebar-overlay.visible { display: block; }
  html.sb-collapsed .sb-pin-toggle { transform: scaleX(-1); } /* « → » */

  /* ── Banda de proyecto compacta (cinta C aprobada) ──────────────── */
  /* Owner / Address / Phone en una sola línea */
  .proj-info-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 36px;
    margin-top: var(--sp-3) !important;
  }
  .proj-info-cards .info-card { margin: 0; }
  /* Budget: 6 stats en una cinta horizontal */
  .budget-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sp-3) var(--sp-5);
  }
}

/* ════ d62a28 · Bandas compactas + estructura de todos los paneles ════ */
@media (min-width: 900px) {

  /* ── Banda compacta (overview, proyectos y paneles) ──────────────
     En ≥720px el móvil-ancho usaba padding-bottom sp-7 (~void) que
     los tabs compensaban con margen negativo. En desktop la banda es
     corta y los tabs se pegan debajo, como el preview aprobado. */
  #topNavyBand.navy-band { padding: 16px 28px 14px; }

  .brand-title { font-size: 26px; margin-bottom: var(--sp-2); }
  .proj-name-large { font-size: 30px; }
  .proj-name-large--collapsed { font-size: 26px; }
  .navy-band .app-topbar { margin-bottom: var(--sp-1); }
  .navy-band .navy-eyebrow { margin-bottom: 2px; }
  .brand-actions { margin-top: 2px; }

  /* pills P3 sueltas, pegadas a la banda (sin cápsula, sin centrado) */
  .proj-tabs-wrap { padding: 0 28px 14px; margin-top: -2px; }
  .proj-tabs {
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 7px;
    max-width: none;
    margin: 0;
  }

  /* ── Listas en 2 columnas (paneles SIN maestro-detalle) ─────────── */
  #panelHost[data-panel="clients"] .cli-list,
  #panelHost[data-panel="serviceCatalog"] .svc-list--cards,
  #panelHost[data-panel="lienReleases"] .lr-list,
  #panelHost[data-panel="leads"] .lead-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
  #panelHost[data-panel="clients"] .cli-list > *,
  #panelHost[data-panel="serviceCatalog"] .svc-list--cards > *,
  #panelHost[data-panel="lienReleases"] .lr-list > *,
  #panelHost[data-panel="leads"] .lead-list > * { min-width: 0; margin-bottom: 0; }

  #panelHost[data-panel="changeOrders"] div:has(> .c-row:nth-child(2)),
  #panelHost[data-panel="appointments"] div:has(> .c-row:nth-child(2)),
  #panelHost[data-panel="dayOff"] div:has(> .c-row:nth-child(2)),
  #panelHost[data-panel="reimbursements"] div:has(> .c-row:nth-child(2)),
  #panelHost[data-panel="rfis"] div:has(> .c-row:nth-child(2)) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }

  #panelHost[data-panel="employees"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  #panelHost[data-panel="employees"] > .emp-top-stats,
  #panelHost[data-panel="employees"] > .emp-action-bar,
  #panelHost[data-panel="employees"] > .emp-archived-section,
  #panelHost[data-panel="employees"] > .empty-rich,
  #panelHost[data-panel="employees"] > .skel-fade-in { grid-column: 1 / -1; }
  #panelHost[data-panel="employees"] > .emp-card-v2 { min-width: 0; }

  #panelHost[data-panel="hours"] > * { max-width: 980px; margin-left: auto; margin-right: auto; }
}