/* V5.8.8.9 · Normalización visual de Obras para todos los perfiles con acceso */

/* Las obras nacen de Presupuestos aprobados, nunca desde Obras. */
#obraOverview > .toolbar .btn.primary:first-child{display:none!important}
#obraOverview > .toolbar{justify-content:flex-start;align-items:center;gap:8px}
#obraOverview > .toolbar::after{
  content:"Las obras se crean automáticamente al aprobar un presupuesto.";
  margin-left:auto;color:#789bad;font-size:10px
}

/* Misma estructura de selección + pantallazo para todos. */
.app:not(.profile-supplier) #obraOverview .gridSplit{
  grid-template-columns:300px minmax(0,1fr)!important;
  gap:14px!important;align-items:stretch!important
}
.app:not(.profile-supplier) #obraOverview > .gridSplit > .card{
  background:linear-gradient(180deg,rgba(14,48,80,.94),rgba(9,34,58,.94))!important;
  border-color:rgba(90,220,248,.14)!important
}
.app:not(.profile-supplier) #obraOverview #obraDetail{min-height:600px;padding:16px!important}
.app:not(.profile-supplier) #obraSelector .selItem{
  padding:13px 14px!important;border-radius:13px!important;
  background:rgba(9,34,58,.78)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
.app:not(.profile-supplier) #obraSelector .selItem.active{
  border-color:rgba(56,218,255,.52)!important;
  background:linear-gradient(180deg,rgba(19,70,108,.92),rgba(13,50,80,.92))!important;
  box-shadow:0 0 0 1px rgba(56,218,255,.08) inset!important
}

/* JO, Capataz y Cliente sólo ven la obra asignada en esta maqueta. */
.app.profile-jo #obraSelector .selItem:not([data-key="trazarg"]),
.app.profile-capataz #obraSelector .selItem:not([data-key="trazarg"]),
.app.profile-client #obraSelector .selItem:not([data-key="trazarg"]){display:none!important}

/* El entorno operativo mantiene SIEMPRE menú izquierdo y contenido derecho. */
.app:not(.profile-supplier) #obraOps.active{
  display:grid!important;
  grid-template-columns:235px minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  column-gap:14px!important;row-gap:10px!important;align-items:start!important
}
.app:not(.profile-supplier) #obraOps .opsTop{
  grid-column:1/-1;grid-row:1;margin:0!important;padding:0 0 10px!important;
  border-bottom:1px solid rgba(90,220,248,.12)
}
.app:not(.profile-supplier) #obraOps .roleNote{grid-column:1/-1;grid-row:2;margin:0!important}
.app:not(.profile-supplier) #obraOps .opsTabs{
  grid-column:1;grid-row:3;
  display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
  gap:5px!important;margin:0!important;padding:10px!important;
  position:sticky;top:96px;
  border:1px solid rgba(90,220,248,.13);border-radius:15px;
  background:linear-gradient(180deg,rgba(10,38,64,.94),rgba(8,31,53,.94));
  max-height:calc(100vh - 245px);overflow-y:auto
}
.app:not(.profile-supplier) #obraOps .opsTabs::before{
  content:"ENTORNO DE OBRA";display:block;padding:3px 7px 8px;
  color:#7097a9;font-size:8px;font-weight:900;letter-spacing:.13em
}
.app:not(.profile-supplier) #obraOps .opsTab{
  width:100%!important;text-align:left!important;border-radius:9px!important;
  padding:10px 11px!important;background:transparent!important;
  border-color:transparent!important;color:#adc7d4!important;box-shadow:none!important
}
.app:not(.profile-supplier) #obraOps .opsTab:hover{
  background:rgba(35,211,255,.06)!important;color:#e7fbff!important
}
.app:not(.profile-supplier) #obraOps .opsTab.active{
  background:linear-gradient(90deg,rgba(28,180,221,.19),rgba(28,180,221,.07))!important;
  border-color:rgba(54,219,255,.30)!important;color:#fff!important;
  box-shadow:inset 3px 0 0 #27d9ff!important
}
.app:not(.profile-supplier) #obraOps .opsPane{
  grid-column:2;grid-row:3;min-width:0;margin:0!important
}
.app:not(.profile-supplier) #obraOps .opsPane.active{
  display:block!important;min-height:500px;padding:13px!important;
  border:1px solid rgba(90,220,248,.11);border-radius:15px;
  background:linear-gradient(180deg,rgba(9,35,59,.72),rgba(7,29,49,.65))
}
/* La cabecera no duplica la navegación que ya resuelve el chrome flotante. */
.app:not(.profile-supplier) #obraOps #backToObras{display:none!important}
.app:not(.profile-supplier) #obraOps #originDocBtn{display:none!important}

/* En pantallas chicas pasa a navegación superior compacta. */
@media(max-width:1100px){
  .app:not(.profile-supplier) #obraOverview .gridSplit{grid-template-columns:250px minmax(0,1fr)!important}
  .app:not(.profile-supplier) #obraOps.active{grid-template-columns:200px minmax(0,1fr)!important}
}
@media(max-width:760px){
  .app:not(.profile-supplier) #obraOverview .gridSplit{grid-template-columns:1fr!important}
  .app:not(.profile-supplier) #obraOps.active{display:block!important}
  .app:not(.profile-supplier) #obraOps .opsTabs{
    position:static;display:grid!important;grid-template-columns:1fr 1fr!important;
    max-height:none;margin-bottom:10px!important
  }
  .app:not(.profile-supplier) #obraOps .opsPane.active{min-height:0}
}