/* ═══════════════════════════════════════════════════════════════════════════
   MOD-331 · EXPEDIENTE DEL DEAL a pantalla completa (OMN-656 · 4.29.0)
   Capa SÓLO VISUAL sobre el detalle de siempre. No cambia ids, onclick, orden de
   los botones ni el DOM contractual: `#tab-cot` sigue siendo un nodo único hijo de
   `#page-deal-detail`, los `.tab-btn#dtab-X` siguen directos dentro de `.tab-bar`
   (deeplinks 144, candado 302, móvil 60 y candado de proyecto 135 los leen así).
   Distribución: identidad y etapas arriba (la barra de etapas NO se toca: es la de
   93-etapas-bar.js con su CSS de app.css) · navegación lateral agrupada · trabajo
   al centro con su propio scroll · Deal Summary a la derecha.
   Sólo escritorio ancho: en móvil (body.mobile-mode) y por debajo de 1360 px
   siguen las reglas de app.css. El alto se HEREDA (flex/grid), nunca se calcula.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1360px){
  body:not(.mobile-mode) #page-deal-detail.active{display:flex;flex-direction:column;height:100%;min-height:0}
  body:not(.mobile-mode) #page-deal-detail .deal-layout{flex:1;min-height:0;align-items:stretch;gap:0}

  /* Agenda del día abierta: el cajón de 129-agenda-dia.js es un overlay fijo (clamp(300px,30vw,360px)) y tapaba la
     última etapa del pipeline y el Deal Summary. Mientras esté abierto el expediente le deja su columna: la página se
     encoge ese mismo ancho (cabecera, etapas y summary caben a la izquierda del cajón), con su misma transición. */
  body:not(.mobile-mode) #page-deal-detail:is(.agenda-abierta *){margin-right:clamp(300px,30vw,360px);transition:margin-right .25s ease}

  /* Deal Summary: columna derecha, a todo el alto (en app.css es sticky con calc(100vh)) */
  body:not(.mobile-mode) #page-deal-detail .deal-side{order:2;height:auto;position:static;border-radius:0;border-width:0 0 0 1px;box-shadow:none;background:var(--bg);width:280px}
  body:not(.mobile-mode) #page-deal-detail .deal-side.collapsed{width:42px}
  body:not(.mobile-mode) #page-deal-detail .deal-side-toggle{border-radius:0;background:var(--bg)}
  /* el panel ahora cuelga a la derecha: la flecha apunta hacia donde se pliega */
  body:not(.mobile-mode) #page-deal-detail .deal-side-toggle .arrow{transform:rotate(180deg)}
  body:not(.mobile-mode) #page-deal-detail .deal-side.collapsed .deal-side-toggle .arrow{transform:none}

  /* Columna de trabajo: cabecera y etapas fijas arriba; navegación | contenido abajo */
  body:not(.mobile-mode) #page-deal-detail .deal-main{
    order:1;flex:1;min-width:0;min-height:0;display:grid;gap:0;
    grid-template-columns:172px minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr);
  }
  body:not(.mobile-mode) #page-deal-detail .deal-back-row,
  body:not(.mobile-mode) #page-deal-detail .deal-hdr-titulo-row,
  body:not(.mobile-mode) #page-deal-detail #deal-etapa-steps{grid-column:1 / -1}
  body:not(.mobile-mode) #page-deal-detail .deal-back-row{padding:10px 24px 0}
  body:not(.mobile-mode) #page-deal-detail .deal-hdr-titulo-row{padding:6px 24px 4px;margin:0}
  body:not(.mobile-mode) #page-deal-detail #deal-etapa-steps{margin:14px 24px!important}
  body:not(.mobile-mode) #page-deal-detail .deal-hdr-titulo{font-size:24px}
  /* el título pide 360 px antes de ceder: si las acciones (Ganado/Perdido ya viven aquí) no caben a su lado, bajan a la línea siguiente en vez de apretarlo */
  body:not(.mobile-mode) #page-deal-detail .deal-title-line .deal-hdr-titulo{flex:1 1 360px}
  /* con ON HOLD, Ver proyecto, Compartir… la fila puede no caber: las acciones se parten en vez de salirse de la pantalla */
  body:not(.mobile-mode) #page-deal-detail .deal-title-line .deal-hdr-actions{flex-wrap:wrap}

  /* Navegación lateral agrupada (los botones siguen siendo los mismos; sólo cambia cómo se apilan) */
  body:not(.mobile-mode) #page-deal-detail .tab-bar{
    grid-column:1;grid-row:4;flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:1px;margin:0;padding:6px 8px 18px 10px;border-bottom:0;border-right:1px solid var(--border);
    overflow-x:hidden;overflow-y:auto;white-space:normal;
  }
  body:not(.mobile-mode) #page-deal-detail .tab-bar > .tab-btn{
    flex:none;min-width:0;width:100%;justify-content:flex-start;text-align:left;gap:8px;
    padding:8px 10px;border:0;border-radius:8px;font-size:13px;position:relative;
  }
  body:not(.mobile-mode) #page-deal-detail .tab-bar > .tab-btn:hover{background:var(--bg3);color:var(--text)}
  body:not(.mobile-mode) #page-deal-detail .tab-bar > .tab-btn.active{background:color-mix(in srgb,var(--turq) 14%,transparent);color:var(--turq)}
  body:not(.mobile-mode) #page-deal-detail .tab-bar > .tab-btn .tab-cnt{margin-left:auto}

  /* Grupos: el orden visual lo da `order`; la etiqueta cuelga del primero visible de cada grupo */
  body:not(.mobile-mode) #page-deal-detail #dtab-dashboard{order:1}
  body:not(.mobile-mode) #page-deal-detail #dtab-cot{order:2}
  body:not(.mobile-mode) #page-deal-detail #dtab-data{order:3}
  body:not(.mobile-mode) #page-deal-detail #dtab-livequotes{order:4}
  body:not(.mobile-mode) #page-deal-detail #dtab-archivos{order:5}
  body:not(.mobile-mode) #page-deal-detail #dtab-acts{order:11}
  body:not(.mobile-mode) #page-deal-detail #dtab-emails{order:12}
  body:not(.mobile-mode) #page-deal-detail #dtab-wa{order:13}
  body:not(.mobile-mode) #page-deal-detail #dtab-lev{order:14}
  body:not(.mobile-mode) #page-deal-detail #dtab-notas{order:15}
  body:not(.mobile-mode) #page-deal-detail #dtab-circuitos{order:20}
  body:not(.mobile-mode) #page-deal-detail #dtab-netify{order:21}
  body:not(.mobile-mode) #page-deal-detail #dtab-pagos{order:22}
  body:not(.mobile-mode) #page-deal-detail #dtab-ot{order:23}
  body:not(.mobile-mode) #page-deal-detail #dtab-inv{order:24}
  body:not(.mobile-mode) #page-deal-detail #dtab-imports{order:25}
  body:not(.mobile-mode) #page-deal-detail #dtab-dashboard,
  body:not(.mobile-mode) #page-deal-detail #dtab-acts,
  body:not(.mobile-mode) #page-deal-detail #dtab-circuitos{margin-top:26px}
  body:not(.mobile-mode) #page-deal-detail #dtab-dashboard{margin-top:22px}
  body:not(.mobile-mode) #page-deal-detail #dtab-dashboard::before,
  body:not(.mobile-mode) #page-deal-detail #dtab-acts::before,
  body:not(.mobile-mode) #page-deal-detail #dtab-circuitos::before{
    position:absolute;left:10px;top:-19px;font-size:10px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--dim);pointer-events:none;
  }
  body:not(.mobile-mode) #page-deal-detail #dtab-dashboard::before{content:"Comercial"}
  body:not(.mobile-mode) #page-deal-detail #dtab-acts::before{content:"Seguimiento"}
  body:not(.mobile-mode) #page-deal-detail #dtab-circuitos::before{content:"Operación y control"}

  /* Área de trabajo: ocupa todo el resto y es lo único que se desplaza */
  body:not(.mobile-mode) #page-deal-detail .tab-content{grid-column:2;grid-row:4;min-width:0;min-height:0;overflow-y:auto;padding:16px 20px 40px}

  /* ÁREA AMPLIABLE (4.30.0): el botón de la cabecera sólo aparece donde se trabaja a lo ancho; pliega el Deal summary
     con el mismo toggleDealSide de siempre (el estado se recuerda en localStorage) */
  body:not(.mobile-mode) #page-deal-detail:has(#dtab-cot.active) .deal-hdr-ampliar,
  body:not(.mobile-mode) #page-deal-detail:has(#dtab-wa.active) .deal-hdr-ampliar,
  body:not(.mobile-mode) #page-deal-detail:has(#dtab-emails.active) .deal-hdr-ampliar{display:inline-flex}

  /* CORREOS (4.30.0): con el área ampliada (Deal summary plegado) la lista queda a la izquierda y la lectura a la derecha;
     con el summary abierto no hay ancho para dos paneles y sigue el acordeón de siempre. Es el MISMO acordeón de 32-deal-emails.js
     (una card por hilo, su cuerpo se abre al pulsar): la rejilla sólo pone el cuerpo abierto en la 2.ª columna,
     fijo mientras se recorre la lista. Cada .dml-card pasa a display:contents para que cabecera y cuerpo sean
     celdas de la rejilla; las filas vacías miden 0 (row-gap 0, el aire va en el margen de la cabecera). */
  body:not(.mobile-mode) #page-deal-detail:has(.deal-side.collapsed) #tab-emails .dml-cards-list{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-auto-rows:min-content;column-gap:18px;row-gap:0;align-items:start;padding:6px 0 16px}
  body:not(.mobile-mode) #page-deal-detail:has(.deal-side.collapsed) #tab-emails .dml-card{display:contents}
  body:not(.mobile-mode) #page-deal-detail:has(.deal-side.collapsed) #tab-emails .dml-card-hdr{grid-column:1;grid-template-columns:14px 16px minmax(0,1fr) auto auto;min-height:0;padding:12px 14px;margin-bottom:8px;background:var(--bg2);border:1px solid var(--border);border-radius:9px}
  body:not(.mobile-mode) #page-deal-detail:has(.deal-side.collapsed) #tab-emails .dml-card-hdr:hover{border-color:var(--turq)}
  body:not(.mobile-mode) #page-deal-detail:has(.deal-side.collapsed) #tab-emails .dml-card.expanded > .dml-card-hdr{border-color:var(--turq);background:color-mix(in srgb,var(--turq) 8%,var(--bg2))}
  body:not(.mobile-mode) #page-deal-detail:has(.deal-side.collapsed) #tab-emails .dml-card.expanded > .dml-card-body{grid-column:2;grid-row:1 / span 60;position:sticky;top:0;align-self:start;max-height:80vh;overflow:auto;border:1px solid var(--border);border-radius:9px}
}