.plantao-details-btn{position:relative}
.plantao-details-btn:hover{background:var(--accent-bg);color:var(--accent)}
.plantao-sync-dot{
  width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;
  background:var(--text3);box-shadow:0 0 0 2px var(--bg2)
}
.plantao-details-btn .plantao-sync-dot{position:absolute;right:2px;bottom:2px}
.plantao-sync-dot.pending,.plantao-sync-dot.offline{background:var(--amber)}
.plantao-sync-dot.saving{background:var(--accent);animation:plantaoSyncPulse .9s ease-in-out infinite}
.plantao-sync-dot.synced{background:var(--green)}
.plantao-sync-dot.error{background:var(--red)}
.plantao-sync-dot.unknown{background:var(--text3)}
@keyframes plantaoSyncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

.plantao-details-overlay{
  display:none;position:fixed;inset:0;z-index:1250;background:rgba(0,0,0,.58);
  justify-content:flex-end;backdrop-filter:blur(2px)
}
.plantao-details-overlay.open{display:flex}
.plantao-details-drawer{
  width:min(430px,100%);height:100%;background:var(--bg2);border-left:1px solid var(--border2);
  display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(0,0,0,.3);
  animation:plantaoDrawerIn .2s ease
}
@keyframes plantaoDrawerIn{from{opacity:.6;transform:translateX(24px)}to{opacity:1;transform:none}}
.plantao-details-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 22px 17px;border-bottom:1px solid var(--border);flex-shrink:0
}
.plantao-details-header h3{font-size:18px;font-weight:650;color:var(--text)}
.plantao-details-header p{font-size:12px;color:var(--text2);margin-top:2px}
.plantao-details-body{padding:18px 22px;overflow-y:auto;flex:1;min-height:0}
.plantao-details-hero{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:18px;border-bottom:1px solid var(--border)
}
.plantao-details-hero>div:first-child{display:flex;flex-direction:column;gap:2px}
.plantao-details-date{font:600 17px var(--mono);color:var(--text)}
.plantao-details-hero strong{font-size:12px;color:var(--text2)}
.plantao-details-tags{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.plantao-details-section{padding:17px 0;border-bottom:1px solid var(--border)}
.plantao-details-section h4{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text3);margin-bottom:10px
}
.plantao-details-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plantao-details-section-head h4{margin-bottom:10px}
.plantao-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plantao-details-grid>div,.plantao-details-meta>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.plantao-details-grid span,.plantao-details-meta span{font-size:11px;color:var(--text3)}
.plantao-details-grid strong,.plantao-details-meta strong{
  font-size:13px;color:var(--text);font-weight:600;overflow-wrap:anywhere
}
.plantao-details-money{color:var(--green)!important}
.plantao-details-notes{
  font-size:13px;line-height:1.55;color:var(--text2);white-space:pre-wrap;overflow-wrap:anywhere
}
.plantao-sync-panel{
  display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg3)
}
.plantao-sync-panel .plantao-sync-dot{margin-top:5px;box-shadow:none}
.plantao-sync-panel>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.plantao-sync-panel strong{font-size:12px;color:var(--text)}
.plantao-sync-panel small{font-size:11px;color:var(--text3);overflow-wrap:anywhere}
.plantao-sync-panel.error{border-color:rgba(242,95,92,.3);background:var(--red-bg)}
.plantao-sync-panel.pending,.plantao-sync-panel.offline{border-color:var(--amber-border);background:var(--amber-bg)}
.plantao-sync-panel.saving{border-color:var(--accent-border);background:var(--accent-bg)}
.plantao-sync-panel.synced{border-color:var(--green-border);background:var(--green-bg)}
.plantao-details-meta{border-bottom:0}
.plantao-details-meta>div{flex-direction:row;justify-content:space-between;gap:16px;margin-top:7px}
.plantao-details-meta strong{text-align:right;font-family:var(--mono);font-size:11px}
.plantao-details-actions{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:14px 18px;
  border-top:1px solid var(--border);background:var(--bg2);flex-shrink:0
}
.plantao-details-actions .btn{justify-content:center;min-width:0;padding-left:8px;padding-right:8px}
.plantao-details-delete{color:var(--red)!important}

@media(max-width:768px){
  .plantao-details-overlay{align-items:flex-end}
  .plantao-details-drawer{
    width:100%;height:auto;max-height:92dvh;border-left:0;border-top:1px solid var(--border2);
    border-radius:18px 18px 0 0;animation:plantaoSheetIn .2s ease
  }
  @keyframes plantaoSheetIn{from{opacity:.6;transform:translateY(24px)}to{opacity:1;transform:none}}
  .plantao-details-header{padding:18px 16px 14px}
  .plantao-details-body{padding:14px 16px}
  .plantao-details-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))
  }
  .plantao-details-actions .btn{min-height:42px}
}
@media(max-width:430px){
  .plantao-details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plantao-details-hero{align-items:flex-start}
}