/* v298 · Marcos discretos y controles de empresa con una jerarquía común. */
html{--oc-radius-panel:6px;--oc-radius-card:6px;--oc-radius-control:6px}

/* Los marcos comparten el redondeo de la demostración. Se conservan los
   colores de estados, totales y acciones, así como la pastilla de XI. */
html body :is(.panel,.toolbar,.tools-hub,.tools-card,.owner-card,.owner-hero,
  .owner-tools-card,.manager-hub,.boot-recovery-card,.performance-panel,
  .payroll-overview,.employee-list-panel,.subscription-plan,.subscription-dialog,
  .dialog-card,.report-preview-panel,.once-panel,.onc-mail-shell,
  .employee-floating-open,.employee-mail-dialog,.auth-card){
  border-radius:var(--oc-radius-panel)!important;
}
html body :is(.stat,.paybox,.emp,.payroll-total-card,.performance-metric,
  .reminder-form,.reminder-item,.note-composer,.private-note,.notes-empty,
  .support-ticket-card,.support-user-ticket,.support-ticket-response,
  .attendance-day-roster,.attendance-roster-row,.shift-item,.shift-form,
  .company-dialog-scroll,.toolbar-menu-panel,.manager-credential-result,
  .onceplus-benefit,.onceplus-welcome-offer,.employee-mail-context,
  .tablewrap,.notification-item,.owner-account-card,.onc-mail-row,
  .employee-quick-summary,.company-status-summary,.cycle-range-card,
  .cycle-custom,.company-admin-consent,.liquidation-estimate,.once-local-draft){
  border-radius:var(--oc-radius-card)!important;
}
html body .ocp-company-summary :is(.stat,.company-status-summary),
html body .ocp-company-summary .dashboard-kpis>.stat,
html body .ocp-payroll-close :is(.payroll-calculation-group,.paybox,
  .payroll-total-card,.payroll-half-net,.payroll-total-breakdown>span),
html body .ocp-payroll-close .payroll-total-grid .payroll-total-card,
html body #oncInternalMail :is(.onc-mail-shell,.onc-mail-row),
html[data-theme=dark] body #oncInternalMail :is(.onc-mail-shell,.onc-mail-row),
html body #employeeMailDialog .employee-mail-dialog{
  border-radius:var(--oc-radius-card)!important;
}
html body :is(.panel,.toolbar,.tools-card,.owner-card,.performance-panel,
  .dialog-card,.onc-mail-shell,.tablewrap){border-width:1px!important;border-style:solid!important}
html body :is(.panel,.toolbar,.tools-card,.owner-card){box-shadow:0 3px 12px #17384b08!important}
html[data-theme=dark] body :is(.panel,.toolbar,.tools-card,.owner-card){box-shadow:none!important}

/* La portada ya usa esta escala; su contenido y efectos se mantienen. */
html body #welcomeScreen :is(.wc-product,.wc-product-window,.wc-demo,
  .wc-feature-card,.wc-plan-card,.wc-plan-benefits,.wc-steps article,
  .wc-benefit-grid article){border-radius:var(--oc-radius-panel)!important}

html body #app>.toolbar{
  display:flex!important;flex-direction:column!important;gap:12px!important;
  padding:16px!important;border-color:#bdd4e3!important;
  background:#fff!important;background-image:none!important;
}
html body #app>.toolbar .company-tools{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;gap:12px 24px!important;padding:0!important;
  margin:0!important;width:100%!important;border:0!important;
}
html body #app>.toolbar .company-picker{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto;align-items:center!important;
  gap:6px 12px!important;width:auto!important;min-width:0!important;
}
html body #app>.toolbar .company-picker .toolbar-caption{
  grid-column:1;grid-row:1;margin:0!important;padding:0!important;
  color:#365769;font-size:12px!important;font-weight:750;line-height:20px;
}
html body #app>.toolbar .company-picker .rolebadge{
  grid-column:2;grid-row:1;justify-self:end;font-size:11px!important;
  line-height:18px;padding:2px 8px!important;white-space:normal!important;
}
html body #app>.toolbar #companySelect{
  grid-column:1/-1;grid-row:2;width:100%!important;max-width:100%!important;
  height:44px!important;min-height:44px!important;margin:0!important;
  padding:9px 36px 9px 12px!important;box-sizing:border-box!important;
  font-size:14px!important;line-height:1.4!important;border-color:#b9d0e0!important;
}
html body #app>.toolbar .company-selected-name{
  display:none!important;grid-column:1/-1;grid-row:3;margin:0!important;
  padding:0 1px;font-size:12px!important;line-height:1.5!important;
  font-weight:500;overflow-wrap:anywhere;color:#426778;
}
html body #app>.toolbar .company-picker.company-name-overflow .company-selected-name:not(.hidden){display:block!important}
html body #app>.toolbar .company-actions{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  justify-content:flex-end!important;gap:8px!important;width:auto!important;
  max-width:560px!important;margin:28px 0 0!important;padding:0!important;
}
html body #app>.toolbar .company-actions>button,
html body #app>.toolbar .company-actions>.toolbar-menu{
  width:auto!important;flex:0 1 auto!important;min-width:0!important;
  margin:0!important;grid-column:auto!important;
}
html body #app>.toolbar :is(button,.filebtn,.toolbar-menu>summary){
  min-height:42px!important;padding:9px 12px!important;margin:0!important;
  font-size:13px!important;line-height:1.4!important;font-weight:700!important;
  border-radius:var(--oc-radius-control)!important;
}
html body #app>.toolbar .toolbar-menu>summary{min-width:0!important;gap:10px}
html body #app>.toolbar .work-tools{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  gap:9px!important;width:100%!important;margin:0!important;
  padding:12px 0 0!important;border-top:1px solid #d5e3ec!important;
}
html body #app>.toolbar .work-tools .month-picker{
  order:0;display:grid!important;grid-template-columns:auto 32px minmax(0,1fr) 32px!important;
  grid-template-rows:1fr!important;gap:5px!important;align-items:center;
  flex:0 1 342px!important;width:342px!important;max-width:100%!important;
  min-width:0!important;padding:0!important;margin:0!important;
  border:0!important;background:transparent!important;overflow:visible!important;
}
html body #app>.toolbar .month-picker label{grid-column:1;grid-row:1;font-size:12px!important;margin-right:3px}
html body #app>.toolbar .month-picker .month-step{
  width:32px!important;min-width:32px!important;max-width:32px!important;
  padding:4px!important;grid-row:1;font-size:22px!important;
}
html body #app>.toolbar .month-picker [data-month-step="-1"]{grid-column:2}
html body #app>.toolbar .month-picker [data-month-step="1"]{grid-column:4}
html body #app>.toolbar .month-picker #month{
  grid-column:3;grid-row:1;width:100%!important;max-width:100%!important;
  min-width:0!important;min-height:42px!important;height:42px!important;
  box-sizing:border-box!important;padding:6px 8px!important;font-size:14px!important;
}
html body #app>.toolbar .work-tools .primary-actions{order:1;display:flex!important;flex:0 1 auto;margin-left:auto!important}
html body #app>.toolbar .work-tools .data-actions{order:2;display:flex!important;gap:8px!important;flex:0 1 auto;margin:0!important}
html body #app>.toolbar .hidden{display:none!important}

html[data-theme=dark] body #app>.toolbar{background:#111c23!important;border-color:#3c5969!important}
html[data-theme=dark] body #app>.toolbar .work-tools{border-top-color:#3c5969!important}
html[data-theme=dark] body #app>.toolbar .toolbar-caption,
html[data-theme=dark] body #app>.toolbar .company-selected-name{color:#c8deeb!important}
html[data-theme=dark] body #app>.toolbar #companySelect{border-color:#56788a!important}

/* Respuesta uniforme para los controles, sin modificar el espacio que ocupan. */
html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]){
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]):not(:disabled):not([aria-disabled=true]):hover{
    transform:translateY(-2px)!important;box-shadow:0 4px 10px #0b54711c!important;
  }
  html[data-theme=dark] body :is(button,.filebtn,.toolbar-menu>summary,[role=button]):not(:disabled):not([aria-disabled=true]):hover{
    box-shadow:0 4px 10px #0006!important;
  }
  html[data-theme] body .floating-support-tools :is(#onceLauncher,#internalMailButton,#supportTicketLauncher):hover{transform:translateY(-2px)!important}
  html body .floating-support-tools #onceLauncher:hover,
  html[data-theme=dark] body .floating-support-tools #onceLauncher:hover{box-shadow:none!important;filter:none!important}
  html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]):not(:disabled):not([aria-disabled=true]):active{
    transform:translateY(0)!important;box-shadow:none!important;
  }
  html[data-theme] body .floating-support-tools :is(#onceLauncher,#internalMailButton,#supportTicketLauncher):active{transform:translateY(0)!important}
}
@media(hover:none) and (prefers-reduced-motion:no-preference){
  html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]):not(:disabled):not([aria-disabled=true]):active{
    transform:scale(.985)!important;
  }
  html[data-theme] body .floating-support-tools :is(#onceLauncher,#internalMailButton,#supportTicketLauncher):active{transform:scale(.985)!important}
}
@media(prefers-reduced-motion:reduce){
  html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]){transition:none!important}
  html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]):hover,
  html body :is(button,.filebtn,.toolbar-menu>summary,[role=button]):active{transform:none!important}
  html[data-theme] body .floating-support-tools :is(#onceLauncher,#internalMailButton,#supportTicketLauncher):is(:hover,:active){transform:none!important}
}

@media(min-width:681px){
  html body #app>.toolbar .data-actions .toolbar-menu-panel{left:auto!important;right:0!important}
}
@media(max-width:1100px){
  html body #app>.toolbar .company-tools{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  html body #app>.toolbar .company-actions{max-width:100%!important;width:100%!important;justify-content:flex-start!important;margin:0!important}
  html body #app>.toolbar .company-actions>button,
  html body #app>.toolbar .company-actions>.toolbar-menu{flex:1 1 150px!important}
  html body #app>.toolbar .company-actions>.toolbar-menu>summary{width:100%!important;justify-content:center}
}
@media(max-width:600px){
  html body #app>.toolbar{padding:12px!important;gap:10px!important}
  html body #app>.toolbar .company-tools{gap:9px!important}
  html body #app>.toolbar .company-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  html body #app>.toolbar .company-actions>*{width:100%!important;max-width:100%!important}
  html body #app>.toolbar .company-actions>.admin-menu{grid-column:1/-1!important}
  html body #app>.toolbar #companySelect{font-size:16px!important}
  html body #app>.toolbar .company-picker .rolebadge{max-width:190px!important;text-align:right}
  html body #app>.toolbar .work-tools{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;padding-top:10px!important;
  }
  html body #app>.toolbar .work-tools .month-picker{grid-column:1/-1;grid-row:1;width:100%!important}
  html body #app>.toolbar .work-tools .primary-actions{grid-column:1;grid-row:2;margin:0!important;display:block!important}
  html body #app>.toolbar .work-tools .data-actions{grid-column:2/-1;grid-row:2;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body #app>.toolbar .primary-actions>.filebtn,
  html body #app>.toolbar .data-actions>.toolbar-menu,
  html body #app>.toolbar .data-actions>.toolbar-menu>summary{width:100%!important;justify-content:center;box-sizing:border-box}
  html body #app>.toolbar .month-picker #month{font-size:16px!important}
  html body #app>.toolbar :is(button,.filebtn,.toolbar-menu>summary){font-size:12px!important;padding:8px!important;min-height:44px!important}
}