/* v299 · Acciones de salida y límites de pantalla.
   Las declaraciones importantes de esta capa prevalecen sobre los antiguos
   colores importantes sin capa, independientemente de su especificidad. */
@layer ocp-interface-safety {
  :root {
    --ocp-exit-bg:#ffb8c5;
    --ocp-exit-hover:#ffa4b5;
    --ocp-exit-active:#ff91a6;
    --ocp-exit-ink:#641b2b;
    --ocp-exit-border:#e7778e;
  }
  html body .ocp-dismiss {
    background:var(--ocp-exit-bg)!important;
    background-image:none!important;
    color:var(--ocp-exit-ink)!important;
    -webkit-text-fill-color:var(--ocp-exit-ink)!important;
    border:1px solid var(--ocp-exit-border)!important;
    box-shadow:none!important;filter:none!important;
    opacity:1!important;font-weight:700!important;
  }
  html body .ocp-dismiss :is(span,strong,small,b,i,svg,path) {
    color:var(--ocp-exit-ink)!important;
    -webkit-text-fill-color:var(--ocp-exit-ink)!important;
    opacity:1!important;
  }
  html body .ocp-dismiss svg {stroke:currentColor!important}
  html body .ocp-dismiss:hover:not(:disabled) {background:var(--ocp-exit-hover)!important}
  html body .ocp-dismiss:active:not(:disabled) {background:var(--ocp-exit-active)!important}
  html body .ocp-dismiss:focus-visible {outline:3px solid #e55d79!important;outline-offset:3px!important}
  html body .ocp-dismiss:disabled {background:#ffd4dd!important;color:#6a3541!important;-webkit-text-fill-color:#6a3541!important;cursor:not-allowed!important}

  /* La ficha desplaza solamente su contenido vertical; el marco queda fijo. */
  html:has(body.employee-details-open) {
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  html body.employee-details-open {
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  html body #employeeDetailPanel.employee-floating-open {
    overflow:hidden!important;box-sizing:border-box!important;
    min-inline-size:0!important;overscroll-behavior-x:none!important;
  }
  html body #employeeDetailPanel.employee-floating-open>.employee-panel-scroll {
    box-sizing:border-box!important;min-inline-size:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior-x:none!important;overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  @media(max-width:900px) {
    html,html body {min-inline-size:0!important;max-inline-size:100%!important;overflow-x:clip!important}
    html body #employeeDetailPanel.employee-floating-open {
      position:fixed!important;
      inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
      width:auto!important;height:auto!important;
      max-width:none!important;max-height:none!important;
      transform:none!important;translate:none!important;
      margin:0!important;padding:0!important;
    }
    html body #employeeDetailPanel.employee-floating-open>.employee-panel-scroll {
      inset:5px!important;width:auto!important;max-width:none!important;
      scrollbar-gutter:auto!important;
      padding:0 12px 14px!important;
    }
    html body #employeeDetailPanel.employee-floating-open .employee-floating-heading {
      width:auto!important;max-width:none!important;
      margin:0 -12px 14px!important;padding:12px!important;
      display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;
      align-items:start!important;gap:10px!important;
      border-radius:var(--oc-radius-panel,6px) var(--oc-radius-panel,6px) 0 0!important;
    }
    html body .employee-floating-identity {min-width:0!important;max-width:100%!important;grid-column:1!important;grid-row:1!important}
    html body .employee-floating-identity :is(strong,span,small) {white-space:normal!important;overflow-wrap:anywhere!important;max-width:100%!important}
    html body #closeEmployeeDetails {grid-column:2!important;grid-row:1!important;justify-self:end!important;width:44px!important;height:44px!important;min-width:44px!important;margin:0!important}
    html body #employeeRecordControls {
      grid-column:1/-1!important;grid-row:2!important;
      display:grid!important;grid-template-columns:minmax(0,1fr)!important;
      gap:8px!important;width:100%!important;min-width:0!important;
    }
    html body #employeeRecordControls :is(button,select,label,.field,.employee-period-control) {min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
    html body :is(#app,.dialog-card,.employee-panel-scroll,.onc-mail-shell,.once-panel) :is(.formgrid,.field,.row,.dialog-actions,.employee-actions,.employee-mail-actions,.shift-form,.reminder-form,.toolbar-menu-panel,.onc-mail-content,.onc-mail-sidebar) {
      min-inline-size:0!important;max-inline-size:100%!important;box-sizing:border-box!important;
    }
    html body :is(#app,.dialog-card,.employee-panel-scroll,.onc-mail-shell,.once-panel) :is(button,.filebtn,select,input,textarea) {
      box-sizing:border-box!important;min-inline-size:0!important;max-inline-size:100%!important;
    }
    html body :is(#app,.dialog-card,.employee-panel-scroll,.onc-mail-shell,.once-panel) :is(button,.filebtn) {
      white-space:normal!important;overflow-wrap:anywhere!important;
    }
    html body :is(#app,.dialog-card,.employee-panel-scroll,.onc-mail-shell,.once-panel) :is(select,input:not([type=checkbox]):not([type=radio]),textarea) {
      font-size:16px!important;
    }
    html body input:is([type=date],[type=time],[type=month]) {
      width:100%!important;min-width:0!important;max-width:100%!important;
      min-inline-size:0!important;box-sizing:border-box!important;
      -webkit-min-logical-width:0!important;
    }
    html body input::-webkit-date-and-time-value {min-height:1.3em;text-align:start}
    html body #employeeDetailPanel :is(.formgrid,.paygrid,.row,.attendance-roster-fields,.performance-mobile-layout) > * {min-width:0!important;max-width:100%!important}
    html body #employeeDetailPanel .tablewrap {width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important}
    html body #employeeDetailPanel :is(.employee-actions,.dialog-actions,.loss-entry,.loss-actions,.attendance-actions) {flex-wrap:wrap!important;gap:8px!important}
    html body #employeeDetailPanel .employee-actions>button {flex:1 1 140px!important}
    html body .dialog-backdrop {box-sizing:border-box!important;max-width:100%!important;overflow-x:hidden!important}
    html body .dialog-backdrop>.dialog-card {box-sizing:border-box!important;min-width:0!important;max-width:100%!important}
    html body .onc-mail-heading {
      display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
      gap:10px!important;align-items:start!important;
    }
    html body .onc-mail-heading>div {min-width:0!important}
    html body .onc-mail-shell .onc-mail-close {
      min-inline-size:76px!important;width:auto!important;
      white-space:nowrap!important;overflow-wrap:normal!important;
      justify-content:center!important;gap:6px!important;
    }
  }
}